今回は生成AIであるClaudeを使ってなるはやでNextjsをキャッチアップする方法を紹介する。
俺の本業はインフラやSREになるので、ReactやNextjsの知識が必要な訳ではなく「あったほうがいい」。
今の仕事で扱っているプロダクトがNextjsを採用してるし、スキルの多角化を目指す上でも身につけておきたいと思っていた。
そこでみんな大好き生成AIの出番というわけだ。
Claudeを使ってなるはやで重要な箇所だけキャッチアップして、あとは実務で経験を積んでいこうという作戦。
ちなみにClaudeを採用した理由は、対話とコードが分けて出力されるためコピペが楽だから。
Claudeではないといけない理由はないので、好みに合わせてお好きな生成AIを採用しても全く問題ない。
鶏が先か卵が先か。
早速Claudeを使ってWebサイトでも作ってみよう。
と言いたいところだが、基本的なことがわかっていないと、機能拡張も保守もできない。
Claudeを使えば未経験でもサクッとWebサイトが作れると主張する人もいるが、サイトの見栄えだけできても仕組みがわかっていない状態では、絵に描いた餅ならぬ画面に貼っつけたwebサイトだ（？）。
Claudeに作らせると言えど、プロンプトを作成するために最低限のフロントエンドの知識が必要となる。
実際の学習体験
というわけで、学習ステップは2つ。
まずは、公式チュートリアルを使って基本を学ぶ。
公式チュートリアルは、必要な内容が簡潔にまとまっており初学者の学習に最良だ。
当然ハンズオンもあるわけだが、コードもコピペができるようになっておりコードを写経する無駄な時間が省ける。
また、公式チュートリアルは、開発元が作成しているため信頼できる。
開発元は言語なりフレームワークなりを広めたいはずだから、チュートリアルの作成をサボるということはまずない。
それゆえ、質の高いチュートリアルが用意されているはずだ。
このステップでのClaudeの使い方は、いわゆる先生・メンターのように使う。
わからないことを質問するのはもちろん、エラーが出て進まなくなった時に解決するのに活用する。
気になったことはもっと突っ込んで聞いてもいいし、わからないことは納得がいくまで質問攻めしてもいい。
ここで、コンポーネントの概念や、SPA/SSRなどの基本要素を習得する。
次に、実際にWebサイトを作ってみる。
今度はチュートリアルの知識を使って、自分でWebサイトを作ってみる。
コーポレートサイトやタスク管理ツールなど、自分で作ってみたいものを具現化することに挑戦する。
俺の場合は、架空のコーポレートサイトを作成することにした。
このステップでのClaudeの使い方は、コード生成に使う。
叩き台から機能追加まで全てClaudeに作成させて、自分はコードのチェックを行うのとプロンプトで指示を出すのを繰り返す。
というのが理想なのだが、残念ながらそこまで素直に進めることはできなかった。
叩き台作成〜簡単な機能追加まではプロンプトで対応できていたが、より実践的な機能追加やトラブルシューティングでは正直期待していた対応はできず、結局自分で調べて解決することが多かった。
おそらくClaudeはプロジェクト全体を俯瞰してコードを考えることがまだ苦手だと思う。
例えばdb接続などは色んな箇所で利用するので、関数化しておくことが普通なのだが、Claudeはそれをせず都度接続を書く箇所に埋め込んでしまう。
また、トラブルシューティングも問題の本質を捉えることよりも、エラーハンドリングやログ出力だけをし続けるので、いくら対話を続けても解決しない。
正直、Step2の後半に監視は、Claudeはないよりかはマシぐらいの立ち位置になっていた。
驚異的な学習効率
というわけで、この2ステップでNextjsについてある程度の知識を得られはずだ。
最終的な成果物は、下記のとおりだ。
https://corprate-site-three.vercel.app
いわゆるコーポレートサイトになる。
ニュースの表示がSSRになっており、データの取得と表示を動的に行う。
デプロイ先はVercelで、DBはMongoDB Atlasを使っている。
学習期間に関しては、おおよそ6月中旬〜9月上旬になる。
火〜金の朝1時間を充てていたので、大体週あたり4時間、それが12週なのでざっくり50時間。
Step1には30時間・Step2には25時間程度かかった。
技術的なことあるあるだと思うけど、最初の最初がマジでわからないことばかりで進めるのが難しい。
少しずつわかってくると進めやすくなるんだけど、そこに到達するまでガッと気合いでやるのが案外大事。
というわけで、今回はClaudeを活用して超速でNextjsをキャッチアップした話を紹介した。
これからNextjsの学習を始めようという人はぜひ参考にしてほしい。
