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

Secrets of the Javascript Ninja

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

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

argumentsパラメータ

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

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

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

thisパラメータ

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

関数呼び出し

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

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

関数としての呼び出し

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

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

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

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

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

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

applyとcallによる呼び出し

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

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

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

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

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

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

bindメソッドの使用

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

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

Secrets of the Javascript Ninja

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

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

機能面の違い

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

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

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

コールバック関数

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

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

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

関数を保持する

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

自己メモ化関数

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

関数定義

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

関数宣言と関数式

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

関数宣言

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

関数式

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

即時関数

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

アロー関数式

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

引数と関数のパラメータ

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

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

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

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

デフォルトパラメータ

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つずつ処理される。

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

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

プロパティへの代入は、一度に一つのイベントハンドラしか登録できない。複数登録したい場合は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を、上手に書くための知見がまとめられている。