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
720
Laravel11へアップグレード 15分で終わるのか!? / laravel 11 Upgrade
takuyakatsusa
2
2.1k
スプリントの新常識 〜1週間未満のアジャイル開発 で成果を最大化する方法〜 / new norm for sprints
takuyakatsusa
2
1.1k
まっちすいっち戦争 / match vs switch
takuyakatsusa
2
1.2k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing for humans not robots
tammielis
254
25k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
4 Signs Your Business is Dying
shpigford
185
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Fireside Chat
paigeccino
40
3.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Site-Speed That Sticks
csswizardry
11
880
Done Done
chrislema
185
16k
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