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


[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3001224/54e2c3f2-6672-0d79-89b5-b06d20ec7430.png)](https://asameshicode.com/vite-bootstrap/)


今日は、JavaScriptでウェブ開発するにあたり、最速でコーディングに入れる環境を作ります。

現在のフロントエンド開発ではReactやVueや欠かせないですが、これを使わずにVanilla JavaScriptで開発をしたいときに有利です。

npmを使うのでライブラリを管理したい場合に最適になります。

さらに[Bootstrapのセットアップ](https://getbootstrap.com/docs/5.3/getting-started/vite/)の仕方も紹介するのでプロジェクトをセットアップしたのちにすぐにコーディングに取り掛かることができますね。


## **今日の環境**



* npmがインストールされていること
* JavaScriptがなんとなくわかる程度
* CSSがなんとなくわかる程度


## **Viteとは**

Viteは[Vueの創生者Evan You](https://github.com/yyx990803)とそのチームが作った最新のビルドツールです。**特徴としてはWebpack、Gulp、Parcelのバンドリングで使うパッケージがデベロップメント用のサーバーを起動する際（npm start)でかなり遅くなる原因を起こしていたものをすべて取り除きました。**さらにコードの量が多くなるにつれ再度バンドルしなおすのでその分時間がかかっていました。

Viteの強みはその速さになります。

もし、ReactやVueを使いたい方はこちらの記事を参考にしてください。



* [ReactをViteとTailwindでセットアップする](https://asameshicode.com/setup-react-vite-tailwind/)
* [ViteでReactを始めよう](https://asameshicode.com/vite-react-setup/)
* [Viteを使ってVueを始めよう](https://asameshicode.com/lets-use-vite/)
* [Vite + AntDesign でVue3を始めよう](https://asameshicode.com/vite-antdesign-vue/)


## **Bootstrapとは**

Bootstrapはブートストラップといいます。

HTMLにBootstrapのクラスを入れることで魔法のようにHTMLにCSSが付けられることができます。

Bootstrapは有名なので使っておいて損はありませんね。

では早速プロジェクトの作成にかかります。


## **Viteのセットアップ**

では下記のコマンドでViteを使ってJavaScriptのプロジェクトをセットアップします。


```bash
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です。


```bash
npm i --save bootstrap @popperjs/core
```


次にSaasをインストールします。


```bash
npm i --save-dev sass
```


これで必要なライブラリはインストールできました。


## **プロジェクトのファイル構成**

プロジェクトのルート直下のcounter.jsは削除してください。

次に下記のコマンドで必要なフォルダとファイルを作成します。


```bash
mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
```


プロジェクトのファイル構成はこのようになります。

※ルート直下のindex.htmlは削除することになります。


```bash
├── 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を使う方がキレイだと思いますが個人の好みでどうぞ。


```bash
//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


```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をインポートします。


```javascript
// 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をインポートしましょう。


```css
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```


次に、Bootstrapで使うJavaScriptをインポートします。

src/js/main.jsに下記を追加しましょう。


```js
// Import our custom CSS
import '../scss/styles.scss'
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```


もし、プラグインごとに別々にインポートしたい場合は下記のように書いてもOKです。


```js
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```


では、テスト用サーバーを起動するとBootstrapのCSSも読み込まれたことが確認できましたね！



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3001224/de8fb0dd-725e-47e1-0a8b-7b2c2412aec3.png)


実際のコードは[GitHubのリポ](https://github.com/TraitOtaku/vite-bootstrap-boilerplate)から見てください。

お疲れ様でした。