Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
LaravelにReactを部分導入して感じたこと
Search
Takuya Katsusa
September 16, 2023
5
1.6k
LaravelにReactを部分導入して感じたこと
Takuya Katsusa
September 16, 2023
Tweet
Share
More Decks by Takuya Katsusa
See All by Takuya Katsusa
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
750
Laravel11へアップグレード 15分で終わるのか!? / laravel 11 Upgrade
takuyakatsusa
2
2.2k
スプリントの新常識 〜1週間未満のアジャイル開発 で成果を最大化する方法〜 / new norm for sprints
takuyakatsusa
2
1.1k
まっちすいっち戦争 / match vs switch
takuyakatsusa
2
1.2k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
GraphQLとの向き合い方2022年版
quramy
49
14k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The Language of Interfaces
destraynor
162
25k
Docker and Python
trallard
46
3.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Transcript
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