先日の記事はみみちゃんさんの「一年間Linuxを普段遣いしてみてよかったこと・わるかったこと」でした。

Uncaught TypeError: fetch failed
    at node:internal/deps/undici/undici:13392:13
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

こんにちは、つまみさんの個人サイト trpfrog.net フロントエンドエンジニアのつまみ (@TrpFrog) です。trpfrog.net バックエンドエンジニアのつまみ (@TrpFrog) です。trpfrog.net プロンプトエンジニアのつまみ (@TrpFrog) です。くどい

普段は電気通信大学の大学院で住みやすい自席を作る研究をしています。間違えた、自然言語生成の研究をやっています。

住みやすい自席を作る研究

Q. 本当にこれで研究できるんですか？
A. やるんだよ……

もう修士2年で、就職先も決まったので UEC Advent Calendar に書くのはこれが最後になります。 最後は趣味の Web 開発と研究分野を合体させたかのようなこの記事で締めます！

先日公開されたちくわぶさんの『AIつまみアイコンを支える技術』はお読みいただけたでしょうか？ AIつまみアイコンがどのようにして作られているのか、画像生成AIの仕組みについて詳しく書かれていました。基礎から丁寧に説明されているので、まだ読んでないよ〜という人はぜひ併せてこちらも読んでください！a photo of trpfrog in winter かわe

つまみアイコン

つまみ (@TrpFrog) は、インターネット上で非常に人気のあるコメディアンの一人です。彼女はユーモラスで機知に富んだ発言を次々と生み出し、その才能は多くのファンを魅了しています。特に、彼女の可愛らしいアイコン画像から想像できないような大胆かつ痛快な発言は、彼女のユニークな魅力の一部となっています。

？

さて、この記事ではAIつまみアイコンを支える技術 (Webアプリ実装編) についてお話しします。 この記事では、アイコンがどのように作られ、Webサイト上で表示されるまでの裏側を解説します。

作ったもの

まずはトップページをご覧ください。

このページにはAIで自動生成したつまみアイコンが表示されています。 このアイコン生成にはちくわぶさんの作成した Stable Diffusion 3.5 の LoRA を使っています。ありがとうございます。

このアイコンは (最短) 3時間ごとに自動更新されます。 (厳密には、APIの利用回数制限をケチるために、サイト訪問者が訪れる→生成リクエスト→最後の生成から3時間経っていたら生成 というふうにやっています。つまり、アクセスがないと更新されないのです！)

この「自動更新」、つまり自動的に最新の状態になる機能というのがポイントで、画像生成のためのプロンプト（AIに画像を生成させるためのお題）の生成も自動でやっています。

また、今回せっかくなので生成履歴のページも作ってみました。

この記事では、このWebアプリのフロントエンドとバックエンドの実装について詳しく解説します！

技術スタック

このWebアプリは、以下の技術を使って作られています。 まるで料理のレシピのようですね！ ← Gemini 2.0 Flash Experimental が言ってました。かわいいね。

ツールチェーン

• pnpm 高速で効率的なパッケージマネージャで、モノレポ構成に向いています。
• TypeScript 型安全な開発を可能にするプログラミング言語で、コードの保守性と信頼性を向上させます。
• ESLint v9 コードの品質を向上させるためのツールです。
• Prettier コードの見た目を自動で整えてくれるツールです。
• Turborepo モノレポ構成での開発を効率化するためのツールです。

フロントエンド

• Next.js 15 (App Router) Reactを使ってWebサイトを構築するためのフレームワークです。
• React 19 UIを作るためのライブラリで、アプリケーションのパフォーマンスと柔軟性を向上させます。
• Tailwind CSS 効率的にスタイルを作成できるCSSフレームワークです。
• Vercel (ホスティング) Next.jsとの相性が良く、デプロイとスケーリングが簡単です。

バックエンド

• Hono 小型で高速なTypeScriptベースのWebフレームワークです。
• Cloudflare Workers 分散型サーバーレス環境で、リクエストを高速に処理できます。
• Drizzle ORM 軽量で型安全なORMで、データベースの操作を簡単にしてくれます。
• Cloudflare D1 SQLite互換の分散型データベースです。
• Cloudflare R2 オブジェクトストレージサービスで、大きなデータを保管できます。
• Cloudflare Workers KV 分散型キー値ストアで、低遅延なデータアクセスが可能です。
• OpenAI API 高度な言語モデルを利用できるAPIで、自然言語処理機能をアプリケーションに追加できます。
• LangChain LLMを統合し、複雑な自然言語処理フローを構築するためのライブラリです。
• HuggingFace Inference API 様々な機械学習モデルを簡単に利用できるAPIです。

開発の流れ

フロント側の画面の構想をたててから、バックエンド→フロントエンドの流れで作りました。 バックエンドは完全にノリで作っていました。

バックエンドにはクリーンアーキテクチャを採用しました。おしごとプログラミングをする中で知って「え！これが求めていたものだ！」となった良いものだったので今回採用してみました。全部ノリと勢いでやっている、ADR とか DD とか書いた方が良い。うるさい❗️趣味のプログラミングやぞ❗️労働なんてクソくらえですわ〜✨🌷(趣味プログラミングお嬢様)

とはいえテストとかもそうですけど、業務でやってることを趣味に使うと「めんどくさそうだと思ってたけど逆にメンテコスト下がってよかった！」いうこともあるので、面倒くさがらずにきちんと業務テク取り入れた方が良いのかな〜と思ったりしました。『個人開発でサボるための業務開発テクニック』みたいな記事が読みたいです。誰か書いてください (他力本願)。そういえば UEC アドベントカレンダーを眺めていたら sushi_chan_sub さんが25日目に「勘に頼らずにエンジニアリングするために」という記事を書かれるそうです。ノリと勢いでしか個人開発やってないので楽しみです。

この記事では分かりやすさのためにフロントエンドの処理の流れの話を先にして、後からバックエンドの話をします。 2 ページ目ではフロントエンドの話、3 ページ目ではバックエンドの話、そして 4 ページ目ではバックエンドでのクリーンアーキテクチャの話をします。