# コードと動作デモについて

このページでは「基礎から学ぶ Vue.js」の解説で使用している、サンプルコードと動作デモの一部を公開しています。主に、長めのコードのコピペ＆動作デモの確認用ページのため、コードの内容や機能についての解説はしていません。書籍と合わせて読んでいただけたら嬉しいです 🐹

コードを探したい場合は、ヘッダーの検索フォームに見出しの名前を入力すると見つけやすいです。掲載してない場合もあります 😢

# 学習のポイント

本書は、読み書きしながら最終的に何かが完成する、といったチュートリアルの内容ではありません。基本的に各セクションのコードは、機能を説明するための断片的なコードになっています。

単純にコードを書き写したり、動作を確認するだけではなく「別にエラーになっても構わない！」という気持ちで、プロパティやメソッドを追加したり、テンプレートを自由に書き換えてみましょう。エラーになった場合は、コンソールにどんなメッセージが表示されているか確認してみましょう。どんなコードが、どんなエラーを引き起こすかを知ることも大切です！

# エラーがおきてしまった！

まずは、コンソールを見てどんなメッセージが表示されているかを確認してみましょう。多くの場合、ここに表示されるファイル名＆行番号とメッセージがヒントとなり、エラーを解決できます。英語で表示されますが、Google 翻訳などを使って、必ず読むようにしましょう。

また、学習中に起きるエラーの原因の多くは、次のようなケースです。

不要なテンプレートやプロパティが残っていた
プロパティやメソッドを記述する場所が間違っていた

基本的に、セクションのコードを追加していく形でも問題ありませんが、セクションによって使用するプロパティ名がかぶることがあります。エラーが起きる場合に、それまでの余分なコードを消してから必要なコードのみを記述してみましょう。

... undefined というエラーは「○○ が定義されていません」といった内容ですが、「絶対合っているはずなのに、なぜかこのエラーが出てしまう 😠」ということがあります。実は、本当にこのエラーの通りで、よく見たら「算出プロパティを methods の中に書いてしまっていた」「消したプロパティをまだテンプレートで使っていた」というようなミスもありがちなので確認してみましょう！

# 書籍とサポートページの差異について

書籍では、簡潔なコードにするため、説明に直接関係のないオプションを省略している部分がいくつかありますが、このページではなるべくすべてを記述するようにしています。

また、装飾用のスタイルを付加したり、見た目を調整していることがあります。そのため、書籍のコードと完全に一致するとは限らないことを、ご了承下さい。

書籍のコードのすべてを掲載しているわけではなく、解説中の短いコードは除外しています。

# オンラインエディタを活用しよう

Fork してご利用下さい。

# Vue.js のバージョンについて

書籍ではバージョン「2.5.13」を使用していますが、2018/5 時点の最新バージョン「2.5.16」でも動作確認済みです。

# あわせて読むとはかどる書籍

本書の前提知識を満たしていない方や、あわせて読むとよりはかどりそうな書籍です。

# プログラミングや JavaScript 自体はじめてに近い方

スラスラ読める JavaScript ふりがなプログラミング（リブロワークス・及川卓也著）式がどんな意味を持つのか？から学べます。

# HTML や CSS 自体をしっかりと学ぶ

HTML5/CSS3 モダンコーディング（吉田真麻著）ある程度 HTML/CSS はできるけど、もうちょっとちゃんと学びたいという方にオススメ。

# JavaScript 自体をしっかりと学ぶ

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発（Ethan Brown 著） JavaScript を体系的に学びたい方。ある程度 JavaScript はできるけど、もうちょっとちゃんと学びたいという方にオススメ。

# Git や GitHub の使い方がわからない！

わかばちゃんと学ぶ Git 使い方入門（湊川あい著）漫画と図解を使って楽しく解説されています。

# Node.js や webpack についてもっと詳しく

Web デザイナーの仕事を楽にする! gulp ではじめる Web 制作ワークフロー入門（中村勇希著）本書ではサクッとしか書いていないコマンドラインの使い方についてより詳しく解説されています。

# セキュリティについて学ぶ

体系的に学ぶ安全な Web アプリケーションの作り方（徳丸浩著）改訂で JavaScript についても追加されてます 😄

# 正誤表

すでに見つかっている誤植です。大変申し訳ありません 🙇‍

CH	ページ	誤	正
2	76	`a.id > b.id ? a.id:b.id`	`a > b.id ? a:b.id`
6	199	(v-enter の説明) 対象要素がDOMに挿入される前に付与され、トランジションが終了したときに削除される。Enterのアクティブ状態を表す	(v-enter の説明) トランジションの開始する前に付与され、トランジションの開始時に削除される。Enterの開始状態を表す
8	259	`store.state.count`	`store.state.message`
8	259～	259～262 ページのコアコンセプトのセクションで使用している `Vuex.Store()` コンストラクタの閉じ括弧「`)`」（コードの一番最後の文字）が不足していました
8	259	`a.price > b.price ? a.price:b.price`	`a > b.price ? a:b.price`

書籍中の誤記については、書籍 2 ページに記載されている「『基礎から学ぶ Vue.js』サポート係」までご連絡ください。

サポートページの誤記については、サポートページのリポジトリ Issues / PullRequest または、筆者の Twitter までご連絡ください。

# 質問について

書籍中の Vue.js に関する技術的な質問については、サポートページのリポジトリ Issues または、筆者の Twitter までお気軽にどうぞ！質問の際、質問内容の該当ページをお書き下さい。書籍と関係のない質問については、お答えできない場合があります。ご了承下さい 🙏

はじめに →