概要

HTML/JSの知識だけでVue.jsの基礎をアプリ作成まで習得する

想定読者

HTMLとJavaScriptの基礎は知っているがVue.jsにはまったく触れたことがない入門者

こんな人には向いていない

• Vue 3のComposition APIやTypeScriptを組み合わせた開発を学びたい人(本書は2020年6月刊行でOptions APIベース)
• Vue.jsの基礎はすでに習得済みで状態管理やVue Routerの実践的な使い方を求める人
• ReactやAngularとの設計思想の比較を通じてフレームワーク選定の判断を深めたい人

読了後にできるようになること

• v-bind / v-model / v-if / v-forなどの主要ディレクティブを使ってHTMLテンプレートを動的に操作できる
• Vueインスタンスのデータフローと双方向バインディングの仕組みを理解し、バリデーション付き入力フォームを実装できる
• イベントハンドリングとメソッド・算出プロパティを組み合わせたインタラクティブなUIを構築できる
• コンポーネントの基本概念を理解し、機能をパーツに分割しながら画像ビューワーアプリを組み上げられる
• TODOアプリを題材に、条件付きレンダリング・リストレンダリング・スタイルバインディングを組み合わせた実装手順を一通り経験できる

本書のキー概念(章解説)

• 第 1 章 Vue.jsを学ぶ準備をしよう — 環境構築とひな形ファイルの作成まで。手順通りに進めれば詰まりにくい導入章
• 第 2 章 Vue.jsの基本を学ぼう — Vueインスタンス・データ出力・バインディング・デバッグの基礎。本書の核となる概念が集中している
• 第 3 章 イベントハンドリングを学ぼう — カウンターアプリでデータの流れを体感する。コード量は少ないが手を動かす価値が高い
• 第 4 章 条件付きレンダリングを学ぼう
• 第 5 章 リストレンダリングを学ぼう
• 第 6 章 バインディングで動的にスタイルを変えよう
• 第 7 章 TODOアプリを作成しよう — 追加・一覧・削除・バリデーションを段階的に組み上げる集大成章。CHAPTER 2-6の学習成果を確認できる
• 第 8 章 画像ビューワーを作成しよう — コンポーネント設計の入り口。パーツ分割の考え方を初めて体験する章として実用的

ハイライト

• Vue.jsアプリケーションは、基本的にはHTMLを拡張したテンプレートと、JavaScriptのコードから構成されます。そのため、HTMLとJavaScriptに馴染みがあれば、基本的な使い方はすぐに理解できるでしょう。(本書の入門対象を最も端的に示す記述。前提知識の判断軸として購買判断に直結する)
• Vue.jsを学習するテキストとして、最もやさしい書籍という意図で本書は制作されました。タイトル通り、「たった1日で基本が身に付く！」Vue.jsの入門書です。(制作意図が明示されており、どの難易度帯の読者に向けた書籍かを端的に伝えている)

外部からの言及

• Vue.jsの書籍紹介・まとめ記事では、HTMLとJavaScriptの基礎知識があれば当日中に概要を掴める入門書として位置づけられており、約200ページのコンパクトな構成でわかりやすくまとまっているという評価が複数見られる。タイトルに超入門を冠する別著(掌田津耶乃氏シリーズ)との混同を避けるため著者名を明記して区別している記事もある(qiita)

編集メモ

WebFetchで確認したQiita言及記事2件 / 累計likes 85 / Rakutenランキングデータなし。言及数・likes数ともにpractical基準(記事5件以上またはランキング履歴あり)に未達のためsupplementaryとする

読む前に押さえておきたいこと

• HTMLの基本構造とタグの役割(div / ul / li / form / input等)を読める程度の知識
• JavaScriptの変数・関数・配列・オブジェクトの基礎的な書き方(ES2015以降のarrow functionやtemplate literalに触れておくとスムーズ)

学習のコツ

• CHAPTER 7(TODOアプリ)とCHAPTER 8(画像ビューワー)はそれまでの章の総仕上げ。途中で詰まった箇所はアプリ章から逆引きして該当セクションを再読すると全体のつながりが見えやすい
• CHAPTER 3のカウンターアプリはコード量が少ないが、データフローを手で動かして確認する演習として重要。動作確認を省略せずに次章へ進むこと
• CHAPTER 6のスタイルバインディングは、CSSに慣れている読者なら先に目を通しておくと双方向性の理解が深まり、CHAPTER 4-5のレンダリング学習と並行して読み合わせやすい