Open2024/04/29にコメント追加4

viteについて勉強

2nofa11

セッション 1: Viteの概要

以下を説明出来るようになる

チェック項目
- Viteが何であるか説明できる。
- Viteが提供する主要な特徴を3つ以上挙げられる。
- Viteがどのように従来のビルドツールと異なるかを説明できる。
- Viteの適用場面や利点について例を挙げられる。

メモ

Viteが何であるか説明できる。

開発体験を提供する次世代フロントエンドツール
現状のビルドツールの問題点
- 依存関係
  変更されない巨大な依存関係→esbuildを使った事前バンドルを行う
- ソースコード
  頻繁に編集される(Vueファイルとか)、同時に読み込む必要はない→ブラウザに一部の処理を委譲する。（ブラウザ側でエントリーがあった箇所のみ再度バンドルする）
プロダクションではバンドルする
- Rollupを使って効率的なバンドルを実現している
- esbuildよりパフォーマンスと柔軟性のトレードオフに優れているためRollupを使っている

Viteが提供する主要な特徴を3つ以上挙げられる。

事前バンドル
- esbuild で事前バンドルする
- キャッシュを利用する
あらゆるファイル(例：CSS、Vue)をバインドできる
ビルド時に最適化する
- ラウンドトリップの排除

Viteがどのように従来のビルドツールと異なるかを説明できる。

ビルドはRollup、バインドはesbuildを使うことで高速化を実現している

Viteの適用場面や利点について例を挙げられる。

あらゆるフロントエンド開発に利用できる

その他

index.htmlがエントリーポイントになる
マルチページアプリにも対応している（使い所変わらん）
Vite がインストールされているプロジェクトではviteコマンドが使えるようになる
以下がわからんかった

ネイティブ ES のインポートは次のような生のモジュールをサポートしていません:
js
import { someMethod } from 'my-dep'
上のようなコードはブラウザーでエラーになります。Vite は提供される全てのソースファイルでこのような生のモジュールのインポートを検出し以下を実行します:

答え

ブラウザは、Node.jsなどのサーバサイド環境と異なり、'my-dep' のようなモジュール識別子をどのファイルに対応させるかを自動で解決する仕組みを持っていません。Node.js では node_modules ディレクトリを探索して必要なパッケージを見つけますが、ブラウザにはそのような機能はありません。

だから、以下を実施する

esbuild で事前バンドルする
キャッシュを利用する

GPTのレビュー

レビューを行いました。セッション1の説明は非常に良い理解を示していますが、いくつかのポイントでさらに明確化や追加情報を提供することができます。以下に具体的なフィードバックと改善点を示します：

### Viteが何であるか説明できる
- **良い点**: Viteがフロントエンドツールとしてどのように動作するか、その特徴と利用する技術についてよく説明しています。
- **改善点**: 
  - Viteがモジュールベースの開発を効率化する方法についても触れるとより理解が深まります。具体的には、モジュールを必要に応じてリアルタイムでトランスパイルし、ブラウザが直接モジュールを利用できる形式で提供する点です。
  - 依存関係とソースコードの説明が少し複雑になっています。もう少しシンプルに「Viteは依存関係を事前にバンドルし、開発中のソースコードは必要に応じてトランスパイルされるため、開発速度が向上する」という形で説明するとわかりやすいです。

### Viteが提供する主要な特徴を3つ以上挙げられる
- **良い点**: Viteの核心機能を正確に捉えています。
- **改善点**: 
  - 「あらゆるファイルをバインドできる」という表現は少し曖昧です。具体的には「あらゆるファイルタイプ（JS、TS、CSS、Vueなど）をサポートし、それぞれのファイルが必要に応じてホットモジュールリプレースメント（HMR）を通じて更新される」と表現するとより明確です。

### Viteがどのように従来のビルドツールと異なるかを説明できる
- **良い点**: esbuildとRollupの使用について言及しており、この点は非常に重要です。
- **改善点**: 
  - 従来のビルドツール（例えばWebpack）と比較して、「全ファイルを事前にバンドルするのではなく、開発中はサーバーサイドで必要なモジュールのみを提供し、ビルド時のみ全体をバンドルすることで、開発の迅速化を図っている」という点を強調すると良いでしょう。

