【Vue.jsの基礎】Vue CLIで実践的に学ぶ方法！vue createでできたファイルを解説！ビルドとは？

html、css、jsは何となくわかるけどVue.jsを始めてみたいかた向けの記事です。
ブラウザで表示できるのは結局html、css、jsです。Vue.jsとはhtml、css、jsでの開発の手間を省くツールです。最後はビルドという工程によりhtml、css、jsに変換しています。そのことを頭において勉強すると理解しやすいと思います。ReactやVueで開発したファイルは、そのままではユーザーのブラウザで読み込めないというのがポイント。なので今までと同じユーザーのブラウザで読み込めるJavascriptに変換する工程がある。その変換する工程で出てくるのがwebpackやBabelなどです。Vue.jsを始めようと思ってネットで調べると今書いたwebpackやBabelなど難しそうな言葉がたくさん出てきて頭がこんがります。webpackやBabelなど、ほとんどのものは知らなくて大丈夫です。

さらに、いざ勉強し始めると文法的なことから入るので、どうやって実践的なものにつながるか分かりづらいです。理解する近道は、まずは手を動かす。サンプルを少しずつ変えるのがベスト。そのサンプルで1番いいのはデフォルトのサンプル。これの構造を解説し実際に簡単な変更をしてみます。
そのサンプルをベースにMicrosoft Learnのサンプルを作ります。モダンJavascriptを勉強しはじめると言葉の説明で嫌になってしまうので、まず使ってみてから深く調べればいいと思います。
VueCLIなしで学びたい方は、こちら↓↓↓

開発環境

Vue開発の流れ

1. Node.jsインストール
2. Vue CLIインストール　npm install -g @vue/cli
3. Vueプロジェクト作成 vue create ○○○○
4. コードを書く
5. 動作確認 npm run serve
6. ビルド（ユーザーのブラウザで動くHtml、CSS、JSに変換）npm run build

2，3，5，6は1行のコマンドだけです。順番に説明していきます。

1、Node.jsインストール 2、Vue CLIインストール　

Vue.jsを使うためにはNode.js（サーバーサイド用のJavascript）が必要です。Node.jsはサーバーサイドのライブラリなのでローカルでサーバーを立ち上げる必要があります。
何でサーバーサイド？また難しいことしてると思ってしまいます。「サーバーを立ててNode.jsをインストール」という言葉で難しく感じると思いますが開発環境を作るだけでNode.jsが何かは知らなくてもだいじょうぶです。私も詳しく知りません。

自分のパソコンで開発環境準備する場合

DockerやAnacondaを使った仮想環境を構築する場合はこちらの記事を参考にしてください。

【Docker】Windows11でプログラミング環境構築（Python、Django、Vue）

パソコン買ったのでプログラミング環境を整えました。その様子です。Python、Django、Vueの環境を設定していきます。Docker導入でハマった点と解決策をご紹介します。Dockerやubuntu使うの今回が初めての私がネットで調べ試...

kikuichige.com

2022.10.29

上記以外は自分のパソコンにVueの開発環境を構築する方法は調べてください。その際CDNではなくVue CLIで動かす方法で準備してください。また３、「Vueプロジェクト作成 vue create ○○○○」でインストールするものを選択できますが、こちらの記事のように選択してください。必要ないものまでインストールされ本記事の解説と異なってしまいます。自分のパソコンにインストールした場合このマークが出せればいいです。

PaizaCloudで開発環境準備する場合

私はストレージがすくないパソコンを使っていたとき自分のパソコンにインストールするのではなくWEB開発環境PaizaCloud（Web開発環境）を使用してました。すぐ用意できます。（ただし無料なので使いずらいことも多い）
今回はPaizaCloudを使う手順で説明しますが自分のパソコンに開発環境を用意した場合でも最初が違うだけで基本的に同じです。

