確かな力が身につく JavaScript「超」入門 第 2 版

3 万部突破のベストセラーが充実のアップデート!

JavaScript をこれから始める人にも、前に挫折したことのある人にも。

手を動かしてサンプルをひとつずつ作っていくことで、知識だけでなく、
現場で活きる、応用・実践につながる基礎力が「この一冊で」身につきます。

ポイント 1「サンプルが楽しい。」
よくある“勉強のためのサンプル”を可能な限り排除し、「こういうの見たことある!」「こういうのが作ってみたかった!」というような、実際に仕事に使えそうなサンプルを集めました。なので、最初の「やるぞ!」というモチベーションを維持したまま、最後のページまで読み進めることができます。

ポイント 2「つまずきポイントを徹底カバー。」
初学者がつまずきやすい・挫折しやすいポイントを丁寧に拾って「これはどういうこと?」に対処する解説を用意しています。
共感しながら読み進められる文章で「絶対に挫折しない・させない」内容に仕上げました。

【第 2 版の主な改訂内容】
・ECMA Script の新規格に対応。新しい機能・文法のうち、入門者でも取り組みやすく便利なものを紹介
・書籍内の情報を 2019 年の状況にあわせて全面的にアップデート
・3〜6 章のサンプルを更新。解説内容をより丁寧にわかりやすくブラッシュアップ
・7 章は全面刷新し、より現代的・実践的なテクニックを学べる内容に

【こんな方におすすめ!】
・HTML と CSS は何となくわかっていて、JavaScript もやらないと…と思いつつなかなか手がつけられない方
・「フロントエンドエンジニア」という言葉に惹かれる方
・Web 業界に入りたい方、または入りたての方
・「他の Web デザイナーに差をつけたい!」という Web デザイナーの方
・「フロントエンドエンジニアや Web デザイナーとまともにコードの話をしたい!」という Web ディレクターの方

HTML と CSS でページの見た目は作れるようになったのに、JavaScript だけはいつも後回しになる。そういう人のために書かれたのが『確かな力が身につく JavaScript「超」入門 第 2 版』 (狩野祐東 著、SB クリエイティブ、2019 年 9 月刊) です。版元は、これから JavaScript を始める人にも前に挫折したことのある人にも向けて、手を動かしてサンプルをひとつずつ作ることで、知識だけでなく応用 / 実践につながる基礎力を「この一冊で」身につける本だと紹介しています。B5 変型判で、旧版が 3 万部を突破したベストセラーであることも版元紹介文が述べており、その旧版を 2019 年の状況にあわせて全面的にアップデートした改訂版に当たります。

全 7 章の構成、コンソール出力から jQuery と外部 API まで

構成は全 7 章です。Chapter 1「イントロダクション」で JavaScript とは何か、プログラミングと動作の仕組み、用意するツール、サンプルデータのダウンロードとテンプレートの準備までを整え、Chapter 2「アウトプットの基本」で開発ツールのコンソールへの出力、JavaScript をどこに書くか、window.alert () によるダイアログボックスの表示、要素を取得してコンテンツを書き換える HTML の書き換えに進みます。Chapter 3「JavaScript の文法と基本的な機能」が文法の中核で、確認ダイアログボックスで条件分岐 (if)、入力内容に応じた動作変更で変数と定数、数当てゲームで比較演算子とデータ型、コンソールでモンスターを倒す題材で回数が決まっていない繰り返し、税込価格の計算でファンクション、FizzBuzz で算術演算子、項目のリスト表示で配列、アイテムの価格と在庫の表示でオブジェクトというように、節ごとに作るものと学ぶ文法が対になっています。Chapter 4「インプットとデータの加工」ではフォームの入力内容の取得とイベント、Date オブジェクト、Math オブジェクトを扱い、Chapter 5「一歩進んだテクニック」でカウントダウンタイマー、プルダウンメニューによる URL の操作、クッキー (cookie) を使ったプライバシーポリシー承認パネル、サムネイルのクリックによる画像の切り替え、そしてここまでの知識を総動員するスライドショーを作ります。Chapter 6「jQuery 入門」は開閉するナビゲーションメニュー、CSS と組み合わせてアニメーションを実現するドロワー、Ajax と JSON による空き席状況のチェック、Chapter 7「外部データを活用したアプリケーションに挑戦!」は navigator.geolocation による位置情報と、OpenWeatherMap API による天気予報という構成です。

サンプルを作りながら文法を覚える構成が効く理由