### Viteの適用場面や利点について例を挙げられる
- **良い点**: 汎用性を指摘しています。
- **改善点**: 
  - 具体的な利点や適用例をもう少し詳細に述べると理解が深まります。例えば、「大規模なSPA開発での迅速なプロトタイピングや、複数のフロントエンドフレームワークを用いたプロジェクトでの統一的な開発体験の提供」などです。

全体的には非常に良くまとまっており、Viteの基本的な概要を理解していることが伝わります。少しの追加と修正でより完璧な回答になるでしょう。

2nofa11

GPTに聞いてみた

2nofa11

セッション 3: 主要ファイルとディレクトリ構造

index.html

参考
https://ja.vitejs.dev/guide/#index-html-and-project-root

ファイルの位置と基本的な内容: index.htmlはプロジェクトのルートディレクトリに配置され、ウェブアプリケーションのエントリーポイントとして機能します。このHTMLファイルは、アプリケーションがブラウザで最初に読み込まれるドキュメントです。
具体的な役割:
ブラウザにアプリケーションの基本的な構造を提供します。
必要なJavaScript（main.js）やCSSファイル、その他のリソースへのリンクを含める役割を持ちます。
Viteはこのindex.htmlを解析し、JavaScriptやCSSなどのリソースを効率的にロードするための情報を取得します。

main.ts

参考なし
index.htmlで読み込まれるファイル

ファイルの位置と基本的な内容: main.jsは通常、srcフォルダ内に位置し、アプリケーションの主要なJavaScriptファイルとして機能します。このファイルから、他のJavaScriptモジュールやライブラリがインポートされます。
具体的な役割:
アプリケーションの起点となるスクリプトを含みます。
依存するモジュールやコンポーネント、ライブラリ（例えばReactやVueなど）をインポートし、アプリケーションを初期化します。
Viteを利用する場合、このファイルはモジュールのホットリロードをサポートし、開発中の即時反映が可能になります。

vite.config.js

参考
https://ja.vitejs.dev/guide/using-plugins.html

ファイルの位置と基本的な内容: vite.config.jsはプロジェクトのルートディレクトリに位置し、Viteの設定をカスタマイズするためのファイルです。
具体的な役割:
Viteの挙動をカスタマイズする設定が含まれています。例えば、プラグインの使用、ビルドオプション、サーバーの設定などがこのファイルで行われます。
プロジェクトの特定のニーズに合わせて、ビルドプロセスを最適化したり、開発サーバーのポート番号を変更したりすることができます。
多くの場合、このファイルでプロジェクトのビルドパス、ベースURL、互換性の設定などが管理されます。

2nofa11

セッション 4: プラグインアーキテクチャ

そもそもプラグインとは

Vite はプラグインを使っての拡張が可能で、Rollup の優れた設計のプラグインインターフェイスに基づいて、 Vite 固有のオプションがいくつか追加されています。つまり、 Vite ユーザーは Rollup プラグインの成熟したエコシステムを利用しながら、必要に応じて開発サーバーや SSR 機能を拡張することができます。

例：Vueファイルを読み込み対象とするとき

import vue from '@vitejs/plugin-vue';

export default {
  plugins: [vue()]
};

をすると、Viteのビルドプロセス中に.vueファイルを適用できる。

Webpackで使用するvue-loaderとの違い

目的

一緒
Vuedファイルのコンパイルとモジュール

相違点

ビルドツールの違い（ViteはESMに寄り、Webpackはバンドルに寄り）によって、パフォーマンスと設定の複雑さが異なります。
vue-loaderはWebpackの一部として動作し、そのバンドル戦略に従いますが、@vitejs/plugin-vueはViteのインスタントサーバーリロードとモジュールの即時更新を利用します。

難しい

Webpackはバンドラー
Viteはバンドラー＋ビルドツール
ってことらしい