Laravel に React を 部分導入して感じたこと BABY JOB 株式会社　勝佐拓也 PHP カンファレンス沖縄 2023.09.16

自己紹介 勝佐 拓也（かつさ たくや） BABY JOB 株式会社（2023 年 2 月入社） 保活 DX サービス 「えんさがそっ♪」 の 開発・保守 バックエンドエンジニア 3 年 PHP / VB.net が得意です 1

えんさがそっ♪ 施設を 探す 見学の 申込 園の魅力 を発信 見学の 受付 2

本日お話しする議題 ● 部分的な導入という選択をした経緯 ● Laravel に React を 部分導入する際の手順 ● Laravel に React を 部分導入して感じたこと 3

部分的な導入という選択をした経緯 1. Blade と jQueryで SPA っぽい動きを頑張って再現していた 2. React なら実装しやすそう！ 3. でも全体を React で置き換えるのは改修工数が... 4. Blade の中に React を部分的に埋め込めばよいのでは？ 5. やってみよう！！ 4

Laravel に React を部分導入する際の手順 ● React の開発に必要なライブラリをプロジェクトに追加 ○ 既にLaravel Mix を使用していたので、 package.json に React と TypeScript を追加するだけでした ● React の実装を行う ● ビルドされた JS を Blade で読み込む 5

コード例 6 Blade 側 ※ 細かい設定は省略しています 󰢛 React 側 Blade 内 でReact のコンポーネントをレンダリングする

これだけ？ 7

「口コミ」タブの中身だけ React で実装してます！！ 部分導入できましたっ ♪ 8

Laravel に React を 部分導入して感じたこと ● 既存のページに影響を与えず、 React を導入することができた ● フロントエンド実装時の選択肢が増えた ○ 必要な部分だけ React にすることができるようになった ○ 逆にどこまでを React で実装するか迷うタイミングもあった ● Laravel Mix のお陰で React を導入するのが簡単だった 9

ご清聴ありがとうございましたっ♪ 10

おまけ ● React と 合わせて TypeScript を導入した話 ● 静的解析ツールは ESlint、フォーマッターは Prettier を導入した話 9