ViteとBootstrapで最速で開発しよう

今日は、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のリポから見てください。

お疲れ様でした。