Vue.js入門 ―最速で作るシンプルなWebアプリケーション

第6回 Vue.jsの高度なアプリケーション開発

この記事を読むのに必要な時間:およそ 8.5 分

さらに高度なアプリケーションを開発するためのその他の機能

Vue.jsにはこれまでの連載や今回紹介したvue-cli,単一コンポーネントの他にも,以下のような多くの高度な機能が利用できます。

  • スロット
  • トランジション
  • カスタイムディレクティブ
  • ミックスイン
  • プラグイン
  • 描画関数
  • サーバサイドレンダリング

この中から,スロットとトランジションをピックアップして簡単に紹介します。

スロット

スロットを利用してコンポーネントに対して外部からコンテンツを挿入できます。以下はスロットを使ったModalコンポーネントの例です。

<div class="modal-container">
  <!-- ヘッダー -->
  <div class="modal-header">
    <slot name="header">
      デフォルトヘッダー
    </slot>
  </div>
  <!-- ボディ --->
  <div class="modal-body">
    <slot name="body">
      デフォルトボディ
    </slot>
  </div>
  <!-- フッター -->
  <div class="modal-footer">
    <slot name="footer">
      デフォルトフッター
      <button class="modal-default-button" @click="$emit('close')"> OK </button>
    </slot>
  </div>
</div>

名前付きスロット(named slot)を利用して,モーダルのヘッダー,ボディ,フッターの各コンテンツ部分に外部から挿入できるようにしています。このModalコンポーネントを使用したコンテンツの挿入は以下です。

<modal v-if="showModal" @close="showModal = false">
  <!-- ここにモーダルのデフォルトコンテンツを上書きするカスタムコンテンツを使用できます。 -->
  <h3 slot="header">カスタムヘッダー</h3>
</modal>

上記の例では,h3要素にslot属性として"header"が指定されているので,Modalコンポーネントは定義された名前付きslotの"header"にこのコンテンツが挿入して描画します。このようにslotを利用することで再利用可能なコンポーネントを作成できます。

トランジション

要素が挿入,削除されるタイミングで遷移効果を与えるアニメーションを制御できます。以下は,transitionコンポーネントを使ったトランジションの例です。

<transition name="modal">
  <div class="modal-mask">
    <!-- ここには何らかのModalのテンプレートを定義 -->
    <!-- ... -->
  </div>
</transition>

Vue.jsのトランジションは,上記のようにトランジション対象となる要素をラップして使用します。CSSを使ったトランジションの定義も必要です。

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container, .modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

上記では,要素が挿入されたときのCSSトランジション,要素が削除されたときのCSSトランジションを使用したトランジションクラスを定義しています。本稿で詳しく説明しませんが,このようなトランジションクラスは,Vue.jsのトランジションクラスの命名規則に従って定義する必要があります。Vue.jsのトランジションでは,要素の挿入・削除時にハンドリングして,これらCSSトランジションが定義されたトランジションクラスを対象となる要素のclass属性に適用することで,トランジションを実現しています。

以上,これまでのスロットとトランジションにおいて掲載した例をModalコンポーネントとして実装したものを,以下のjsfiddleに掲載しておきます。

スロットとトランジションの詳細や解説しなかったその他の機能については,日本語公式ドキュメントにて詳細を確認してください。

おわりに

最終回では,vue-cliを使ったアプリケーション開発について紹介しました。
vue-cliというVue.jsアプリケーションプロジェクトのテンプレートを生成するツールを利用することで,さまざまなツールの設定や開発環境のセットアップを簡略化して,すぐに開発に着手することを実感できたのではないでしょうか。

今回学習用に作成したアプリケーションプロジェクトは筆者のレポジトリに公開しています。参考にしてください。

本連載記事によって,Vue.jsのアプリケーションの作成ができるようにはなりました。Vue.jsの全てについて解説出来たわけではありません。さらにVue.jsは日々進化を続けています。ぜひ,日本語公式ドキュメントを読んで理解を深め,知識をアップデートしてください。

本連載の執筆メンバーで運営するSlackを使った日本人向けのVue.jsユーザーコミュニティもVue.jsを学ぶうえでは力になるはずです。こちらから登録できます。こちらのコミュニティでは,Vue.jsでわからないことの質問と回答,Vue.jsの事例や最新情報の共有が盛んに行われており,Vue.jsユーザー同士でコミュニケーションできる場となっております。興味がある方は,ぜひ登録してください。

それではご愛読ありがとうございました。

著者プロフィール

川口和也(かわぐちかずや)

株式会社 CUUSOO SYSTEM 最高技術責任者。

Vue.jsコアチームメンバーとしてVue.js関連のOSS活動を積極的に行っている。日本Vue.jsユーザーグループvuejs-jpの代表であり,国内の普及啓もう活動も進めている。最近は自称emojineerとしてemojiを使ったソフトウェア開発プロセスにも関心がある。

GitHub:kazupon
Twitter:@kazu_pon