はじめに
使ってみたシリーズ「Vue.js」編になります
前回は同じくフロントで使われるフレームワークのReactを使ってみました
色々調べてみたり聞くところによるとReactは遅いがVueは軽くて早いという噂を耳にしました
なので動作が早いものはVue、機能が豊富なReactという認識になりつつあります(知らないことが多いので、本質的には違う部分もありそうですが)
とりあえず触ってみないと話がわからないということで、Vueの環境構築を行っていきたいと思います
環境構築
ローカルの環境はMacBook Air(M1, 2020)です
1. Node.jsをインストール
こちらについてはReactの環境構築の記事内でも行っていますので、そちらを確認していただければと思います
2. Vueプロジェクトの作成
基本的にはVueの公式ページを参考にすれば問題なく進められると思います
(https://ja.vuejs.org/guide/quick-start.html#creating-a-vue-application)
Vueのプロジェクトを作成したいディレクトリに移動して以下のコマンドを実行します
npm create vue@latest
# 以下のようなオプションの選択文が表示されると思います(オプションについて特にわからなければNoで良いとのこと)
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes
オプション内のざっくり理解
Add TypeScript? → TypeScriptを追加するかどうか
Add JSX Support? → JSX（JavaScript XML）を追加するかどうか
Add Vue Router for Single Page Application development? → ルーティング制御をするための公式プラグインを追加するかどうか
Add Pinia for state management? → 状態管理ライブラリを追加するかどうか
Add Vitest for Unit testing? → 単体テストツールを追加するかどうか
Add an End-to-End Testing Solution? → E2E Testを追加するかどうか
Add ESLint for code quality? → 構文解析ツールを追加するかどうか
Add Prettier for code formatting? → フォーマッターを追加するかどうか
Add Vue DevTools 7 extension for debugging? (experimental) →
Prettier
フォーマッター。js/ts以外にもhtmlとか色々対応してる。
今回僕は「vue-pra」というプロジェクト名で作ることにしました
無事にプロジェクの作成が完了した後は開発サーバーを起動します
cd vue-pra
npm install
npm run dev
すると「Local: http://localhost:xxxx/」と表示されると思います
実際にWebページで開いてみると以下のようにデフォルトのページが表示されます
おわりに
はい、ということでほぼvueの公式ページをなぞる形になりましたが、開発ページを開くところまでスムーズに行うことができました
やはり、最終的にはjsが書けなければ意味ないのでそこら辺が今後の課題になりそうだなと思いました