ステップアップ JavaScript 2022年1月14日に発売しました! 初級を抜け出して中級へステップアップしたい方へ向けた指南書です。

ステップアップ JavaScript

フロントエンド開発の初級から中級へ進むために

「とりあえず動くJavaScript」から脱却したい人へ!
初級者から中級者へのステップアップ指南書

JavaScriptは「なんとなく」「勘で」書いても動いてしまうことがある一方で、 独特の癖があり奥が深いため、初心者から脱するのが難しい言語です。 本書は「入門者向けの本は一冊読み終わったけど、もっと良いコードを書きたい」 「バグの出にくいコードの書き方を知りたい」という開発者のために、 JavaScriptで特につまずきやすい部分を丁寧に解説します。

本書の紹介

著者による「はじめに 〜 本書の読み方」が公開されています。 「本書をどのような方に向けているか」「何を提供し、何を提供しないか」などがわかる内容ですので、ぜひご一読ください。 また、書籍中から本Webページにあるデモへリンクしており、 作成するアプリケーションの動作を確認したり、開発中の実際のコードを見ることができるようになっています。

書籍中では主に以下のようなトピックを取り上げています。

つまずきやすいため紙面を割いているトピック

  • 非同期処理(async/await、Promise)
  • AJAX(Fetch API)
  • this
  • スコープ
  • プリミティブ型/オブジェクト型と参照

その他取り上げているトピック

  • クロージャ
  • ES5からES6
  • Node.jsとnpm
  • トランスパイル
  • DOM
  • 例外

目次

はじめに

本書が書かれた背景や目的、本書を読む上での前提や心構えについて書いてあります。 公開されていますのでぜひご一読ください。

ステップ0 肩慣らし

本書を読む上での最低限の知識を確認しています。

  • JavaScript の操作の基本を確認する
  • JavaScript で表示を操作する
  • JavaScript で複数の要素を操作する

ステップ1 動くアプリケーションを作ってみる

ストップウォッチのウィジェット を作成しながらブラウザ上のJavaScriptにおけるDOMやイベントハンドリングへの対応を確認します。 ここではES5の仕様で作成します。

  • 仕様の確認〜簡単な動作確認をしよう
  • 経過時刻をカウントし、見た目を整えよう
  • カウント停止を実現し、バグに対応しよう
  • ドンドン増えるログを出してみよう
  • リファクタリングして柔軟性を上げよう
  • DOM(Document Object Model)の概念を知ろう

ステップ2 ES6を学習する

ステップ1で作ったES5のコードをES6にリファクタリングしながら学習します。

  • JavaScript のバージョンについて
  • ステップ1のアプリケーションをES6対応にリファクタリング
  • クラスについて知ろう
  • ステップ1のアプリケーションにクラスを適用する

ステップ3 ES6で書いてゆく

最初からES6でフォトビューアーのウィジェットを作成します。

  • 仕様の確認〜画像を一枚表示しよう
  • 複数画像を順番に表示できるようにしよう
  • 画像を自動で更新し見た目を整えて完成

ステップ4 押さえておくべきJavaScriptの言語特性について

JavaScript でコードを書いていく上で、少し特殊であったり、最初の頃理解に手間取りそうなトピックです。

  • スコープ
  • 等価演算子(==)と厳密等価演算子(===)
  • this
  • undefined

ステップ5 Node.jsとnpmを知ろう

Node.jsと、そのパッケージ管理ツールであるnpmの紹介です。

  • Node.jsとは
  • npmとは
  • Node.jsのインストール
  • npmパッケージを導入する
  • http-serverを起動する
  • ローカルインストールについて

ステップ6 AJAXを使ってみよう

AJAXについての解説です。都道府県選択ボックスのサンプルを作成します。

  • AJAXとは
  • JSONに触れてみよう
  • AJAXを体験してみよう
  • サンプルアプリケーションを作成してみよう
  • コードをリファクタリングしてみよう
  • CORSについて

ステップ7 その他のJavaScriptの特性

「ある程度直感的に使えるけれども、掘り下げるとよくわからなくなってしまうようなもの」や「過去のコードを読む際によく出てくる」ようなトピックです。

  • 無名関数
  • 即時関数
  • クロージャ
  • 例外
  • プリミティブ型/オブジェクト型と参照

ステップ8 非同期処理について知ろう

非同期処理について取り上げています。

  • 同期・非同期
  • async/await
  • Promise
  • 非同期処理でよくある悩みへの対応
  • 課題

ステップ9 トランスパイル 〜レガシーブラウザへの対応〜

トランスパイルについて取り上げています。

  • トランスパイルとは
  • トランスパイラを導入してみよう
  • トランスパイルを実行してみよう
  • Polyfillについて

ステップ10 総合演習

SPAのクイズアプリケーションを作成する総合演習です。

  • 仕様の確認 〜クイズデータ取得と確認
  • 各画面を作成しよう
  • クイズを表示しよう
  • クイズの正解率を集計しよう
  • 解答に制限時間を設定してみよう
  • 見た目を整えて完成

付録

付録です。

  • A コードがうまく動かない時・デバッグについて
  • B 知っておくべき知識
  • C 非同期処理の歴史

本書を読む上での補助的な情報

Special Thanks!!

本書のレビューやアドバイスをいただいた皆さん(順不同)。大変助かりました。

島田達朗さん 丹羽悠斗さん 町田龍浩さん 佐藤佑樹さん 匿名希望さん

島田さんはレビュアーとしての支援のみならずわかりやすい書評も書いてくださり、大変感謝しています。残念ながらお名前をお出しできない匿名希望さんは、文章内容への指摘を素早く的確にいただき、内容のブラッシュアップに大変貢献してくださいました。その他の方々には想定読者に近い目線でご意見をいただいています。皆さんお忙しい中ご協力いただき、ありがとうございました。