PaizaCloudにログインします。
新規サーバー作成
サーバー名　適当な名前を入力
・Web開発:Node.jsを選択
新規サーバー作成
もし503server　Temporarily　Unavailableや説明の画面が出てたら、使わないのでそのWindowを閉じる。

左にあるターミナルアイコンをクリック
Vue　CLIをインストールします。
npm install -g @vue/cli

目次へ

3、Vueプロジェクト作成 5、動作確認

プロジェクトを作成（frontendはプロジェクト名です。自由に決めてください）
vue create frontend
以下のように出たとき［Vue 3］または[Vue 2]にカーソルキーで変更してEnterします。この記事のサンプルを作る場合は［Vue 3］を選択してください。
Vue CLI v5.0.8
? Please pick a preset:

❯ Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

この次もuse　yeanではなくuse　npmにしてEnter

frontend/vue.config.jsというファイルがあります。
PaizaCloudの場合、このファイルを以下のように変更しないと立ち上げたときInvalid Host headerと出ます。（～allowedHosts: “all”,～の部分）
publicPathの設定は、ビルド後に出来上がったindex.htmlとcss、jsの位置関係が正しくなるように相対パス./にしています。これをやらないとビルド後のindex.htmlを表示してもパスがあってないので画面が真っ白になります。ビルドしないのであれば必要ありません。

vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})
module.exports = {
  devServer: {
    allowedHosts: "all",
  },
  publicPath: './',
}
ディレクトリ移動
cd frontend
サーバー起動
npm run serveで動作確認できます。
8080アイコンクリックでVueの画面が確認できます。
この画面がデフォルトのサンプルコードを動かした画面になります。

目次へ

６、ビルド

VueをCTRL+Cで停止し
npm run build
ビルドするとfrontend/distディレクトリにhtmlとjs、cssファイルができています。
index.htmlをブラウザで開いてみてください。PaizaCloudの場合はindex.htmlを右クリック「ブラウザで開く」をクリック。（ダブルクリックするとエディタで開かれてしまう。）

するとさっきとまったく同じものが表示されます。これで分かることはビルドしてできたものはhtml、cs、jsです。また開発中npm run serveで表示させたものも同じ。ということは、さっきもサーバーでビルドしたものを見ていたことになります。ここでなぜサーバーが必要なのかを考えるとビルドしてブラウザに送るという仕組みを作りやすかったからサーバー+Node.jsが必要になったんだと思います。つまりVue.jsにおいてサーバーの役目は開発ツールを作りやすかったのでこうなっただけだと思います。

