動かして学ぶ！Vue.js開発入門
翔泳社
著者：森巧尚
はじめに
本書の対象読者と必要な事前知識、および構成
本書のサンプルの動作環境と付属データ・会員特典データについて
目次
Chapter 1 Vue.jsって何？
01 Vue.jsって何？
jQueryよりもシンプル!
SPA(シングルページアプリケーション)のメリット
表示の切り替えがスムーズ
サーバー側とフロントエンド側の役割分担がわかりやすい
ネイティブアプリの代わりとして使うこともできる
Vue.jsは、学習しやすくて、軽いSPAを作れる
どのようなものが作れる?
Markdownエディタ
グリッドコンポーネント
SVGグラフ
ToDoリスト
02 Vue.jsは「データと表示をつなげる仕組み」
Vue.jsの主な機能一覧
03 インストールしてみよう
CDNを使う方法
ダウンロードする方法
04 試してみよう
クリックした回数を表示するボタン:countup.html
05 まとめ
図で見てわかるまとめ
書き方のおさらい
Vue.jsを使う基本
Chapter 2 データを表示するとき
01 Vue インスタンスを作る：new Vue
02 データをそのまま表示する：{{ データ }}
マスタッシュ( {{ }} )タグで表示
データをそのまま表示する例:hello1.html
v-text で表示
データをv-textで表示する例:hello2.html
v-htmlで表示
データをHTMLで表示する例:hello3.html
03 使えるデータの種類
基本的なデータ
いろいろな型のデータを表示する例:datatest1.html
JavaScriptの式を使って表示する例:datatest2.html
配列
配列の値を表示する例:datatest3.html
オブジェクト型
オブジェクトデータを表示する例:datatest4.html
あらかじめ用意したデータを使う 41
JavaScriptで用意したデータを表示する例:datatest5.html
データの中身を確認したいとき
オブジェクトデータの中身を確認する例:datatest6.html
04 まとめ
図で見てわかるまとめ
書き方のおさらい
データをそのまま表示するとき
データをHTMLで表示するとき
いろいろなデータを扱うとき
Chapter 3 属性を指定するとき
01 要素の属性をデータで指定する：v-bind
画像を指定する
画像を指定する例:bindtest1.html
リンク先を指定する
リンク先を指定する例:bindtest2.html
右寄せ、左寄せ、中央寄せなどを指定する
alignを指定する例:bindtest3.html
インラインスタイルを指定する
インラインスタイルを指定する例:bindtest4.html
クラス属性を指定する
クラスを指定する例:bindtest 5.html
02 まとめ
図で見てわかるまとめ
書き方のおさらい
画像を指定するとき
リンク先を指定するとき
右寄せ、左寄せ、中央寄せなどを指定するとき
Chapter 4 ユーザーの入力をつなぐとき
01 入力フォームをデータとつなぐ：v-model
テキスト:input
入力した文字列を表示する例:modeltest1.html
複数行テキスト:textarea
入力した文章と文字数を表示する例:modeltest2.html
チェックボックス:input checkbox
チェックボックスのON/OFFを調べる例:modeltest3.html
複数のチェックボックスのONを配列にする例:modeltest4.html
同意にチェックを入れたら送信ボタンが有効になる例:modeltest5.html
ラジオボタン:input radio
選択したラジオボタンを表示する例:modeltest6.html
画像の表示をラジオボタンで切り換える例:modeltest7.html
選択:select
文字列が選択した色に変わる例:modeltest8.html
複数の選択を配列にする例:modeltest9.html
修飾子
全部書き終わってから入力する例:modeltest10.html
入力を自動的に数値に変換する例:modeltest11.html
入力を自動的に数値に変換しない例:modeltest11b.html
前後の空白を自動的に削除(トリム)する例:modeltest12.html
前後の空白を自動的に削除(トリム)しない例:modeltest12b.html
02 まとめ
図で見てわかるまとめ
書き方のおさらい
テキストを入力するとき
複数行テキストを入力するとき
チェックボックスの値を入力するとき
ラジオボタンの値を入力するとき
selectの値を入力するとき
Chapter 5 ユーザーの操作をつなぐとき
01 イベントとつなぐ：v-on
ボタンをクリックしたとき
クリックしたら、1増やす例:ontest1.html
クリックしたら、2回目は押せなくなる「いいね」ボタンの例:ontest2.html
引数を渡してメソッドを実行する
クリックしたら、値をいろいろ増やす例:ontest3.html
キー入力したとき
[Enter]キーを押したらアラートを表示する例:ontest4.html
[Shift]+[Enter]キーを押すとアラートを表示する例:ontest5.html
02 まとめ
図で見てわかるまとめ
書き方のおさらい
ボタンをクリックしたとき
ボタンをクリックしたとき(引数を渡して実行したいとき)
[Enter]キーが押されたとき
Chapter 6 条件とくり返しを使うとき
01 条件によって表示する：v-if
trueのときだけ表示する例:iftest1.html
trueとfalseで表示を切り替える例:iftest2.html
クリックしたら「いいね!」ボタンが消える例:iftest3.html
02 くり返し表示する：v-for
配列データをリストで表示する例:fortest1.html
オブジェクトの配列データをリストで表示する例:fortest2.html
1×5 〜 10×5をくり返し表示する例:fortest3.html
配列データを、番号付きリストで表示する例:fortest4.html
配列データをテーブルで表示する例 ❶:tabletest0.html
配列データをテーブルで表示する例 ❷:tabletest.html
配列データの追加と削除
ボタンでリストの追加・削除を行う例:fortest5.html
ボタンをクリックしたらソートする例:fortest6.html
v-forとv-if の組み合わせ
偶数だけ表示する例:fortest7.html
ボタンをクリックしたら偶数だけ表示する例:fortest8.html
03 まとめ
図で見てわかるまとめ
書き方のおさらい
trueのときだけ表示するとき
true/falseで切り換えて表示するとき
配列データを、リストで表示するとき
オブジェクトデータを、リストで表示するとき
回数を指定して、リストで表示するとき
配列データを追加、削除するとき
Chapter 7 Google Chartsと連動させてみよう
01 Google Chartsとは？
Google Chartsで円グラフを表示させる例:GoogleCharts.html
02 Google Chartsと連動させる
Google Chartsの円グラフにボタンで投票できる例:GoogleChartsVue.html
03 まとめ
図で見てわかるまとめ
書き方のおさらい
Google Chartsでグラフを表示するとき
Chapter 8 データの変化を監視するとき
01 データを使って別の計算をする：算出プロパティ
金額を入力したら、消費税込みの金額を計算する例:computedtest1.html
単価と個数を入力したら、税込み金額を計算する例:computedtest2.html
文章を入力したら、残りの文字数を表示する例:computedtest3.html
文字を入力すると、その文字を含む項目だけ表示される例:computedtest4.html
赤緑青のスライダーを動かしたら、できた色を表示する例:computedtest5.html
02 データの変化を監視する：監視プロパティ
入力文字を監視して、禁止文字が入力されたらアラートを出す例:watchtest1.html
タイマーを作る
残り秒数が0になったら、アラートを出す例:timerTest.html
残りの秒数を監視して表示し、0秒になったらアラートを出す例:watchtest2.html
TweenMax ライブラリを使う
TweenMaxのテスト:tweenMaxTest.html
数字がクルクルとアニメーションをしながら値が増えるinput要素の例:watchtest3.html
03 まとめ
図で見てわかるまとめ
書き方のおさらい
データが変化したら、自動的に再計算するとき
データが変化したら、自動的にメソッドを再実行するとき
Chapter 9 Markdownエディタを作ってみよう
01 Markdownエディタとは？
Markdownエディタの設計
02 Markdownエディタを作る
Markdownエディタの例:markdown.html
03 まとめ
図で見てわかるまとめ
書き方のおさらい
Markdownで表示するとき
Chapter 10 アニメーションするとき
01 表示／非表示時にアニメーションする：transition
チェックボックスで表示/非表示をアニメーションする例:transtest1.html
02 リストのトランジション：transition-group
ボタンを押してリストが増減するとき、アニメーションする例:transtest2.html
03 リストの並びが移動するトランジション
クリックしたらシャッフルする例:shuffleTest.html
リストの並びが移動しながら変わるアニメーションの例:transtest3.html
04 まとめ
図で見てわかるまとめ
書き方のおさらい
1秒のフェードインで、文字を表示させるとき
0.5秒のフェードインで、リストの項目を増減させるとき
リストの並びが変わるとき、0.5秒で移動するアニメーションをさせるとき
Chapter 11 ToDoリストを作ってみよう
01 ToDoリストとは？
ToDoリストのサンプル
ToDoリストの作成手順
ToDoリストの設計
02 仮データでToDoリストを表示する
仮データで表示するToDoリスト:todolist1.html
03 改良する：追加＆削除機能
改良する方法
ToDoの追加&削除機能を追加したToDoリスト:todolist2.html
04 まとめ
図で見てわかるまとめ
Chapter 12 部品にまとめるとき
01 部品にまとめる：コンポーネント
コンポーネントを作って表示する例:comptest1.html
02 コンポーネントのdata はfunction にする
それぞれ別々にカウントするコンポーネントの例:comptest2.html
03 値を渡す：props
コンポーネントに値を渡す例:comptest3.html
v-for でコンポーネントをくり返す
配列からコンポーネントを作って表示する例:comptest4.html
04 まとめ
図で見てわかるまとめ
書き方のおさらい
コンポーネントを作って表示するとき
データを扱うコンポーネントを作って表示するとき
Chapter 13 JSONデータを表示させてみよう
01 JSONファイルの読み込み方
JSONを読み込む例(JavaScript):jsonLoad.html
JSONを読み込む例(Vue.js):jsonLoadVue.html
02 JSONデータを読み込んで、コンポーネントで並べる
プログラムの設計
配列データをコンポーネントで並べる例:jsontest1.html
03 改良する：トランジションをつける
プログラムの設計
JSONデータを読み込んで、トランジションをつける例:jsontest2.html
04 まとめ
図で見てわかるまとめ
書き方のおさらい
JSONファイルを読み込むとき
INDEX