MdNCORPORATION

プロフェッショナルWebプログラミング Vue.js

山田 典明 著/長澤 賢 著/関口 勇樹 著
定価 3,850円
(本体 3,500円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2020-11-11
仕様 B5変形判/416P
ISBN 978-4-295-20024-6
いまのWebアプリケーションの構築には、フレームワークの採用が当たり前になっています。なかでもVue.jsはUIの構築に特化した機能を備えており、既存のWebサイト等にも段階的に取り入れやすい設計になっています。本書は、HTML・CSS・JavaScriptの基本的な知識をもっている方向けに、いま学んでおくべきVue.jsの基本を解説していきます。本書は3部構成に分かれています。“基本”のパートでは、ToDoアプリケーションを作成しながら、Vue.jsの基礎をじっくりと身につけていきます。次の“実践”のパートでは、モーダルやカルーセル、リスト抽出にクイズコンテンツと、よくあるUIや機能を実際にVue.jsでWebサイトへ組み込む方法を解説。最後のパートとなる“最前線”では、Nuxt.jsとHeadless CMSを利用したJamstackによるサイト構築の最新ワークフローを身につけます。Vue 3.xに対応しており、掲載コードはダウンロードできます。実際に手を動かしながら現場でのVue.jsの使い方が身につく、これから本格的に学びたい人に最適の1冊です。

■ページ見本






目次

■PART1 Vue.jsの基本を学ぶ

◯CHAPTER1 Vue.jsとは?
01 なぜVue.jsが求められているのか
02 Vue.jsのインストール方法
03 Vue.js devtoolsのインストール方法
04 Vue3について

◯CHAPTER2 ToDoアプリで基本を学ぶ(1) Vue.jsの第一歩
01 作成するToDoアプリケーションの機能
02 Vueインスタンスの作成とマウント
03 dataで状態を定義する
04 テンプレート構文でデータを表示
05 ライフサイクルとは

◯CHAPTER3 ToDoアプリで基本を学ぶ(2) v-modelでフォームの使い勝手を向上
01 テキストボックスを操作する
02 チェックボックスを設定する
03 セレクトボックスを設定する
04 修飾子を使用して動作を変更

◯CHAPTER4 ToDoアプリで基本を学ぶ(3) フォームの操作
01 computedでデータを表示
02 methodsでメソッドを定義
03 v-onでイベントを購読&実行
04 リアクティブなデータ
05 watchでデータの変更を監視
06 v-bindでHTML属性を変更
07 HTML要素を表示・非表示にする
08 v-forでデータ配列の内容を表示

◯CHAPTER5 ToDoアプリで基本を学ぶ(4) コンポーネント
01 コンポーネント
02 親子コンポーネント間の通信(props)
03 親子コンポーネント間の通信($emit)
04 を用いたアニメーション


■PART2 Vue.jsをWebサイトに組み込む

◯CHAPTER1 WebサイトでのVue.jsの使いどころ
01 WebサイトにおけるVue.jsの使いどころ

◯CHAPTER2 モーダルを作ってみよう
01 モーダルの要素と仕様
02 サムネイルリストを作成する
03 クリックイベントを追加する
04 閉じるボタンを作成する
05 PREV、NEXTボタンを作成する
06 モーダルを完成させる

◯CHAPTER3 カルーセルを作ってみよう
01 カルーセルの要素と仕様
02 カルーセルとページャーのテンプレート

◯CHAPTER4 アコーディオンを作ってみよう
01 アコーディオンの実装に必要な要素と仕様
02 アコーディオンのテンプレート
03 アコーディオン機能の実装

◯CHAPTER5 商品一覧表示&検索を作ってみよう
01 商品一覧表示&検索に必要な要素
02 商品一覧を表示する
03 商品名での検索を実装する
04 価格での検索を実装する

◯CHAPTER6 クイズを作ってみよう
01 簡易クイズアプリに必要な要素
02 問題&解答コンポーネントを作成する
03 結果表示コンポーネントを作成する
04 親コンポーネントを作成する


■PART3 Jamstackで静的サイトを作る

◯CHAPTER1 Nuxt.jsの準備をする
01 Jamstackとは?
02 Nuxt.jsとは?
03 Node.jsのインストール
04 Nuxt.jsのインストール

◯CHAPTER2 Nuxt.jsで静的なページを作る
01 静的ページのワイヤーと構成
02 Nuxtのディレクトリ構成を確認する
03 トップページを作る
04 パーツのコンポーネント化
05 下層ページを作る
06 メニューページを作る
07 お知らせ一覧ページを作る
08 お知らせ詳細ページを作る

◯CHAPTER3 部分的にCMS化する
01 Headless CMSとは?
02 microCMSとは?
03 フィールド作成と記事追加
04 microCMSからデータを取得
05 Nuxt.jsにデータを表示する
06 お知らせの登録データを表示
07 お知らせの詳細ページを作成

◯CHAPTER4 Netlifyへデプロイする
01 Netlifyとは?
02 Netlifyの登録とGitHubの連携
03 NetlifyとmicroCMSの連携
04 Nuxt.jsのページをNetlifyへアップ
05 サイト更新のワークフロー

ダウンロードデータ

掲載コードのダウンロードについて
このたびは、『プロフェッショナルWebプログラミング Vue.js』をご購入いただきまして、誠にありがとうございます。
以下に本書に掲載しているコードのダウンロードファイルをご用意しましたので、ご利用ください。

MdN_VUEJS3.zip(約1MB)
ダウンロードにあたってのご注意
・ダウンロードファイルは、ZIP形式で圧縮されています。Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。

・ダウンロードファイルには「はじめにお読みください.html」が同梱されていますので、ご使用の前に必ずお読みください。
ダウンロードファイル解凍時のご注意
Windowsをご利用の場合は、OS標準の機能ではダウンロードファイルをダブルクリックしても正しく解凍できない場合があります。データの閲覧に問題がある場合は、次の手順でファイルの解凍をお試しください。

[1]ダウンロードしたファイルを右クリック
[2]表示されたメニューから[すべてを展開...]を選択
[3]ファイルを解凍するダイアログが表示されるので、保存場所を選択して実行
[4]指定した場所にファイルが解凍される
・弊社Webサイトからダウンロードできるサンプルデータは、本書の解説内容をご理解いただくために、ご自身で試される場合にのみ使用できる参照用データです。その他の用途での使用や配布などは一切できませんので、あらかじめご了承ください。

・弊社Webサイトからダウンロードできるサンプルデータの著作権は、それぞれの制作者に帰属します。

・弊社Webサイトからダウンロードできるサンプルデータを実行した結果については、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。

・本書に掲載されているコードのコメントや改行位置は、紙面掲載用として加工しており、ダウンロードしたサンプルデータとは異なる場合があります。あらかじめご了承ください。

お詫びと訂正

お詫びと訂正のお知らせ
このたびは『プロフェッショナルWebプログラミング Vue.js』をご購入いただきまして、誠にありがとうございました。

本書の記載に誤りがありましたため、ここにお詫びして訂正を申し上げます。
間違いと訂正の内容は次の通りです。

(1)本書のP416の奥付にて、カバーイラストのクレジットが記載されておりませんでした。
正しいカバーイラストのクレジットは下記となります。
カバーイラスト  武政 諒
(2)P031において、ポイント内の一文に誤りがございました
誤)・Vue.createAppの引数に定義を機能していく

 ↓

