昨今のフロントエンドの技術の進歩スピードは目覚ましいですよね。
特に3大JavaScriptフレームワークと称される「React.js」「Vue.js」「Angular.js」は今やフロントエンドエンジニアであれば最低1つは扱えて当然の必須スキルと認識されてしまっていてキャッチアップが大変です。
(厳密に言うとReactはフレームワークではなくライブラリという扱いですが。。)
エンジニア界隈でもこの3大フレームワークの中でどれが一番好みか論争は絶えないですが僕個人は今回紹介するVue.jsが好きでよく使っています。
Vueはエンジニアになって割と最初の方に業務で扱う機会があってそれ以来も別の業務で扱う機会が多く何か運命的なものを感じている今日この頃です。
そんな中つい最近ですが2020年9月にVueがメジャーアップデートされてバージョン3（Vue3）がリリースされました！
それに伴ってVueCLIでアプリを作成する際の手順も多少変わっているので今回はプロジェクトを作成する所までを今更感ありますが解説しようと思います。
Vue3のアップデート内容などの概要は他サイトの方で詳しく解説してくれているので割愛します。
目次
環境構築
Vue.jsは通常のHTMLファイルにCDNを読み込んでjQuery的な使い方もできますが、それとは別でVue.jsのみを使用して開発ができるVueCLI(Vue Command Line Interface)というツールが提供されています。
こちらでは単一ファイルコンポーネント(.vueファイル)やSPA(シングルページアプリケーション)の構築などのJavaScriptフレームワークらしいモダンな開発が可能になるのでVue.jsの真骨頂を習得したいという方はこちらでプロジェクトを作成する事をおすすめします。
しかもプロジェクト作成時に対話形式で好みのオプションを選択できて自動でセットアップまでしてくれる親切設計です。
Node.jsとnpmのインストール
VueCLIをインストールするにはJavaScriptのパッケージ管理ツールであるnpmをまずインストールする必要があります。
そのnpmはNode.jsをインストールすれば付属してインストールされます。
↓からNode.jsがインストールできます。
開いたら左側に表示されているLTS版をダウンロードします。
LTSとはLong Term Supportの略で、長期の保守運用が約束されている推奨バージョンです。
ちなみにCurrentは色々と新機能が入っているけど安定動作は保証できない最新バージョンです。
ダウンロードしたらインストーラを起動して最後まで進めればNode.jsがインストールされるので、自然とnpmもインストールされます。
下記コマンドをターミナルで叩いてNode.jsとnpmのバージョンが表示されれば無事インストールは完了です！
$ node -v
v9.5.0
$ npm -v
v5.6.0VueCLIのインストール
無事npmをインストールできたので今後は本題のVueCLIをインストールします。
念の為ホームディレクトリに移動して移動してから行いましょう。
$ cd
$ npm install -g @vue/cliインストールが完了したら下記コマンドを叩いてバージョンが表示されるか確認します。
$ vue -V
@vue/cli 4.5.13vueCLIでVue3のプロジェクトが作成できるのはv4.5.0からなのでそれ以上のバージョンになっている事を確認しましょう。
これでVueCLIのインストールも完了です！
プロジェクトの作成
早速ですがVueCLIを使ってプロジェクトを作成してみましょう。
先程も少し触れましたが、プロジェクトを作成する際に対話形式で好きなオプションを選択することになります。
下記コマンドでプロジェクトを作成できます。
$ vue create vue-projectここから聞かれるオプションの選択について詳しく解説していきます。
Please pick a preset:
Vue CLI v4.5.13
? Please pick a preset:
❯ Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
Manually select featuresここではVue2のデフォルト設定かVue3のデフォルト設定か、自分で詳細設定するかを聞かれています。
詳細設定はせずに手っ取り早くVueプロジェクトを作成したい場合は
・Default ([Vue 2] babel, eslint)
・Default (Vue 3) ([Vue 3] babel, eslint)
のどちらかを選択しましょう。
・Manually select features
を選択すると次の質問が表示されます。
今回は詳細設定を解説したいのでこちらを選択します。
Check the features needed for your project:
? Check the features needed for your project:
❯◉ Choose Vue version
◉ Babel
◉ TypeScript
◉ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
◉ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testingここではプロジェクト作成と同時にインストールしておきたい機能について聞かれています。
現時点で使うつもりが無くても将来的に使う予定があるのであれば、この時点でインストールしておくと後から導入に手間取る事が無いのでおすすめです。
Choose a version of Vue.js that you want to start the project with (Use arrow keys)
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 2.x
3.xここではプロジェクトで使用するVue.jsのバージョンを聞かれています。
従来のOptionsAPIでの記述がしたい方は2.xを、最近アップデートされたCompositionAPIを使った記述がしたい方は3.xを選択しましょう。
今回は主題通りに「3.X」を選択しました。
Use class-style component syntax?
? Use class-style component syntax? (y/N)ここでは先程のCheck the features needed for your project:の質問の際にTypeScriptを選択した際に表示される質問です。（デフォルトではNoになっています。）
質問をそのまま和訳するとclass-styleのコンポーネント構文を使用しますか？という事になります。
class-styleとは、前のVue2.x系でTypeScriptを使用する際に使われていた記述方法で、vue-class-componentを各コンポーネントファイル(.vueファイル)にインポートして記述をしていました。
アップデートされたVue3.x系では、強力な型推論を利用できるobject-styleという新しい記述方法が使用できるので基本的にはNoを選択するのがおすすめですが、使いやすい方を選択しましょう。
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)ここでは簡単に言えばBabelを使用するかを聞かれています。
Babelとは、Node.jsで作られた新しい書き方のJavaScriptを古い書き方のJacaScriptに変換(トランスパイル)するためのツールです。
今のJavaScriptは頻繁にアップデートを繰り返していて、次々に新しい書き方のバージョンが出てきていますが、その実行環境であるブラウザの方がそのアップデートについて行けず対応が追いついていない事がしばしばあります。
例えば今JavaScriptはES2020というバージョンが最新ですが、IEなどの古いブラウザになるとES2015以上のバージョンでは動作してくれません。
こういった古いブラウザでの動作を想定するのであればYesを、想定しないのであればNoを選択するといった感じです。
(Yesを選択した場合はBabelの設定を記述できるbabel.config.tsファイルが作成されます。)
Use history mode for router? (Requires proper server setup for index fallback in production)
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)使用するURLの形式で、historyモードかhashモードを選ぶ事ができます。
historyモードとはhttp://localhost:8080/indexの様な普段使用している一般的なURLの形式です。
一方hashモードはhttp://localhost:8080/#/indexの様なURLの間に#が入る形式です。
詳しくは↓の記事が参考になるので見てみてください。
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Styluscssのプリプロセッサは何を使用するかを聞かれています。
Sass/SCSSが2種類ありますが、これはどちらもほぼ同じと考えていいので好きな方を選択しましょう。
Pick a linter / formatter config:
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
TSLint (deprecated)リンターとフォーマッターは何を使うかを聞かれています。
ESLint + Prettierが王道だと思いますが、好きなやつを選択してください。
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
◯ Lint and fix on commitリントをどのタイミングで実行するかをきかれています。
選択肢はファイルセーブ時とコミット時が選択できます。
両方とも選択できますが、基本的にセーブ時のみで問題ないと思います。
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.jsonbabelやESLintの設定をどのファイルに記述するかを聞かれています。
それぞれ専門の設定ファイルを使用する場合はIn dedicated config filesを、jsonファイルで管理する場合はIn package.jsonを選択します。
Save this as a preset for future projects?
? Save this as a preset for future projects? (y/N)ここまでの質問での設定を保存しておくかを聞かれています。
保存を選択すると次回のvue createコマンド実行時に最初の質問で同じ設定を適用するかを聞いてくれます。
同じ設定で次回もプロジェクトを作成したい場合は保存しておくといいでしょう。
↓の感じで表示されれば無事にプロジェクトが作成されています。
...
🎉 Successfully created project vue-project.
👉 Get started with the following commands:
$ cd vue-project
$ npm run servelocalhostにアクセス
プロジェクトを作成したら開発用サーバーにアクセスしてみましょう。
$ cd vue-project
$ npm run serveサーバーが起動できたらhttp://localhost:8080/にアクセスしてみます。
こんな画面が表示されていればVueCLIでのプロジェクト作成完了です。
お疲れさまでした！
おわりに
VueCLIを使えば質問に答えるだけで最適化されたプロジェクトを自動生成してくれるので楽でいいですね。Vue3になって今後さらに伸びていくのが期待されるので今から皆さんもVueライフを始めてみませんか？
