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

これから始めて、JavaScriptもVue.jsもTypeScriptも理解しよう！

「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を使って、データの保存も行い、コンポーネントを作って共通のパーツを追加するところまで行います。

Chapter 1 JavaScriptを学ぶための準備をしよう
　Chapter 1-1 JavaScriptの基本的な開発環境を整えよう
　Chapter 1-2 ECMAScriptとJavaScript
　Chapter 1-3 「犬」で学ぶオブジェクト指向

Chapter 2 JavaScript の基本を学ぼう
　Chapter 2-1 テンプレートをつくろう
　Chapter 2-2 画面に文章を表示しよう － document.write
　Chapter 2-3 警告ウィンドウで注意をひこう － alert
　Chapter 2-4 1年が何秒間かを計算しよう － 四則演算
　Chapter 2-5 秒数を知りたい日数をユーザーが入力できるようにしよう － 変数
　Chapter 2-6 現在の秒数を表示しよう － Date
　Chapter 2-7 今日の日付を表示する － テンプレート文字列
　Chapter 2-8 HTMLの中に文章を表示しよう － プロパティ（1）
　Chapter 2-9 タイトルを書き換えよう － プロパティ（2）
　Chapter 2-10 ユーザーの入力をチェックして警告を表示しよう － if
　Chapter 2-11 1から365までの数字を表示しよう － while、for
　Chapter 2-12 曜日を日本語で表示しよう － 配列
　Chapter 2-13 英単語と日本語の対応表を作ろう － ハッシュ（連想配列）
　Chapter 2-14 文字列の中からキーワードを検索しよう － indexOf
　Chapter 2-15 数字かどうかを判定しよう － isFinite
　Chapter 2-16 消費税を四捨五入して求めよう － Math.round
　Chapter 2-17 足し算ゲームを作ろう － Math.random
　Chapter 2-18 偶数か奇数かを判断しよう － 剰余算
　Chapter 2-19 よく使う処理をまとめる － 関数
　Chapter 2-20 クラスを定義しよう
　Chapter 2-21 JSONデータを読み込もう
　Chapter 2-22 ボタンのクリックに反応して、重複クリックを防ごう － addEventListener
　Chapter 2-23 テキストフィールドに値が入力されていなかったらエラーにしよう － blur
　Chapter 2-24 チェックボックスがチェックされているかを確認しよう － change
　Chapter 2-25 郵便番号の形式をチェックしよう － 正規表現
　Chapter 2-26 別のページに移動しよう － location.href
　Chapter 2-27 タイマーを作ろう － setnterval
　Chapter 2-28 JavaScriptを外部ファイルにしよう
　Chapter 2-29 JavaScriptで読み込んで使えるファイルを作ろう － モジュール
　Chapter 2-30 非同期通信でデータを読み込もう
　Chapter 2-31 ブラウザーに情報を保存しよう

Chapter 3 TypeScript の基本を学ぼう
　Chapter 3-1 ES2015を古いウェブブラウザーでも使おう
　Chapter 3-2 トランスコンパイラーの種類とTypeScript
　Chapter 3-3 TypeScriptを使ってみよう
　Chapter 3-4 TypeScriptで関数を使ってみよう
　Chapter 3-5 TypeScriptをもっと柔軟に使ってみよう

Chapter 4 Vue.jsの基本を学ぼう
　Chapter 4-1 Vue.jsとは
　Chapter 4-2 Vue.jsをインストールする
　Chapter 4-3 Vue.jsで画面に文章を表示する
　Chapter 4-4 クラスを付加して、装飾しよう － v-bind
　Chapter 4-5 フェードインしながら表示させよう
　Chapter 4-6 フォームの値をVue.jsと接続しよう － v-model
　Chapter 4-7 営業時間外の場合に警告を表示しよう － v-if
　Chapter 4-8 Vue.jsで1から365までの数字を表示しよう － v-for
　Chapter 4-9 Vue.jsで曜日を日本語で表示しよう － 配列
　Chapter 4-10 ボタンのクリックに反応して、重複クリックを防ごう － v-on
　Chapter 4-11 コンポーネントを作ろう
　Chapter 4-12 時計コンポーネントを作ろう
　Chapter 4-13 ミックスインでよく使う処理をまとめよう
　Chapter 4-14 足し算計算機をつくろう

Chapter 5 Vue CLIでアプリを作ろう
　Chapter 5-1 この章の概要
　Chapter 5-2 Vue CLIとは
　Chapter 5-3 新しいプロジェクトを作成しよう
　Chapter 5-4 ファイル構成を確認しよう
　Chapter 5-5 Vue Routerを利用してルーティング処理を入れよう
　Chapter 5-6 メモの追加画面を作成しよう
　Chapter 5-7 メモの追加画面を動作させよう
　Chapter 5-8 Vuexを使ってデータを保管しよう
　Chapter 5-9 一覧画面を作ろう
　Chapter 5-10 編集画面を作成しよう
　Chapter 5-11 保存ボタンがクリックされるまで、ストアが変更されないようにしよう
　Chapter 5-12 メモを削除しよう
　Chapter 5-13 共通パーツをコンポーネントで作ろう
　Chapter 5-14 ストアの内容を保存しよう