正)・Vue.createAppの引数に機能を定義していく
(3)P037において、記事タイトル下の文章に誤りがございました
誤)Vueインスタンスの基本の最後に、ライフスタイルについて触れておきます。ライフスタイルは、インスタンスが生成されてから破棄されるまでの過程です。

  ↓

正)Vueインスタンスの基本の最後に、ライフサイクルについて触れておきます。ライフサイクルは、インスタンスが生成されてから破棄されるまでの過程です。
(4)P190において、下記の文章に誤りがございました
誤)中身が開いた状態では場合タイトルの背景色を変更する

  ↓

正)中身が開いた状態ではタイトルの背景色を変更する
(5)P215において、本文2行目に用語の誤りがございました
誤)v-ifディレクトリを追加して表示を切り替えるよりも

  ↓

正)v-ifディレクティブを追加して表示を切り替えるよりも
(6)P288において、[09]のコードのキャプションにファイル名の誤りがございました。
誤)[09]ヘッダのコンポーネント(components/LayoutWrapper.vue

  ↓

正)[09]ヘッダのコンポーネント(components/LayoutHeader.vue
(7)P385において、 図中のメソッド名に誤りがございました。
誤)asyncDate()

  ↓

正)asyncData()
読者のみなさま、ならびに関係者のみなさまには、ご迷惑をおかけしてしまい、誠に申し訳ございませんでした。

訂正して深くお詫び申し上げます。

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