Viteとは？ビルドツールとは？Docker上でReact×TypeScript環境を構築する手順

お疲れ様です。

ついさっき年が明けたと思ったらもう2月の下旬で驚愕しているシステム開発部のえいたです。

今回は業務の中で使用していた「Vite」というものに関してまとめようと思います。

ソースコードを触っていて頻繁に目にするわけではないですが、たまにViteを使用する機会があり、機能や仕組みなどほとんど理解しないまま使用していたため、改めての学びも込めてブログに残させていただきます。

Viteとは

2020年に初リリースされており、高速で無駄のない開発エクスペリエンスを提供することを目的としたビルドツールで発音は「ヴィート」というみたいです。（公式サイト参照）

(ビルドツールに関して後ほど説明するためそんなものがあるんだくらいで読んでください)

高速な開発環境を提供しており、モジュールをオンデマンドで読み込むため、ソースコードに変更を加えた際にすぐブラウザに反映されます。

また更新の際にはページ全体のリロードではなく、変更部分だけを更新することができます。

特にJavaScriptアプリケーションのために設計されたビルドツールのようです。

ビルドツールとは

まず、近年の比較的規模の大きいWEB開発では、手動でJavaScriptファイルを1つずつHTMLに読み込ませるようなことはしません。(昔は読み込ませる必要があったのか、感謝感謝)

また、開発のプロジェクトが大きくなるにつれて、JavaScriptやCSSのファイルが増え、開発中はそれらのファイルを役割ごとに分割することで再利用性が高まり、可読性も向上します。

しかし、分割した状態だとブラウザ側はあるモジュールが他のモジュールに依存している場合は、実行順序を正しく読み込む必要があり、またそれらのファイルを読み込むためのHTTPリクエストを発行し、表示速度が遅くなる可能性があります。

これらをうまくやって解決してるのがビルドツールです。

役割としては、バンドル、圧縮、トランスパイルがあります。

1. バンドル（結合）：複数のファイルを一つにまとめることで、HTTPリクエストの数を減らし、読み込み速度を改善する
2. 圧縮：ファイルサイズを小さくするために、不要なスペースやコメントを取り除く
3. トランスパイル（変換）：TypeScriptなどの言語は、そのままではブラウザが理解できないためこれらをJavaScriptに変換する

ほかの人気のビルドツールとしては、Webpack、tsc CLI esbuildなどのビルドツールがあるようです。

他ビルドツールとの違い

• ネイティブES Moduleを使用しており、モジュールを個別に管理することでファイルを分割して必要な時に読み込むことができる
• ブラウザからリクエストされたときに必要なモジュールだけを変換するオンデマンド処理を行っており、特に開発環境での利便性が高い
• 従来のビルドツールでは、開発サーバー起動時にプロジェクト全体をバンドルするが、Viteでは行っていない

実際にViteをインストールして表示してみる

今回はDocker上で React×TypeScript 環境を構築します。

１．プロジェクトディレクトリを作成し、配下にsrcディレクトリを作成

2．Dockerfileとdocker-compose.ymlを定義（※最初はdoker-compose.ymlファイルのvolumesはコメントアウトしておく）

Dockerfile

FROM node:22.13.1

# 作業ディレクトリの設定
WORKDIR /app/src/viteapp

# viteアプリケーションの基本設定
RUN npm install -g create-vite && \
create-vite . --template react-ts --yes

# 依存関係インストール
RUN npm install

# サーバーの起動
CMD ["npm", "run", "dev"]

docker-compose.yml

networks:
  vite-net:
    driver: bridge
services:
  vite:
    build: 
      context: .
      dockerfile: ./docker/node/Dockerfile 
    # volumes:
    #  - ./src/viteapp:/app/src/viteapp
    networks:
      - vite-net
    ports:
      - 5173:5173
    tty:
      true

3．「docker compose build」を実行しイメージを作成「docker compose up -d」を実行する

4．srcディレクトリに移動し「docker cp blog-vite-1:/app/src/viteapp/ .」を実行（ホスト側にコンテナ内のディレクトリのコピーが作成される）

5．docker-compose.ymlのvolumesのコメントアウトを外し、改めて「docker compose up -d」を実行しボリュームの設定を適用させる

該当のurlにアクセスで 完！！！と思ったら、、、接続できませんと怒られました

調べてみるとViteの公式ドキュメントにデフォルトでは「localhost」のみをリッスンすると記載してあり、 パブリックアドレスをリッスンするには「vite.config.ts」ファイルに下記の記述を追加する必要がありました。
参照資料：https://ja.vite.dev/config/server-options.html#server-host

export default defineConfig({
  # 下3行を追記
  server: {
    host: true
  },
  plugins: [react()],
})

上記を追加したうえで改めてurlにアクセスを行うと、、、無事表示できました！

以上になります。

今回はviteの概要と環境の構築に関して行いましたが、機会があればCRUD処理の実装も行って記事にできたらと思います。

ありがとうございました。