Merge pull request #1 from ut-code/develop

3日目

Author: chelproc

docs/day02/07.md

@@ -15,7 +15,7 @@ if (age >= 20) {
 }
 ```
 
-2行目の`if (age >= 20) {`の部分に差し掛かると、まずはカッコ内の`age >= 20`が評価されます。この式の値は`false`なので、
+2行目の`if (age >= 20) {`の部分に差し掛かると、まずは括弧内の`age >= 20`が評価されます。この式の値は`false`なので、
 
 ```js
 if (false) {

docs/day02/09.md

@@ -2,7 +2,7 @@
 title: 関数
 ---
 
-## 純粋な関数
+## 処理の共通化
 
 次のコードを見てください。
 
@@ -32,7 +32,7 @@ document.write(`<p>6から18の和は${sum6To18}です。</p>`);
 情報の重複を許さないというルールは**DRY原則**（Don't Repeat Yourself）と呼ばれ、高品質な製品を実現するための基本的な枠組みとなっています。
 :::
 
-## 副作用を持つ関数
+## 純粋な関数
 
 **関数**を用いると、決まった処理をひとまとまりとして扱い、その処理に名前を付けることができます。
 
@@ -57,6 +57,8 @@ JavaScriptにおける関数は、`function`キーワードから始まる1つ
 
 `return`文は、関数の中で到達すると、その時点で関数の実行を中断し、式の評価結果を確定させます。`sum(1, 10)`を実行して`return result;`まで到達したとき、`result`は`55`ですので、式`sum(1, 10)`の評価結果は`55`となります。関数の評価結果を、その関数の**戻り値**と呼びます。
 
+## 副作用を持つ関数
+
 関数は、数学のそれとは異なり、あくまでも処理のまとまりであって、値を返す必要はありません。上のコードは、以下のように書き直すことができます。
 
 ```js

docs/day03/01.md

@@ -2,7 +2,7 @@
 title: オブジェクト
 ---
 
-今まで扱ってきたJavaScriptの「値」は、文字列、数値、論理値の3つでした。**オブジェクト**は、複数の値をひとまとまりにして**名前と値のペア**で管理できる、新たな種類の値です。
+今まで扱ってきたJavaScriptの「値」は、文字列、数値、論理値の3つでした。**オブジェクト**は、複数の値をひとまとまりにして**名前と値のペア**で管理できる、新たな種類の値です。また、JavaScriptにおけるオブジェクトではない値を総称して、**プリミティブ**な値といいます。
 
 ## オブジェクトの生成
 

docs/day03/02.md

@@ -2,6 +2,10 @@
 title: 配列
 ---
 
+:::note
+JavaScriptの配列は、他の言語とかなり異なる性質を持っています。他の言語の経験がある方は注意して読むようにしてください。
+:::
+
 ## 配列の生成
 
 JavaScriptにおける**配列**（Array）は、キーが数値であるオブジェクトです。**配列リテラル**を用いて生成します。
@@ -14,7 +18,7 @@ document.write(myFriends.length); // 3
 
 配列リテラルでは、`[`から`]`までの領域の中に、複数の値をコンマ区切りで記述します。各値には0から始まる整数が自動的にキーとして割り当てられます。キー名が数値となっているため、各要素（プロパティ）にアクセスするためには、ブラケット記法を使用する必要があります。つまり、`myFriends.1`という記法は許されません。
 
-`['A', 'B', 'C']`のようにして生成された配列は、`{ 0: 'A', 1: 'B', 2: 'C' }`というオブジェクトと似ていますが、異なる点もあります。それが`length`プロパティです。配列には`length`プロパティが自動的に定義され、配列の長さを表します。
+`['A', 'B', 'C']`のようにして生成された配列は、`{ 0: 'A', 1: 'B', 2: 'C' }`というオブジェクトと似ていますが、異なる点もあります。そのひとつが`length`プロパティです。配列には`length`プロパティが自動的に定義され、配列の長さを表します。
 
 ## 配列の要素を列挙する
 
@@ -26,17 +30,17 @@ for (let i = 0; i < myFriends.length; i++) {
 }
 ```
 
-`length`プロパティにより配列の要素数を取得することができるので、それを条件式野中で利用しましょう。
+`length`プロパティにより配列の要素数を取得することができるので、それを条件式の中で利用しましょう。
 
-`for`文には、配列のようなオブジェクトの要素を列挙するための専用の気泡が存在しています。`for 〜 of`ループです。
+`for`文には、配列のようなオブジェクトの、全ての要素を列挙するための専用の記法が存在しています。`for 〜 of`ループです。
 
 ```js
 for (const myFriend of myFriends) {
   document.write(myFriend);
 }
 ```
 
-`for (const 変数 of 配列)`とすることで、配列の各要素を変数に代入しながらループを回すことができます。
+`for (const 変数 of 配列)`とすることで、配列の各要素を変数に代入しながらループを回すことができます。なお、`for 〜 of`ループの中では`const`が使用できることに注意してください。
 
 ## ネストされた配列
 

docs/day03/04.md

@@ -0,0 +1,107 @@
+---
+title: 関数とオブジェクト
+---
+
+JavaScriptにおいては、関数も一種のオブジェクトです。関数自体を数値や文字列と同じく通常の値として扱うことができます。
+
+:::tip
+関数のこのような性質を**第一級関数**と呼びます。
+:::
+
+## 関数を変数に代入する
+
+```js
+function doSomething() {
+  document.write('Hello World!');
+}
+
+const someVariable = doSomething;
+someVariable();
+```
+
+上の例では、関数`doSomething`を`someVariable`に代入しています。関数が入った変数は、そのまま通常の関数と同様に使用できます。
+
+## 関数を関数の引数として使用する
+
+```js
+function callTwice(callback) {
+  callback();
+  callback();
+}
+
+function sayHello() {
+  document.write('Hello');
+}
+
+callTwice(sayHello);
+```
+
+`callTwice`の内部の`callback`には関数が格納されているので、そのまま実行することができます。
+
+## 無名関数
+
+**無名関数**とは、名前を持たない関数のことです。**アロー関数式**は、JavaScriptにおいて無名関数を生成する式の一種です。
+
+先ほどの例を、無名関数を用いて書き換えてみましょう。
+
+```js
+callTwice(() => {
+  document.write('Hello');
+});
+```
+
+アロー関数式は、`(引数) => { 処理 }`の形をとります。上記の例では、`() => { document.write('Hello'); }`の部分が、引数を取らず、`Hello`と表示する無名関数を生成する式となっています。
+
+## アロー関数式の省略形
+
+アロー関数式には、2つの省略記法が存在しています。両方を組み合わせることも可能です。
+
+### 引数の括弧の省略
+
+アロー関数の引数が1個だけのとき、引数の括弧は省略できます。
+
+```js
+(x) => { return x * 2; }
+```
+
+は、
+
+```js
+x => { return x * 2; }
+```
+
+のように省略できます。
+
+### `return`文とブロックの括弧の省略
+
+アロー関数式内が`return`文ただひとつのとき、`return`文と波括弧が省略できます。
+
+```js
+(x) => { return x * 2; }
+```
+
+は、
+
+```js
+(x) => x * 2;
+```
+
+のように省略できます。
+
+## 課題
+
+```js
+function map1To10(callback) {
+  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+  for (let i = 0; i < numbers.length; i++) {
+    numbers[i] = callback(numbers[i]);
+  }
+  return numbers;
+}
+```
+
+`map1To10`を適切に呼び出して、以下の戻り値を得てください。
+
+```js
+[3, 6, 9, 12, 15, 18, 21, 24, 27, 30]
+```

docs/day03/05.md

@@ -0,0 +1,44 @@
+---
+title: イベントハンドラ
+---
+
+DOM要素に対し、何らかのアクション（**イベント**）が起こった際の反応（**イベントハンドラ**）を定義することができます。
+
+```html
+<button id="amazing-button">押してね</button>
+```
+
+```js
+document.getElementById('amazing-button').onclick = () => {
+  alert('びっくり！');
+};
+```
+
+DOMオブジェクトの`onclick`プロパティには、その要素がクリックされた時に呼ばれる関数を指定します。今回は、アロー関数式を用いて、`() => { alert('びっくり！'); }`という関数を指定しています。
+
+:::tip
+`alert`は、画面上にモーダルダイアログボックスを表示させる関数です。
+:::
+
+:::caution
+この記事以降、`document.write`は一切使用しません。これは、`document.write`をページの読み込みが完了した状態で実行すると、ページの内容を全て消去してしまうためです。何かを出力する必要がある場合は、代わりに`console.log`を使用しましょう。
+:::
+
+## イベントオブジェクト
+
+イベントハンドラには、**イベントオブジェクト**と呼ばれる、起きたイベントの詳細を表すオブジェクトが引数として渡される場合が多いです。イベントオブジェクトを受け取る引数名には、`e`を使う場合が多いです。
+
+```html
+<input>
+```
+
+```js
+document.querySelector('input').onkeydown = (e) => {
+  console.log(e.key);
+}
+```
+
+`keydown`イベントのイベントオブジェクトには、押されたキーが格納されている、`key`プロパティがあります。
+
+## 課題
+`0`を表示する`div`要素とボタンをひとつ用意し、ボタンがクリックされるたびに`div`要素内部に表示されている値を1ずつ増やすプログラムを作成してください。

docs/day03/06.md

@@ -0,0 +1,41 @@
+---
+title: メソッド
+---
+
+:::note
+この章では、一般的なプログラミング言語におけるメソッドとは若干異なる概念である、JavaScriptのメソッドについて説明します。他のプログラミング言語の経験がある方は注意して読んでください。
+:::
+
+## メソッドの作成
+
+JavaScriptにおいて、関数は一種の値ですので、当然のことながらオブジェクトのプロパティとして使用することもできます。このような関数のことを`メソッド`と呼んでいます。
+
+```js
+const someObject = {
+  someMethod: () => {
+    console.log('Method called');
+  },
+};
+
+someObject.someMethod();
+```
+
+上記の例において、`someMethod`は`someObject`のメソッドである、といいます。
+
+:::tip
+`console.log`は`console`オブジェクトの`log`メソッドで、`document.write`は`document`オブジェクトの`write`メソッドです。
+:::
+
+## メソッドの省略記法
+
+オブジェクトのメソッドは、次のように記述すると簡単です。
+
+```js
+const someObject = {
+  someMethod() {
+    console.log('Method called');
+  }
+};
+```
+
+以上のコードは、前項のサンプルコードとほとんど同等です。

docs/day03/07.md

@@ -0,0 +1,77 @@
+---
+title: クラスとオブジェクト指向
+---
+
+:::info
+この記事では、まだJavaScriptの標準仕様には含まれていない[パブリックフィールド宣言](https://github.com/tc39/proposal-class-fields)を使用しています。ChromeとFirefoxでは動作しますが、Safariでは動作しないかもしれません。
+:::
+
+多くのプログラミング言語が、**オブジェクト指向**という考え方を持っています。オブジェクト指向とは、「データと動作を一つのまとまりとして捉える考え方」です。
+
+オブジェクト指向におけるこのまとまりを、**クラス**と呼びます。クラスに含まれるデータが**フィールド**、動作が**メソッド**です。
+
+クラスを使うためには、**定義**をしなければなりません。クラスの定義とは、そのクラスがどのようなフィールドやメソッドを持つかを示す、設計図のようなものです。
+
+```js
+class Dog {
+  age;
+  name;
+  bark() {
+    if (this.age > 5) {
+      console.log('バウバウ');
+    } else {
+      console.log('ワンワン');
+    }
+  }
+}
+```
+
+JavaScriptにおいてクラスを定義するためには、`class`構文を用います。上の例で示した`Dog`クラスの定義は、現実世界の犬を表す設計図です。犬を表すためのデータには、例えば「年齢」や「名前」があります。これが`age`フィールドや`name`フィールドです。
+
+犬に関わる動作には、例えば「吠える」などがあります。`bark`メソッドとしてみましょう。メソッドの中の`this`キーワードは、設計図から生まれた実体を表します。
+
+```js
+const pochi = new Dog();
+pochi.name = 'ポチ';
+pochi.age = 8;
+pochi.bark();
+```
+
+`Dog`の定義から実体（**インスタンス**）を作り出すためには、`new`キーワードを用います。インスタンスは通常のJavaScriptオブジェクトと同様の形式なので、ドット記法またはブラケット記法によりフィールドやメソッドにアクセスできます。
+
+`pochi.bark();`を実行した際、`bark`メソッド内で得られる`this`は`pochi`そのものです。この仕組みにより、クラス定義は、全てのインスタンスで共通する動作を問題なく抽象化できます。
+
+なお、これ以降、クラスのメソッドは`#`記号を用いて表すこととします。例えば、`Dog`クラスの`bark`メソッドは`Dog#bark`メソッドと表記します。
+
+## コンストラクタ
+
+コンストラクタは、`new`演算子が使用された際に呼び出される関数です。`JavaScript`では、`constructor`という名前のメソッドを定義することで使用することができます。
+
+```js
+class Dog {
+  age;
+  constructor(age) {
+    this.age = age;
+  }
+}
+
+const pochi = new Dog(8);
+console.log(pochi.age); // 8
+```
+
+コンストラクタは、他の関数と同じように、引数を取ることができます。通常、コンストラクタに渡される値は、フィールドの初期化などに用いられます。
+
+## コンストラクタを使用する
+
+JavaScriptには、日時を表すための`Date`クラスが用意されています。`Date`クラスのコンストラクタは、例えば文字列引数1つにより呼び出すことができ、その文字列を日付として解釈しようと試みます。`Date`クラスには、日時を扱うための様々な便利メソッドが用意されています。
+
+```js
+const valentinesDay = new Date('2020-02-14 00:00:00');
+console.log(valentinesDay.getDate()); // 14
+```
+
+例えば、`Date#getDate`メソッドは、その日の日付を返すメソッドです。
+
+## 課題
+
+`Dog`クラスに、`私の名前は〜です。`（〜の部分に`name`プロパティを埋め込む）とコンソールに出力する`introduceSelf`メソッドを追加してください。実際に`introduceSelf`メソッドを実行させ、正常に動作することを確認してください。