書籍詳細（速習 Vue.js）

速習 Vue.js 書影

速習 Vue.js

山田祥寛 著

サポート終了
著者山田祥寛
出版社WINGSプロジェクト
価格500円（税込）
判形Kindle版・4色
ページ数167ページ
発売日2018年3月28日
シリーズ 速習（QUICK MASTER - WINGS）
対象レベル初級
Amazonで購入
B!

2020/02/05、配布サンプルを修正。旧バージョンをご利用の方はお手数ですが、再ダウンロードしてください。

サクッと学べる。Vue.jsの解説書。

ビュー（見た目）に特化したシンプルなJavaScriptフレームワークVue.jsを素早くマスターしよう。
本書では、Vue.jsの使い方を10個のPartに分けて、サンプルコードとともに詳しく解説しています。
後半では、vue-cliを使った開発も紹介しています。
速習 Vue.js ロゴ

更新履歴

  • FAQ情報：2020年2月1日 更新
  • 正誤訂正：2020年2月5日 更新

目次

  • Part 1：イントロダクション
  • JavaScriptフレームワークとは？
  • jQueryの問題点とJavaScriptフレームワーク
  • 主なJavaScriptフレームワーク
  • 対象読者
  • サンプルプログラムについて
  • Part 2：Vue.jsの基本
  • Vue.jsのインストール方法
  • Vue.jsアプリの基本
  • ディレクティブによるデータアクセス - v-text
  • {{...}}式を無効化する - v-pre
  • 文字列をHTMLとして埋め込む - v-html
  • 属性値にJavaScript式を埋め込む - v-bind
  • プロパティ値をアプリ独自のルールで加工する - 算出プロパティ
  • 別解：メソッドによるロジックの切り出し
  • Part 3：イベント処理
  • イベントの基本
  • イベントオブジェクトを参照する
  • イベントハンドラーに引数を渡す場合
  • 定型的なイベント処理を宣言的に指定する - イベント修飾子
  • イベント修飾子を利用する場合の注意点
  • キーボードからの入力を識別する - キー修飾子
  • システムキーとの組み合わせを検知する
  • マウスの特定のボタンを検知する - マウス修飾子
  • Part 4：フォーム開発
  • さまざまなフォーム要素の例
  • ラジオボタン
  • チェックボックス（単一）
  • チェックボックス（複数）
  • 選択ボックス
  • 補足：オブジェクトをバインドする
  • バインドの動作オプションを設定する - 修飾子
  • 入力値を数値としてバインドする - number修飾子
  • 入力値の前後の空白を除去する - trim修飾子
  • バインドのタイミングを遅延させる - lazy修飾子
  • 双方向データバインドのカスタマイズ
  • Part 5：条件分岐とループ
  • 式の真偽に応じて表示／非表示を切り替える - v-if
  • 式がfalseの場合の表示を定義する - v-else
  • 複数の分岐を表現する - v-else-if
  • 式の真偽に応じて表示／非表示を切り替える - v-show
  • 配列／オブジェクトを繰り返し処理する - v-for
  • 配列から要素を順に取得する
  • インデックス番号を取得する
  • オブジェクトのプロパティを順に処理する
  • 数値を列挙したい場合
  • v-forによるループ処理の注意点
  • 配列の絞り込みには算出プロパティを利用する
  • 異なる要素のセットを繰り返し出力する - template要素
  • 配列の変更を反映する - 変更メソッド
  • Part 6：もっとデータバインディング
  • 属性に値をバインドする - v-bind
  • 複数の属性をまとめて指定する
  • 要素オブジェクトのプロパティを設定する
  • 値を一度だけバインドする - v-once
  • 要素にスタイルプロパティを設定する - v-bind:style
  • 複数のスタイル情報を適用する
  • ベンダープレフィックスを自動補完する
  • 要素にスタイルクラスを設定する - v-bind:class
  • v-bind:classのさまざまな設定方法
  • {{...}}式による画面のチラツキを防ぐ - v-cloak
  • Part 7：コンポーネント
  • コンポーネントの基本
  • コンポーネントの定義
  • コンポーネントの呼び出し
  • グローバル登録とローカル登録
  • コンポーネントへのパラメーターの引き渡し
  • プロパティ値の型を制限する
  • 検証ルールのさまざまな表現方法
  • コンポーネント配下のコンテンツをテンプレートに反映させる - スロット
  • 複数のスロットを利用する
  • Part 8：ディレクティブ／フィルター／プラグイン
  • ディレクティブの自作
  • ディレクティブの基本
  • イベント処理を伴うディレクティブ
  • プラグイン
  • 検証プラグインの利用
  • プラグインを自作する
  • Part 9：コマンドラインツールvue-cli
  • vue-cliのインストール
  • プロジェクトの自動生成
  • 補足：単一ファイルコンポーネント
  • Part 10：ルーティング
  • ルーターの基本
  • ルーティングの定義
  • ルートの有効化
  • トップページのテンプレート
  • 補足：プログラムからページ遷移
  • パスの一部をパラメータ—として引き渡す - ルートパラメーター
  • 複数のビュー領域を設置する
  • 入れ子のビューを設置する

正誤表

該当頁 該当箇所 修正刷
訂正箇所 訂正事項 更新日
p.- Part5　配列の変更を反映する - 変更メソッド ［リスト］ for_change.js 8行目 -
list[1] = 'strawberry'; this.list[1] = 'strawberry'; 2018/04/17
p.- Part7 検証ルールのさまざまな表現方法 （2）配列/オブジェクトの既定値は注意 -
data: {
　type: Object,
　default: function() {
　　return { value: 'Hoge' }
　}
},		 props: {
　data: {
　　type: Object,
　　 default: function() {
　　　 return { value: 'Hoge' }
　　 }
　}
},		 2019/07/30
p.- part10 ［リスト］/src/router/index.js（nest-viewプロジェクト） -
　　　children: [
　　　　{
　　　　　path: 'pages/:page_num',
　　　　　component: Page
　　　　}
　　　]		 　　　children: [
　　　　{
　　　　　path: 'pages/:page',
　　　　　component: Page,
　　　　　props: true
　　　　}
　　　]		 2020/02/05
p.- part10 ［リスト］/src/components/Page.vue（nest-viewプロジェクト） -
export default {
　data () {
　　return {
　　　page: this.$route.params.page_num
　　}
　}
}		 export default {
　props: {
　　page: String
　}
}		 2020/02/05

FAQ

書籍中のサンプルはバージョン2系を前提に作成されているため、サンプルを実行するためにはVeeValidateプラグインのインポート部分を以下のように書き換えてください。

＜対象ファイル＞
part08フォルダ内の「plugin.html」

＜修正内容＞
修正前
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js "> </script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/locale/ja.js "> </script>

修正後
<script src="https://cdn.jsdelivr.net/npm/vee-validate@2.2.15/dist/vee-validate.js "> </script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@2.2.15/dist/locale/ja.js "> </script>

更新日: 2020.02.01

お問い合わせ

書籍に関するご質問や誤りのご報告、ご意見・ご感想などをお寄せください。

Powered by メールフォーム 『オレンジフォーム』