distとはdistribution（配布）の略です。このdistフォルダの中身html、css、jsをサーバーにアップロードすればこういうふうに公開もできます。（js/*.mapファイルは不要）
また出来上がったhtml、css、jsは最小化（minify）や難読化等が行われて普段見るものと違ってます。参考：https://www.konosumi.net/entry/2018/06/23/024057
Pretty Diffは最小化（minify）されたコードを見やすくできるWEBサービスです。使い方は左側のBeautify code sampleに最小化（minify）されたコードを貼り付けてExecuteを押すと右側に元に戻したコードが見れます。

htmlやcssはビルド後のファイルでも修正できそうですがjsは難しいので修正する場合は元のvueファイルを修正して、もう1回ビルドしなおす必要があります。
目次へ

Vue2とVue3の違い

Vue２は2023年末サポート終了ですが、ネットの情報が多いのと便利なライブラリVutifyが使えるのがメリット。Vutifyで作ったもの
Vue3は最新ですが情報が少ない。Vutifyがまだ未対応。

Vue2 vue createでできたファイルの解説

参考にしたのはこちらですVueアプリケーション雛形の概要図が分かりやすいです。https://qiita.com/po3rin/items/3968f825f3c86f9c4e21
上記記事は更新日 2019年11月24日となっているので古いです。
なので2022/9/20に実際にやった内容で書きます。
上の記事とは違ってrouterは無しです。（vue createでdefault設定で作ると入っていないし入れると複雑になるため)
下の解説には私が参考にしたところをリンクしておきました。各ワードに関して参考になるサイトやYoutubeです。
またappなど共通の名前を使っていると関連性が分かりづらいので、どこが共通の名前でなければいけないかがわかるように変えています。これでも実際に動くので確認してみてくだい。ただし通常は慣例にならって作った方がいいと思います。特にid="app"。ロゴやリンクなど関係ないところは消してシンプルに1行メッセージ表示するだけのプログラムにしました。
重要な部分は解説：として重要でない部分は参考：としてます。取りあえず参考：は無視しても大丈夫です。

public/index.html
<!DOCTYPE html>
<html lang="">
略
  <body>
    <div id="app_index"></div>
解説：appでは、どこと結びついているかわかりづらいのでapp_indexに変更。main.jsの
new Vue({
  render: h => h(App_main),
}).$mount('#app_index')で結びついている。
  </body>
</html>

src/main.js
import Vue from 'vue'
import App_main from './App.vue'
参考：App.vueでexport default で書かれているため｛｝はいらない。調べるときはdefault　exportと逆の言い方がされているので注意。
参考：import　○○はファイル名と違って別の名前でも問題ありません。
export defaultは1モージュールに対して1回しか使えないのでimportで名前を自由に付けても大丈夫。

Vue.config.productionTip = false
参考：開発ツール用の設定なので重要ではない。

new Vue({
  render: h => h(App_main),
}).$mount('#app_index')
解説：index.htmlのid="app_index"の場所にApp_mainのインスタンス（実体）=App.vueで作られるもの（実体）この場合のApp_mainインスタンスはApp.vueファイルの<template></template><script></script><style></style>で作られたもの。

sec/App.vue
<template>
  <div id="app_App">
解説：id=""は下のstyleでcssを当てているだけで特に必要ないと思われる。
    <HelloWorld1 msg="HelloWorld.vueのPropsのmsgに渡され。HelloWorld.vueで出来上がったものがここに表示される。"/>
  </div>
</template>

<script>
import HelloWorld1 from './components/HelloWorld.vue'
解説：importでつけた名前は下のcomponentsと合わせる。

export default {
  name: 'App_fordbug'
解説：nameは何でもいい。export default直下にnameプロパティを設置する必要があるかというと、デバッグ用として使うためです。
  components: {
    HelloWorld1
解説：HelloWorld.vueのexport defaultされているところをHelloWorld1というコンポート名にしている。<template>と<style>はexport　defaultされていないが含まれる。
  }
}
</script>

<style>
#app_App {
略
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

src/component/HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld_fordebug',
  props: {
    msg: String
  }
}
</script>
<style scoped>
.hello{
color :red;
}
解説：<script>がexport　defaultで明確に他のファイルでも使えるように記述しているが<template>や<style>は、このままでほかのファイルから使える。実験：<div class="hello">の色を赤にしてみるとちゃんと変わることからもわかる。
略
</style>

目次へ

Vue3 vue createでできたファイルの解説

Vue2と同じように今度はVue3です。Vue2をインストールした場合。
frontendのフォルダを消して最初からやってVue3を選択すればインストールできます。

public/index.html
<!DOCTYPE html>
<html lang="">
略
  <body>
    <div id="app_index"></div>
解説：appでは、どこと結びついているかわかりづらいのでapp→app_indexに変更。main.jsのcreateApp(App_main).mount('#app_index')で結びついている。
  </body>
</html>

src/main.js
import { createApp } from 'vue'　　
参考：'vue'の中でnamed　exportされてるのでimportするときは｛｝になる。

import App_main from './App.vue'
参考：App.vueでexport default で書かれているため｛｝はいらない。調べるときはdefault　exportと逆の言い方がされているので注意。
参考：import　○○はファイル名と違って別の名前でも問題ありません。
export defaultは1モージュールに対して1回しか使えないので名前（○○の部分）を自由に付けても大丈夫。

createApp(App_main).mount('#app_index')
解説：index.htmlのid="app_index"の場所にApp_mainインスタンス（実体）が埋め込まれる。
この場合のApp_mainインスタンスはApp.vueファイルの<template></template><script></script><style></style>で作られたもの。

src/App.vue
<template>
  <HelloWorld1 msg="HelloWorld.vueのPropsのmsgに渡され。HelloWorld.vueで出来上がったものがここに表示される"/>
</template>

<script>
import HelloWorld1 from './components/HelloWorld.vue'
解説：importでつけた名前は下のcomponentsと合わせる。<template>でも上のように使う。

export default {
  name: 'App_fordbug'
解説：nameは何でもいい。export default直下にnameプロパティを設置する必要があるかというと、デバッグ用として使うためです。
  components: {
    HelloWorld1
解説：HelloWorld.vueのexport defaultされているところをHelloWorld1というコンポート名にしている。<template>と<style>はexport　defaultされていないが含まれる。
  }
}
</script>

<style>
#app_index {
解説：index.htmlの<div id="app_index"></div>と紐づいてる。
略
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld_fordebug',
  props: {
    msg: String
  }
}
</script>
<style scoped>
.hello{
color :red;
}
解説：<script>がexport　defaultで明確に他のファイルでも使えるように記述しているが<template>や<style>は、このままでほかのファイルから使える。実験：<div class="hello">の色を赤にしてみるとちゃんと変わることからもわかる。
略
</style>

基本的な構成が分かれば、あとは少しづつコードを変えながら動かすという感じで実践的な学習が進められると思います。

作ってみる！

Microsoft LearnのVue.js での Vue CLI と 単一ファイル コンポーネントの概要で完成するものを入れてみます。Microsoft Learnのをそのままやれるようであれば、そのほうがいいですが。英語の翻訳なので分かりにくいと思います。ということで、ここで紹介されてるサンプルをVue　createでできたサンプルに移植するやり方をご紹介します。完成品

最初のページにgit cloneするところがありますがgit　cloneしないでそのコードを使います。そこのリンク先mslearn-vue-components/end/src/components/に完成版のコードが入っています。
fronted/componentsディレクトリを右クリック→新規ファイルで以下の3つのファイルをコピペします。
Host.vue　→　HostTest.vue
BookingForm.vue
BookingList.vue
ファイル名Host.vueはHostTest.vueにしないと、名前の付け方がmulti-wordじゃないというエラーが出ます。HostのままでもOKなところもありました。そのままにしてますが、二文字以上つなげるくせを付けた方がエラーにならなくていいと思います。

ファイルの中身の変更は以下の2か所（multi-wordのエラーがでるため）
main.js
import { createApp } from 'vue'
import Host from './components/Host.vue' →HostTest.vue

createApp(Host).mount('#app')

HostTest.vue
export default {
    name: 'Host', → name: 'HostDebug',
これでnpm run serveで実行すれば動きます。完成品
中身の解説はMicrosoft Learnで見ていただければと思います。（分かりにくいですが）

今回重要なポイントはmain.jsで別にApp.vueを使わなくてもいいというところです。サンプルの構造で見たようにApp.vueというファイルに特別な意味はありません。

目次へ

Component name “Ichige” should always be multi-word vue/multi-word-component-namesのエラーが出たら

最後によく出るエラーの紹介です。
主にファイル名の付け方でエラーになります。export　default{name:のところでも出ました。
IchigeCompという感じで先頭を大文字にした文字を2つつなげた名前に変えればエラーはでません。

あとがき

Vue入門として文法的な説明なしで実践的な内容で書いてみました。より便利なVue2+Vutifyの本を書きました。

この記事を書いたイチゲを応援する
Vプリカでのお支払いがおすすめです。

MENTAやってます（ichige）

目次へ