LaravelにReactを部分導入して感じたこと

Transcript

1. Laravel に React を 部分導入して感じたこと BABY JOB 株式会社　勝佐拓也 PHP カンファレンス沖縄 2023.09.16
2. 自己紹介 勝佐 拓也（かつさ たくや） BABY JOB 株式会社（2023 年 2 月入社） 保活 DX サービス 「えんさがそっ♪」 の 開発・保守 バックエンドエンジニア 3 年 PHP / VB.net が得意です 1
3. えんさがそっ♪ 施設を 探す 見学の 申込 園の魅力 を発信 見学の 受付 2
4. 本日お話しする議題 • 部分的な導入という選択をした経緯 • Laravel に React を 部分導入する際の手順 • Laravel に React を 部分導入して感じたこと 3
5. 部分的な導入という選択をした経緯 1. Blade と jQueryで SPA っぽい動きを頑張って再現していた 2. React なら実装しやすそう！ 3. でも全体を React で置き換えるのは改修工数が... 4. Blade の中に React を部分的に埋め込めばよいのでは？ 5. やってみよう！！ 4
6. Laravel に React を部分導入する際の手順 • React の開発に必要なライブラリをプロジェクトに追加 ◦ 既にLaravel Mix を使用していたので、 package.json に React と TypeScript を追加するだけでした • React の実装を行う • ビルドされた JS を Blade で読み込む 5
7. コード例 6 Blade 側 ※ 細かい設定は省略しています 󰢛 React 側 Blade 内 でReact のコンポーネントをレンダリングする
8. これだけ？ 7
9. 「口コミ」タブの中身だけ React で実装してます！！ 部分導入できましたっ ♪ 8
10. Laravel に React を 部分導入して感じたこと • 既存のページに影響を与えず、 React を導入することができた • フロントエンド実装時の選択肢が増えた ◦ 必要な部分だけ React にすることができるようになった ◦ 逆にどこまでを React で実装するか迷うタイミングもあった • Laravel Mix のお陰で React を導入するのが簡単だった 9
11. ご清聴ありがとうございましたっ♪ 10
12. おまけ • React と 合わせて TypeScript を導入した話 • 静的解析ツールは ESlint、フォーマッターは Prettier を導入した話 9