Vue.jsはコンポーネント指向という、部品化されたUI（例えばメニューバーやブログカードなど）を組み合わせてページを作り上げていくフレームワークです。
そのため私達初心者がVue.jsを使うにあたって要素のコンポーネント化は最低限できるようになる必要があります（Vue.jsを使う意味がなくなってしまうから）。
そこで本記事ではVue.jsにおける要素のコンポーネント化の方法についてサンプルを使って紹介していきます。サンプルは最も簡単に、文章をコンポーネントとして利用したものにします。
そもそもなんのためにコンポーネントが必要？
上のように文章を表示するだけの簡単なアプリケーションであればコンポーネントを意識せずとも全ての要素をhtml内に記述すれば済みます。
しかし、アプリケーションの規模が大きくなってきて扱う要素が増えてくると全ての要素を1つのhtmlファイルに記述していてはコードの見通しが悪くなってしまいます。
そこで要素のうち部品化して再利用できそうなものはコンポーネント化することでコードの見通しを良くしようというのがコンポーネント化の目的です。
html + Javascriptの場合
コンポーネント化はVueインスタンスのcomponentメソッドを使って.jsファイルで下のように定義します。
component(id, def)
id : コンポーネントの名前
def: コンポーネントの定義情報
サンプルではコンポーネントの名前は’my-hello’、定義情報としてtemplateに何をコンポーネント化するかを記述します。ここでは表示したい文章を記述します。
下のVueクラスのインスタンス化の部分はVue.js共通の処理なので説明は省略します。
Vue.component('my-hello',{
template: '<div>こんにちは、Vue.js!</div>',
});
// vue.jsの適用先
new Vue({
el: '#app'
})上のように’my-hello’をコンポーネント化すると、htmlファイルにおいて下のように呼び出すことでコンポーネントを利用することができます。コンポーネントを利用するとhtmlファイルの見通しがぐっと良くなるのがわかると思います。
<div id="app">
<my-hello></my-hello>
</div>Vue CLIの場合(単一ファイルコンポーネント)
Vue CLIとは？
アプリケーションが大きくなってくるとコンポーネントの切り出しの回数も多くなってきて定型的に必要なファイルの準備の手間が大きくなってきます。
そこで本格的なアプリケーションを制作する場合はVue CLIというアプリケーションの立ち上げからビルド、実行までを自動化してくれるツールを利用することになります。
Vue CLIを使うことでVueプロジェクトをコマンド一つで立ち上げることができます。
vue create <アプリケーション名>上のコマンドで立ち上がったプロジェクトは下のようなフォルダ構成となっていて、コンポーネントはsrc/components配下の.vueファイルを編集して定義していきます。
.vueファイルは先程のhtmlとjavascript、そしてCSSをコンポーネントごとに1つにまとめたファイルです。コンポーネントを構成するファイルを一望できるためコードの見通しが格段によくすることができます。
サンプルではApp.vueとHelloWorld.vueを編集します。アプリケーションはApp.vueからHelloWorldコンポーネントを呼び出しています。
Vue CLIでコンポーネントを定義する
先程はVue.componentメソッドでコンポーネントを定義しましたが、Vue CLI環境ではJavascriptのモジュール構文(export/import)を使って定義します。
HelloWorld.vue
template内にコンポーネントの中身を記述してscriptタグ内でコンポーネント化を行います。先程の.jsファイルとは記述方法が少々異なるので注意が必要です。
<template>
<div class="hello">
ようこそ、 Vue.js!
</div>
</template>
<script>
export default {
name: 'HelloWorld',
}
</script>
<style scoped>
</style>App.vue
こちらはHelloWorld.vueでコンポーネント化した’HelloWorld’コンポーネントをimportして呼び出しています。
<template>
<div id="app">
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
</style>Vue CLI (with TypeScript)の場合
さらに発展として.vueファイルのスクリプト部分にJavascriptではなくTypeScriptを使う場合も紹介します。
TypeScriptは型を厳密に指定できない言語のあいまいさを持っていたJavascriptの弱点を補うために登場した言語です。TypeScriptはコンパイラでJavascriptに変換されてから実行されるため動作環境は選びません。
VueプロジェクトにTypeScriptを導入する場合はプロジェクト作成時にTypescriptを選びましょう。まずはvue createコマンドで”Manually select features”を選択します。
続いて必要なものを聞かれるのでTypeScriptを選択しましょう。その後いくつか聞かれますがデフォルトで進めばTypeScriptを利用することができます。
先程と同様にsrc/components配下の.vueファイルを編集してコンポーネントを定義します。
HelloWorld.vue
<template>
<div class="hello">ようこそ、Vue.js with TypeScript!</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
}
</script>
<style scoped>
</style>App.vue
<template>
<div id="app">
<HelloWorld/>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';
@Component({
components: {
HelloWorld,
},
})
export default class App extends Vue {}
</script>
<style>
</style>コンポーネントの定義は同じVue CLI環境でも異なります。まずscript要素においてlang=tsを宣言する必要があり、さらにコンポーネントはVueクラスを継承(extends Vue)して@Componentデコレータを付与することが必要です。
@Component{
components: {
ローカルコンポーネント,
}}
このように宣言をすることでTypeScriptを使ってコンポーネント化が可能となります。記述方法が異なりますがコンポーネント化の概念そのものが異なるわけではないので環境に合わせた記述方法を身に着けましょう。
それぞれVue.jsの導入方法によってコンポーネントの定義の仕方が若干異なるので最初はわからなくなってしまいがちですが、まずは上の3種類の記法の違いを押さえましょう！
コメント