ryo511

Secrets of the JavaScript Ninja 2nd 読書メモ第4章関数呼び出しを理解する

暗黙的な関数パラメータの使用

関数には、暗黙的に渡されるパラメータが2つある。argumentsとthisである。

argumentsパラメータ

argumentsパラメータは関数への引数の集合である。argumentsを使えば明示的に定義されていないパラメータも受け取ることができる。これを利用すると、関数オーバーロードを実現できる。

ES2015のrestパラメータを使用すれば、argumentsが必要になる場面は減少するが、古いコードに触るときのためにもargumentsの挙動は理解しておいたほうがよい。
argumentsにはlengthプロパティがあり、引数の数を調べることができる。また、argumentsからは配列アクセスの形式で値を取り出せる。

function whatever() {

for (let i = 0, len = arguments.length; i < len; i += 1) {

console.log(arguments[i]);

}

whatever();

whatever(1);

whatever(1, 2);

argumentsは配列のようだが、配列ではない。そのため、sort等の配列操作用メソッドを使うことはできない。配列のように扱いたい場合は、ES2015のArray.fromメソッド等を使用して配列に変換する必要がある。

function sum() {

return Array.from(arguments).reduce((p, c) => p + c, 0);

}

console.log(sum()); // 0

console.log(sum(1)); // 1

console.log(sum(2, 3)); // 5

// なお、restパラメータは配列なので変換不要

function sum (...args) {

return args.reduce((p, c) => p + c, 0);

}

thisパラメータ

thisは関数呼び出しのコンテキストを保持するパラメータである。JavaやC#のようなオブジェクト指向言語とは異なり、JavaScriptのthisの値はどのように呼び出されたかによって異なる。JavaScriptのオブジェクト指向の理解にあたっては、thisは最も重要な部分のひとつである。

関数呼び出し

関数呼び出しにはいくつかのパターンがある。

通常の関数: skulk()
メソッド： ninja.skulk()
コンストラクタ： new Ninja()
applyまたはcallによる呼び出し： skulk.call(ninja) または skulk.apply(ninja)

関数としての呼び出し

関数としての呼び出しでは、thisの指す値はstrictモードか否かによって異なる。

function ninja() {

return this; // globalオブジェクト(ブラウザならwindow)

}

function samurai() {

"use strict";

return this; // undefined

}

メソッドとしての呼び出し

関数がオブジェクトのプロパティとして割り当てられている場合、この関数をオブジェクトのメソッドと呼ぶ。この場合、thisパラメータが指すのは、メソッド呼び出しの対象となったオブジェクトである。

var ninja = {};

ninja.getThis = function(){ return this; };

console.log(ninja.getThis() === ninja); // true

コンストラクタとしての呼び出し

コンストラクタとは、オブジェクトを組み立てる関数である。コンストラクタを使うことで、同様の機能を持つオブジェクトを簡単に作ることができる。

function Ninja() {

this.skulk = function() {

return this;

}

var ninja1 = new Ninja();

var ninja2 = new Ninja();

console.log(ninja1.skulk() === ninja1);

console.log(ninja2.skulk() === ninja2);

関数がnew演算子とともに呼び出されると（コンストラクタとしての呼び出し）、空のオブジェクトがthisに割り当てられる。このオブジェクトはnew演算子の結果として返る。

applyとcallによる呼び出し

イベントハンドラに紐付けた関数において、thisはイベントが発生したオブジェクトを指す。このように、関数のコンテキストを呼び出し側から操作する方法がapplyとcallである。

関数のapplyメソッドを使って呼び出しを行う場合、第1引数に関数コンテキストとして用いるオブジェクト、第2引数に呼び出し時の引数の配列を渡す。callメソッドも同様だが、引数は配列ではなくパラメータリストに直接渡す。

function juggle() {

let result = 0;

for (let n = 0; n < arguments.length; n += 1) {

result += arguments[n];

}

this.result = result;

}

const ninja1 = {};

const ninja2 = {};

juggle.apply(ninja1, [1, 2, 3, 4]);

juggle.call(ninja2, 5, 6, 7, 8);

console.log(ninja1.result); // 10

console.log(ninja2.result); // 26

関数コンテキストの問題を修正する

関数コンテキストを操作する方法には、call/applyの他にアロー関数式とbindメソッドがある。

アロー関数式による関数コンテキストの回避

アロー関数式は、みずからのthisをもたない。代わりに、その関数が宣言された時点のthisパラメータの値を保持している。
イベントハンドラとして関数を登録しても、thisの値は変わらない。

bindメソッドの使用

関数のbindメソッドを使用すると、その関数が実行されるコンテキストを呼び出し方法に関わらず変更できる。bindメソッドは、別の関数コンテキストを持った別の関数を返す関数である。

Secrets of the JavaScript Ninja 2nd 読書メモ第3章一級市民としての関数：定義と引数

平凡なJavaScriptプログラマーとJavaScriptニンジャを分かつものは、関数型言語としてのJavaScriptを理解しているか否かである。

最も重要な点は、JavaScriptにおいて関数は一級オブジェクト（あるいは、一級市民）であるということである。関数は、その他のJavaScriptと同じように扱うことができる。変数に入れたり、リテラルで定義したり、関数の引数にしたりできる。

機能面の違い

関数がファーストクラスオブジェクトである

関数をファーストクラスオブジェクトとして扱うことは、関数型プログラミングのはじめの一歩でもある

メモ：本書の次は JavaScript関数型プログラミングを読もうと思います

コールバック関数

コールバック関数とは、関数を利用できるよう引数などの形で渡すこと。イベントハンドラなど、様々な場面で使用するテクニック。

関数をオブジェクトとして扱う

関数を通常のオブジェクトと同様に扱うことで、様々なことを実現できる。

関数を保持する

関数をコレクションの中に保持して、あとでまとめて呼び出すことができる。
単純な実装としては配列の中に保管することになるが、以下のように、関数にプロパティを設定することで重複登録を奉仕できる。
（ES2015のSetを使うとより良い実装ができる）

const store = {

nextId: 1,

cache: {},

add: (fn) => {

if (!fn.id) {

fn.id = this.nextId++;

this.cache[fn.id] = fn;

return true;

}

};

function ninja() {}

assert(store.add(ninja), 'Function was safely added');

assert(!store.add(ninja), 'But it was only added once');

function assert(value, text) {

if (text) console.log(text);

return !!value;

}

自己メモ化関数

メモ化とは、前回呼び出し時に計算した値を記憶しておくことである。

function isPrime(value) {

if (!isPrime.answers) {

isPrime.answers = {};

}

if (isPrime.answers[value] !== undefined) {

return isPrime.answers[value];

}

let prime = value !== 1; // 1 is not a prime

for (let i = 2; i < value; i++) {

if (value % i === 0) {

prime = false;

break;

}

return isPrime.answers[value] = prime;

}

console.log(isPrime(5));

console.log(isPrime.answers[5]);

関数定義

JavaScriptにおける関数定義には以下の4つの方法がある。

// 関数宣言と関数式

function myFunc() { return 1; }

// アロー関数(ES2015)

myArg => myArg*2

// 関数コンストラクタ(ほとんど使わない)

new Function('a', 'b', 'return a + b')

// ジェネレーター関数(ES2015)

function* myGen() { yield 1; }

関数宣言と関数式

最も一般的な関数定義の方法は、関数宣言と関数式である。この2つはよく似ているが、区別すべきである。

関数宣言

関数宣言では、関数名が必須。

function myFunctionName(myFirstArg, mySecondArg) {

myStatement1;

myStatement2;

}

関数式

JavaScriptの関数は、他のオブジェクトと同様、リテラルで定義できる。
文の中に関数のリテラルが含まれる場合、関数式と呼ばれる。
関数式を使うと、通常の変数と同様、定義した場所以降で関数が利用可能になる。
これに対して、関数宣言は、スコープの冒頭で定義したものとみなされる（巻き上げ）。

// 関数式（基本形）

var myFunc = function() {};

// 関数式は引数にも書ける

myFunc(function() {

return function() {};

});

// 名前付き関数式

var f = function namedFunction() {};

f(); // OK

namedFunction(); // 未定義関数の呼び出しエラー

console.log(f.name); // 'namedFunction'

即時関数

関数を定義してすぐに呼び出すテクニックを即時呼び出し関数式(Immediately Invoked Function Expression, IIFE)、または即時関数(Immediate Function)という。
即時関数では、通常関数名を書くところに関数式を書いて、それを括弧で囲む。

// 通常の関数呼び出し

myFunctionName (3);

// 即時関数

(function(){}) (3);

// 括弧で囲まない場合、

// 名前のない関数宣言とみなされて構文エラーになる

function(){} (3);

// この書き方でもOK（全体を括弧で囲むことで、関数宣言ではなく関数式とみなされるようにする）

(function(){} (3));

// こういう書き方もある

+function(){}();

-function(){}();

!function(){}();

~function(){}();

アロー関数式

アロー関数式はES2015で追加された機能である。
JavaScriptでは関数式を多用するので、短く書く方法が導入された。
アロー関数式という呼び名は、 => 演算子（アロー演算子）に由来している。

const values = [0, 3, 2, 5, 7, 4, 8, 1];

// 通常の関数式

values.sort(function(value1, value2) {

return value1 - value2;

});

// アロー関数式（functionキーワードを省略）

values.sort((value1, value2) => {

return value1 - value2;

});

// 関数本体が1つの式だけの場合は、そのまま式を書ける（式の値はreturnされる）

values.sort((value1, value2) => value1 - value2);

// 引数が1つだけの場合は引数の括弧も省略できる

const greet = name => `Greetings ${name}`;

// ただし、引数が1つもない場合には括弧は省略できない

const helloWorld = () => 'Hello, world!';

引数と関数のパラメータ

パラメータ(parameter、仮引数)とは、関数定義の一部として定義する変数である
引数(argument、実引数)とは、関数呼び出し時に渡す値である

パラメータとは異なる数の引数を渡した場合、JavaScriptではエラーは発生しない。過剰なパラメータには割り当てられず、値が渡されなかったパラメータの値はundefinedになる。

Rest parameters(余り物パラメータ)

パラメータの定義で、n番目のパラメータの名前の前に ... をつけると、このパラメータはRest parameters（余り物パラメータ）となる（※ES2015で導入された機能）。
このパラメータは、n番目以降の全ての引数を格納する配列になる。

function multiMax(first, ...remainingNumbers) {

const sorted = remainingNumbers.sort((a, b) => b - a);

return first * sorted[0];

}

console.log(multiMax(3, 1, 2, 3)); // 9

デフォルトパラメータ

// ES5までのデフォルトパラメータ

function performAction(ninja, action) {

action = typeof action === 'undefined' ? 'skulking' : action;

return ninja + ' ' + action;

}

// ES2015のデフォルトパラメータ

function performAction(ninja, action = 'skulking') {

return ninja + ' ' + action;

}

// デフォルトパラメータには任意の式を書ける（可読性が下がるので避けたほうがよい）

function performAction(ninja, action = 'skulking', message = ninja + ' ' + action) {

return message;

}

Secrets of the JavaScript Ninja 2nd 読書メモ第2章実行時にページを組み立てる

クライアントサイドWebアプリケーションのライフサイクル

ユーザがブラウザのアドレスバーにURLを打ち込む
ブラウザがリクエストを生成してサーバに送信する
サーバがクライアントにレスポンスを返す
ブラウザがHTML/CSS/JavaScriptを処理して最終的なページを組み立てる
ブラウザがイベントキューを監視してイベントに応答できるようにする
ユーザがページの要素を操作する
ユーザがWebアプリケーションを閉じる

ページの組み立てのフェーズ

HTMLを構文解析して、DOMを組み立てる
JavaScriptコードを実行する

※JavaScriptエンジンは、script要素を見つけると、そこでDOMの組み立てを一時停止してJavaScriptを実行する。そのため、script要素がHTMLの途中にあり、読み込みや実行に時間がかかると、ブラウザの描画が停止してパフォーマンスが悪化して感じられる。script要素はbody要素の末尾に置くべきである。

イベントの取り扱い

クライアントサイドのWebアプリケーションはGUIアプリケーションなので、ユーザーの様々な操作（イベント）に反応する必要がある。

イベントハンドリングの概要

ブラウザの実行環境はシングルスレッドの実行モデルである。イベントは単一のキューに入れられ、上から順に1つずつ処理される。

イベントハンドラを登録する

イベントハンドラの登録には以下のいずれかの方法が使用できる。

// 特殊なプロパティに関数を代入する

window.onload = function(){};

// addEventListener メソッドの使用

document.body.onclick = function(){};

プロパティへの代入は、一度に一つのイベントハンドラしか登録できない。複数登録したい場合はaddEventListenerを使う必要がある。

Secrets of the JavaScript Ninja 2nd 読書メモ第1章 JavaScriptはどこにでも

JavaScript言語を理解する

JavaScriptは以下のような点で他の言語と異なる。

関数がファーストクラスオブジェクトである
クロージャ
スコープ（ES2015より前には、JavaScriptにブロックスコープはなかった）
プロトタイプベースのオブジェクト指向

オブジェクトとプロトタイプ、関数とクロージャーの関係を理解することで、JavaScriptのプログラミングスキルが向上する。

加えて、以下のような機能を理解することで、美しく効率の良いコードを書くことができる。

ジェネレーター
Promiseによる非同期処理
Proxyによるオブジェクトへのアクセス制御
Arrayのメソッド群
Mapによる辞書型コレクション、Setによる一意なコレクション
正規表現
モジュール

ブラウザを理解する

JavaScript実行環境としてもっとも重要なのはブラウザである。ここでは以下のトピックに集中する。

DOM(Document Object Model)
イベント
ブラウザのAPI

ベストプラクティスに従う

JavaScriptの習熟に加えて、以下のようなスキルを身につけていることが重要である。

デバッグ
テスト
パフォーマンス分析

スキルを持ち運びやすくする

JavaScriptのコアとなる部分について深い理解があれば、様々な種類のアプリケーション開発にスキルを活用できる。

デスクトップアプリ（Electron）
モバイルアプリ（Cordova, React Native）
サーバーサイドアプリ（Node.js）

Secrets of the JavaScript Ninja 2nd 読書メモ 0 はじめに

『Effective C#』第3版のおかげで、洋書をちまちま読む習慣が身につきました。良い流れを切らさないよう、新しい本に手を付けてみます。次に読む本は『Secrets of the JavaScript Ninja』の第2版。jQueryの作者であるJohn Resig氏の著書で、第1版は「JavaScript Ninjaの極意」というタイトルで邦訳されています。本書は、2016年10月に発売された第2版で、ES6(ES2015)の文法も踏まえた最新版です。

今回は「はじめに(Author’s Introduction)」の部分からメモ。

JavaScriptを取り巻く環境は、著者が本書の初版を書き始めた2008年頃と比べると、様々な点で異なる。

JavaScriptはクロスプラットフォームで動作する言語として最大の人気を得ている
（JavaScript実行環境の）プラットフォーム間の差異は縮小傾向にある
開発環境の進歩も著しい

JavaScriptの書き方は以前とは様変わりしている。本書には、新しい時代のJavaScriptを、上手に書くための知見がまとめられている。