3日目

Author: chelproc

docs/day03/07.md

@@ -26,7 +26,7 @@ class Dog {
 }
 ```
 
-上の例の`Dog`クラスの定義は、現実世界の犬を表す設計図です。犬を表すためのデータには、例えば「年齢」や「名前」があります。これが`age`フィールドや`name`フィールドです。
+JavaScriptにおいてクラスを定義するためには、`class`構文を用います。上の例で示した`Dog`クラスの定義は、現実世界の犬を表す設計図です。犬を表すためのデータには、例えば「年齢」や「名前」があります。これが`age`フィールドや`name`フィールドです。
 
 犬に関わる動作には、例えば「吠える」などがあります。`bark`メソッドとしてみましょう。メソッドの中の`this`キーワードは、設計図から生まれた実体を表します。
 
@@ -43,5 +43,35 @@ pochi.bark();
 
 なお、これ以降、クラスのメソッドは`#`記号を用いて表すこととします。例えば、`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`メソッドを追加してください。
+
+`Dog`クラスに、`私の名前は〜です。`（〜の部分に`name`プロパティを埋め込む）とコンソールに出力する`introduceSelf`メソッドを追加してください。実際に`introduceSelf`メソッドを実行させ、正常に動作することを確認してください。

docs/day03/08.md

@@ -1,27 +1,67 @@
 ---
-title: コンストラクタと継承
+title: 組み込みクラス
 ---
 
-## コンストラクタ
+## Arrayクラス
 
-コンストラクタは、`new`演算子が使用された際に呼び出される関数です。`JavaScript`では、`constructor`という名前のメソッドを定義することで使用することができます。
+今まで何気なく扱ってきたJavaScriptの配列ですが、実は`Array`クラスのインスタンスです。具体的に言えば、配列リテラルが生成するオブジェクトは、`Array`クラスのインスタンスです。
+
+Arrayクラスには、開発効率を劇的に変える便利なメソッドが大量に定義されています。
+
+### `map`メソッド
+
+`Array#map`メソッドは、関数の引数をひとつとり、配列の各要素に対して関数を実行し、それらの戻り値からなる新たな配列を返します。
 
 ```js
-class Dog {
-  age;
-  constructor(age) {
-    this.age = age;
-  }
-}
-
-const pochi = new Dog(8);
-console.log(pochi.age); // 8
+const numbers = [1, 3, 6, 8];
+const doubledNumbers = numbers.map(value => value * 2); // [2, 6, 12, 16]
 ```
 
-コンストラクタは、他の関数と同じように、引数を取ることができます。通常、コンストラクタに渡される値は、フィールドの初期化などに用いられます。
+2行目の`map`メソッドの引数として渡しているアロー関数式`value => value * 2`は、引数をひとつとり、その値を2倍にして返す関数です。この関数が配列の各要素に対して実行されて、その戻り値の集合が`doubledNumber`となっています。
+
+### `filter`メソッド
 
-## コンストラクタを使用する
+`Array#filter`メソッドは、関数の引数をひとつとり、配列の各要素に対して関数を実行し、それらの戻り値がtruthyだったもののみからなる新しい配列を返します。
+
+```js
+const evenNumbers = numbers.filter(value => value % 2 === 0); // [6, 8]
+```
+
+アロー関数式`value => value % 2 === 0`は、引数が偶数の場合`false`を、奇数の場合`true`を返す関数です。`numbers`のうち`6`と`8`の場合のみ戻り値が`true`となるので、その2つのみからなる新しい配列が`evenNumbers`に入ります。
+
+## DOMオブジェクトと継承
+
+DOMオブジェクトも、何らかのクラスのインスタンスだとみなせます。例えば、
+
+```js
+document.querySelector('div');
+```
 
-JavaScriptには、日時を表すための`Date`クラスが用意されています。`Date`クラスのコンストラクタは、例えば文字列引数1つにより呼び出すことができ、その文字列を日付として解釈しようと試みます。`Date`クラスには、日時を扱うための様々な便利メソッドが用意されています。
+のようにして取得された`div`要素は、`HTMLDivElement`クラスのインスタンスだと考えられます。
 
