こんにちは、CL事業部の長谷川です。
今回は、10年間PHPとjQueryでWebアプリを書いてきた私が、Reactを始めた話です。
初めに
Reactとは？ 🧐
Webアプリ（Webアプリケーション）を作成するためのライブラリのことです。
JavaScript をベースにしつつ、実際はTypeScript という言語で記載するため、コンパイルが必要になります。
反面、型をしっかり定義する必要があるため、C言語のように事前のエラーチェックができ、バグを生みにくいのが特徴です。
今回の内容は？ ☝️
10年間PHPとjQueryを使い続けた私が、Reactに切り替えた理由、苦労話などをお伝えします。
同じような切り替えの悩みを持った方、
長年エンジニアをやってきて新しい言語を学ぶ方、の参考になれば幸いです。
- CSS も bootstrap から tailwind に切り替えていますが、詳細はまた別のお話で
- バックエンドは別担当が作成するので、今回は割愛します
PHP時代
2010年代前半は人気があった 😊
Webアプリを作成できる言語のPHP、 そしてJavaScriptのライブラリであるjQuery。
どちらもインタープリター言語なので、以下のような特徴があります。
- 高速に開発ができる
- 型の定義が不要
- DOM 操作で直接UIのパーツをいじれる
- アジャイル案件と相性がいい
なので、2010年代中頃までは人気があり、私の周りのWebエンジニアもよく利用していました。
時代は変わった 🕐
しかし、2010年代後半になってくると、
Webアプリ開発の世界では、React や Next.js の名前をよく耳にするようになりました。
2020年代に入ると、脆弱性対策が重要視されるようになり、
エラーを生みやすい非コンパイル言語のPHPやjQueryは下火になってきます。
自分の現場でもReactの流れが 😮
2025年、ついに私のいる現場でもReactを押す流れがでてきました。
現場でのReactの主な推薦理由は以下の通りです。
- フロント側でも脆弱性対応は必要
- 業界のナレッジが多い
とはいえ、10年間もPHPとjQueryでメンテしてきたものを変えるのは大変。
そして、新しい技術に踏み出すのも、覚悟が必要です。
なので、サービスの一部の機能だけを切り離し、まずはそこからReact対応していく ことにしました。
React 始めます
使用する技術 💻
- React SPA （シングルページアプリケーション）
- SPAとは、単一のWebページだけで動作するWebアプリケーションのことです
- 特定のライブラリは不使用 （標準の router, form を使用）
ドキュメントを読んでも、全く分からない 😟
Reactを導入してみたはいいものの、
公式ドキュメントや関連記事を読んでも、まったく頭に入ってきませんでした。
- DOMの直接操作禁止
- 状態管理して Hook で再描画
- React Router でパスを決める
- コンポーネント化！
- etc
これだけでも、jQuery 出身の私にはチンプンカンプンです。。
日本語で30年生きてきた人が、急に英語だけで話さないといけない環境におかれた、ような感覚でした。
生成AIに書かせてみた 🧠
ゼロから書くのは厳しい。
と感じた私は、チームで相談し生成AI（以降AIと表記）の活用に行きつきました。
最近流行りの、コードを書いてくれる GitHub Copilot というものを使用。
Penpot で作ったトップページをサクッとReactで書いてくれました。
- Penpot とは？
- フロントエンドのレイアウトを作るツールです
- UI の操作だけで作れるため、コードを書けなくても使えます
そのまま採用するのはダメ ❌
とはいえ、AIが書いたコードを「そのままサービスに採用！」というのはいけません。
- AIが書いたものでも、当然レビューが必要
- 自分で確認もせず、そのままレビュアーに依頼するのは失礼
- コードが目的に合っているか、拡張性やプロジェクトのお作法に則っているか
この辺りは抑えておくべきです。
特に、レビュアーの立場になって考えると、
「AIが書いたコードはシステム的で読みにくいし、AIで書いた人に指摘しても、よく分からない、と返されたりするな。。」
と納得しました。
AIから学ぶ
AIで書けたとしても、言語の勉強は必要 🎓
この点は開発者の中でも意見が割れました。
ある人は、
🙂「AIで書けるのだから、言語は深く学ばなくて良いのでは？」
この意見には私も当初は賛成でした。
ただ、React経験者の方や、AIを開発で活用されている方の意見では、
🥸「前提知識を持っておかないと、細かいところの制御や指示もできない」
という声もありました。
なので、AIで書きつつも、Reactの勉強を並行して行うことにしました。
コードから学ぶ 📄
開発経験のある方なら、新規言語の習得を、
以下のような実践方法で覚えた方もいらっしゃるかと思います。
- ドキュメントは浅く読む（全て読まず、軽く概念だけ理解）
- 既存のコードを読んで構成を理解（インプット）
- 既存のコードを改修して覚える（アウトプット）
私はこの方法で12年ほどやっています。
ただ、この方法にはいくつか問題点もあります。
- ドキュメントは全部読まないので、重要なポイントを見逃すことがある
- そもそも現場に配属されないと、既存のコードが存在しない
AIとの問答 🗣️
そこでAIを活用しました。
- 既存コードの代わりに、AIが作成したコードを使う
- 分からないコードは都度AIに確認し、ReactやTypeScriptのお作法としてメモを取る
とにかく、分からない部分は確認します。
昔はGoogle検索で記事を探していましたが、
それを 「AIで調べて確認するようになったんだな」 という感覚です。
あえて自分で書く ✍️
コードの確認と追加の改修は自分でやります。
- あえて自分でやることで、先ほどインプットした内容をアウトプットして覚えます
- 改修方針やコードのチェックは、随時AIに確認します
- バッチ的な作業（同じことの繰り返し）は、一度だけ自分でやり、あとはAIで書きます
- 作業効率化のため
現在の成果
概念は理解できてきた
手動で書きつつ、都度不明点を確認したので、
JSXやコンポーネント、HookといったReactの概念を理解することができました。
Reactの記事が分かるようになった
当初は何が書いてあるのか分からなかった技術文章も、
概念を理解し、コードを直接触ることで、
意図を理解して読めるようになりました。
今後の目標
- API と連動した業務ページを作るところまで進める
- Loader, Action, エラー境界などの概念を理解する
- Reactでの初回リリースを終わらせる
- AIでページの作成を自動化してみる
- 関連記事
