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
630
Laravel11へアップグレード 15分で終わるのか!? / laravel 11 Upgrade
takuyakatsusa
2
1.8k
スプリントの新常識 〜1週間未満のアジャイル開発 で成果を最大化する方法〜 / new norm for sprints
takuyakatsusa
2
1k
まっちすいっち戦争 / match vs switch
takuyakatsusa
2
1.2k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Typedesign – Prime Four
hannesfritz
42
2.7k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
RailsConf 2023
tenderlove
30
1.2k
How GitHub (no longer) Works
holman
314
140k
Documentation Writing (for coders)
carmenintech
73
5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Navigating Team Friction
lara
188
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
2.9k
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