【Vue.js(ビュージェイエス)とは】
Vue.jsは、Webアプリ開発用のJavaScriptフレームワークです。
比較的小規模の開発から利用でき、さらにWebアプリ開発で主流になりつつある、
シングルページアプリケーション(SPA)を構築することもできるため、
Web開発で大人気のフレームワークです。
【本書の概要】
Vue.jsの基本機能を押さえたサンプルを元に、Webアプリ開発手法を学ぶことができます。
具体的には、ニーズの高い、データバインディング、イベント、ライブラリの利用、コンポーネントなど
開発の現場でニーズの高いトピックを中心に解説。
さらに現在、主流になりつつあるSPAの作成に役立つポイントも盛り込みます。
【ターゲット】
フロントエンドエンジニア初心者
【著者】
森巧尚(もり・よしなお)
この世にパソコンが誕生したばかりの時代からミニゲームを作り続けて30数年。
現在は、iPhoneアプリやFlash、HTML5などのオリジナルゲームのコンテンツ制作、執筆活動、
関西学院大学非常勤講師などを行う。
最近は、IchigoJamで小学生向けのプログラミングを行うPCN大阪やCoder Dojoなどでも活動している。
著書:『Python1年生』『Java1年生』(翔泳社)、『小学生でもわかるiPhoneアプリの作り方』(秀和システム)、
『SwiftではじめるiPhoneアプリ開発の教科書』(マイナビ)、『iPhoneのゲームアプリをつくろう!』(秀和システム)
『よくわかるiPhoneアプリ開発の教科書』(マイナビ)など、多数。
細かくトピックに分けて、ていねいに解説。1つ1つ習得していくことで、Webアプリ開発手法が確実に身につきます。
文章だけでは理解しにくい事柄は図で解説します。具体的にイメージできるので、頭にスッと入ってきます。
操作の手順を画像で丁寧に解説。番号順に操作すれば、迷わずにゴールにたどり着けます。
Chapter 1 Vue.jsって何?
01 Vue.jsって何?
02 Vue.jsは「データと表示をつなげる仕組み」
03 インストールしてみよう
04 試してみよう
05 まとめ
Chapter 2 データを表示するとき
01 Vue インスタンスを作る:new Vue
02 データをそのまま表示する:{{ データ }}
03 使えるデータの種類
04 まとめ
Chapter 3 属性を指定するとき
01 要素の属性をデータで指定する:v-bind
02 まとめ
Chapter 4 ユーザーの入力をつなぐとき
01 入力フォームをデータとつなぐ:v-model
02 まとめ
Chapter 5 ユーザーの操作をつなぐとき
01 イベントとつなぐ:v-on
02 まとめ
Chapter 6 条件とくり返しを使うとき
01 条件によって表示する:v-if
02 くり返し表示する:v-for
03 まとめ
Chapter 7 Google Chartsと連動させてみよう
01 Google Chartsとは?
02 Google Chartsと連動させる
03 まとめ
Chapter 8 データの変化を監視するとき
01 データを使って別の計算をする:算出プロパティ
02 データの変化を監視する:監視プロパティ
03 まとめ
Chapter 9 Markdownエディタを作ってみよう
01 Markdown エディタとは?
02 Markdown エディタを作る
03 まとめ
Chapter 10 アニメーションするとき
01 表示/非表示時にアニメーションする:transition
02 リストのトランジション:transition-group
03 リストの並びが移動するトランジション
04 まとめ
Chapter 11 ToDoリストを作ってみよう
01 ToDoリストとは?
02 仮データでToDoリストを表示する
03 改良する:追加&削除機能
04 まとめ
Chapter 12 部品にまとめるとき
01 部品にまとめる:コンポーネント
02 コンポーネントのdata はfunction にする
03 値を渡す:props
04 まとめ
Chapter 13 JSONデータを表示させてみよう
01 JSONファイルの読み込み方
02 JSONデータを読み込んで、コンポーネントで並べる
03 改良する:トランジションをつける
04 まとめ
お問い合わせ
内容についてのお問い合わせは、正誤表、追加情報をご確認後に、お送りいただくようお願いいたします。
正誤表、追加情報に掲載されていない書籍内容へのお問い合わせや
その他書籍に関するお問い合わせは、書籍のお問い合わせフォームからお送りください。
利用許諾に関するお問い合わせ
本書の書影(表紙画像)をご利用になりたい場合は書影許諾申請フォームから申請をお願いいたします。
書影(表紙画像)以外のご利用については、こちらからお問い合わせください。
ご購入いただいた書籍の種類を選択してください。
刷数は奥付(書籍の最終ページ)に記載されています。
現在表示されている正誤表の対象書籍
書籍の種類:
書籍の刷数:
本書に誤りまたは不十分な記述がありました。下記のとおり訂正し、お詫び申し上げます。
対象の書籍は正誤表がありません。
最終更新日:2022年02月08日
発生刷 |
ページ数 |
書籍改訂刷 |
電子書籍訂正 |
内容 |
登録日 |
1刷 |
006
「表1.1:Vue.jsの各バージョンのコードネーム」 |
3刷 |
済 |
誤 |
末尾に以下を追加します。 |
正 |
2.6 | Macross | 超時空要塞マクロス |
備
考 |
※リフローEPUBの場合、Chapter 1の3つ目の「ワンポイント」囲み内「表1.1:Vue.jsの各バージョンのコードネーム」が該当箇所になります。 |
|
2022.02.08 |
1刷 |
038
図2.8:JavaScriptの式を使って表示する |
3刷 |
済 |
誤 |
(画像クリックで拡大) |
正 |
(画像クリックで拡大) |
|
2022.02.08 |
1刷 |
146
Chapter 8「01 データを使って別の計算をする:算出プロパティ」1つ目の「HTML」 |
3刷 |
済 |
誤 |
{{ myPrice * 1.08 }}
{{ "こんにちは、"+ myName + "さん" }}
{{ myName.substr(0,1) }} |
正 |
{{ myPrice * 1.10 }}
{{ "こんにちは、"+ myName + "さん" }}
{{ myName.substr(0,1) }} |
備
考 |
1行目の消費税率「1.08」を「1.10」に変更します。 |
|
2022.02.08 |
1刷 |
149
本文5行目、および「JS」コードの下から5行目 |
3刷 |
済 |
誤 |
1.08 |
正 |
1.10 |
備
考 |
消費税率「1.08」を「1.10」に変更します。
※リフローEPUBの場合、Chaptre 8の「01 データを使って別の計算をする:算出プロパティ」の1つ目の小見出し「金額を入力したら、消費税込みの金額を計算する例:computedtest1.html」の「HTML」の下にある段落、および「JS」コードの下から5行目が該当箇所になります。 |
|
2022.02.08 |
1刷 |
149
図8.2:金額を入力したら、消費税込みの金額を計算する |
3刷 |
済 |
誤 |
(画像クリックで拡大)
|
正 |
(画像クリックで拡大)
|
備
考 |
消費税率「1.08」を「1.10」に変更します。 |
|
2022.02.08 |
1刷 |
150
「単価と個数を入力したら、税込み金額を計算する例:computedtest2.html」の「JS」コードの上の本文 下から2行目 |
3刷 |
済 |
誤 |
this.sumを1.08倍 |
正 |
this.sumを1.10倍 |
備
考 |
消費税率「1.08」を「1.10」に変更します。
※リフローEPUBの場合、Chaptre 8の「01 データを使って別の計算をする:算出プロパティ」の2つ目の小見出し「単価と個数を入力したら、税込み金額を計算する例:computedtest2.html」の「JS」コードのすぐ上にある段落が該当箇所になります。 |
|
2022.02.08 |
1刷 |
151
「単価と個数を入力したら、税込み金額を計算する例:computedtest2.html」の「JS」コード 下から5行目、図8.3:単価と個数を入力したら、税込み金額を計算する例 |
3刷 |
済 |
誤 |
「JS」コード
return this.price * this.count;
},
// 合計金額が変わったら、消費税込み金額を算出する
taxIncluded: function() {
return this.sum * 1.08;
}
}
})
</script>
図8.3
(画像クリックで拡大) |
正 |
「JS」コード
return this.price * this.count;
},
// 合計金額が変わったら、消費税込み金額を算出する
taxIncluded: function() {
return this.sum * 1.10;
}
}
})
</script>
図8.3
(画像クリックで拡大) |
備
考 |
消費税率「1.08」を「1.10」に変更します。
※リフローEPUBの場合、Chaptre 8の「01 データを使って別の計算をする:算出プロパティ」の2つ目の小見出し「単価と個数を入力したら、税込み金額を計算する例:computedtest2.html」の「JS」コードの下から5行目、および図8.3が該当箇所になります。 |
|
2022.02.08 |
1刷 |
154
computedtest4.htmlのコード |
2刷 |
済 |
誤 |
<div id="app">
<ul>
<input v-model="findWord">
<li v-for="item in findItems">{{item}}</li>
</ul>
</div>
|
正 |
<div id="app">
<input v-model="findWord">
<ul>
<li v-for="item in findItems">{{item}}</li>
</ul>
</div>
|
備
考 |
※リフローEPUBの場合、Chaptre 8の「01 データを使って別の計算をする:算出プロパティ」の4つ目の小見出し「文字を入力すると、その文字を含む項目だけ表示される例:computedtest4.html」の「HTML」コードが該当箇所になります。 |
|
2019.01.28 |
1刷 |
170
「図8.16:図で見てわかるまとめ[computed]」内の「Vueインスタンス」 |
3刷 |
済 |
誤 |
new Vue({
el: '#app',
data: {
price: 100
},
computed: {
taxIncluded: function() {
return this.price * 1.08;
}
}
}) |
正 |
new Vue({
el: '#app',
data: {
price: 100
},
computed: {
taxIncluded: function() {
return this.price * 1.10;
}
}
}) |
備
考 |
下から4行目の消費税率「1.08」を「1.10」に変更します。 |
|
2022.02.08 |
1刷 |
172
「データが変化したら、自動的に再計算するとき」の②「JS」コード |
3刷 |
済 |
誤 |
computed: {
taxIncluded: function() {
return this.price * 1.08;
}
} |
正 |
computed: {
taxIncluded: function() {
return this.price * 1.10;
}
} |
備
考 |
3行目の消費税率「1.08」を「1.10」に変更します。
※リフローEPUBの場合、Chapter 8の「03 まとめ」の「書き方のおさらい」の1つ目の小見出し「データが変化したら、自動的に再計算するとき」の「JS」コードが該当箇所になります。 |
|
2022.02.08 |
1刷 |
229
「propsオプションを作る」の書式 |
2刷 |
済 |
誤 |
props: function () {
プロパティ名: データ型
} |
正 |
props: {
プロパティ名: データ型
} |
備
考 |
※リフローEPUBの場合、Chapter 12の「03 値を渡す:props」の最初の書式「propsオプションを作る」が該当箇所になります。 |
|
2019.05.22 |
1刷 |
245
「2.HTML要素を用意する」の「HTML」コード |
11刷 |
済 |
誤 |
<div id="app">
<div>
<my-product>
</div>
</div>
<button >ソート</button>
<button >シャッフル</button>
|
正 |
<div id="app">
<div>
<my-product>
</div>
<button >ソート</button>
<button >シャッフル</button>
</div>
|
備
考 |
※リフローEPUBの場合、Chapter 13の「propsオプションを作る」の最初の小見出し「配列データをコンポーネントで並べる例:jsontest1.html」の「2. HTML要素を用意する」の「HTML」コードが該当箇所になります。 |
|
2021.03.12 |
1刷 |
v
「本書のサンプルの動作環境」の「表1:実行環境」 |
3刷 |
済 |
誤 |
表の下に以下の補足を追記します。 |
正 |
※ Vue.js のバージョン2.6(2021年時点での最新版)で動作することも確認しています。 |
備
考 |
※リフローEPUBの場合、「はじめに」の後にある2つ目の項目「本書のサンプルの動作環境と付属データ・会員特典データについて」の表1が該当箇所になります。 |
|
2022.02.08 |