これからはじめる人の JavaScript/Vue.js の教科書

「JavaScript を学ぼう」
そんなふうに思っても、「JavaScript」は現在では、非常に関連技術の多い言語になっています。JavaScript 関連のキーワードを上げてみると、「ECMAScript / TypeScript / Vue.js / Nuxt.js / React / Angular / jQuery」など、上げていったらキリがありません。
これらは「JS ライブラリー」とか「JS フレームワーク」などと呼ばれている JS の周辺技術で、現在のウェブサイト制作や、ウェブアプリ開発では、これらの周辺技術の理解が必須になっています。

本書は、こういった事情に合わせて、今 JavaScript を学ぶなら、この周辺技術は必須だと筆者が考える以下の内容について解説しています。

JavaScript / ECMAScript / Vue.js / TypeScript

ぜひ本書を通じて、JavaScript の魅力と現在の JavaScript 開発のトレンドを抑えて頂けると幸いです。これからのウェブ開発にお役に立つことを願っています。

(「はじめに」より一部修正)

「Chapter1 JavaScript を学ぶための準備をしよう」では、JavaScript を学ぶための環境構築を行います。といっても、Google Chrome (ウェブブラウザー) と、Visual Studio Code (エディター) をインストールするだけの簡単な準備です。

「Chapter2 JavaScript の基本を学ぼう」では、JavaScript を基本からみっちり学びます。四則演算、制御構造、変数、配列、関数といった基本的なところから、イベントリスナーの使い方、クラスの定義、モジュール、非同期通信、Cookie の使い方など、JavaScript を実務で使う際には必須となるような実践的な内容まで学びます。EcmaScript2015 の文法で学びますが、必要に応じて古い文法についても説明しています。

「Chapter3 TypeScript の基本を学ぼう」では、TypeScript について知っておきたいことを一通り学びます。TypeScript の基本的な使い方から、関数、さまざまな型、クラス宣言、インターフェイスの使い方などまで解説します。

「Chapter4 Vue.js の基本を学ぼう」では、現在制作の現場でよく使われているライブラリである Vue.js について学びます。基本的なディレクティブの使い方を学んだあと、メソッドやコンポーネント、ミックスインの定義方法を学び、実用的なプログラムを作ります。

「Chapter5 Vue CLI でアプリを作ろう」では、Vue CLI を使って、簡単なメモ管理のアプリケーションを作成します。プロジェクトの作成から始まり、ルーティングを設定し、新規追加・一覧・編集・削除の機能を作っていきます。Vuex を使って、データの保存も行い、コンポーネントを作って共通のパーツを追加するところまで行います。

『これからはじめる人の JavaScript/Vue.js の教科書』 (たにぐちまこと 著、マイナビ出版、2020 年 4 月刊) は、JavaScript の基本から TypeScript の基本、Vue.js の基本、Vue CLI を使ったアプリの作成までを 1 冊で順に学ぶ入門書です。版元の紹介文に引かれた「はじめに」の一部で、著者は JavaScript の関連技術として ECMAScript、TypeScript、Vue.js、Nuxt.js、React、Angular、jQuery などを挙げ、学ぶなら欠かせないと考える内容として JavaScript、ECMAScript、Vue.js、TypeScript を解説すると述べています。NDL の書誌は本書を ES2015 以降に対応と記録しています。

全 5 章の流れ、開発環境の準備から Vue CLI のメモアプリまで

目次は第 1 章「JavaScript を学ぶための準備をしよう」から第 5 章「Vue CLI でアプリを作ろう」までの全 5 章です。第 1 章では Google Chrome と Visual Studio Code を入れて学習の環境を整え、ECMAScript と JavaScript の関係を確かめます。第 2 章「JavaScript の基本を学ぼう」は、画面への文章の表示や四則演算から始まり、変数、if、while と for、配列、関数、クラスの定義、JSON データの読み込み、addEventListener によるイベントの処理、正規表現による入力のチェック、モジュール、非同期通信、ブラウザーへの情報の保存までを、1 年が何秒間かの計算や足し算ゲーム、郵便番号の形式のチェックといった小さな題材で 1 つずつ進めます。版元の紹介文は、ES2015 の文法で学び、必要に応じて古い文法も説明すると案内しています。第 3 章「TypeScript の基本を学ぼう」は ES2015 を古いウェブブラウザーでも使う方法とトランスコンパイラーの種類から入り、第 4 章「Vue.js の基本を学ぼう」は v-bind、v-model、v-if、v-for、v-on のディレクティブからコンポーネントとミックスインへ進みます。第 5 章ではプロジェクトの作成から始めて、メモの追加、一覧、編集、削除の画面を作り、Vuex によるデータの保管と共通パーツのコンポーネント化までを扱います。巻末には索引があります。

素の JavaScript と Vue.js で同じ題材を書き比べる

第 2 章と第 4 章の目次には、同じ題材が繰り返し現れます。1 から 365 までの数字の表示は第 2 章で while と for、第 4 章で v-for を使って書き、曜日を日本語で表示する題材も両方の章にあります。ボタンのクリックに反応して重複クリックを防ぐ題材は、第 2 章では addEventListener、第 4 章では v-on で書き直します。素の JavaScript では、どの要素を探してどう書き換えるかという手順を自分で書き並べる必要があります。これに対して Vue.js では、画面に表示するデータとテンプレートの対応を宣言しておけば、データが変わった時に画面の側が追従します。同じ動きを 2 通りで書くことで、フレームワークが肩代わりしている作業がどこなのかを、コードの差として確かめられる構成です。

TypeScript と画面遷移の仕組みを支える技術背景

第 3 章は古いウェブブラウザーへの対応から TypeScript に入ります。JavaScript の新しい文法を使う時には、それをどの環境でも動く形に変換する工程がつきものです。TypeScript は JavaScript に型の記述を加えた言語で、書いたコードを JavaScript に変換する段階で型の食い違いを見つけられるため、規模が大きくなるほど誤りを早く拾えます。第 5 章で使う Vue Router は、URL に応じて表示するコンポーネントを切り替え、ページ全体を読み込み直さずに画面を移る SPA ルーティング の仕組みを担います。Vuex は、複数の画面やコンポーネントから使うデータを 1 か所のストアにまとめて管理するための道具です。メモアプリの追加、一覧、編集の画面が同じデータを共有する場面で、この 2 つの役割が具体的に見えてきます。本書の内容は、2020 年 4 月の刊行時点の Vue.js と Vue CLI、Vuex を前提にしています。

これから JavaScript と Vue.js を学び始める人に

書名が示すとおり、本書が想定しているのはこれから JavaScript を学び始める人です。第 1 章でブラウザーとエディターを入れるところから始まり、第 5 章で 1 つのアプリを形にするところまで進むため、基本の文法とフレームワークの使い方を別々の本で学ぶより、1 冊の中で順につなげて学びたい人に向いています。一方で、紹介文で関連技術として名前の挙がる React、Angular、Nuxt.js には目次に章が無く、これらを学ぶことが目的なら別の本が必要です。また、本書のコードを手元で動かす時は、刊行時点の Vue.js と周辺の道具の前提に合わせて環境をそろえると進めやすくなります。HTML と CSS の書き方から学びたい人には、版元の著者プロフィールが主な著書に挙げる『これから Web をはじめる人の HTML&CSS, JavaScript のきほんのきほん』という選択肢もあります。JavaScript の基本を押さえたうえで、フレームワークを使うと何が楽になるのかを自分の手で確かめたい人にとって、素の書き方と Vue.js の書き方を同じ題材で比べられる本書は、最初の 1 冊として選びやすい本です。