AIプロンプト図鑑を開発するにあたり、今回は思い切ってNext.jsを採用しました。
実際にはClaude Codeに開発を任せる形が中心でしたが、完成したコードを見ているうちに「Reactと似ている部分も多い」ということに気づきました。
今回は、Next.jsに初めて触れて感じたことを書いてみたいと思います。
AIプロンプト図鑑とは？
AIプロンプト図鑑は、AIで使えるプロンプトをカテゴリごとにまとめて閲覧できるWebアプリです。
「こんな指示を出せばこんな結果になる」というプロンプトを探しやすくし、AI初心者から普段AIを活用している人まで使いやすいサービスを目指しています。
開発当初はReactで作ろうかとも考えていましたが、今回は勉強も兼ねてNext.jsで挑戦することにしました。
Reactしか知らない私には少しハードルが高かった
正直なところ、Reactもまだ十分に理解できているとは言えません。
そんな状態でNext.jsを見ると、
- ディレクトリ構成が違う
- App Routerという考え方
- Server ComponentとClient Component
- ファイルベースルーティング
など・・・新しく覚えることが一気に増えました。
Next.jsはReactをベースにしていますが、Reactの知識に加えて独自の仕組みを理解する必要があります。
公式ドキュメントでも、Reactの基礎知識があることを前提に学習することが推奨されています。
最初は「これは無理…」というのが率直な感想でした。
でもReactと共通している部分も多かった
触ってみると、「意外にもReactでみたやつが多い！」という印象でした。
一緒なものの例は
- コンポーネントで画面を分ける考え方
- propsでデータを受け渡す
- stateを使った画面更新
- JSXでUIを書く
など。Reactとほとんど同じです。
Next.jsはReactをベースとしているため、Reactのコンポーネントという考え方をそのまま活かしながら開発できるとのこと。
「全部新しく覚え直す」というよりは、Reactを少しずつ発展させていくような感覚でした。
今はまだAI頼りな部分も多い
今回の開発ではClaude Codeの力をかなり借りました。
- エラーの原因を自力で特定する
- 追加機能を自分でつけてみる
など、まだ経験不足だと感じています。
AIがコードを書いてくれる時代とはいえ、エラーが出たときに「なぜそうなったのか」を理解できないと、修正にも時間がかかります。
そのため、現状はAIに助けてもらいながら少しずつ知識を増やしている段階です。
AIを使うからこそ基礎知識が大切
最近強く感じるのは、「AIがあるから勉強しなくていい」ではなく、「AIを使うからこそ勉強した方が効率が良い」ということです。
Reactを少し勉強していたおかげで、
- コンポーネントの役割
- データの流れ
といった部分は理解しやすくなりました。
逆に基礎知識がない部分は、AIが説明してくれても理解に時間がかかります。
AIは非常に優秀ですが、知識があるほど指示も的確になり、修正もしやすくなると実感しています。
これからも挑戦を続けたい
Next.jsはまだまだ勉強中ですが、今回AIプロンプト図鑑を作ったことで、「触ったことがある」という経験を得られました。
最初は難しく感じたものでも、実際に手を動かしてみると少しずつ理解が深まります。
AIを活用しながら開発できる今だからこそ、新しい技術にも挑戦しやすい時代になったと感じています。
これからもReactだけでなくNext.jsについても学びながら、FANELABのアプリ開発を続けていきたいと思います。