動かして学ぶ!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