はじめに

Hello, Swift Typescript ラバーなみなさん。これからラバーのみなさん。
今日も今日とて React + TypeScript のお話です。
前回、このような記事を書きました。

create-react-app の代替を探す（調査編）

私の主な Web サイト制作の業務としては、静的サイトが多いので、今回はそれをメインに調査していました。
その中で、静的サイトを構築したい場合は以下が選択肢になってきそう。

  • Next.js
  • Gatsby
  • Vite

という結論になりました。
ですので、今回から個別に調査をしたいと思います！
今回はフロントエンドビルドツールである Vite を深堀りしていきます。

本題

ここでは Vite の特徴や実装方法、create-react-appコマンド（以下CRA）で生成したものとの違いを挙げていきます。

特徴 from GitHub Copilot Chat さん

Vite は、Evan You 氏（Vue.js の作者）によって開発された次世代のフロントエンドビルドツールで、React と組み合わせることで非常に高速な開発環境を提供します。以下は Vite の主な特徴です：

  1. 超高速な開発サーバー: Vite は、インスタントなホットモジュールリプレースメント（HMR）を提供し、コードの変更が即座に反映される
  2. 最適化されたビルド: Rollup を使用して効率的にコードをバンドルし、プロダクション向けに高度に最適化された静的アセットを生成する
  3. モダンなブラウザサポート: 開発中は最新の JavaScript と CSS 機能をサポートするモダンブラウザをターゲットにし、プロダクションビルドではネイティブの ES モジュールをサポートするブラウザをターゲットにする
  4. プラグインエコシステム: Vite はプラグインを通じて拡張可能で、React、Vue、Svelte などのさまざまなフレームワークと統合
  5. 簡単なセットアップ: create-viteコマンドを使用して、React や他のフレームワークのプロジェクトを迅速にセットアップできる

Vite を使うことで、開発速度が大幅に向上し、効率的なプロダクションビルドが可能になります。

深堀り from GitHub Copilot Chat さん + 感想

ホットモジュールリプレースメント

Vite は、開発者が効率的に作業できるように設計されたモダンなビルドツールです。その中でも特に注目すべき特徴が、インスタントなホットモジュールリプレースメント（HMR）です。
HMR は、コードの変更が即座にブラウザに反映される機能です。これにより、開発者はページをリロードすることなく、変更内容をリアルタイムで確認できます。具体的には、以下のようなメリットがあります。
即時フィードバック: コードを変更すると、ほぼ瞬時にその結果がブラウザに反映されるため、開発のスピードが大幅に向上します。
状態の保持: ページ全体をリロードする必要がないため、アプリケーションの状態（フォームの入力内容やスクロール位置など）が保持されます。
効率的なデバッグ: 変更内容が即座に反映されるため、バグの発見と修正が迅速に行えます。
Vite の HMR は、特に大規模なプロジェクトや複雑なフロントエンドアプリケーションの開発において、効果を最大限に発揮します。その結果、開発者はより快適で効率的な開発体験を得ることができます。

感想

なるほど、他の言語で言うところのホットリロードですね！
確かに変更部分のみ即座に反映されるなら、UI の調整など便利になりそう。

Rollup

Vite は、開発中だけでなく、プロダクション向けのビルドにも優れたパフォーマンスを提供します。その中心にあるのが、Rollup というバンドラーです。

Rollup の役割：

Rollup は、モジュールバンドラーとして、以下のような機能を提供します。
効率的なコードバンドル: Rollup は、コードを効率的にバンドルし、依存関係を最適化します。これにより、不要なコードが削減され、バンドルサイズが小さくなります。
ツリーシェイキング: 使用されていないコードを自動的に除去する機能です。これにより、最終的なバンドルサイズがさらに小さくなり、読み込み速度が向上します。
プラグインエコシステム: Rollup には豊富なプラグインがあり、さまざまな最適化や変換を簡単に追加できます。例えば、コードの圧縮や画像の最適化などが可能です。

プロダクション向けの最適化:

Vite は、プロダクション向けに高度に最適化された静的アセットを生成します。具体的には、以下のような最適化が行われます。
コードの圧縮: JavaScript や CSS のコードが圧縮され、ファイルサイズが小さくなります。これにより、ページの読み込み速度が向上します。
キャッシュバスティング: ファイル名にハッシュを付与することで、キャッシュの問題を防ぎ、最新のアセットが常に提供されるようになります。
モジュールの分割: 必要に応じてコードを分割し、初期読み込み時間を短縮します。これにより、ユーザー体験が向上します。
Vite の最適化されたビルド機能は、プロダクション環境でのパフォーマンスを最大化し、ユーザーに高速でスムーズな体験を提供するために重要です。

感想

