動かして学ぶ！Vue.js開発入門（森 巧尚）｜翔泳社の本
  1. ホーム >
  2. 書籍 >
  3. 動かして学ぶ！Vue.js開発入門

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

著

形式：
書籍
発売日：
ISBN：
9784798158921
定価：
3,520円（本体3,200円＋税10%）
仕様：
A5・272ページ
カテゴリ：
Webプログラミング
キーワード：
#Web・アプリ開発,#プログラミング,#ネットワーク・サーバ・セキュリティ,#開発手法
シリーズ：
NEXT ONE
紙の書籍
電子書籍

購入はこちら

企業・教育機関での一括購入

【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アプリ開発の教科書』（マイナビ）など、多数。

Vue.jsでWebアプリを開発しよう！
本書の内容
トピックに分けて解説

細かくトピックに分けて、ていねいに解説。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