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

Secrets of the Javascript Ninja

平凡な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章 実行時にページを組み立てる

Secrets of the Javascript Ninja

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

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

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

  1. HTMLを構文解析して、DOMを組み立てる
  2. 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はどこにでも

Secrets of the Javascript Ninja

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 はじめに

Secrets of the Javascript Ninja

『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を、上手に書くための知見がまとめられている。

Effective C# 3rd 読書メモ 50 例外フィルタの副作用を利用する

常にfalseを返す例外フィルタを定義することは奇妙に思えるかもしれないが、そうすべき理由がある。例外フィルタはスタックの一部として実行されるので、スタックが破棄される前に実行されるのだ。

これを利用すると、以下のように、例外の詳細な情報をログに書き込むことができる。

public static void Main()
{
    var failures = 0;
    var data = default(string);

    while (data == null)
    {
        try
        {
            data = MakeWebRequest();
        }
        catch (Exception e) when (ConsoleLogException(e))
        {
        }
        catch (TimeoutException e) when (failures++ < 10)
        {
            WriteLine("Time out error: trying again");
        }
    }
}

public static bool ConsoleLogException(Exception e)
{
    var oldColor = Console.ForegroundColor;
    Console.ForegroundColor = ConsoleColor.Red;
    WriteLine($"Error {e}");
    Console.ForegroundColor = oldColor;
    return false;
}

private static string MakeWebRequest()
{
    throw new TimeoutException();
}

以上で、『Effective C#』の第3版、読了です。C#は仕様の大きな言語で、それなりの歴史もあるので、同じことをするにも複数の書き方ができます。典型的な例はローカル変数の定義で、型を明示的に指定することもできれば、型推論に任せることもできます。初心者のうちは、どちらの書き方を使えばいいのかわかりませんでした。

本書には、そういったC#を書く上での迷いどころや落とし穴の回避方法がまとめられています。『やさしいC#』等の入門書を読んだ後、2冊目ないし3冊目あたりで読むと良いと思いました。

ちなみに、『Effective C#』の類書として『実戦で役立つ C#プログラミングのイディオム/定石&パターン』があります。こちらは入門書の次に読んでも大丈夫なくらいの内容で、C#で何かをしたいときに役立つ書き方が「イディオム」としてまとめられています。