2025年4月にアイレットに入社しました第一開発事業部の中吉です！
新卒エンジニアとしてキャリアをスタートして約一年、私は実務を通じて、Vue.jsとReactという、フロントエンドのUI構築を行う上で人気のライブラリやフレームワークを使用していくつかのWebアプリケーションの構築を行いました。
実務の中では、効率的な開発やエラーの解消のためにAIを活用することがあります。しかし、単に提示されたコードを動かすだけでなく、「なぜこのフレームワークではこの書き方が正解なのか？」をAIと議論し、デバッグを繰り返す中で、両者の設計思想の違いを理解することができました。
はじめに：Vue.jsとReact、それぞれの特徴
本題に入る前に、私が触れた2つのフレームワークについて簡単に紹介します。
- Vue.js： 「プログレッシブフレームワーク」と呼ばれ、直感的なテンプレート構文が特徴です。HTML・CSS・JavaScriptの役割が明確に分かれており、学習コストが比較的低い言われています。
- React： 「UIを構築するためのJavaScriptライブラリ」であり、すべてをコンポーネント（部品）として扱います。JSXというJavaScriptの中でHTMLのように書く手法を使い、非常に高い柔軟性と拡張性を持っています。
Vue.js：フレームワークの規約による開発効率の向上
Vue.js（Vue 3 / Composition API）は「開発のルールが明快なフレームワーク」でした。ユーザーのアクションを即座にUIへ反映させる必要があるアプリケーションの実装を通じて感じたのは、記述場所が明確に決まっていることの強みです。
Vueの特徴である「単一ファイルコンポーネント（SFC）」により、ロジック、見た目、スタイルがひとつのファイルに集約されます。これにより、コードの修正を行う際も、作業の対象が明確でした。
- ピンポイントな修正： AIに「テンプレート部分の入力フォームを直して」「スクリプト部分のバリデーションを修正して」というように、物理的な場所を指定して指示が出せるため、意図しない場所が書き換わるリスクが少ないと感じました。
- v-modelのデータ同期： 入力フォームと変数を同期させる
v-modelは、インタラクティブな操作が多い画面の実装において非常に便利でした。複雑な状態管理を意識せずとも直感的に実装できるため、実装の迷いが少なくなります。
Vueは、あらかじめ定義された構造に従うことで、プロジェクト全体の一貫性を維持しやすいというメリットを実感しました。
React：コンポーネントの組み合わせによる設計の柔軟性
多機能で複雑な構成を持つ大規模なアプリケーションの開発で使用することの多いReact（Next.js）は、Vueとは異なる開発体験がありました。Reactでは、すべてをコンポーネントとして細分化し、ロジックをいかに共通化することが重要だと感じました
自由度の高いReactでは、AIの活用方法も「コードの生成」から「設計に関する確認」へと重きが置かれるようになりました。
- カスタムフックによるロジックと表示の分離： Reactには、コンポーネントから「何をするか（ロジック）」を抜き出して、コンポーネント側には「どう見せるか（表示）」だけを残すカスタムフックという技術があります。カスタムフックを活用することで、ソースコードの量が増えても管理が容易になり、メンテナンス性の高い設計を学ぶことができました。
- デバッグを通じた深い理解： React特有の
useEffectで予期しない動作が発生した際、AIを用いて「どの状態の変化が処理を誘発しているか」を詳細に分析しました。このデバッグ作業を通じて、Reactのライフサイクルを根本から理解できたことは、大きな成長に繋がったと感じています。
Reactは、要件に合わせて最適な構造を自分たちで構築できる柔軟性があり、コンポーネントを組み合わせていく設計の深さを感じました。特にロジックと表示を切り分ける考え方は、コードを綺麗に保つ上で非常に勉強になりました。
まとめ：技術の意図を理解してAIを活用する
VueとReactの実務を通じ、AIを有効活用して開発を効率化するには、まず「自分が作りたい処理や仕様」を正しく理解し、各言語の規約や設計思想に沿って考えることが不可欠だと実感しました。
AIの提案がVueの規約を活かしているか、Reactのコンポーネント設計に則っているかといった視点を持ちつつ、自分が実現したい内容を整理した上でAIと対話するプロセスを繰り返すことで、より納得感のある開発ができるようになるのではないかと思います。これからも、それぞれのフレームワークが持つ設計思想を大切にしながら、AIと共に成長を続けていきたいです。
簡単30秒