+[`HTMLDivElement`について記述している文書](https://developer.mozilla.org/ja/docs/Web/API/HTMLDivElement)を読んでみましょう。おなじみ`textContent`プロパティや`style`プロパティが存在していませんね。
 
+これには、**継承**と呼ばれる仕組みが関係しています。継承とは、その名の通り機能を受け継ぐための仕組みです。ここでいう機能とは、例えばプロパティやメソッドです。継承先のオブジェクトでは、継承元のプロパティやメソッドを使用することができます。
+
+DOMは非常に高度な枠組みです。今回の例でいえば、`HTMLDivElement`は`HTMLElement`を継承しており、`HTMLElement`は`Element`を、そして`Element`は`Node`を継承しています。そして`HTMLDivElement`は、そのすべてを利用できるのです。
+
+実は、`textContent`は`Node`オブジェクトのプロパティで、`style`は`HTMLElement`オブジェクトのプロパティです。どのプロパティがどのオブジェクトに所属するのかを具体的に記憶する必要性はあまりありませんが、リファレンスを調べる場合にこの知識は大変有用です。
+
+## 課題
+
+[`Array#reduce`メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)は、配列のすべての要素から、単一の値を導き出す（次元を下げる）メソッドです。
+
+```js
+const sum = [1, 2, 3, 4, 5].reduce((previous, current) => previous + current, 0);
+console.log(sum); // 15
+```
+
+`reduce`メソッドの第一引数は、引数を2つとる関数です。配列の各要素をこの関数の第二引数に渡し、戻り値を次の実行時に第一引数として渡します。この第一引数は、初回実行時には`reduce`メソッド自体の第二引数が用いられます（ただしこの引数が省略された場合は配列の最初の要素が用いられ、実行回数が1回分減ります）。
+
+`reduce`メソッドを使用して、配列の最小値を求めてみてください。
+
+```js
+const numbers = [6, 9, 1, 3, 2];
+const minimumNumber = numbers.reduce(/** ここに記述 */);
+console.log(minimumNumber); // 1
+```

docs/day03/09.md

@@ -0,0 +1,101 @@
+---
+title: プルリクエストを用いた共同開発
+---
+
+GitHubには、**プルリクエスト**と呼ばれる、変更を提案するための機能があります。この機能を正しく利用することで、複数人による開発を円滑に進めることができます。
+
+## ブランチ
+
+以前少し触れたとおりGitにおける**ブランチ**とは、ソースコードの分岐です。複数人で開発をする場合は、同じソースコードに複数人が同時に触れることのないよう、編集を枝分かれさせます。
+
+![ブランチ](09/branch.svg)
+
+作業しているブランチを切り替えるためには、`git checkout`コマンドを使用します。ただし、ブランチがまだ存在せず、新しく作成することが必要な場合は`-b`オプションを付けます。
+
+複数のブランチをひとつのブランチに統合する作業を**マージ**といいます。分岐したブランチでいくつかのコミットをしたら、もとのブランチをチェックアウトした状態で`git merge`コマンドを実行しましょう。**マージコミット**が作成され、分岐先のブランチの変更を取り込むことができます。
+
+## プルリクエストを利用してマージする
+
+Gitのリポジトリを作成すると、通常`master`ブランチが作成されます。`master`ブランチは、すべての起点となる重要なブランチです。このため、`master`ブランチへのマージ作業は慎重に行うべきでしょう。GitHubのプルリクエスト機能を使用すれば、マージ前に様々な確認作業を行うことができます。
+
+まずは、**トピックブランチ**（あるひとつの変更を加えるためのブランチ）を作成します。どのような変更を行うかを把握しやすいネーミングを心がけましょう。
+
+```
+$ git checkout -b add-something
+```
+
+続いて、トピックブランチ上で適当な編集を行い、コミットします。
+
+```
+$ git add -A
+$ git commit -m "somethingを追加した"
+```
+
+リモートリポジトリにプッシュしましょう。
+
+```
+$ git push -u origin add-something
+```
+
+:::tip
+`git checkout`コマンドで作成したブランチは、まだローカルリポジトリにしか存在していないため、プッシュする際に`-u`オプションを指定して、リモートリポジトリを指定する必要があります。2回目以降のプッシュでは`git push`のみで構いません。
+:::
+
+続いて、GitHubの`Pull requests`タブから、`New pull request`もしくは`New`をクリックします。
+
+![プルリクエストの準備](09/new-pull-request-preparation.png)
+
+`base`をマージ先のブランチ、`compare`を先ほど作成したブランチに設定し、プルリクエストのタイトルとメッセージを記入します。
+
+:::tip
+先ほどの画面で`Compare & pull request`のボタンが表示されていた場合は自動的に`base`と`compare`が設定されます。
+:::
+
+![プルリクエストの作成](09/new-pull-request.png)
+
+`Create pull request`を選択すると、プルリクエストが作成されます。
+
+![作成されたプルリクエスト](09/pull-request-created.png)
+
+`Merge pull request`を押して確認すれば、変更が`base`に指定したブランチに反映されます。
+
+```
+$ git checkout master
+$ git pull
+```
+
+`master`ブランチをプルして、変更が正しく反映されていることを確認しましょう。
+
+## ほかの人のリポジトリの開発に参加する
+
+### 権限の付与
+
+`Settings`の`Manage access`から、`Invite a collaborator`を押すことで、ほかの人をリポジトリに招待することができます。
+
+![権限の付与](09/authorize-others.png)
+
+### 開発の開始
+
+権限が付与されると、メールでその旨が通知されます。リポジトリの`Code`ボタンからリポジトリのURLを取得し
+
+```
+$ git clone [リポジトリのURL]
+```
+
+としてリモートリポジトリをクローンしましょう。
+
+![リポジトリのクローン](09/clone-repository.png)
+
+:::tip
+`git clone`を用いてリポジトリをクローンした場合には、はじめからリモートリポジトリが結びついているため、
+
+```
+$ git remote add origin [リポジトリのURL]
+```
+
+を実行する必要はありません。
+:::
+
+## 課題
+
+ut.code(); Learn（このウェブサイト）は、[GitHubにて管理](https://github.com/ut-code/utcode-learn)されています。編集権限を受け取り、何かしらの編集をして、プルリクエストを作成してみましょう。