🏃

jQueryで制作するならViteを使ってみよう

2022/10/21に公開


こんにちわ、ちょっと株式会社 エンジニアのhanetsukiです。
簡単なポートフォリオサイトを作るのに奮闘している方はいらっしゃいませんか?

シンプルなwebページであればあるほど、HTMLとCSSとちょっとjQueryで装飾する、みたいな環境要件で十分だったりします。

近年ではフレームワークだなんだと、いろいろなものが便利なものが出回っていますが、
1ページのサイトを作る上ではオーバースペックなものばかりです。

ですが、便利なものに慣れてしまった体はなかなか、不便な環境に身を置くのを拒みがちです。(CSSファイル編集してF5でブラウザをリロードとか...etc)

そんな時に彗星のごとく現れたのがViteという、ビルドツールです!

今回実施した環境はGitHubリポジトリに上げてあります。
興味のある方、環境だけを見たい方はこちらをご覧ください!

https://github.com/tsuki-lab/vite-jquery-example

Viteとは?

ReactやVueをサポートする高速なビルドツールです。

開発時はバンドルが不要なので、開発サーバーの起動が早い
HMRが、変更分のみを適応するため、モジュールの総数に関係なくかなり高速。
といった利点があるようです。
https://vitejs.dev/guide/features.html

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 という単語に聞き覚えのある方、是非一緒に働いてみませんか?
https://herp.careers/v1/chot

web制作の現場を一緒に盛り上げていきましょう!

chot Inc. tech blog

Discussion