JavaScript の入門がほかの言語より難しく感じられるのは、言語そのものに加えて、ブラウザという実行環境と HTML との関係を同時に理解する必要があるからです。ページの構造を HTML が、見た目を CSS が担い、JavaScript はその構造 (DOM) を取得して書き換えたり、クリックや入力といったイベントに反応したりする役割を負います。文法だけを先に学ぶと「変数や条件分岐は分かったが、それでページの何が変わるのか」が見えず、ここで多くの初学者が止まります。本書は Chapter 2 の段階で要素を取得してコンテンツを書き換える操作を置き、以降も節ごとにページ上で動く成果物を作りながら文法を導入するので、学んだ文法が画面のどの変化につながるかが常に見える形になっています。版元が「サンプルが楽しい。」「つまずきポイントを徹底カバー。」の 2 点を特徴に挙げ、勉強のためのサンプルを可能な限り排除して実際に仕事に使えそうなサンプルを集めたと説明しているのは、この学習上の壁を意識した設計です。フロントエンド の仕事では、ここで作るナビゲーションメニューやスライドショー、フォームの入力処理がそのまま日常の実装単位になります。

第 2 版の改訂点、ECMA Script の新規格対応と 7 章の刷新

版元が挙げる第 2 版の主な改訂内容は 4 点です。「ECMA Script の新規格に対応」し、新しい機能 / 文法のうち入門者でも取り組みやすく便利なものを紹介すること、書籍内の情報を 2019 年の状況にあわせて全面的にアップデートしたこと、3〜6 章のサンプルを更新して解説をより丁寧にブラッシュアップしたこと、7 章を全面刷新してより現代的 / 実践的なテクニックを学べる内容にしたことです。ECMAScript は JavaScript の言語仕様を定める標準規格で、その改訂で加わった書き方をブラウザが広く実装したことにより、入門段階から新しい文法で教えられる環境が整いました。目次で Chapter 3 の変数の節に「定数」が並んでいるのは、その一例と見ることができます。刷新された Chapter 7 では、位置情報の取得と外部の Web API から取得した天気予報の表示を扱い、自分のページの外にあるデータを取り込むアプリケーションの入口まで到達します。版元のサポートページにはサンプルデータのダウンロードと正誤情報が掲載されているので、手元の環境で動かない箇所はそこで確認できます。

HTML と CSS を知っている人向けの前提と、向かない人

版元が対象として挙げるのは、HTML と CSS は何となくわかっていて JavaScript もやらないといけないと思いつつ手がつけられない人、「フロントエンドエンジニア」という言葉に惹かれる人、Web 業界に入りたい人や入りたての人、他の Web デザイナーに差をつけたい Web デザイナー、フロントエンドエンジニアや Web デザイナーとまともにコードの話をしたい Web ディレクターです。つまり前提は HTML と CSS の基礎で、プログラミング経験は求められていません。一方で、目次には React や Vue.js のようなフレームワーク、Node.js によるサーバー側の JavaScript、TypeScript は現れません。すでに JavaScript で開発している人がフレームワークや設計を学ぶ目的には別の本が必要で、本書は「超」入門という書名どおり、最初の一冊の位置に射程を絞っています。また 2019 年刊なので、Chapter 7 で使う外部サービスの仕様や画面は刊行後に変わっている可能性があり、その点は版元の正誤情報とあわせて読む必要があります。

著者の狩野祐東氏は、版元プロフィールによればアメリカ・サンフランシスコで UI デザイン理論を学び、帰国後会社勤務を経てフリーランスとなり、2016 年に株式会社 Studio947 を設立、Web サイトやアプリケーションのユーザーインターフェースデザインと開発を数多く手がけ、刊行時点では各種セミナーや研修講師としても活動していました。主な著書として版元は『スラスラわかる HTML&CSS のきほん第 2 版』『いちばんよくわかる HTML5&CSS3 きちんと入門』 (SB クリエイティブ) や『知識ゼロからはじめるゆっくり・ていねい JavaScript』 (ソシム) などを挙げており、HTML と CSS を学んだ読者が次に JavaScript へ進む導線を書き続けてきた著者です。

元が取れるのは、Web デザインや HTML と CSS のコーディングはできるが JavaScript で毎回つまずいてきた人、そして開閉するナビゲーションメニューやスライドショー、天気予報の表示のように、自分のサイトに載せたい具体的な動きが頭にある人です。読み終える頃には、ページ上の要素を取得して書き換え、イベントに反応させ、外部のデータを取り込むまでの一連の流れを自分の手で組めるようになっているはずで、その先に進むときの選び方は JavaScript / TypeScript 本ガイド が助けになります。文法の暗記ではなく作りたいものから JavaScript に入りたい人にとって、本書は最初の一冊として選びやすい構成です。