こんにちわ、ちょっと株式会社 エンジニアのhanetsukiです。
簡単なポートフォリオサイトを作るのに奮闘している方はいらっしゃいませんか？
シンプルなwebページであればあるほど、HTMLとCSSとちょっとjQueryで装飾する、みたいな環境要件で十分だったりします。
近年ではフレームワークだなんだと、いろいろなものが便利なものが出回っていますが、
1ページのサイトを作る上ではオーバースペックなものばかりです。
ですが、便利なものに慣れてしまった体はなかなか、不便な環境に身を置くのを拒みがちです。（CSSファイル編集してF5でブラウザをリロードとか...etc）
そんな時に彗星のごとく現れたのがViteという、ビルドツールです！
今回実施した環境はGitHubリポジトリに上げてあります。
興味のある方、環境だけを見たい方はこちらをご覧ください！
Viteとは？
ReactやVueをサポートする高速なビルドツールです。
開発時はバンドルが不要なので、開発サーバーの起動が早い
HMRが、変更分のみを適応するため、モジュールの総数に関係なくかなり高速。
といった利点があるようです。
HMRとは？
Hot Module Replacement (HMR)はwebpackの提供する仕組みで、画面の再描画すること無しにJSの変更をブラウザに適用してくれる開発ツールです。再描画無しにと言うのは、「F5とかリロードボタンを押さなくても自動的に再描画してくれますよ」ということではなく、文字通り変更したモジュールのみを置き換えてくれます。
引用 - https://qiita.com/haradakunihiko/items/40486ec2b6b9aea119bb
HMRは、webpack-dev-serverなどが有名どころですが、webpack環境をサクッと構築するCLIツールは私調べ見つかりませんでした。今回は、このHMRの恩恵を受けるべくモダンな環境で構築していきます。
環境構築
私のPCの環境
PC: M1 macbook Air
Node.js: v16.13.1
yarn: v1.22.17
1. yarn create vite を実行
yarn create vite
2. Project name
今回作成するプロジェクト名を入力します。
（例：vite-jquery-example）
3. Select a framework
vanillaを選択します
4. Select a variant
vanillaを選択します
5. Done. Now run
出現したメッセージに記載してあるとおりのコマンドを実行します。
cd {プロジェクト名} # 2. で記述したプロジェクト名
yarn
yarn dev
ローカルサーバーが無事起動したかと思います。
ここまでの作業で、バニラJSの開発環境の構築が完了しました。
jQueryのCDNを読み込む
jQueryのCDNを読み込みます。CDNはこちらのリンク先にあります。
コピーしたCDNのリンクは、Viteで作成した環境のindex.htmlの<head>タグの中に起票します。
たったこれだけで、jQueryを扱うことができます。
jQueryの導入の手軽さは残したまま、快適な環境で作成できるのは素晴らしいですね！
バニラJSからjQueryに切り替えた際の変更点は、こちらをご覧ください。
最後に
いかがでしたでしょうか？
管理が行き届いてない昔作ったサイトなどもViteであればサクサク環境を整えることができたりと、
思い出のサイトのブラッシュアップのきっかけになると思います（笑）
ちょっと社では、モダンなwebサイトやwebサービスに携わるフロントエンドエンジニアを募集しています。
Jamstack や Gatsby , Next.js という単語に聞き覚えのある方、是非一緒に働いてみませんか？
web制作の現場を一緒に盛り上げていきましょう！
ちょっと株式会社（chot-inc.com）のエンジニアブログです。 フロントエンドエンジニア募集中！ カジュアル面接申し込みはこちらから chot-inc.com/recruit/iuj62owig
Discussion