【Vue.jsにチャレンジ！】単一ファイルコンポーネントを表示してみる

こんにちは、Jeannieです。

前回まではVue.jsでシングルページアプリケーションを作るための環境構築を行ってきました。

現在の状況としては、Vue-CLIを使ってプロジェクトを作成したばかりの状態です。

ここから単一ファイルコンポーネントを作って表示してみようと思います。

トピック

単一ファイルコンポーネントとは？
単一ファイルコンポーネントを作ってみよう！
単一ファイルコンポーネントを呼び出してみよう！

単一ファイルコンポーネントとは？

まず、単一ファイルコンポーネントとは？というところから。

単一ファイルコンポーネントとは、HTMLとJavaScriptとCSSを一つのセットとして定義したものになります。

具体的には以下のような構成のファイルになります。

<template>
<!-- ここがHTMLを書く場所 -->  
</template>

<script>
<!-- ここがJavaScriptを書く場所 -->
</script>

<style>

<!-- ここがCSSを書く場所 -->
</style>

<template>タグのところがHTML、<script>タグのところがJavaScript、<style>タグのところがCSSを書く場所になります。

Vue.jsでは、これらを「〇〇〇.vue」という拡張子がvueの一つのファイルにまとめることができ、それを「単一ファイルコンポーネント」と呼んでいます。

もちろん、Vue.jsでは一つのファイルに複数のコンポーネントを書くことも出来ますが、このやり方の場合、アプリケーションの規模が大きくなってくると、どこにどのコンポーネントがあるか分からなくなるなど、コンポーネントを管理しづらくなってきます。

そこで、上記のように一つの部品を一つのファイルにまとめて管理しやすくしたものが単一ファイルコンポーネントとなります。

※単一ファイルコンポーネントは一つの部品としてまとまっているので、再利用しやすいといったメリットもあります。

単一ファイルコンポーネントはVue.jsのアプリを作っていく上で非常に重要な考え方です。

私自身は、書籍を使ってVue.jsの基礎から体系的に学んだことでより理解できたと思っています。

より深く理解したい人に向けておすすめの書籍もまとめていますので興味があればこちらもどうぞ。

【2021年】Vue.jsが学べるおすすめ本6選

フロントエンドを学び始めてとりあえずJavaScriptの基礎は身につけた。そろそろJavaScriptのモダンなフレームワークであるVue.jsを学ぼう。そんな方に向けてVue.jsが学べるおすすめの本をご紹介します！

単一ファイルコンポーネントを作ってみよう！

それでは、さっそく単一ファイルコンポーネントを作ってみたいと思います。

まずは、現在のプロジェクトのフォルダ構成を見てみましょう。
※先走ってAddresses.vueというコンポーネントを作ってしまっていますが、お気になさらずに。

上の画像の通り、srcフォルダ直下にcomponentsというフォルダが作成されていますので、単一ファイルコンポーネントはこの中に作っていきます。(これはVue.jsのお作法なのかな？)

補足として、routerフォルダはVue Router関連のファイル、storeフォルダはVuex関連のファイルを管理するフォルダです。

※Vue RouterやVuexはこれからシングルページアプリケーション(SPA)を作っていく中で必要となる機能です。
今のところは「そうなんだ～(´・ω・｀)」ぐらいに思っておけば大丈夫です。

今回は、単一ファイルコンポーネントを作成して画面に表示するところまでをやってみたいと思います。

上記画像の通り、componentsフォルダの下にAddresses.vueという単一ファイルコンポーネントを作ってみました。

Addresses.vueの中身は以下の通り。

<template>
  <div>
      <h1 class="red">{{ title }}</h1>
  </div>
</template>

<script>
export default {
    data() {
        return {
            title: 'マイアドレス帳'
        }
    }
}
</script>

<style scoped>
.red {
    color: red;
}
</style>

テンプレートとして、h1タグでタイトルを表示するだけのコンポーネントです。

そのh1タグで表示するのは「title」という変数の中身で、それをCSSで文字色を赤で表示しています。

これだけでも立派な単一ファイルコンポーネントです。

※<style>タグに「scoped」と付いていますが、これはこのコンポーネントだけに適用されるスタイルですよ、という意味です。
今回はredというクラスのスタイルを定義していますが、仮に親コンポーネントにredというクラスを定義しても、親コンポーネントのredクラスにはスタイルが適用されず、このコンポーネントにしか適用されないという意味になります。

これで使用可能なコンポーネントが作成出来ましたので、このコンポーネントを呼び出してみましょう。

単一ファイルコンポーネントを呼び出してみよう！

それでは、先ほど作ったAddresses.vueコンポーネントを呼び出してみましょう。

ローカルサーバー起動後に表示されるページ(http://localhost:8080/)で元々表示されているのは、Home.vueコンポーネントなので、Home.vueの中から、先ほど作ったAddresses.vueを読み込こむことで画面に表示されるように作っていきます。

※ちなみに、Home.vueはcomponentsフォルダ配下ではなく、viewフォルダ配下で管理されています。

Home.vueを以下のように編集しました。

<template>
  <div class="home">
    <Addresses/>  <!-- ←追加 -->
    <img alt="Vue logo" src="../assets/logo.png">  <!-- ←削除 -->
    <HelloWorld msg="Welcome to Your Vue.js App"/>  <!-- ←削除 -->
  </div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'  <!-- ←削除 -->
import Addresses from '@/components/Addresses.vue'  <!-- ←追加 -->
export default {
  name: 'Home',
  components: {
    HelloWorld  <!-- ←削除 -->
    Addresses  <!-- ←追加 -->
  }
}
</script>

「削除」とコメントで記載している部分は、元々このファイルに記載されているもので、特に不要なので消してしまいましょう。

代わりに「追加」と記載している部分で、今回新しく作ったAddresses.vueコンポーネントを呼び出しています。

簡単に説明すると、