Vue.js基礎～Vue CLI～
こんにちは。前回からだいぶ間が空いてしまいましたが…
今回はVue CLI についてまとめてみました。
後半コンポーネントの概念とも絡んできて勉強していてチンプンカンプンでした。
Vue CLI がとにかく理解が及ばない程すげーことを裏でやってんだな～とひとまず置いておくことにしました。
自分なりにわかりやすくまとめたつもりですので、誰かの参考になれば幸いです。
Vue CLI とは？
CLI は Command Line Interface の頭文字を取ったものです。
ターミナルで操作するものになります。(よく映画のハッカーとかが文字だけの画面を操作しているアレです。)
主に大規模なアプリ開発を行う際に便利な機能となっています。
使用する理由は本当にたくさんあるのですが、５つに絞って書いていきます。
・ファイルの分割
実際の開発では、HTML、CSS、JavaScriptなど言語ごとにファイルを分けたり、後述するコンポーネントなど沢山ファイルを分割して進めていきます。
その分割したファイルを最終的に１つにまとめる作業があるのですが、Vue CLIを使えばとても簡単に行えます。
・最終的なコードの軽量化
最終的にサイトやアプリを公開(デプロイ)する時のコードは、開発中にメモしたコメント、改行やスペースは不必要です。
Vue CLI はデプロイ時に不必要なものをすべて消し、１行のコードにしてくれます。(ミニファイ化ともいわれます。)
・Babel、TypeSclipt、ESLint などの plugin の使用
ここでの各 plugin の機能の説明は割愛しますが、簡単に言うと、誰かが作った開発に便利な拡張機能の使用が容易にできるということです。
・HMR(Hot Module Replacement)
ブラウザ画面の再描画(リロード)すること無しにコードの変更をブラウザに適用してくれる開発ツールのことを言います。
手間が減って開発が楽になります。
・.vue、TS、SCSS、Pug、ES6 などの使用
それぞれHTML、CSS、JavaScriptの別な書き方のようなものですが、自分で使用するならば、初期設定して実際に書いて、最後にファイル変換する作業があります。
Vue CLI はこの初期設定とファイル変換を自動でやってくれます。
このようにVue CLI を使用することで、開発の準備や公開する前の手間を省いて、ただコードを書くだけでアプリができてしまいます。
使わない手はないということなのです。
インストールと初期設定
CLI を使用します。
僕は Windows で開発をしているので powershell を利用していますが、エディタのターミナルでもいいし、Mac なら iTerm2 などなんでもよいと思います。
まず前提条件として Node.js がインストールされている必要があります。
Vue CLI のインストールには npm (Node Package Manager)を使用します。
npm について少し解説すると、その名の通りNodeパッケージを管理するものです。
プロジェクトになにかオープンソースのソフトをいれる、または削除することができます。
Ruby の Gem や Python の pip、Mac の brew、Linux の yum と同種のものです。
$npm install -g @vue/cliこれでインストール完了です。
基本的にグローバルインストールがよいと思います。
これによりvue というコマンドが使用可能になりました。
次にプロジェクトを作成します。
$vue create プロジェクト名ここからいろいろ質問されるので答えていきます。
? Your connection to the default npm registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation? (Y/n)n + Enter でよいです。
主に中国で開発をしているエンジニアに向けた質問です。
中国ではファイアウォールという厳しいネット検閲が行われており、国外への接続規制がされています。
npm の管理サーバーは中国国外にあるため通常の方法だとうまく動かない場合があるみたいです。
それを中国国内にnpmのミラーサイトを作ってそこから管理するようにしたみたですね。
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
Manually select features 方向キーで操作しEnterを押します。defaultでよいと思います。
pluginは何を使いますか？という質問ですね。
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier ESLintの設定の質問です。
・ESLint with error prevention only (エラー防止のみ)
・ESLint + Airbnb config（Airbnb設定）
・ESLint + Standard config (標準設定)
・ESLint + Prettier（ESLintとPrettierの併用)
お好きなものを選択してください。
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
◯ Lint and fix on commitいつESLintを走らせるかの設定です。
方向キーで対象を移動してスペースで選択or未選択を切り替えます。
・Lint on save (保存時にLint実行)
・Lint and fix on commit (コミット時にLint実行)
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json BabelやESLintなどの設定の配置箇所をどうするかの質問です。
・In dedicated config files (専用の設定ファイル内)
・In package.json (package.json内)
? Save this as a preset for future projects? (y/N)今までの設定をプリセットとして保存しますかという質問です。
これでプロジェクトの作成が進んでくれると思います。
🎉 Successfully created project プロジェクト名.
👉 Get started with the following commands:
$ cd プロジェクト名
$ npm run serveこの表示が出たら成功です。
コマンドを打って始めましょうみたいなことが書いてあるので打ちます。
$ cd プロジェクト名
$ npm run serveこれで開発用のサーバーが動きます。
以下出力結果です。
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.3:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.ブラウザでhttp://localhost:8080/にアクセスします。
このようにウェルカム画面が表示されます。
これは先程説明したリロードなしでコードの変更を反映してくれるものです。
これを使用しこの先開発を行っていくことになります。
Vue CLI で作成したファイルを見てみる
早速見ていきます。
・node_modules
とんでもなく膨大な量のファイルが現れると思います。
ここには Node.js が管理するパッケージの数々が入っています。
ここに入っているアプリなどを使ったり使わなかったりして我々は開発していくということになります。
したがってここは開発中に触れることはほぼないと言えます。
・.gitignore
これは Git のトラッキングの対象外とするファイル or ディレクトリを指定するファイルになります。
必要な時に適宜変更をしていきます。
・babel.config.js
簡単に言うと Babel の設定ファイルです。
プリセットとしてすでに定義されているので、ここも必要時に適宜変更を加えるだけのものです。
・package-lock.json と package.json
このアプリの説明書のようなものです。
中では名前とかバージョンとかアプリの色々な情報が書かれています。
npm install や npm uninstall すると勝手に書き換えてくれるので、ここも開発ではほとんど触りません。
この２つのファイルは依存関係になっており、package.json が説明書本体、package-lock.json は「package-lock」の通りパッケージのバージョンを固定 (lock) しています。
開発はチームで行うことが多く、メンバー各々のライブラリのバージョンが異なっていたらヤバいことは想像ができると思います。
なのでバージョンを固定して開発できるようにこうなっているわけです。
ファイルの中身に関しては割愛します。
・public
ここは主に静的なファイルを置くところです。
前で Vue CLI はデプロイ時にミニファイ化をしてくれると説明したと思いますが、この中のファイルは適応外になります。
つまり最終的には、次に見る src が１つのファイルに変換されてこの中の index.html に突っ込まれる形になります。
なのでここも必要に応じてファイルを追加したり、変更を加えたりすることになります。
・src
開発で一番使うのがこのフォルダになります。
assets は主に CSS や画像ファイルを置くところになっています。
components はコンポーネントを置く場所です。
コンポーネントについては別で記事を書くことにします。
.vue と main.js は次項で詳しくまとめますが、src が１つのファイルに変換されるという話をしましたがそれが main.js です。
これらはマトリョーシカのような構造になっており、main.js は App.vue を参照し、App.vue は components/HelloWorld.vue とassets/logo.png を参照しいます。
つまりすべてmain.jsにつながっているわけです。
かなりざっくりですが作成されたファイルを解説してみました。
次は.vue と main.js に焦点を当てて見ていこうと思います。
.vue ファイルと main.js
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')一行づつ解説していきます。
import Vue from 'vue'vueをインポートしています。
これでmain.jsでVueが使えるようになりました。
Vue.config.productionTip = falseプロダクション用の助言みたいなものを消しています。
試しにtrueにしてみます。
ブラウザのコンソールに画像のようなものが出現します。
邪魔なので消しておきましょう。
new Vue({
render: h => h(App),
}).$mount('#app')$mount はelプロパティと同義です。
new Vue({
el: '#app'
render: h => h(App),
})このように書き換えられます。
ここの #app は public\index.html から参照しています。
render: h => h(App)これはES6の書き方です。
render: function(h) {
return h (App)
}ES5だとこう書きます。
引数のAppは App.vue というコンポーネントのオブジェクトのことです。
つまりどういうことか…僕もまだわかっていません。
render 関数はオブジェクトも引数にとれることは理解しましたが、コンポーネントのオブジェクト、つまり name: 'App' のことなのかな？と考えているんですが果たしてあっているのか…
わかったら編集しようと思います。
import App from './App.vue'App.vueというコンポーネントを読み込んでいます。
App.vue
.vueと表記されているファイルを総じて単一ファイルコンポーネントと呼びます。
コンポーネントについては深すぎて書ききれないので次回に回しますが、見てほしいのはその構造です。
<template>
...
</template>
<script>
...
</script>
<style>
...
</style>３つの部分に分かれています。
これらはどれもあっても無くても機能します。
３つ必ず書かなくてはいけないというルールーはないということです。
次回はコンポーネントについてまとめていきます。
この記事が気に入ったらサポートをしてみませんか？