今日は、JavaScriptでウェブ開発するにあたり、最速でコーディングに入れる環境を作ります。 現在のフロントエンド開発ではReactやVueや欠かせないですが、これを使わずにVanilla JavaScriptで開発をしたいときに有利です。 しかしnpmを使ってライブラリを管理したい場合に最適になります。 さらにBootstrapのセットアップの仕方も紹介するのでプロジェクトをセットアップしたのちにすぐにコーディングに取り掛かることができますね。 今日の環境 Viteとは ViteはVueの創生者Evan Youとそのチームが作った最新のビルドツールです。特徴としてはWebpack、Gulp、Parcelのバンドリングで使うパッケージがデベロップメント用のサーバーを起動する際（npm start)でかなり遅くなる原因を起こしていたものをすべて取り除きました。さらにコードの量が多くなるにつれ再度バンドルしなおすのでその分時間がかかっていました。 Viteの強みはその速さになります。もちろん、その引き換えにES6で書いたコードが対応していないブラウザではJavaScriptを変換してくれないので動かない可能性がある等の短所があります。 もし、ReactやVueを使いたい方はこちらの記事を参考にしてください。 Bootstrapとは Bootstrapはブートストラップといいます。 HTMLにBootstrapのクラスを入れることで魔法のようにHTMLにCSSが付けられることができます。 Bootstrapは有名なので使っておいて損はありませんね。 では早速プロジェクトの作成にかかります。 Viteのセットアップ では下記のコマンドでViteを使ってJavaScriptのプロジェクトをセットアップします。 では、cd asameshi（もしくは自身のプロジェクト名）に移動してnpm iのコマンドを実行します。 Bootstrapのセットアップ 次にBootstrapをインストールします。popperはBootstrapのドロップダウンやポップオーバー、ツールチップのポジションで使いますが、これらを使う予定がない場合はインストールしなくてOKです。 次にSaasをインストールします。 これで必要なライブラリはインストールできました。 プロジェクトのファイル構成 プロジェクトのルート直下のcounter.jsは削除してください。 次に下記のコマンドで必要なフォルダとファイルを作成します。 プロジェクトのファイル構成はこのようになります。 ※ルート直下のindex.htmlは削除することになります。 Viteのコンフィグ 先ほどのコマンドで作成したvite.config.jsファイルがテストサーバーの起動時に読み込まれるファイルになります。中身が空っぽなので、このファイルにコンフィグを書いていきます。 ここで注意しておきたいのがpathのインポートの仕方です。const path = require(‘path’)でも良いですが、package.jsonの”type”: “module”を削除する必要があります。ES6の書き方でimportを使う方がキレイだと思いますが個人の好みでどうぞ。 次に、先ほど作成したsrc/index.htmlに下記の様に書きます。デフォルトのルート直下のindex.htmlは削除してOKです。 src/index.html Bootstrapのインポート では下記のようにvite.config.jsを書きます。これでbootstrapをインポートします。 次にsrc/scss/styles.scssを開きます。 このようにbootstrapのCSSをインポートしましょう。 次に、Bootstrapで使うJavaScriptをインポートします。 src/js/main.jsに下記を追加しましょう。 もし、プラグインごとに別々にインポートしたい場合は下記のように書いてもOKです。 では、テスト用サーバーを起動するとBootstrapのCSSも読み込まれたことが確認できましたね！ 実際のコードはGitHubのリポから見てください。 お疲れ様でした。