概要

JavaScript・TypeScript・Vue.jsを一冊で通読し、Vuexまで含むSPA開発の基礎を身につける

想定読者

HTMLとCSSの基礎は押さえており、これからJavaScriptとフロントエンドフレームワークを同時に学びたい入門者

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

• JavaScript の構文はすでに習得済みで、Vue 3 以降の Composition API や Nuxt.js の実践知識を求めている人
• TypeScript を本格的に習得したい人(本書の TypeScript 章は概要レベルにとどまる)
• フレームワーク選定の比較検討(React / Angular との対比)を求める中級以上のエンジニア

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

• ECMAScript 2015 構文(アロー関数・クラス・モジュール・Promise)を使った現代的な JavaScript の書き方
• イベントリスナー・非同期通信・Cookie といった実務頻出 API の基本的な扱い方
• TypeScript の型宣言・インターフェイス・クラス宣言の初歩的な読み書き
• Vue.js のディレクティブ・コンポーネント・ミックスインを組み合わせた UI 構築
• Vue CLI でプロジェクトを作成し、Vuex でデータを管理する CRUD アプリの構築手順
• ルーティング設定(Vue Router)による画面遷移の実装方法

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

• 第 1 章 JavaScriptを学ぶための準備をしよう — Chrome + VS Code のセットアップのみ。環境構築経験者は短時間で通過できる
• 第 2 章 JavaScriptの基本を学ぼう — 四則演算からクラス・非同期通信まで幅広くカバー。本書の中核で最もページ数が多い
• 第 3 章 TypeScriptの基本を学ぼう — 型・クラス・インターフェイスの概要止まり。TypeScript を深く学ぶには別途専門書が必要
• 第 4 章 Vue.jsの基本を学ぼう — ディレクティブ・コンポーネント・ミックスインの実装。Vue 2 API ベースの記述
• 第 5 章 Vue CLIでアプリを作ろう — Vue CLI + Vuex + Vue Router を使った CRUD アプリの通し実装。実際に手を動かしながら通読すると効果が高い

ハイライト

• 今JavaScriptを学ぶなら、この周辺技術は必須だと筆者が考える以下の内容について解説しています。JavaScript／ECMAScript／Vue.js／TypeScript(JavaScript 単体ではなくエコシステム全体を見渡す本書の編集意図が明確に示されている箇所)

外部からの言及

• JavaScript・TypeScript・Vue.js の 3 領域を 1 冊で広くカバーする点が評価される一方、各トピックの解説がやや薄めとの指摘がある。入門の全体像をつかむ用途には向くが、実務レベルの習熟には各分野の専門書を併用することが推奨されている(qiita)

編集メモ

実在確認できた Qiita 言及記事 1 件 / 累計 likes 21。Rakuten ランキング情報なし。同時期の Vue 2 系入門書の中では参照例が限定的で、補完的な選択肢と位置づける

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

• HTML と CSS の基本的なタグ・プロパティが読み書きできること
• ブラウザの開発者ツール(コンソールタブ)を開いてエラーを確認できる程度の操作経験

学習のコツ

• Chapter 2 は量が多いため、まず変数・関数・制御構造(前半)を通読し、非同期通信・Cookie(後半)は Chapter 5 のアプリ実装に差し掛かった段階で戻って読むと吸収しやすい
• Chapter 3(TypeScript)は概要習得が目的。詳細を追わず、型の考え方を掴む程度に留め、Chapter 4 へ進む判断で問題ない
• Chapter 5 は必ず手元で動かしながら読む。CRUD の各操作が Vuex のアクションとどう対応するかを図示しながら追うと理解が早い
• Vue 2 の Options API ベースのため、Vue 3 / Composition API への移行を見据えるなら読了後に公式マイグレーションガイドを参照することを勧める