背景
Next.jsの勉強のため、AIと会話してアプリを作ってみました。
先日、OpenHandsを試そうと思って、ブログを構築しており、 そのブログのOGPをClaudeに作ってもらったらかなり良い感じのデザインで作ってもらえました。 ただ、出力がSVGだったので、PNGに変換する必要がありました。
そこで、SVGデータをPNGデータに変換するツールを作成しました。
プロンプト
英語で作成したプロンプトの方が、日本語よりも反応が良いこともあるので、 ChatGPTでプロンプトを作ってもらって、それを英語に翻訳してもらったものをClaudeに投げるということも試してます。 まだまだ試行錯誤中です。
今回はNext.jsが初めてだったこともあり 少しずつ調整を進めたかったので、その過程をふまずに かなりシンプルにしました
make a web app:
SVG to PNG
Use Next.js
立ち上げや設定内容、ディレクトリ構成なども含めて、手順をAIに出力してもらいました。 デザインもtailwindcssを使って欲しいというだけで整えてくれるのがすごいところです。
起きた問題としては、インストールしたTailwindcssと設定ファイルの内容にバージョンの違いがあったため、 エラーが出てしまいましたが、AIに聞いても解決しないということがありました。
設定ファイルやうまくいかなかった箇所などは、なるべく公式サイトのドキュメントを読みながら進めると良いです。 AIでエラーを解決しようとすると、自分で調べるよりも時間がかかってしまうことがあります。
元々が工数削減のためにAIを活用しているので本末転倒だなと感じました。
- 最新のv4をインストールしたが、設定ファイルなどはv3のものになっていたことが原因
- アップグレードガイドを参照して手動で直すと良い
- 今回は、修正の手間を減らすために、v3にダウングレードした
ディレクトリ構成など
デプロイにあたって、解析ツール（GoogleAnalytics）と広告（忍者AdMax）を設定しました。 ディレクトリ構成は以下のようになっています。
├── app/
│ ├── components/
│ │ └── GoogleAnalytics.jsx
│ ├── globals.css
│ ├── layout.js
│ └── page.js
├── public/
│ └── ads.txt
├── eslint.config.mjs
├── jsconfig.json
├── next.config.mjs
├── package.json
├── postcss.config.mjs
├── README.md
├── tailwind.config.js
課題
デザイン
ペライチのアプリであれば、デザインの調整はいらないくらいには整っていました。 ページ数を増やしていくと、少しずつ整合性が崩れていくため、注意が必要です。
コードの質
また、最初は１ファイルに処理を全て書くような傾向があります。 リファクタリングするように会話を重ねていくことで、コードの可読性と再利用性を高める必要があります。
テストコード
テストコードは一個目を自分で書いて、 要件をある程度絞ってから量産してもらう方が精度が良いです。 nuxtであれば、jestを使うのかVitestを使うのかで書き方が変わってきます。 余計な依存関係を作ってしまったり、実際に実行できないコードを生成してしまうこともありました。
さいごに
簡単なツールであれば、誰でも簡単に実装することができるようになってきました。 AIを使って、デザインやコードを生成することができるので、 いろんな方が自分のアイデアを素早く形にしていく時代になって行きます。 皆さんも、いろいろお試し下さい！
今回の記事で作成したアプリは以下のリンクからアクセスできます。
SVG から PNG 変換ツール