開発

最近の当サイトの更新について

小規模なリファクタリングを行いました

半年以上ぶりの投稿。表現欲は落ちていたが、再びコードを書くモードに入る。Chrome拡張・CMS・フロントエンドに新機能を追加し、パフォーマンスを最適化。Remix 2.x→React Router 7へ移行、Magic Linkでのログイン。マップ機能・閲覧制限・サーバーエンドポイント化、GPT-5、Unsplash自動アップロードを実装。CMSはSvelteKit/Server Endpoints化・DB移行。

  1. #ウェブ開発
  2. #フロントエンド最適化
  3. #Remixアップグレード
  4. #マジックリンク
  5. #CMSリファクタリング
  6. #SvelteKit
  7. #AI統合

16

white printer paper on green typewriterwhite printer paper on green typewriter

前回の投稿からすでに半年以上が経ちました。特に理由はなく、ただ表現欲が落ちていただけです。さらに自分のことに忙しくしていて、文章を書く気分になれませんでした。

ただ、私はいったんある状態に入ると、その状態を維持しがちなタイプです。

この期間ずっと運動を続けていれば、強く運動したくなるし、この期間運動していなければ、運動したくなくなる。

今年からAIのエージェントモードを使ってコーディングを補助することを試し始め、先月までの受託案件に追加要件が出たこともあって、しばらくコードを書き続けていました。その結果、コードを書きたいモードに入りました。そこで、オープンソースのChrome拡張に少しコードをコントリビュートしたほか、当サイトのCMSとフロントエンドにも多くの新機能を追加し、古いバグをいくつか修正して、パフォーマンスも最適化しました。

フロントエンド

アップグレード

今ご覧のサイトは、以前はRemixで開発していました。ところが昨年から、Remix 3で導入されるはずだった機能がReact Router 7に統合されたため、Remix 2.xからアップグレードするにはReact Router 7へ移行する必要が出てきました。幸い、Remix自体がReact Routerを基盤としたフレームワークなので、移行は難しくありません。設定を少し変更するだけで、スムーズにアップグレードできました。

ログイン

メール/パスワードでのログインを廃止し、メールのMagic Link方式に変更しました。そもそもログイン機能を作ったのは荒らしコメントを制限するため——未ログインのユーザーのコメントは審査後に表示——だったのですが、後になって気づいたのは、そもそもほとんど誰もコメントしていないということでした……

もうひとつやりたいのは、ログイン後のみ閲覧可能にする機能です。政治的な話題のいくつかの記事は、ログインユーザーのみ閲覧可能にします。あまり意味はないかもしれませんが、検索に引っかかるのを防げます。

マップモード

これも以前から作りたかった機能ですが、複雑すぎて手を付けられずにいました。今回はAIの助けを借りて、なんと一晩で作り上げてしまいました。

一张本站的截图,将摄影作品按照拍摄地点进行展示一张本站的截图,将摄影作品按照拍摄地点进行展示

パフォーマンス最適化

そのほか、オンデマンドでのJSファイルの読み込みや遅延読み込みなど、いくつかパフォーマンス面の最適化も行いました。もともと当サイトは十分速かったので、体感への影響はやや弱めです。

CMS

より大きなリファクタリングはCMS——いわゆる「バックエンド」——にあり、今回は非常に多くの新機能を追加しました。

まず依存関係をアップグレードし、Svelteを5に上げました。このバージョンではSvelteにrune構文が導入されたため、これまでリアクティブデータに使っていた箇所を新しい構文に置き換えました。

独立Workersへの依存を削除

CMSにはエッジで動かす必要のある関数が多く、各種AI機能や、画像をR2にアップロードしてEXIF情報を抽出する処理などがあります。昨年CMSを開発した際は、開発とテストをしやすくするため、これらのロジックを独立したworkersとして別途デプロイしていました。

今回はこれらの関数をCMSプロジェクト内に取り込み、SvelteKitのServer Endpointとして実装しました。デバッグにはかなりの時間を費やしたと言わざるを得ません。

以前はサイトで使用する各種APIキーや設定情報をKVに保存していましたが、そこまで必要性を感じなかったので、これらのデータはデータベースに移しました。

AIモデルのアップグレード

従来のgpt-4oから5にアップグレードしました。gpt-5からは従来のcompletionメソッドが使えなくなり、responseに切り替える必要があります。これも、これらのworker関数をリファクタリングしようと決めた動機のひとつです。

Unsplash自動アップロード

これも当初からやりたかった機能です。いまはエディタ内でブラウズしてクリックするだけで、Unsplashから画像をアップロードできます。

いまブログはほぼ理想の姿になりました。今のところプロジェクトの複雑さはまだ私の掌握と理解の範囲内です。将来、私に引き続き磨き上げる意欲があるかどうか、そしてAIがクソコードの山を生み出すのを避けられるかどうかは、まだ疑問です。

未ログインのコメントは承認後に表示されます。メールアドレスは公開されません。 ログイン