【もりけん塾】Viteハンズオン勉強会のまとめ

今日は、もりけん塾で勉強会のあったビルドツールのViteについてです。

こんにちは。Webコーダーのはるです。

所属しているもりけん塾のViteハンズオン勉強会で学んだことをアウトプットします！

【もりけん塾】viteハンズオン勉強会のまとめ
- Viteとは？
- Vite課題をやってみる
あとがき

【もりけん塾】viteハンズオン勉強会のまとめ

もりけん先生(@terrace_tec)のハンズオン資料をもとに課題を進めながら学習しました。

勉強会のハンズオン資料はこちらです。

handsonFrontend/vite/Work.md at master · kenmori/handsonFrontend

フロントエンドエンジニアを目指す方へのハンズオン資料. Contribute to kenmori/handsonFrontend development by creating an account on GitHub.

Vite公式のConfigページも参考にしました。

Configuring Vite

Next Generation Frontend Tooling

Viteとは？

最近、注目されているフロントのビルドツール
Vue.jsを開発されたEvan Youさんが作ったもの
サーバーの起動時間がとても早い

① “esbuild” というバンドラーを使用して、依存関係を事前にビルドする。これは、”Go”という言語で書かれているため、JavaScriptベースのバンドラーに比べて10~100倍速い

（esbuildのドキュメントより：”three.jsライブラリを10個まとめたプロダクションバンドルを、minificationやソースマップを含むデフォルトの設定でゼロから行う場合の時間”)

②よく更新されるソースコードは、ネイティブESMを通してコードが提供される
先生のハンズオン: ”ブラウザーがバンドラーの仕事をする”とあります

→このように、①と②を分けて最初に処理を行うことで、起動時間が大幅に速くなった

VueやReactなどのフレームワークの開発環境を整えることができる
Vite：ヴィット、ヴィートと読む

バンドルとは？
Viteについて調べているときに「バンドル」という言葉が出てきたので調べました。

・バンドルは英語で「束」という意味があり、Web界においては「プログラムを書いた複数のファイル(モジュール)を一つにまとめること(またはまとめたもの)」を指します。機能ごとに分かれたファイルのことをモジュールと呼びます。
・複数のjsファイルを読み込むより、まとまった1つのjsファイルを読み込む方が、ブラウザのリクエスト回数が減るので表示速度が速くなります。
・バンドルをしてくれるツールのことをバンドラーといいます。←Webpackなど

What is Vite? An Overview of the New Front-end Build Tool

Need a simpler way to set up a front-end dev environment? With Vite, you can be up and running with Vue, React and JS in...

JavaScriptのバンドルとは何か？ | Promapedia（プロマペディア）

バンドルとは、コーディングを行う際に、複数のファイルを１つのファイルに出力することを言います。

Vite課題をやってみる

もりけん先生が用意してくださった、ハンズオン課題で練習してみました。

課題の流れ

・GitHubと連携させたディレクトリにVite環境を用意
・deploy.shファイルを作成して実行（シェルに指示を出す）
→GitHub Pagesにデプロイ

復習を兼ねてまとめてみます。

Viteのプロジェクトを作成

①ターミナルでプロジェクトを作成したい場所に移動します

cd ~/Desktop

②Viteを立ち上げます

npm init @vitejs/app

→ここで、いくつか質問に答えます。

Project name: 作成するプロジェクト(ディレクトリ)の名前
framework、variant: vanilla (フレームワークはなしで、今回はvanillaを選択)

この課題でのproject nameは「vite-site」に設定。

ローカルサーバーの作成

③作成したプロジェクトへ移動

cd vite-site

④上図の最後に書いてある手順に従って

npm install

npm run dev

developサーバーが作成されました。なんと0.38秒で準備できました😂

⑤下記アドレスでローカルサーバーが確認できます（ライブリロードも既に機能する🎉）

http://localhost:3000/

GitHubにリポジトリを作成→push

⑥作成したViteのディレクトリ名と同じ「vite-site」でリモートリポジトリを作成。

⑦リモートリポジトリを作成後に出てくるコマンド通りに、ローカルとリモートリポジトリを紐づけてpushする。

git remote add origin　リモートURL
git branch -M main //master→mainブランチへ変更
git push -u origin main

pushしたディレクトリ↓

shを作成する

deploy.shというファイルを作成して、下記をコピペする。（詳しくは公式のこちら）

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# if you are deploying to https://<USERNAME>.github.io/<REPO>
########下記、自分のgithubアカウント名と作ったリポジトリ名に置き換えてください########
git push -f git@github.com:kenmori/vite-site.git master:gh-pages

cd -

##下記、自分のgithubアカウント名と作ったリポジトリ名に置き換えてください########の部分を書き換える

########下記、自分のgithubアカウント名と作ったリポジトリ名に置き換えてください########
git push -f git@github.com:アカウント名/リポジトリ名.git master:gh-pages

`vite.config.js`を作成

公式サイトによると、

コマンドラインからviteを実行すると、Viteは自動的にプロジェクトルート内のvite.config.jsという設定ファイルを解決しようとします。

とあります。

基本的な設定ファイルを作成してみます。先生のハンズオンを参考に作成しました。

/* vite.config.js */

import { defineConfig } from 'vite'

export default defineConfig({
  base: "/vite-site/" //githubで作ったリポジトリ名
})

deployする

作成したshをプロジェクト直下で実行する

sh deploy.sh

shとは？
たくさんある中の最も基本的なシェル。シェルは、人間とPCの間に入って人間がPCに指示したい内容を伝えてくれるプログラムのこと。人間がPC内部と直接やりとりすることはできないのだと知りました。人間の指示→シェル→PCというように、シェルがいないと指示が届かないのですね！
参考：Shellとは（https://wa3.i-3-i.info/word11219.html）、shとは(https://wa3.i-3-i.info/word11785.html)

今回は、deploy.shというファイルに「ビルド→デプロイをする」という指示を書いて、シェルに伝えました！