Blufflog

This blog is bluff.

『初めてのJavaScript 第3版』を読んだ

オライリーの『初めてのJavaScript 第3版』1 を読んだ。

JavaScript をよく分かっていなかったので、ECMAScript 2015 (ES6) を一通り体系的に学べて良かった。

JavaScript 本だとオライリーのサイ本こと『JavaScript 第6版』が有名だが、ES6 非対応なので、同じくオライリーで ES6 対応の『初めてのJavaScript 第3版』を読んだ。

以下、簡単にメモ。

  • 全てはオブジェクト(キー・バリュー)
  • メソッド:オブジェクトのプロパティとして指定される関数
  • class 構文によりクラスベースの OOP が可能
    • 内部的にはプロトタイプベース(プロトタイプチェーン)だが、コードを書く際はクラスベースのつもりで書けば良い
    • class 構文は関数によるクラス定義のシンタックスシュガー
  • 非同期処理は新しい順に async/await (ES7) → ジェネレータ (ES6) → Promise (ES6) → コールバック
    • コールバックで複雑な非同期処理を実装するとコールバック地獄に
    • 新しい構文により複雑な非同期処理をシンプルに書ける
    • async/await が使える環境ならこれを使うのがベスト(?)
    • ジェネレータは直感的に分かりにくい
  • 'use strict'; でエラーチェックが厳しくなり good
  • typeof null === 'object'
  • メソッドの function: を省略可(ショートハンド)
const taro = {
  name: 'Taro Yamada',
  greet() { console.log('Hello!') }  // greet: function() { console.log('Hello!') } と同じ
}
  • アロー関数(ラムダ式的なやつ)は this を束縛しない(語彙的に束縛する)
'use strict';

this.val = 'global';

const fGlobalDef = function() { console.log(this.val); };  // this は呼び出し元オブジェクト(e.g., obj1, obj2)
const ArrowFGlobalDef = () => console.log(this.val);  // this === { val: 'global' }

const obj1 = {
  val: 'obj1',
  fMethod() { console.log(this.val); },
  ArrowFMethod() { (() => console.log(this.val))(); },  // Arrow function's IIFE
  fGlobal: fGlobalDef,
  ArrowFGlobal: ArrowFGlobalDef
}

const obj2 = {
  val: 'obj2',
  fMethod() { console.log(this.val); },
  ArrowFMethod() { (() => console.log(this.val))(); },  // Arrow function's IIFE
  fGlobal: fGlobalDef,
  ArrowFGlobal: ArrowFGlobalDef
}

obj1.fMethod();       // obj1
obj1.ArrowFMethod();  // obj1
obj1.fGlobal();       // obj1
obj1.ArrowFGlobal();  // global

obj2.fMethod();       // obj2
obj2.ArrowFMethod();  // obj2
obj2.fGlobal();       // obj2
obj2.ArrowFGlobal();  // global

// fGlobalDef() の this は呼び出し元オブジェクトになるため
// obj1.fGlobal() の出力は「obj1」、obj2.fGlobal() の出力は「obj2」になる
// ArrowFGlobalDef() の this は定義時のスコープでのオブジェクトになるため
// obj1.ArrowFGlobal() と obj2.ArrowFGlobal() の出力はどちらも「global」になる

ちなみにこちらは未読だが、技術評論社『改訂新版 JavaScript 本格入門』も似たコンセプトの本だと思う。

TypeScript などの AltJS や Vue.js などのフレームワークも勉強したいが、とりあえず次は『CSS3 開発者ガイド 第 2 版』2CSS をお勉強します。


  1. Ethan Brown(2017)『初めてのJavaScript 第3版』武舎広幸・武舎るみ訳,オライリー・ジャパンhttps://www.oreilly.co.jp/books/9784873117836/

  2. Peter Gasston(2015)『CSS3開発者ガイド 第2版』牧野聡訳,オライリー・ジャパンhttps://www.oreilly.co.jp/books/9784873117256/