今日は、JavaScriptでウェブ開発するにあたり、最速でコーディングに入れる環境を作ります。
現在のフロントエンド開発ではReactやVueや欠かせないですが、これを使わずにVanilla JavaScriptで開発をしたいときに有利です。
しかしnpmを使ってライブラリを管理したい場合に最適になります。
さらにBootstrapのセットアップの仕方も紹介するのでプロジェクトをセットアップしたのちにすぐにコーディングに取り掛かることができますね。
今日の環境
- npmがインストールされていること
- JavaScriptがなんとなくわかる程度
- CSSがなんとなくわかる程度
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のプロジェクトをセットアップします。
npm create vite@latest #結果 ✔ Project name: … asameshi ✔ Select a framework: › Vanilla ✔ Select a variant: › JavaScript Scaffolding project in /home/dan/Documents/public/asameshi... Done. Now run: cd asameshi npm install npm run dev
では、cd asameshi（もしくは自身のプロジェクト名）に移動してnpm iのコマンドを実行します。
Bootstrapのセットアップ
次にBootstrapをインストールします。popperはBootstrapのドロップダウンやポップオーバー、ツールチップのポジションで使いますが、これらを使う予定がない場合はインストールしなくてOKです。
npm i --save bootstrap @popperjs/core
次にSaasをインストールします。
npm i --save-dev sass
これで必要なライブラリはインストールできました。
プロジェクトのファイル構成
プロジェクトのルート直下のcounter.jsは削除してください。
次に下記のコマンドで必要なフォルダとファイルを作成します。
mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
プロジェクトのファイル構成はこのようになります。
※ルート直下のindex.htmlは削除することになります。
├── index.html ├── javascript.svg ├── main.js ├── node_modules │ ├── bootstrap │ └── vite ├── package.json ├── package-lock.json ├── public │ └── vite.svg ├── src │ ├── index.html │ ├── js │ │ └── main.js │ └── scss │ └── styles.scss ├── style.css └── vite.config.js
Viteのコンフィグ
先ほどのコマンドで作成したvite.config.jsファイルがテストサーバーの起動時に読み込まれるファイルになります。中身が空っぽなので、このファイルにコンフィグを書いていきます。
ここで注意しておきたいのがpathのインポートの仕方です。const path = require(‘path’)でも良いですが、package.jsonの”type”: “module”を削除する必要があります。ES6の書き方でimportを使う方がキレイだと思いますが個人の好みでどうぞ。
//const path = require('path')
import * as path from 'path'
export default {
root: path.resolve(__dirname, 'src'),
server: {
port: 8080,
hot: true
}
}
次に、先ほど作成したsrc/index.htmlに下記の様に書きます。デフォルトのルート直下のindex.htmlは削除してOKです。
src/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap w/ Vite</title>
</head>
<body>
<div class="container py-4 px-3 mx-auto">
<h1>Hello, Bootstrap and Vite!</h1>
<button class="btn btn-primary">Primary button</button>
</div>
<script type="module" src="./js/main.js"></script>
</body>
</html>
Bootstrapのインポート
では下記のようにvite.config.jsを書きます。これでbootstrapをインポートします。
// const path = require('path')
import * as path from 'path'
export default {
root: path.resolve(__dirname, 'src'),
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
},
server: {
port: 8080,
hot: true
}
}
次にsrc/scss/styles.scssを開きます。
このようにbootstrapのCSSをインポートしましょう。
// Import all of Bootstrap's CSS @import "~bootstrap/scss/bootstrap";
次に、Bootstrapで使うJavaScriptをインポートします。
src/js/main.jsに下記を追加しましょう。
// Import our custom CSS import '../scss/styles.scss' // Import all of Bootstrap's JS import * as bootstrap from 'bootstrap'
もし、プラグインごとに別々にインポートしたい場合は下記のように書いてもOKです。
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
では、テスト用サーバーを起動するとBootstrapのCSSも読み込まれたことが確認できましたね！
実際のコードはGitHubのリポから見てください。
お疲れ様でした。