現代のJavaScriptチュートリアル
はてなブックマークを見ていたら、JavaScriptの教材が紹介されていました。
「現代のJavaScriptチュートリアル」という学習サイトです。
目次
パート１ JavaScript言語
1 導入
2 JavaScript の基礎
2.9 対話: alert, prompt, confirm
2.16 JavaScript 特別授業
3 コード品質
3.2 コーディングスタイル
3.3 コメント
3.4 忍者コード
3.5 mocha による自動テスト
3.6 Polyfills
4 オブジェクト: 基本
4.1 オブジェクト
4.2 ガベージコレクション
4.3 シンボル型
4.4 オブジェクトメソッド, "this"
4.5 オブジェクトからプリミティブへの変換
5 データ型
5.1 プリミティブのメソッド
5.2 数値
5.3 文字列
5.4 配列
5.5 配列のメソッド
5.6 反復可能なオブジェクト
5.7 Map, Set, WeakMap と WeakSet
5.8 Object.keys, values, entries
5.9 分割代入
5.10 日付 と 時刻
5.11 JSON メソッド, toJSON
6 関数の高度な機能
6.1 再帰とスタック
6.2 残りのパラメータとスプレッド演算子
6.3 クロージャ
6.4 古い "var"
6.5 グローバルオブジェクト
6.6 関数オブジェクト, NFE
6.7 "new Function" 構文
6.8 スケジューリング: setTimeout と setInterval
6.9 デコレータと転送, call/apply
6.10 関数バインディング
6.11 カリー化と部分適用
6.12 アロー関数ふたたび
7 オブジェクト、クラス、継承
7.1 プロパティフラグとディスクリプタ
7.2 プロパティの getters と setters
7.3 プロトタイプ継承
7.4 F.prototype
7.5 ネイティブのプロトタイプ
7.6 プロトタイプのためのメソッド
7.7 Class パターン
7.8 クラス
7.9 クラスの継承, super
7.10 クラスのチェック: "instanceof"
7.11 ミックスイン
8 エラーハンドリング
8.1 エラーハンドリング, "try..catch"
8.2 カスタムエラー, Error の拡張
他にも、
- パート 2 ブラウザ: ドキュメント, イベント, インタフェース
- パート 3 その他の記事
と続いており、様々なトピックについて説明されています。
この教材は、元々英語版があって、それを日本語版に翻訳したみたいです。
作者は、Ilya Kantorさんという方でした。
Oh, and we've got Japanese too: 現代の JavaScript チュートリアル https://t.co/SUj9mMG48n !
— Ilya Kantor (@iliakan) November 19, 2018
目次を見てみると、前半はJavaScriptの基本的な事柄を扱っていますが、後半は難しい内容も扱っているので、参考になりそうだと思いました。
見どころ
チラっと見てみましたが、様々な項目を網羅的に扱っており、分かりやすい教材なのではないかと思いました。
見どころ その１ JavaScriptのテスト
何か新しいプログラミング言語を学ぶ場合は、
「まずその言語のテストのやり方を押さえておくと、その後の学習がスムーズになる」
という話がありました。
学習ツールとしての単体テスト
テストはソフトウェア開発の場面にだけ利用されるとは限りません。
私は新しいプログラミング言語を学ぶとき、まず最初にその言語のテストフレームワークを導入します。
そして教科書を読み進めながら、登場したサンプルコードを単体テストとして実行します。
「こう書いたらどういう結果になるのだろう」と疑問が湧いたら、そのテストを書いて動作を確認します。
教科書を読み終えたとき、手元にはたくさんの正しく動くテストコードが残ります。
その使い古したテストコードが多ければ多いほど、言語への理解と自信を深めてくれるのです。
テストによって、プログラムの動作を確認することができます。
デザイン・レシピ
プログラムの基本的な書き方として、Matthias Felleisen氏が提案したプログラムの「デザイン・レシピ」という考え方があります。
デザイン・レシピでも、関数や様々な機能を作るときに、併せてテストも作るように推奨されています。
（参考）デザイン・レシピは、以下の本やWebサイトなどで紹介されています。
How to Design Programs: An Introduction to Programming and Computing (The MIT Press)
- 作者: Matthias Felleisen,Robert Bruce Findler,Matthew Flatt,Shriram Krishnamurthi
- 出版社/メーカー: The MIT Press
- 発売日: 2018/05/04
- メディア: ペーパーバック
- この商品を含むブログを見る
※Webサイトでも読めます。
How to Design Programs, Second Edition
プログラミングの基礎 (Computer Science Library)
- 作者: 浅井健一
- 出版社/メーカー: サイエンス社
- 発売日: 2007/03/01
- メディア: 単行本
- 購入: 17人 クリック: 409回
- この商品を含むブログ (127件) を見る
※Webサイトでも一部見られます。
（参考）デザイン・レシピの紹介記事
TDD：テスト駆動開発
同様に、テストを活用した開発方法も提案されています。
テスト駆動開発 (test-driven development; TDD) とは、プログラム開発手法の一種で、プログラムに必要な各機能について、最初にテストを書き（これをテストファーストと言う）、そのテストが動作する必要最低限な実装をとりあえず行った後、コードを洗練させる、という短い工程を繰り返すスタイルである。
「現代のJavaScriptチュートリアル」にも、JavaScriptのテストに関する説明がありました。
なぜテストが必要？
関数を書くとき、通常それがすることをイメージできます: どのパラメータがどの結果となるか。
開発中、私たちは関数を実行し、その結果と期待値を比較することで確認を行うことができます。例えば、コンソール上でそれを行うことができます。
もし何かが間違っていたら – コードを直し、再度実行し結果を確認します – と言ったことを上手く動くまで。
JavaScriptのテストフレームワークには、「Mocha」以外にもいろいろありますが、とりあえずMochaの使い方を理解できればOKだと思います。
見どころ その２ JavaScriptのthis
レシーバーとは？
プログラミング用語の「レシーバー」には、メッセージを受け取るもの（受信者）という意味があります。
Simulaのオブジェクトとクラスというアイデアは異なる二つの概念に継承される。
一つはシステム全てをオブジェクトの集合と捉え、オブジェクトの相互作用をメッセージに喩えた「オブジェクト指向」である。
オブジェクト間の相互作用をメッセージの送受と捉えることで、オブジェクトは受信したメッセージに見合った手続き単位（≒関数）を自身で起動すると考える。
結果オブジェクトは自身の持つ手続きのカプセル化を行うことができ、メッセージが同じでもレシーバオブジェクトによって行われる手続きは異なる――多相性（ポリモーフィズム）を実現した（このメッセージを受け実行される手続き単位は、メッセージで依頼されたことを行うための「手法」の意味でメソッドと呼ばれる）。
クラスとインスタンスのまとめ - mic_footprints
☆メソッドとレシーバ
メソッド(method)が働きかける先をレシーバ(receiver)という
オブジェクト指向では、一つにまとめる事が出来る手続きを一体化してオブジェクトとして定義します。
一つの処理として定義できる手続き、例えば「閉じる」為に必要な処理をひとまとめにしておき、ソースコード上では「ウィンドウを閉じる」というメッセージを送るだけで処理されればわかりやすいですよね。
このように、必要な処理をソースコードの外側にまとめる事をカプセル化と言い、そのオブジェクトに対して、実行に必要なメッセージを送るような処理の方式をメッセージ式と言います。
また、この時にメッセージを送る側をセンダ、メッセージを受け取る側をレシーバと呼びます。
例えば
> "abcabcabc".delete("a","b")
この場合は、文字列 "abcabcabc" がレシーバです。あるオブジェクトの、あるメソッドを実行しようとしたとき、そのオブジェクトの方をレシーバと呼びます。
JavaScriptなどのオブジェクト指向プログラミング言語で、
foo.hoge
foo.fuga()
というようなコードがあった場合、この「foo」の部分が「レシーバー」と呼ばれてます。
レシーバーの中には、オブジェクトが自分自身を指し示すための特別なレシーバーもあります。
JavaScriptの場合、「this」という特別なレシーバーが用意されています。
で、このJavaScriptの「this」は、他のプログラミング言語とはちょっと違う部分もあるので、どんな仕組みなのか？その使い方を理解しておく必要があります。
「現代のJavaScriptチュートリアル」にも、JavaScriptのthisに関する説明がありました。
メソッド中の “this”
オブジェクトメソッドが、その処理をするために、オブジェクトに格納されている情報にアクセスする必要があることは一般的です。
オブジェクトにアクセスするために、メソッドは this キーワードを使うことが出来ます。
this の値はメソッドを呼び出すのに使われた “ドットの前” のオブジェクトです。
“this” はバインドされていません
JavaScriptでは、 “this” キーワードは他のほとんどのプログラミング言語とは異なる振る舞いをします。
this の値は実行時に評価されます。そしてそれは何にでもなれます。
“this” を失う
私たちはすでに、JavaScriptでは this を失うことが容易であることを知っています。
あるメソッドがオブジェクトから別の場所に渡されると、this は失われます。
解決策 2: bind
関数は、this を固定できる組み込みメソッド bind を提供します。
JavaScriptの「this」は変な仕組みになっているので、他の言語とは違うことを忘れないようにしたいです。
まとめ
目次を見たら、他にも読んでみたい項目がたくさんありました。
JavaScriptは、他のプログラミング言語と比べると変な仕様もあるので、基本をシッカリと理解しておきたいところです。
こういう教材を無料で提供してくれるって、ありがたいことですね！
「現代のJavaScriptチュートリアル」に一通り目を通してみたいと思います。
※有料のPDF版も用意されていました。オフラインで読みたい場合に便利ですね。
https://ja.javascript.info/ebook