バンドラーには詳しくないのですが、いい感じにファイルサイズの軽減をしてくれるようです。
CRAのモジュールバンドラーは Webpack だと思いますが、どのような違いがあるのでしょうか？

  • Webpack: 大規模なシングルページアプリケーション（SPA）や、複数の静的アセットを含むプロジェクトに適している
  • Rollup: JavaScript ライブラリや、軽量で効率的なバンドルが求められるプロジェクトに適している

とのことです。
実際に大規模なアプリケーションを作成しない限り、 Rollup のほうがメリットを享受できそうですね。

実際の使い方

今回はインストールに npm を使用します。
公式では npm の他に、Yarn や pnpm、Bun などでのインストール方法が紹介されています。
そのうち記事で深堀りしようかしら……
また、環境は React + TypeScript で作成します。

環境

  • npm: 10.2.2
  • Node.js: 20.11.0
  • TypeScript: 5.0.0

プロジェクトを作る

任意のディレクトリに移動し、

$ npm create vite@latest

を実行します。
そうすると、いくつかの質問のあとにプロジェクトが作成されます。
質問内容は

  • Project name
  • Framework の選択
  • Variant の選択

があり、Framework は React を、Variant は TypeScript + SWC を選択しました。
ですが、作成のコマンドで以下のようにすると、一文で上記の状態で作成することができます。

$ npm create vite@latest <Project name> -- --template react-swc-ts

作成はこれで終わりです。誠に簡単です。

ビルドをしてみます。

$ npm run dev

以下の画面が出れば、完璧です！

また、--host オプションを指定すると、ローカルネットワーク上で他のデバイスからもアクセスすることができます。

$ npm run dev -- --host

例えば、自身のローカルIPアドレスが192.168.xxx.xxx だった場合、上記コマンドで起動した場合に以下のコマンドで画面を表示することができます。

https://192.168.xxx.xxx:5173/

スマートフォンなどで確認したい場合は便利ですね！

他にも以下のようなオプションがあるようなので、気になるコマンドを試してみてください！

コマンド説明
npm run dev通常のローカル開発 (localhost:5173)
npm run dev -- --host他のデバイスからアクセス可能 (0.0.0.0:5173)
npm run dev -- --host=192.168.1.10特定のIPアドレスでバインド
npm run dev -- --host --port=3000ポートを変更して開発サーバー起動
npm run dev -- --host --httpsHTTPS を有効化

構成の違い

Viteで作成したプロジェクトとCRAで作成したプロジェクトでは、基本的に大きく変わらないものの、いくつかの違いがあります。

  • ファイル構成の違い
    • index.html の位置
    • 設定ファイルの違い
    • 静的ファイルの位置

以下が主に書き出されるファイル構成です。

CRA

my-cra-app/
├── README.md           
├── node_modules/       
├── package.json        
├── public/             
│   ├── index.html     
│   └── ...          
└── src/               
    ├── App.tsx  
    ├── index.tsx
    └── ...

Vite

my-vite-app/
├── index.html         
├── public/            
├── src/               
│   ├── App.tsx       
│   ├── main.tsx      
│   └── assets/       
├── package.json 
├── vite.config.js 
├── tsconfig.json  
├── tsconfig.app.json
├── tsconfig.node.json 
└── node_modules/

index.html の位置

  • CRA: public ディレクトリに配置
  • Vite: ルートディレクトに配置

設定ファイルの違い

  • CRA:
    • 初期プロジェクトはpackage.jsonのみ
  • Vite:
    • package.json, eslint.config.js, tsconfig.json, tsconfig.app.json, tsconfig.node.json, vite.config.tsと色々ある
    • もっと細かく
      • tsconfig.json: プロジェクト全体の TypeScript の設定を定義する。後述の app, node のベースとなることが多い
      • tsconfig.app.json: アプリケーションの TypeScript の設定を定義する。コンパイルオプションやインクルードパスなどを設定する
      • tsconfig.node.json: Node.js 環境の TypeScript の設定を定義する。Node.js のモジュール解決や特定のライブラリの型定義などを設定する。静的サイトの場合は使用しない場合が多い
      • vite.config.ts: Vite の設定を行う。開発サーバの設定やビルドオプションなどの設定を行う

静的ファイルの配置

  • CRA: public ディレクトリに配置
  • Vite: src/assets ディレクトリに配置

まとめ

CRAからViteへの移行は恐ろしくスムーズに完了しました！
CRAは TypeScript のバージョンアップが難しいこともあるので、既存アプリも移行したいと考えています。（記事書くフラグ）
次はまた別のCRA代替システムを調査したいと思います。

それでは、よき開発ライフを！！



ギャップロを運営しているアップフロンティア株式会社では、一緒に働いてくれる仲間を随時、募集しています。 興味がある！一緒に働いてみたい！という方は下記よりご応募お待ちしております。
採用情報をみる