12周年記念パーティ開催! 2024/5/10(金) 19:00

Vue.jsを使いこなす

全12回

双方向データバインディングの実装に特化した、軽く、使い勝手のよいフレームワークといわれるVue.js。本シリーズでは、Vue.jsが業務で活かせるようになるための、基本的な使い方を解説します。

記事執筆時点のバージョンは0.11.4です。最新バージョンVue.js 2.0を元に書かれた「これから始めるVue.js 2.0」シリーズがあります。(2017年3月現在)

番外2 v1.0メジャーアップデート 2

Vue.jsのv1.0.0へのアップデート内容を解説します。今回はAPIの変更と、新しく追加された機能を紹介します。また、すでに稼働しているWebアプリなどにおいて、安全にv1.0へ移行する手順についても触れます。

番外1 v1.0メジャーアップデート 1

2015年の10月にVue.jsのバージョン1.0.0がリリースされました。この記事では大きな変更があったテンプレートの構文に関する変更を解説します。コードがより直感的にわかりやすくなるよう改変が加えられています。

最終回 Vue.jsのTips 3

シリーズの最終回はVue.jsを使ったアニメーション機能を紹介します。CSSやJavaScriptを用いたアニメーションを登録し、DOMの追加、削除のタイミングで実行することができます。

第9回 Vue.jsのTips 2

Vue.jsの便利な機能を解説します。今回は、データバインディングで頻出する実装、値の監視方法や、ViewModelへの動的データの定義、データ数や、表示順を変えるフィルタ機能などを紹介します。

第8回 Vue.jsのTips 1

Vue.jsにはアプリケーション作成を楽にする基本機能のほか、さまざなディレクティブやオプションが用意されています。今回は、デフォルト設定の変更や、サブクラスの作成などを紹介します。

第7回 イベント経由のやり取り

今回はViewModel間でイベントを通じて、データをやり取りする方法を解説します。この方法を利用すると、コンポーネントはイベントを伝える役割に専念でき、独立性の高い設計が可能になります。

第6回 コンポーネント化

今回はさまざまな機能をコンポーネント化して実装する方法を解説します。まずは、Vue.jsにはいくつかの実装方法がありますが、もっともシンプルで基礎的な方法を紹介します。

第5回 イベントハンドリング

何かが起こったら、何かをするというVue.jsのイベントハンドリングの実装を紹介します。この記事では、ViewModelのライフサイクルイベント、v-onによるイベントハンドリングの解説をします。

第4回 ディレクティブの使い方

この記事ではテンプレート記述の際に役立つ、使用頻度が高いディレクティブの使い方を解説します。似たような機能を持つディレクティブでも、使い分けのポイントがあるので、注意しましょう。

第3回 テンプレートの使い方

Vue.jsのテンプレート機能の使い方を解説します。テンプレートの部品化、配列の要素を繰り返し表示したりすることで、意図通りの描画をし、しかもコードを見通しよく保ちます。

第2回 基本的な使い方

Vue.jsの機能のうち、もっとも基本となる機能の利用方法について解説していきます。Vue.jsの使う上で核となるModelとViewを紐付ける役割を持つ、ViewModelの解説を中心にします。

第1回 Vue.jsとは

双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。