このレッスンでやること
公開前のチェックとして、このアプリケーションのパフォーマンス最適化をClaude Codeのスキルを使って行っていきます。今回は公式から提供されている vercel-react-best-practices を使ってNext.jsのベストプラクティスに合わせたリファクタリングを行います。
skills.shからスキルを見つける
今回は skills.sh というサービスを使います。ブラウザで「skills.sh」と検索し、一覧の中から vercel-react-best-practices を選びます。
「React」と記載されていますが、Next.jsはReactベースで書かれているので、そのベストプラクティスに則ってコードを修正してくれます。このスキルは例えば以下のようなチェックを行います。
- クライアントコンポーネントとサーバーコンポーネントが適切に使い分けられているか
- サーバーコンポーネントが積極的に使われているか
- データフェッチにボトルネックがないか（N+1や直列処理）
スキルのインストール手順
ページに表示されたコマンドをコピーし、新しいターミナルで貼り付けて実行します。
- クライアントは Claude Code を選択（そのまま Enter）
- Scope: プロジェクトだけで使うなら
Project、何回も使うならGlobal - Symlink を有効にしておくとアップデートが楽になる
スキルは外部から読み込むため、信頼できる提供元からインストールしましょう。skills.shはNext.jsの開発元であるVercel社が提供しているサービスなので、信頼して使えます（特に上位ランクされているスキルは安心）。
find-skillsも一緒に入れておく
もうひとつ便利なのが find-skills というスキルです。「スキルを探すためのスキル」で、「データパフォーマンスを最適化するためのスキルを探してください」のように依頼すると、スキルを提案してそのままインストールもしてくれます。同じ手順でインストールできるので、同時に入れておくことをおすすめします。
スキルの実行
インストールが完了したら、Claude Codeを再起動して /vercel-react-best-practices を実行します。スラッシュコマンドの一覧に出てこない場合は、Claude Codeを一度終了して起動し直してください。
調査結果の読み方
2つのエージェントが並列で調査し、投資対効果トップ5件を提示してくれます。この5つを修正するだけでパフォーマンスは約80%改善します。例えば以下のような指摘が出てきます。
- レッスン詳細ページ: 47段の直列処理とN+1問題
- ダッシュボード: ラウンドトリップやウォーターフォールの発生
- 動的インポート: 初期表示に不要なコードがバンドルに含まれている
わからない用語はその場で質問
「ラウンドトリップ」「ウォーターフォール」「動的インポート」など、聴き慣れない用語が出てきたら、その場でClaude Codeに質問しましょう。「これについて詳しく教えてください、勉強したいので」と伝えれば丁寧に解説してくれます。
今後、AIをうまく使えるエンジニアとは、わからないところをその都度AIに聞いて理解し、次に同じことを起こさない人だと言えるでしょう。例えば N+1問題 はデータベースへの問い合わせが爆発的に増える原因になり、無料枠をすぐに使い切ってしまうようなコストリスクにもつながります。
/btwで並行して学ぶ
Claude Codeを動かしている間に、/btw を使うと別タスクとして質問を投げることができます。例えば、/btw ラウンドトリップとはどういう意味でしょう と質問しておいて、本体のタスクはそのまま進めさせることができます。質問を終えるときは Esc でOKです。学習のためにとても便利なものなので、ぜひ使ってみてください。
修正後の確認
修正が完了したら、レッスン詳細ページや管理ダッシュボードページの表示速度が体感できるほどに速くなっているはずです。公開前のルーチンとして、一度このスキルを実行してからデプロイすることをおすすめします。
次のステップ
続いてはセキュリティチェックを行っていきます。