Update!!コーディングやフロントエンド開発のプロジェクトではこれまでずっとwebpackを使った開発環境を使っていましたが、PugやJSXなどで作成したコンポーネントが多くなってくるとどうしてビルド時間がストレスになったり、メモリ消費も大きくなってきたこともあり、Viteへ移行することにしました。今回はViteの導入とTypeScriptコンパイルの対応についてまとめていきたいと思います。Viteについては以前からずっと知っていたのですが、プロジェクトの進行などの都合でなかなか取り組めずにいました。いう感じではありますが、、とりあえず落ち着いたタイミングで本格的に環境周りを整えていきました。従来の環境でもまだまだ対応できるところもあるのですが、良いツールはどんどん活用していくのがベストですからね。開発環境へViteのインストール開発環境にViteを導入するといっても、基本的にはコマンドを入力するだけで揃ってしまいます。npmやyarnで下記のようにViteを使った新規プロジェクトを作成していきます。この辺りはVueCLIやReactのcreate-appに似ていますね。viteコマンドを実行すると対話形式でプロジェクトの設定をしていきます。フレームワークの指定ですが、使用するフレームワークが決まっている場合にはこのタイミングで設定しておくと良いですね。フレームワークを使わないなら「Vanilla」を選択します。次の質問では言語を選択しますが、「TypeScript」の項目を選択するだけでコンパイル環境などが全て揃うようになります。これはとても簡単ですね。TypeScriptプロジェクトの設定が終わって先に進めるとViteの環境構築を行なっていきます。設定が完了すると必要なモジュールをプロジェクトフォルダ内でインストールし、ローカルサーバー起動のコマンドを実行すると、初期画面が表示できるようになります。dev他にも、本番用のコードをビルドするコマンドや、本番用のコードをプレビューできるコマンドなどもデフォルトで用意されているようですね。previewViteではデフォルトで下記のようなディレクトリ構成になります。ビルド後のファイル名にはハッシュ値が自動的に付けられます。設定によってプロジェクトのルートや出力先のフォルダ名なども変更できるようですね、この辺りは後ほど詳しくみていきます。Viteではindex.htmlファイルがある場所がドキュメントルートとされるので、ウェブサーバーと同じようなイメージですとわかりやすいですね。その他設定ファイル、スクリプトのモジュールなどViteのプロジェクトで扱う基本となる主なディレクトリは下記のようになります。これらはディレクトリ名と共に後述するViteの設定ファイルで変更することができます。distビルド後のファイルが格納されるディレクトリで、リソースファイルなどはassetsディレクトリに格納されます。srcビルド前のソースコードが格納されるディレクトリ、このディレクトリ配下のファイルがコンパイルの対象になります。publicビルドを通さない静的アセットファイルを格納するディレクトリ、この配下のファイルはdistディレクトリにそのままコピーされて格納されます。VIteの新規プロジェクト作成時にTypeScriptに対応させていると、TypeScriptの設定ファイルも自動的に用意されています。これも非常に助かりますね。["src"]}Viteプロジェクトでの設定Viteでは上記の内容がデフォルトの構成になりますが、設定ファイルである「vite.config.js」ファイルを作成し、そのファイル内にオプションで設定することでさまざまなカスタマイズができるようになります。デフォルトでは用意されていないので、設定ファイルを新規作成するところからスタートです。プロジェクトのルートに設定ファイルを用意します。vite.config.js設定ファイルが作成できたら、下記のように「defineConfig()」を使って、オプションごとのキーで細かく設定していきます。詳しくは公式サイトにリファレンスとしてまとめられていますので、そちらを参照してみてください。}});実務で使う場合にはデフォルトの設定だと使いにくいところもあるので、具体的なケースごとに設定例をまとめてみます。「base」オプションでは公開時のディレクトリを指定することができます。Viteではドキュメントルートでの使用を前提としているため、サブディレクトリなどで公開する場合にはパスが合わなくなるということがあります。参照するパスもドキュメントルートを基準としたルートパスになるので、相対パスで扱いたい時にもこの設定で対応します。ビルド後のファイル名にはデフォルトでハッシュ値が含まれてしまいます、これらも不要な場合には「build.rollupOptions.output」でビルドファイルに関する設定が細かくできるようになります。下記のようにあらかじめビルドファイルに関するフォーマットを決めておくことで、それに合わせてファイルが生成されるようになります。出力先ディレクトリも調整できます。デフォルトの設定ですとファイルごとにビルド後の出力先ディレクトリを分けることができないため、こちらもオプションで設定していきます。ファイル名に含まれる拡張子によって条件分岐させていきます。下記ではスタイルシート、画像、フォントファイルでビルド後のディレクトリを振り分けている設定例になります。}},.....先ほどのファイルリネームと合わせたこの設定でビルド後のファイル、ディレクトリ構成は下記のようになります。この形にしておくと、静的サイトとしてサイトデータを一式まとめて納品しやすくなりますね。ページが複数にわたるケースや、複数のJSファイルなどをバンドルせずに個別にビルドする時には、「build.rollupOptions.input」のオプションでそれぞれキーバリューの形で個別にエントリーポイントとなるファイルを指定します。この時キーの値はビルド後のファイル名になるように紐づけておくことで、複数ファイルのビルドに対応できるようにします。ディレクトリ構成なども実案件の要件に合わせて変更したい場合があると思います。設定ファイルを使うことで、ソースコードのルートディレクトリや、静的配信ファイルの場所などもソースコード側のディレクトリにまとめることができます。今回はビルド後に下記のような構成にする例を見ていきます。page2.html上記のような構成にするために、先述の設定に加えて「root」オプションでソースコード側のドキュメントルートを、「publicDir」オプションで静的配信用ファイルのディレクトリをそれぞれ変更しています。デフォルトの構成と比べてもかなりすっきりとしている印象ですね。}},.....jQueryなどライブラリを使ってみるViteを使うことでサイト制作に必要なリソースと開発環境が簡単に準備できました。実務ではライブラリなども併用することもあると思います。試しに、jQueryを使ってみます。ライブラリ本体と、型定義のファイルをインストールしていきます。@types/jqueryインストールしたライブラリをスクリプト側で実行してみると、正しく読み込めていることが確認できますね。....});Viteでは1つのコマンドで環境構築が完了し、いろんな設定も設定ファイル内のオプションで指定していく形なので、とても簡単にカスタマイズできる印象ですね。ビルド時間もかなり早く、コーディングがフロントエンドの開発もとてもスムーズで快適に進められます。他にもSassなどのプリプロフェッサーを導入したり、各種フレームワークを使うことも簡単ですので、また別記事でまとめてみたいと思います。topこのウェブサイトはCookieを使用します当ウェブサイトではCookieを使用してアクセス解析や広告を行なっており、ウェブサイトの運用やコンテンツ制作に役立てています。サイトの利用を続けることで、Cookie使用に同意したことになります。