動かして学ぶ!Vue.js開発入門


動かして学ぶ!Vue.js開発入門 (NEXT ONE)


翔泳社


著者:森巧尚


はじめに
本書の対象読者と必要な事前知識、および構成
本書のサンプルの動作環境と付属データ・会員特典データについて
目次

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

書籍目次

Posted by shi-n