めちゃくちゃいい取り組みなので、噛み砕いてわかりやすくまとめます！
🎯 フロントエンド刷新の取り組み
🚀 なぜやっているのか
今までの Blade + JavaScript 開発が正直しんどかった。
特に フロントとバックエンドのつなぎ目（動的な値をJavaScriptに渡したり、複雑な動きが必要なところ）で苦労していた。
なので…
• 将来的な拡張性（今後どんどんサービスが大きくなる）
• フロントエンドを整理したい
という目的で フロントエンドライブラリ (React) を導入した。
VueじゃなくてReactなのは、
Vue3に不安があったり、Svelteは情報が少なかったりして、Reactが一番無難だったため。
⚙️ どうやっているのか
いきなり全部React化はせず、
SEOに影響がない場所（ログイン後画面など）から、少しずつ導入。
具体的な戦略としては…
• メインのHTML構造（枠組み）はBladeでそのまま残す
→ SEOや表示速度の観点
• 中の動的部分だけReactコンポーネントにする
→ 具体的には「マイページ配下」
技術的ポイント
Blade → Reactへ値を渡す方法
<div id="profile-edit-form" data-value="{{ json_encode($value) }}"></div>➡️ data-value 属性で渡す。
hidden input などよりシンプルで管理しやすい。
React側でその値を受け取ってレンダリング
const container = document.querySelector('#profile-edit-form') as HTMLElement
const root = createRoot(container)
const {
formUrl,
refusalUrl,
customer,
...
} = JSON.parse(container.dataset.value)
root.render(
<ProfileEditForm
formUrl={formUrl}
refusalUrl={refusalUrl}
...
/>
)✏️ 具体的にやったこと
• app.tsx にReactのエントリーポイントを作成
• Blade側で必要なデータをJSONにして渡す
• Reactコンポーネントはマイページ配下に限定
• webpackの設定変更
• .tsxの読み込み対応
• Vue用とReact用でエントリーポイントを分けた
entry: {
admin: './resources/assets/js/admin.ts', // Vue
app: './resources/assets/js/Front/app.tsx' // React
}• ビルド時間短縮
→ compression系を一時的に外して、開発体験改善
⚠️ 課題
• React化したからといって 開発がめちゃくちゃ楽になった！ という実感は正直まだない。
• CSSのスコープ問題
→ SCSSはコンポーネント単位でimportしてるけど、最終的にまとめて1つのCSSファイルになるため、グローバルで当たってしまう
→ BEMとかFLOCSSとかの設計ちゃんとしないと危険
• Redux, Recoil などのステート管理はまだ導入していない
→ 増えてくるとどこかで考えないといけない
🌱 まとめと感想
今は 開発効率が爆上がり！ というほどではないけど、
• 型安全なTypeScript
• しっかりしたエコシステム
• 将来的な拡張性
この辺を考えると 早めにReact導入したのは良かった と思っている。
「PHP + JavaScript + jQuery」でずっとやっているより 保守・拡張性 は圧倒的に良くなる。
もし、この説明を社内Wikiとか資料用に「まとめフォーマット」でほしい場合は言ってくれたら整えます！
コメント