【Vue.jsでSPAへの移行】コンポーネントを使ってみよう

こんにちは、Nakataです。
前回はVue.jsに触れてみようという記事でVue.jsを紹介しました(前回記事)。今回はそのVue.jsの特徴である、コンポーネントについて紹介していきます。コンポーネントとはどんなものなのか、どのように使用されているのかについて、実際にコードを書いて、簡単なアプリケーションを作成しながら解説します。

コンポーネントとは

コンポーネントとは簡単に説明すると、UI(ユーザーインターフェース)を作成する要素がまとまったものです。HTML、データ、ロジック、CSSを要素としてコンポーネントに含むことができます。そのコンポーネントを組み合わせることで、Webアプリケーションを作成することができます。作成したコンポーネントには名前が付けられます。その名前を登録し呼び出すことで、必要な時に何度でもアプリケーション内で使用することができます。
この時、コンポーネントはVueインスタンスとして呼び出されUIとしての要素を持ちます。Vueインスタンスとして呼び出されるというのがどのようなことなのか、まだ理解が難しいかと思います。実際に簡単なアプリケーションを作成しながら見ていきましょう。
とりあえずコンポーネントというのは、UIに必要な要素を詰め込める名前の付いた箱のようなものであり、それを組み合わせることでWebアプリケーションを作れるものだとイメージしていただければ大丈夫です。

Component
Component2

コンポーネントのメリット

再利用が可能
作成したコンポーネントは、必要なだけ何度でも再利用することができます。例えば、入力フォームのコンポーネントを作成すれば、そのフォームが必要なページにコンポーネントを登録し、HTML内にタグを追加することでフォームが追加されます。同じ構造や機能を開発し直すコストを軽減することができ、開発効率も上がります。
コンポーネント単位で開発を行うことが可能
コンポーネントごとに構造や機能が振り分けられているため、コンポーネント単位で複数人での開発を並行して進めることが可能です。また、Webアプリケーション内で何か問題が発生した際に、コンポーネント単位で切り分けて問題を対処することができます。

実際に触ってみる

環境設定

前回同様、プロジェクトのテンプレートを自動で作成してくれる、vue-cliを使用します。
(vue-cliを使用するためにはNode.jsが必要です。今回はNode.js v9.11.1で動作)

以下のコマンドでwebpackのプロジェクトを作成します。

プロジェクトが作成できたら、実際にサーバを動かしてみましょう。

コンポーネントの作成

まずはコンポーネントを作成してみましょう。今回作成したプロジェクト内に作成された、srcディレクトリ内のファイルを書き換えていきます。src/components/HelloWorld.vueのtemplateとscriptタグ内を以下のサンプルコードに置き換えてみてください。

サンプルコード

HelloWorldと表示されるページができました。

HelloWorld

続いて、HelloWorld.vueに登録するためのコンポーネントを作成していきます。ここでは、名前とコメントを入力するフォームを持ったコンポーネントFormA.vueと、年齢と住所を入力するフォームを持ったコンポーネントFormB.vueを作成します。他にも機能として、クリックすると入力された値がアラートで通知されるメソッドも追加します。src/components以下にHelloWorld.vueをコピーしてFormA.vue、FormB.vueを作成し、templateとscriptタグ内を以下のサンプルコードに置き換えてみてください。

FormA.vue

FormB.vue

コンポーネントの登録、再利用方法

作成したFormA.vue、FormB.vueをHelloWorld.vueに登録して利用してみましょう。HelloWorld.vueのtemplateとscriptタグ内を以下のサンプルコードに置き換えてみてください。

サンプルコード

作成した入力フォームが追加されているのが確認できたでしょうか。checkをクリックすると入力した値がアラートされるのも確認してみてください。

Form1
Form2

scriptタグ内のimport FormA from ‘./FormA.vue’でFormA.vueのインポートを行い、components:にFormAを追加することで、HelloWorld.vueでFormA.vueを利用することができます。templateタグ内のフォームを追加したい場所にと書き込むことでコンポーネントFormA.vueの利用ができます。また、一度登録したコンポーネントは何度でも再利用することが可能であるため、次のサンプルコードのようにHelloWorld.vueのtemplateタグ内にを追加することで同じフォームがページに追加されます。

サンプルコード

同じフォームがページに追加されたのが確認できたでしょうか。次はdataの扱いについて見てみましょう。1つのフォームにnameを入力しても、同じFormA.vueから作成された他のフォームのnameは変更されません。これはコンポーネントを利用するたびに、それぞれ新しいインスタンスが作成されるからです。dataはインスタンスごとに定義されているため、同じ名称でも別のものとして扱われます。

Data

既に不思議に思っていた方もいるかもしれませんが、HelloWorld.vueで定義されているmsgと、FormA.vueで定義しているmsgの値も別のものとして扱われています。ですが、コンポーネントを登録した側と登録される側で、dataの値を受け渡しを行う方法もあります。詳しくは次回以降の記事で解説させていただきます。

動的なコンポーネント

次に動的にコンポーネントを使用してみましょう。まずは、HelloWorld.vueのtemplateとscriptタグ内を以下のサンプルコードに置き換えてみてください。

サンプルコード

FormAかFormBを選択する画面が表示されたでしょうか。チェックボックスを選択すると対応したフォームが表示されます。ここで動的にコンポーネントが生成されています。

Form3
Form4

では、どのような仕組みで動的にコンポーネントが生成されるか見てみましょう。
まずdataのselectedComponentに、チェックボックスで選択したFormAかFormBが値として与えられます。選択した値は<component :is=”selectedComponent”>の行で使用されますが、ここでインスタンスが生成されています。<component>要素内の特別な属性isに、登録されたコンポーネントの名前を与えることで、与えた名前のインスタンスが生成される仕組みになっています。

router-link props

また、コンポーネント名を選択する度に新しくインスタンスが生成されるため、dataの値は保存されていません。FormAにnameを入力してからFormBに切り替え、もう一度FormAに戻って入力された値が消えているのを確認してみてくだい。このように動的にコンポーネントを生成する際、dataの状態は保存されません。
しかし、フォームの切り替え機能として利用する等、変更したdataの状態が保存された方が望ましい場合もあります。その解決策として<keep-alive>要素を使用する方法があります。HelloWorld.vueのtemplateタグ内を以下のサンプルコードに置き換えてみてください。

サンプルコード

コンポーネントを切り替えても、入力された値が保存されているのが確認できたでしょうか。
このように<keep-alive>要素を使用することで、動的に生成されたコンポーネントの状態の変化を残しておくことができます。

最後に

今回はコンポーネントとはどんなものか、コンポーネントの作成方法、再利用する方法、動的に使用する方法について紹介をしました。コンポーネントを使用し開発をしていく上で、便利な機能は他にも多く存在します。次回以降また紹介していきたいと思います。

最近の記事

  • 関連記事
  • おすすめ記事
  • 特集記事

アーカイブ

カテゴリー

PAGE TOP