AI ツールとの連携
React は AI ツールとの相性がよく、開発するうえで AI と協調して開発する機会もあるかもしれません。そのようなケースのための React フロントエンド開発に関連する背景知識について紹介します。
AI ツールで React が好まれる理由
Web アプリを生成できるサービスでは、多くの場合 React のコードが生成できます1 2。それは一体なぜなのでしょうか。
React がモダンなフロントエンドフレームワークでもっともよく使われているから
次の図は、「使ったことがある」フロントエンドフレームワークで、React を回答した開発者の割合を示しており、80%を越える開発者が使ったことがあると回答3しています。
それだけ React が開発者に普及していることが分かります。
https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/ より引用
大規模言語モデル（LLM）のトレーニングデータとして沢山サンプリング（されているはず）だから
React を使う開発者が多いということは、インターネットに公開される React のコードも多いはずです。
例えば、オープンソースライセンスとともに公開されている学習データセットである The Stack V2 では、学習ソースとなったコードのプログラミング言語別での元データの量が、Java (約480GB) の次に JavaScript (約277GB) と豊富でした4。相対的に他の言語より質のよいコードが含まれる量は多いはずです。
OpenAI や Anthropic といった営利活動をおこなっている組織の LLM がどのようなトレーニングデータを用いているかの詳細は明言されていませんが、インターネットに公開されている情報を用いていることは言及されているので、同様の傾向にあると推測できます5 6。
Tailwind CSS も、AI ツールで好まれます。こちらについては次の利点が挙げられるかもしれません。
- クラス名が不変（例:
text-2xlの意味はあらゆるコードで同じ） - よく使われるユーティリティクラスの組み合わせが学習されている
MCP
MCPは、AI ツールが LLM の学習データのほかに、外部のデータにアクセスする手段を提供したり、外部のツールと連携できるようになる標準規格です。
様々な MCP サーバーが公開されています7 が、ここではフロントエンド開発でのデザイナーとの協働で重要な、デザインツール Figma の MCP である Figma MCP に簡単に触れます。
Figma MCP を使用すると、AI ツールで次のことが可能になります。
- Figma デザインファイルから特定の範囲を参照して、コードを生成でいる
- Figma デザインファイルから特定の範囲を参照して、範囲内で使用されている変数、レイアウト、Figma コンポーネントが抽出できる
- FigJam (ホワイトボード) を参照して、図などを開発に使用できる
- ...
AI ツールとどのように付き合えばいいのか
なにができるのか
- 自然言語による指示（プロンプト）に基づいて、コード、画像、音声、動画などマルチモーダル（様々な種類のデータを扱える）に生成できる
- 人間よりはるかに短時間でたくさんの試行錯誤ができる
なにができないのか
- 品質の保証: 生成されるデータそのものは指示者による評価が必要
- 意味の理解: 「もっともらしい」反応の結果として指示に対応しているに過ぎない
傾向に基づいたおすすめの使い方
- ログやメッセージの読解: データから特徴を抽出して解説することが得意なので、トラブルシューティングで活用するとよい
- 型検査、静的コード解析、ユニットテストによる品質担保: AI ツールと協調して機械的な検査の仕組みを導入することにより、検査と生成の試行錯誤のサイクルを回せるようになる
- プロトタイプの生成: 「もっともらしい」ものを生成してくれるので、開発初期に生成して最終段階で人間による調整をおこなうのがスムーズ
- 指示は特徴的なキーワードで簡潔に（ただし具体的に）: 「src/components/StopWatch.tsx に」「React と」「Tailwind CSS を使って」「ストップウォッチを」実装してください、など。Where (どこに)、What (何を）、How（どうやって）、場合によっては、Why（なぜ）も添えて指示しましょう