【WEB開発】Vue.js開発環境を作ろう 導入編
執筆に至った経緯
需要が急激に高まりつつある技術だと感じたからです。
Vue.jsは流行の波に乗っている言語ではありますが、それだけでは学習するモチベーションには繋がらないと思いますので、記事の前半ではVue.jsのここが凄いを紹介できたらと思います。
後半でVue.jsの導入方法について紹介します。
個人的な意見
Vue.jsの環境構築方法は公式のリファレンスにもしっかり書いてあるのでそちらを読んで構築する方が良いと思ってます。
ただ、公式リファレンスの情報量の多さから目的の情報を探し出すことに苦労する人もいると感じたので執筆する事にしました。
最終的に読めるようになっていれば良いのです。
The Progressive Framework
出典：The Progressive Framework
Vue.jsそのものは小規模のSPAのViewライブライでしかありませんが、拡張性の高さにより大規模開発のニーズまでサポートする環境を提供してくれます。
シンプルなViewライブラリから、フルスタックフレームワークの柔軟性があり「The Progressive Framework」と謳っています。
この柔軟性こそが流行る理由だと思われます。
Vue.jsの豆知識 バージョンとコードネーム
Vue.jsのバージョンにはアニメ好きには刺さるコードネームが付けられています。
v0.9.0からコードネームが付けられるようになり、アルファベットの頭文字順でアニメの名前が付いています。
| リリース日 | var | コードネーム | 原作 |
|---|---|---|---|
| 2014.2.15 | v0.9.0 | Animatrix | アニマトリックス |
| 2014.3.24 | v0.10.0 | Blade Runner | ブレードランナー |
| 2014.11.7 | v0.11.0 | Cowboy Bebop | カウボーイビバップ |
| 2015.6.13 | v0.12.0 | Dragon Ball | ドラゴンボール |
| 2015.10.27 | v1.0.0 | Evangelion | 新世紀エヴァンゲリオン |
| 2016.10.1 | v2.0.0 | Ghost in the Shell | 攻殻機動隊 |
| 2016.11.23 | v2.1.0 | Hunter x Hunter | HUNTER×HUNTER |
| 2017.2.26 | v2.2.0 | Initial D | 頭文字D |
| 2017.4.27 | v2.3.0 | JoJo's Bizarre Adventure | ジョジョの奇妙な冒険 |
| 2017.6.13 | v2.4.0 | Kill la Kill | キルラキル |
| 2017.10.13 | v2.5.0 | Level E | レベルE |
| 2019.2.5 | v2.6.0 | Macross | 超時空要塞マクロス |
| 2020.9.18 | v3.0.0 | One Piece | ワンピース |
参考文献
導入方法
公式リファレンス
※Node.jsが導入されている事を前提として解説いたします。
導入方法は幾つかあります。
最小限の設定で webpack のビルドを作成する場合はVue CLIが推奨されています。
Vue CLI
導入も簡単ですぐにでもコーディングする環境を提供してくれるため、何か特別な理由がない限りはVue CLIを使う事になると思います。
- 大規模なシングルページアプリケーション開発の足場を素早く組むことができる
- モダンなフロントエンドワークフローのための、すぐに使えるビルド設定が完備
- ホットリロード、保存時のリント、本番リリースのビルドを数分で行える
Vite
Vue.jsを開発されたEvan You氏が開発したノーバンドルなルドツール。
この記事ではViteを使って導入する方法を紹介します。
特徴
- 開発時バンドル不要で動作するので、大規模プロジェクトでも初回起動が非常に早い
- HMR（画面の再描画無しにファイル変更をブラウザに適用してくれる機能）が、モジュールの総数と切り離されているため一貫して高速に動作する
とにかく動作が早く、開発者のストレスを減らしてくれます。
Viteの導入方法
前提としてnpmで導入します。
※ホントに難しい事はなく公式リファレンスにもある通りターミナルからコマンドを入力するだけになります。
## 導入コマンド
npm init @vitejs/app <プロジェクト名>
勿論フレームワークはvueを選択します
VueをTypeScriptで開発するかどうかですが、今回は通常のVueを選択します。
何故TypeScriptを選択しないか、これは好みですがTypeScriptで開発をしたい場合はReactをオススメします。
選択項目は２つで最小サイズのプロジェクトが完成します。
packageのinstall
このままだと動かないのでpackageをinstallしましょう。
プロジェクトディレクトリに移動し下記コマンドを実行します。
npm install
ローカル起動
実際に動くか確認してみましょう
npm run dev
設定がデフォルトのままであれば下記リンクからプロジェクトを閲覧する事ができます
http://localhost:3000/
プロジェクトの中身
ミニマムでシンプルな作りになっています。
ここから必要に応じて規模大きくできる柔軟性がVueの良い所です
Discussion