(3) サンプルで見る動作の流れ - デザイナー向けのVue.js紹介
「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。
この記事では、前回作成したサンプルの動作を解説し、いじってみます。
連載をまとめたマガジンはこちら↓
サンプルのフォルダ構造
まずはサンプル・サンドボックスの構造を確認してみましょう。ファイルエクスプローラー上でフォルダをすべて展開すると、以下のようになります。
publicフォルダの中身は、よくあるindex.htmlとfavicon.icoですね。実際、サンプルプロジェクトで表示されているのもこのindex.htmlです。
一方srcフォルダの中には、JavaScriptのプログラムや、「.vue」という見慣れない拡張子のファイルがあります。これはVue.jsのファイルで、1つのファイルが1つのコンポーネント（独自タグ）に対応しています。（後ほどまた詳しく見ていきます。）
まずはわかりやすいところから、public/index.htmlを開いてみましょう。
よくあるHTML5のテンプレという感じですね。
ただ、プレビューに表示されている内容に比べて、HTMLの中身が非常に少ないです。「Hello Vue in CodeSandbox!」とか「Installed CLI Plugins」とかどこにも書いてないですね。
<body>の中にあるのは、JavaScriptが無効化されているときのメッセージである<noscript>を除けば、以下の2行だけです。
<div id="app"></div>
<!-- built files will be auto injected -->2行目のコメントを日本語訳すると「ビルドされたファイルが自動で挿入される」です。ここに何かが挿入され、それがプレビュー画面で見えている、ということのようですね。でも、「ビルドされたファイル」とはなんでしょう？
ビルドとは？
「ビルド」という専門用語が出てきました。ビルドとは「生成する」という意味です。主にプログラミングで使われる用語ですが、「SASSからCSSをビルドする」など、デザイン業務で使ったことがある人もいるかもしれません。
現在、webページ制作で標準の言語はHTML/CSS/JavaScriptです。しかし周辺には様々な言語やツールが存在します。HTMLに対するPug/Haml/Slim、CSSに対するSASS/SCSS/Stylusなど、名前を聞いたことがあるかもしれません。
これらの言語は、標準の言語にはない便利な機能を使うことができますが、その反面、基本的にHTMLファイルにそのまま書いても動きません。同様に、Vueのコンポーネントも標準言語ではないので、HTMLファイルにそのまま書いても動きません。
このような言語やツール専用記法は、標準言語に変換してから使うことになります。ほとんどは変換ツールが用意されていて、それを使って標準言語のファイルを生成します。
このように、元になるファイルから実際に動作するファイルを生成する作業をビルドと呼びます。
ビルドの方法は言語や環境によって様々で、準備も少し大変です。
その点、今回のサンプルのサンドボックスはビルド作業が自動で行われるように設定済みなので、ビルドを意識する必要がありません。
ここまでのまとめ
・publicフォルダの中身は、普通のHTMLやfaviconファイル
・srcフォルダの中身は、Vueに関するファイル
・VueのファイルはHTML/CSS/JavaScriptに変換するビルド作業が必要
・このサンドボックスではビルドが自動で行われるよう設定済み😊
大まかな動作の流れ
①Vueプログラムのファイルが自動でHTML/CSS/JavaScriptに変換される
②①がindex.htmlに自動で挿入される
③Vueプログラムの内容を含んだindex.htmlが表示される
プログラムの動作（main.js）
ここからは、プログラムの内容に踏み込んでいきましょう。
このテンプレートの自動ビルドはmain.jsからスタートするように設定されています。src/main.jsを開いてみましょう。
これはJavaScriptのプログラムですね。ちょっと難しいので、詳細には踏み込みません！😜この時点で注目すべきポイントは、2行目の「import」と8行目の「$mount」です。
import（インポート）
import App from "./App.vue";importはCSSにも似た記法（@import）がありますね。この行全体で、ファイル"./App.vue"からAppコンポーネントを読み込むという意味です。
Vueのコンポーネントは通常、1コンポーネントを1ファイルに分割して作るため、使うときにはこのように読み込みを行います。importは今後何回も出てくるので、意味を覚えておきましょう。
$mount（マウント）
}).$mount("#app");"#app"という書き方には見覚えがありますよね。CSSと同じ、HTML要素のセレクタです。mountは「乗る」「据え付ける」といった意味で、ここではHTMLの#app要素にコンポーネントを乗せる＝上書きするように設定しています。
main.jsのまとめ
①App.vueからAppコンポーネントを読み込む
②index.htmlの<div id="app">にAppコンポーネントを上書きする
プログラムの動作（.vue）
いよいよコンポーネントの中を見ていきましょう。App.vueを開いてください。
見た目はHTMLファイルによく似ていますね。全体が大きく3つのタグに分けられているのがわかります。上から順に見ていきましょう。
templateタグ
<template>タグの中身は、一見するとHTMLです。ただし、見慣れた<div>や<img>の他に<HelloWorld>という見知らぬタグがあります。これは独自タグ、すなわちコンポーネントですね。このように、コンポーネントの中で別のコンポーネントを使うこともできます。
scriptタグ
<script>タグの中身は、JavaScriptです。現段階ではあまり詳しく解説しませんが、1行目には先ほど解説したimportがあるのがわかります。<template>の中で使っていた<HelloWorld>コンポーネントを読み込んでいるわけですね！
styleタグ
<style>タグの中身は、ただのCSSです。
VueのファイルはHTML/JavaScript/CSSの区切りがわかりやすいので、ビルドされた後のファイルもイメージしやすいと思います。
触り始めたばかりの現段階でもすでに、「文字色を変えるなら、CSSのcolorを変えればよさそうかな？」と想像がつきますよね。
ここまでのまとめ
・Vueのコンポーネントファイルは大きく<template>、<script>、<style>に分かれている
・それぞれが基本的にHTML、JavaScript、CSSに対応している
・コンポーネントの中で別のコンポーネントを使うこともできる
サンプルをいじる
ここまでわかれば、HelloWorld.vueもほとんど同じです。開いてみると、やはり<template>、<script>、<style>がありますね。そして、プレビューに表示されているテキストのほとんどはこのコンポーネントに書かれていることがわかります。
HTMLとCSSを書く場所がわかったので、HelloWorldコンポーネントとAppコンポーネントを自由に編集してみましょう！
もしエラーが出て解決法がわからなくても、現段階ではあまり気にする必要はありません。悩むより、もうひとつサンドボックスを作り直しましょう！
（※例外として、<h1>タグの中に{{ msg }}という見慣れない記述がありますが、この解説は次回にします）
今回のまとめ
・Vueのファイルを実際に動作させるには、標準言語のHTML/CSS/JavaScriptに変換するビルド作業が必要
・コンポーネントを使うときにはimportでコンポーネントのファイルを読み込む必要がある
・Vueのコンポーネントファイルは大きく<template>、<script>、<style>に分かれている
・それぞれが基本的にHTML、JavaScript、CSSに対応している
-----------------------------
ここまでお読みいただきありがとうございました。次回は、新しい独自コンポーネントを追加し、表示するまでの流れを解説します。
-----------------------------
おまけ：練習課題
HelloWorld.vueやApp.vueのHTML/CSSを編集し、サンプルのページを自由に改造しましょう。
・コンポーネントの背景色や文字色を変えてみましょう
・段落を追加し、CodeSandboxへのリンクを追加してみましょう。
・トップの画像を変更してみましょう。
・プレビューパネルを新しいウィンドウで開き、ブラウザの開発者ツールを使って、どのようなHTMLやCSSがビルドされているか見てみましょう。
ヒント
コードエディターの便利な機能は前回の記事でも紹介しています。
編集してみたサンプルサンドボックスはこちら↓
🐥はげみになります！