概要
JavaScript や TypeScript などモダンなプログラミング言語を使って、Web アプリを開発するぞ！というときにまず考えることは、Vue を使うか React を使うかということだと思います。
私はもっぱら React 派で、プロト開発でも Web ページでもなんでもまずは React または Next.js で開発を開始します。
しかし、Vue を使う方も多くいて、むしろ自分の周りのソフトウェア開発者はほとんど Vue で開発を行っている人が多いです。
ふと自分も Vue について学んでみようと思い、いくつか OSS など情報を漁っていたところ、Vue には 高速で動作するビルドツール Vite というものがあることを知りました。
Vite について内容はあまり触れませんが、開発時にはバンドルが不要であるため開発サーバーの起動が早いということや、起動中に修正したソース部分のみをブラウザに反映させるなどの機能があるため、開発体験がとても心地よく高速に開発できるというものです。
せっかくなら、ビルドツールは Vite、Web アプリ開発フレームワークは Vue3 ということで開発を開始してみたいと思ったのですが、一からプロジェクトを準備するのは大変だなと思い、GitHub 上の OSS で誰かこのあたりのテンプレートを用意している方はいないかなと探してみたところ、見事いらっしゃいました！
そこで今回紹介する OSS は、ビルドツールは Vite、Web アプリ開発フレームワークは Vue3 という開発環境を提供してくれる「vue-forge-boilerplate」を紹介します。
こちらは GitHub から リポジトリをクローンするだけで、Vite を使った Vue3 開発をすぐに行えるというものになります。
さっそく見ていきましょう。
利用手順
以下のコマンドを利用してリポジトリをクローンしましょう。
git clone https://github.com/vueschool/vuejs-forge-boilerplate.git
クローンした後は、リポジトリディレクトリへ移動し、npm install コマンドをして必要な Node モジュールをインストールし、npm run dev コマンドで開発サーバーを起動させて動作確認してみましょう。
cd vuejs-forge-boilerplate npm install npm run dev
開発サーバーを起動させ、http://localhost:3000/ へブラウザからアクセスして以下のような画面が表示されたら、動作確認完了です。
使用感
実際に自分もローカル環境で開発サーバーを起動させてみました。
Vite は起動が早いという言われるだけあって、とても速いなと感じました。
その他にも、本リポジトリではルーターの設定がすでにされていたり、Cypress を利用した自動テストの設定・準備もされているので、こちらをクローンするだけですぐにでも Vue3 を利用した開発が行えそうです！
package.json を見てみると、Vite の設定がすでにされているので、特別こちらで何か操作をしなければならないということもなくていいですね。
まとめ
今回は、ビルドツールは Vite、Web アプリ開発フレームワークは Vue3 という開発環境を提供してくれる「vue-forge-boilerplate」を紹介しました。
OSS 自体はとてもシンプルですので、Vite を用いた Vue3 開発をこれから始めたい方にとって、こちらの OSS は良いテンプレートになるのではないでしょうか。
私自身も、こちらの OSS を利用してさっそく Vue3 の勉強と Web アプリの開発を始めようと思います！
ライセンス
記載はありませんでした。
リンク
