2日目wip

Author: chelproc

docs/day02/04.md

@@ -49,3 +49,7 @@ document.write('Hello' + 1 + 2);
 この場合、演算子の**結合規則**を考えます。`+`の結合規則は左から右なので、`3 + 4 + 'Hello'`は`(3 + 4) + 'Hello'`、`'Hello' + 1 + 2`は`('Hello' + 1) + 2`と解釈されることになります。
 
 `+`は、両辺が数値の場合のみ加算演算子として振る舞い、片方が数値で片方が文字列の場合は数値を文字列に変換してから文字列結合演算子として機能します。このため、最終的な式全体の評価結果は前者が`7Hello`、後者が`Hello12`となるのです。
+
+:::tip
+改行が表示されず困っていますか？`document.write`はHTMLタグを出力できます。`<br>`を用いたり、`p`タグで囲んでみたりしてみましょう。
+:::

docs/day02/07.md

@@ -1,10 +1,10 @@
 ---
-title: 制御構造
+title: if文
 ---
 
-## if文
+`if`文を用いると、特定の条件下のみで実行されるプログラムを記述することができます。
 
-条件式が`true`のとき続く処理を実行します。
+## 基本構造
 
 ```js
 const age = 18;
@@ -13,4 +13,98 @@ if (age >= 20) {
 } else {
   document.write('子供です。');
 }
-```
+```
+
+2行目の`if (age >= 20) {`の部分に差し掛かると、まずはカッコ内の`age >= 20`が評価されます。この式の値は`false`なので、
+
+```js
+if (false) {
+  document.write('大人です。');
+} else {
+  document.write('子供です。');
+}
+```
+
+`if`文の基本構造は
+
+```
+if (式) 文1 else 文2
+```
+
+です。式の値が`true`であれば文1が、`false`であれば文2が実行されます。よって、上記の例では`子供です。`が表示されます。
+
+なお、`else`と文2は省略することもできます。
+
+:::tip
+`{`から`}`で囲まれた部分のことを**ブロック**と呼び、複数の文をグループ化することができます。上の例では文は1つずつなのでこの括弧は必要ありませんが、複数の文を入れる場合は必ず必要になります。
+
+ブロックを作る場合は、適切に**インデント**（字下げ）を行いましょう。上の例では、2行目と4行目のみが、他の部分と比べ**スペース2文字分**だけ下がっていることが分かります。
+:::
+
+## ネストされたif文とelse if
+
+制御構造は、入れ子（**ネスト**）にすることで、より複雑な処理を記述できます。
+
+```js
+const age = 19;
+if (age >= 20) {
+  document.write('入場できます。');
+} else {
+  if (age >= 18) {
+    document.write('条件付きで入場できます。');
+  } else {
+    document.write('入場できません。');
+  }
+}
+```
+
+以上の例では、`age`が
+
+* 20以上であれば、`入場できます。`と表示
+* 18以上であれば、`条件付きで入場できます。`と表示
+* それ以外であれば、`入場できません。`と表示
+
+という形になっています。ただし、この場合、外側の`else`に続く括弧内の文は`if`文ひとつのみですので、括弧を省略して
+
+```js
+const age = 19;
+if (age >= 20) {
+  document.write('入場できます。');
+} else if (age >= 18) {
+  document.write('条件付きで入場できます。');
+} else {
+  document.write('入場できません。');
+}
+```
+
+のようにする場合が多いです。
+
+## truthyとfalsy
+
+次のコードの実行結果はどうなるでしょうか。
+
+```js
+if ('Hello World!') {
+  document.write('trueです。');
+} else {
+  document.write('falseです。');
+}
+```
+
+JavaScriptでは次のような値は、論理演算において`false`と同様に扱われます。
+
+* `0` (数値)
+* `''` (空文字列)
+
+などです。このような値を**falsy**な値であるといいます。falsyでない値はすべて`true`と同様、すなわち**truthy**な値です。よって、上の例では`trueです。`が表示されます。
+
+## 課題
+
+生まれた年を格納した変数を予め用意し、その年がうるう年かどうかを判定して表示するプログラムを作成してください。ただし、うるう年とは、西暦年が以下のいずれかの条件を満たす年であるものとします。
+
+* 400で割り切れる
+* 100で割り切れないが、4で割り切れる
+
+:::tip
+`%`は**剰余演算子**と呼ばれ、除算の剰余を求めることができます。
+:::

docs/day02/08.md

@@ -0,0 +1,70 @@
+---
+title: while文とfor文
+---
+
+## while文の基本構造
+
+`while`文は、以下の構造をとります。
+
+```
+while (式) 文
+```
+
+`while`は、式の値がtruthyであれば、文を実行します。文の実行が終わったら、もう一度式を評価するところからやり直します。この繰り返しです。例を見てみましょう。
+
+```js
+let i = 0;
+while (i < 3) {
+  document.write(i);
+  i++;
+}
+```
+
+```
+123
+```
+
+`++`は**インクリメント演算子**と呼ばれる単項演算子で、作用する変数に1を直接加えます。
+
+プログラムの実行の流れを順に追っていきましょう。まずは`i < 3`、つまり`0 < 3`が評価され、`true`になります。`true`は明らかにtruthyなので、ブロック内の文が実行されます。
+
+`document.write`により`0`が表示され、続けてインクリメント演算子により`i`の値が`0`から`1`に増えます。
+
+ブロック内の文の実行が終わったので、再度式を評価します。`i < 3`は`1 < 3`ですのでやはり`true`です。ブロックが実行されます。
+
+以上を`i = 3`となるまで繰り返します。
+
+## for文の基本構造
+
+上記の`while`文の例は`for`文を用いると以下のように書き直すことができます。
+
+```js
+for (let i = 0; i < 3; i++) {
+  document.write(i);
+}
+```
+
+非常にシンプルになりました。`for`文は、以下のような構造をとります。
+
+```
+for (初期化; 条件; 再設定) 文
+```
+
+`while`文で置き換えたとき、`初期化`の部分が`while`文より手前に、`条件`の部分が`while`文の条件式に、`再設定`の部分が`while`文の中のブロックの末尾に入ると考えられます。
+
+## 課題
+
+Fizz Buzz問題と呼ばれる有名な問題があります。`for`文と`if`文を用いて実装してみましょう。
+
+Fizz Buzz問題とは、1から100までの整数に対して、それぞれ以下の処理を実行するものです。
+
+* 3の倍数なら`Fizz`と表示
+* 5の倍数なら`Buzz`と表示
+* 3と5の公倍数なら`FizzBuzz`と表示
+* 以上のいずれにも当てはまらない場合はその数字を表示
+
+出力は以下のようになります。
+
+```
+1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 FizzBuzz 16 17 ...
+```

docs/day02/09.md

@@ -0,0 +1,97 @@
+---
+title: 関数
+---
+
+## 純粋な関数
+
+次のコードを見てください。
+
+```js
+let sum1To10 = 0;
+for (let i = 1; i <= 10; i++) {
+  sum1To10 += i;
+}
+document.write(`<p>1から10の和は${sum1To10}です。</p>`);
+
+
+let sum6To18 = 0;
+for (let i = 6; i <= 8; i++) {
+  sum6To18 += i;
+}
+document.write(`<p>6から18の和は${sum6To18}です。</p>`);
+```
+
+:::note
+* `+=`は**加算代入演算子**で、左辺の変数に右辺の式の値を加えます。式自体の評価結果は加算後の変数の値です。
+* `` ` ``（バッククォート）は**テンプレートリテラル**と呼ばれ、文字列中の`${`から`}`に囲まれた部分をJavaScriptの式として評価して文字列中に展開します。
+:::
+
+見ての通り、1～10、6～18、それぞれの和を計算して表示するプログラムです。しかしながら、前半と後半で重複する部分が多く、無駄な感じがします。
+
+:::tip
+情報の重複を許さないというルールは**DRY原則**（Don't Repeat Yourself）と呼ばれ、高品質な製品を実現するための基本的な枠組みとなっています。
+:::
+
+## 副作用を持つ関数
+
+**関数**を用いると、決まった処理をひとまとまりとして扱い、その処理に名前を付けることができます。
+
+```js
+function sum(from, to) {
+  let result = 0;
+  for (let i = from; i <= to; i++) {
+    result += i;
+  }
+  return result;
+}
+
+document.write(`<p>1から10の和は${sum(1, 10)}です。</p>`);
+document.write(`<p>6から18の和は${sum(6, 8)}です。</p>`);
+```
+
+JavaScriptにおける関数は、`function`キーワードから始まる1つのブロックです。
+
+関数は、**引数**（ひきすう）をとることができます。`sum(from, to)`の`from`や`to`を**仮引数**と呼び、関数内でその引数の値を扱うための変数となります。
+
+関数を呼び出す側、例えば`sum(1, 10)`における`1`や`10`を**実引数**と呼びます。この場合、`sum`関数側では`from`に`1`が、`to`に`10`が代入されて実行されます。
+
+`return`文は、関数の中で到達すると、その時点で関数の実行を中断し、式の評価結果を確定させます。`sum(1, 10)`を実行して`return result;`まで到達したとき、`result`は`55`ですので、式`sum(1, 10)`の評価結果は`55`となります。関数の評価結果を、その関数の**戻り値**と呼びます。
+
+関数は、数学のそれとは異なり、あくまでも処理のまとまりであって、値を返す必要はありません。上のコードは、以下のように書き直すことができます。
+
+```js
+function showSum(from, to) {
+  let result = 0;
+  for (let i = from; i <= to; i++) {
+    result += i;
+  }
+  document.write(`<p>${from}から${to}の和は${result}です。</p>`);
+}
+
+showSum(1, 10);
+showSum(6, 18);
+```
+
+上記の例において、`showSum`は`from`から`to`までの合計を計算して表示するための関数です。`return`文が存在しないので、値を返すことはありません。
+
+:::tip
+上記の`sum`のように、数学の関数と同じく、引数を受け取って値を帰すだけの関数を、**純粋な関数**と呼びます。
+
+`showSum`は、関数内で画面に文字を表示するという、関数の外界に影響を及ぼす処理（**副作用**）を行っています。副作用を持つ関数は純粋な関数ではありません。
+
+`document.write`は、文字列を受け取ってそれを画面に表示させる、副作用を持つ関数であるといえます。
+:::
+
+## 課題
+
+文字列`str`と整数`count`を受け取り、`str`を`count`回繰り返し結合してその文字列を返す関数`repeat(str, count)`を作成してください。
+
+```js
+document.write(repeat('*', 6)); // ******
+```
+
+のようにして、作成した関数を実際に実行してみてください。
+
+:::info
+加算代入演算子は、`+`と同じく、文字列結合の用途にも使用できます。
+:::

docs/day02/10.md

@@ -0,0 +1,47 @@
+---
+title: デバッグ
+---
+
+プログラムが誤っているとき、当然ながらプログラムは動作しません。この誤りを**バグ**と呼びます。バグを消すための操作を**デバッグ**と呼びます。デバッグには、以前学習した開発者ツールを利用することができます。
+
+## console.log
+
+ブラウザ上で動作するJavaScriptのプログラムで`console.log`が呼ばれると、開発者ツールの**コンソール**にその値が表示されます。
+
+```js
+console.log('Hello World!');
+```
+
+開発者ツールを確認してみましょう。
+
+![コンソールに表示されたHello World](10/console.png)
+
+## デバッガ
+
+**デバッガ**は、デバッグを支援するためのソフトウェアです。ブラウザの開発者ツールには、JavaScript向けの非常に強力なデバッガが搭載されています。
+
+以下のコードを実行してみましょう。
+
+```js title="script.js"
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+```
+
+Chromeの開発者ツールでは、`Sources`タブで記述されているHTMLやCSS、JavaScriptファイルの内容を表示できます。先ほど記述した`script.js`の2行目の、**行番号の左側**をクリックしてみましょう。丸い記号が表示されるはずです。
+
+![ブレークポイントの設置](10/set-breakpoint.png)
+
+これは、**ブレークポイント**と呼ばれる、プログラムの実行を一時的に中断するための機能です。ブレークポイントが実際に動作することを確認するため、ページをリロードしてみましょう。
+
+![変数の値の表示](10/inspect-variables.png)
+
+プログラムの実行が一時中断されました。この状態で、変数名にカーソルを合わせると、その時点での変数の値が表示されます。また、画像中では右側に表示されているパネルには、定義されている変数の一覧も表示されていることがわかります。
+
+再生ボタンを押すと、プログラムの実行が再開されます。上記の例の場合は、次のループでもう一度2行目が実行されるため、そこでまたプログラムが中断されます。10回のループの間に、変数の値がどのように変化しているかを観察してみてください。
+
+:::tip
+再生ボタンの右隣にある3つのアイコンは、順に**ステップオーバー**、**ステップイン**、**ステップアウト**です。
+
+ステップオーバーを利用すると、プログラムの実行が次の文に移動します。ステップインの動作はステップオーバーの動作と似ていますが、実行中の文に関数が含まれる場合、その内部に移動します。ステップアウトは、現在処理している関数の処理を抜けたところまで実行します。
+:::