JavaScript コードレシピ集

JavaScript による Web 開発のための究極のレシピ集。制作の現場で使われる定番テクニックからプロ技まで余すところなく集めました。目的別にレシピを整理。「あのプログラムはどう書くんだろう?」が、スグにわかります。JavaScript を学び始めた方から中級エンジニアの方まで納得。ECMAScript 2018 に準拠。

JavaScript で、やりたい処理の書き方を目的から引ける逆引き型のレシピ集です。『JavaScript コードレシピ集』 (池田 泰延、鹿野 壮 著、技術評論社、2019 年 1 月 25 日発売) は、副題に「スグに使えるテクニック 278」を掲げ、版元は ECMAScript 2018 に準拠した構成と案内しています。版元のページの著者紹介 (2026 年 10 月閲覧) によると、著者の 2 人は Web 制作会社の株式会社 ICS に在籍しており、池田 泰延氏は同社の代表でテクニカルディレクター兼 UI デザイナー、鹿野 壮氏はインタラクションデザイナーという立場です。

全 19 章、基本文法からセンサーとデバッグまでの目的別レシピ

目次は Chapter 1 から Chapter 19 までで、多くのレシピは「〜したい」「〜を知りたい」という目的の形の見出しで並びます。Chapter 1 から Chapter 5 は JavaScript の基礎、真偽値や数値や文字の取り扱い、複数データの取り扱い、データについて深く知る、日付や時間の取り扱いと、言語そのものの扱い方を固める章です。Chapter 6 から Chapter 12 はブラウザーの操作方法、ユーザーアクションの取り扱い、HTML 要素の操作方法、フォーム要素の操作方法、アニメーションの作成、画像 / 音声 / 動画の取り扱い、SVG や canvas 要素を取り扱うと、画面を組み立てる場面に移ります。Chapter 13 から Chapter 17 は処理の実行タイミングを制御する、さまざまなデータの送受信方法、ローカルデータの取り扱い、スマートフォンのセンサー、プログラムのデバッグと続き、最後の 2 章で関数やクラスと、言語のより深い仕組みに戻ります。索引を備え、サンプルファイルは版元のサポートページから入手できます。

通信と非同期処理の書き方が変わった時期の仕様

ブラウザーの JavaScript は、ECMAScript 2015 を境に書き方が大きく変わりました。let と const による変数の宣言、アロー関数、クラス構文、モジュールの読み込みといった機能が言語に入り、サーバーとの通信も、イベントの通知で結果を受け取る XMLHttpRequest から、結果を Promise で返す Fetch API へ移り、非同期の処理全般を Promise と async/await で順を追って書く形が広がりました。本書はこの移行期の後半にあたる仕様に準拠しており、処理の実行タイミングを扱う章には Promise による並列処理と直列処理のレシピが、データの送受信を扱う章には fetch () メソッドと XMLHttpRequest の両方のレシピが並びます。古いコードを読む機会と新しい書き方を選ぶ機会の両方がある現場では、この並びがそのまま比較の材料になります。一方で、2019 年 1 月の刊行より後に仕様へ加わった構文は本書の範囲外なので、刊行後の機能は仕様書や新しい資料で補う必要があります。なお、値をブラウザー側に残す localStorage は、言語の仕様ではなくブラウザーが提供する Web API の一つです。

入門書を読み終えた人に、向かない目的

版元が挙げる対象は、入門書を読んだことがある程度の初心者から初級者、駆け出しのエンジニア、Web サイトを制作している人、差し迫った課題を解くために JavaScript の知識を必要としている人です。文法をまったく知らない段階で頭から読むより、作りたいものが決まってから目的のレシピを探す使い方が合っています。逆に、React や Vue のようなフレームワークでの開発手順や、TypeScript による型付けの書き方を探している場合は、目次の範囲から外れます。サーバー側の Node.js を学ぶ目的にも向きません。

ブラウザーで動く画面を自分で組み、要素の操作やフォームの処理、画像や動画の扱いで手が止まることが多い人にとって、目的から逆引きできる本書は手元で何度も引き直す価値のある一冊です。ブラウザーに値を保存する localStorage のような機能も、使いどころの章から探せます。言語の学び方の順序を整理したい場合は JavaScript と TypeScript の本の選び方 もあわせて参考にしてください。