はじめに
React開発者がCreateReactAppを使っていたところ、Viteに変えて快適だった話です。
其の一 開発サーバ起動/ビルドが速い
まずこれに尽きます。実際に測ってみると↓
開発サーバ起動:
CRA 1分10秒
Vite 4秒
ビルド
CRA 2分25秒
Vite: 8秒
とんでもない差が出てしまいました。
実際開発をしていて、CRAの場合一度開発サーバを落として他の作業をするのが億劫なまであります。
其の二 設定の変更がしやすい
Viteの場合、プロジェクトのルートに’vite.config.js’というファイルが配置され、それを編集することで設定の変更が行えます。
一方CRAですが、設定変更のたびにnpm run ejectを行う必要があり、複雑です。
vite.config.jsの一例。このようにDockerとの連携に必要な設定も行えます。
其の三 フレームワークの自由性
CRAはその名のとおりReactにのみ使用ができますが、
Viteを使用していれば、Vue.jsなど他のフレームワークもサポートしているため、同じ感覚でプロジェクトの進め方が可能となります。
其の四 とどめ
CRAはもはや公式で推奨されていない
メンテナンスが止まっていることが原因のようです。
サポートがされていないということは今後も改善される余地がなく、またViteの存在に食われてしまうということになるかと思いますので、あらゆる観点からVite推しになることでしょう。
まとめ
開発サーバをCRAで賄うとストレスがすごい
設定しやすく、柔軟で他FWでも使用可
いわゆるオワコン(サポートが終了している)
開発サーバ/ビルド速度の点のみでも十二分に採用するに値すると思いますので、CRAからの移行も検討してみる価値はあると思います。
ふろく(CRAで動的にビルドしたファイルを読み込む)
ReactをViewファイルで読み込みながら開発する際、ビルドする度にmain.[ハッシュ値].jsやmain.[ハッシュ値].cssといった形でファイル名を指定し読み込まなければならず、煩雑でした。(npmのビルトインサーバで開発していたが、ビルド後の挙動も確認したかったため)
調べてみた
どうやら/build/asset-manifest.jsonによってファイル名のハッシュ値が変わっていくようです。
以下を見てみると、files[main.css], files[main.js]にハッシュ値を含んだファイル名が書かれています。
つまり、asset-manifest.jsonの値を参照してしまえば動的に変更できるのでは...?
$asset_manifest_path = WWW_ROOT . ’xxx/build/asset-manifest.json’;
$manifest = json_decode(file_get_contents($asset_manifest_path), true);
dumpしてみると...取れています!
あとは連想配列にアクセスして値をlinkタグ,scriptタグに入れ込んであげるだけです。
最後に
正直なところベストプラクティスであるのはViteへ鞍替えすることかと思います(Laravel+Viteで動的指定がデフォルトでサポートされている)が、CRAプロジェクトでこういうことが起きているということがわかって面白かったです。
安心安全のホワイト高還元SESに転職を考えている方へ
新しい挑戦に踏み出すことは、人生において重要な一歩です。
転職活動は自分自身を知り、成長する貴重な機会でもあり、夢や成長を追求するためには必要な要素の一つになるかと思います。
どんな選択をされるにせよ、その決断があなたに取って素晴らしい未来を切り開くことを願っています！
グラディートと一緒に誇れるエンジニアを目指しましょう！
■『株式会社グラディート』では受託開発・SES・ブランディングデザイン・事業コンサルティングなどを事業として行う都内のIT企業です。現在、不遇な待遇で困っているエンジニアさんは、ぜひ一度グラディートに相談してみてね！（年収査定・SESへの転職相談も承っております！）
株式会社グラディート採用情報はこちら▼
https://en-gage.net/gradito/
株式会社グラディート公式サイトはこちら▼
https://www.gradito.co.jp/