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

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

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

学習のポイント

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

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

エラーがおきてしまった!

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

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

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

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

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

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

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

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

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

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

Fork してご利用下さい。

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

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

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

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

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

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

JavaScript 自体をしっかりと学ぶ

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

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

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

正誤表

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

第二刷では修正済みです。

CHページ
2 76 a.id > b.id ? a.id:b.id a > b.id ? a:b.id
6 199 対象要素がDOMに挿入される前に付与され、トランジションが終了したときに削除される。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 までお気軽にどうぞ! 質問の際、質問内容の該当ページをお書き下さい。 書籍と関係のない質問については、お答えできない場合があります。 ご了承下さい 🙏