ViteでReactを部分的に導入していく

Transcript

1. ViteでReactを部分的に導入していく 　　　　　　　　　　　　　　　　　　　　　　　　　　　　千株式会社　　弓場広登
2. 自己紹介 弓場(ゆば)広登 2023年入社 • 現在ははいチーズ！フォトのフロントエンド開発やビルドツールの改善な どを中心に動いてます • TypeScript Node.jsなどが好きです • 最近の関心はNext.js (App Router)やデザインシステム
3. Viteとは？🤔 • Vue.jsの作者 Evan you 氏らによって開発されたフロントエンドのビルドツール • ES Modulesのモジュール分割の仕組みで必要なコンパイルの差分だけをブラウ ザに送るので、開発環境での更新などがすぐに完了する　 https://ja.vitejs.dev/guide/why.html ◦ 既存のWebpackなどのバンドラーはすべてのファイルをクロールしてビルド している • React Vue などのプロジェクトがすぐに作成できる • Rollupでのファイルの配信を前提としたビルドにもデフォルトで対応している ✅ • Webpack.configのような複雑な設定が不要
4. npm create vite@latest ✔ Project name: … example-project ✔ Select a framework: › React ✔ Select a variant: › TypeScript Scaffolding project in /hoge-project... Done. Now run: cd example-project npm install npm run dev vite.config.ts (初期のviteの設定ファイル) import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], }) ViteでReactの新規プロジェクトを立ち上げる場合 🚀
5. 部分的に導入するとは ❓ 自分が最近関わっていたプロジェクトのフロントエンド開発では以下の課題感 がありました • 既存のフロントエンドはLaravelのBladeのテンプレートを配信するMPA • フロントエンドのビルド環境が古い ＆ メンテナンスがされていない ◦ 既存のコードはLaravelのBlade上でVueなどをどうにか使っている状態... • 上記の状態を引き継いだ状態でフロントエンドのコードを書いても、コードレビューがしにく い、メンテがされにくい状態に陥りそう • React(Next.js)などへのリプレイス計画があるので、それを前提に Reactでのコードの 資産を作っておきたい • チーム内でのReactへの知見を高めておきたい
6. 今回のフロントエンド開発の要件 ✅ • 今回Reactが求められるような動的なフロントエンドの機能は1,2画面 • 複数のページにまたがることはない ◦ バックエンドでのロジックが中心的 • シンプルにAPIに対してリクエストをするだけのアプリケーションでいい • 既存のビルドシステムなどの改修は影響範囲が難しい • 特定のページだけでReactを使えればいい ◦ そのページ用のビルドファイルだけがあればよい 👍 Viteを使うことでシンプルにモダンなフロントエンド開発ができる ＆将来 Next.jsなどへアプリケーションを作り直した場合も既存のComponentや Pageなどの資産が流用しやすい
7. ビルドされたReactのビルドファイルを扱う 🍳 ReactなどのSPAアプリケーションは一つのシングルHTMLファイルで一つ の.jsファイルやアセットのファイルを読み込む • npm run buildでビルドした1つの.js ファイル .css ファイルを必要な ページで扱う • Viteでは外部ディレクトリに対してのビルドも可能なのでLaravelのリソー スに対してビルドをすることでBladeファイルで扱えるようにする
8. ビルドファイルの読み込み 💿 エントリーポイントにするtsxのファイルで以下のようなDOMをでレンダリン グするルートのidを設定する createRoot(document.getElementById( "example")!).render( <React.StrictMode> <Example /> </React.StrictMode> ); Blade側でのjsファイルの読み込み <link>タグでのCSSのビルドファイル の読み込みも必要 読み込んだDOMで表示をするために React側でエントリーポイントのファイルで rootの設定 - デフォルトだとroot - 特定のページで扱うならそれに合わせた idをつけるほうがわかりやすい <div id="example"></div> <script src="example.js"></script>
9. ビルド設定などを含めたvite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import svgr from "vite-plugin-svgr"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react(), svgr({ include: "**/*.svg" })], build: { rollupOptions: { output: { dir: "../../../laravel/resources/example", entryFileNames: "example.js", assetFileNames: "example.[ext]", }, }, }, }); plugins:ViteでloaderはbunlderなどのVite デフォルトではない機能を拡張するためのも の、今回はreactとsvgの画像を読み込むた めのsvgrだけを追加 rollupOptions: ビルドのバンドラーの設定 output: dir:出力先のディレクトリ entryFilenames:ビルドされた.jsファイル assetsFileNames:cssなどのアセットファイ ル https://ja.vitejs.dev/config/build-options.html
10. 今回使ってみてよかったこと 👍 • 複雑な設定が必要ないのですぐにフロントエンド開発に入れた ◦ ビルドのディレクトリ設定とBlade側で読み込みさえできれば他に触 る部分はない • 起動やビルドなどが早いのであまり困ることがない • チーム内でReactを触ったことがある人もいるのでフロントエンドのコード レビューなどの多少しやすくなった
11. 課題点 📄 • 技術面 ◦ ビルドされたファイルを使う前提だと CSR(クライアントサイトレンダリングが )前提なので、小規模なアプ リケーションでも.jsのバンドルサイズがそれなりに大きくなった。 ▪ 導入したライブラリの大きさなどは気をつけるべき ◦ CSS Modules周りなどがビルド前提だとうまく扱えない場合があった • 今回はViteの設定周りを変えることが svgのみでしか発生しなかったが、要件によっては設定を変 えることが多い場合もありそう。 ◦ 開発環境を整えれる余裕があるなら、ちゃんとした ViteのSPAやNext.jsなどでページ自体を 使えるようにしていくべき 👈 • ソフト面 ▪ 将来を見据えたコードルールやディレクトリ構造、設計などはチームで固めれないまま 動いてしまった ▪ APIのモックやテストの整備なども手を付けれず ... ▪ 知見を広めたいとは思ったけど、ほぼ一人で Reactのコードは書いてしまった
12. 一緒にフロントエンド開発してくれる人を募集してます 🏗 https://sencorp.co.jp/recruit-career/