18 |
19 | 2023/12/24：ゲーム
20 | 友人とゲーム大会をしました。3 つほどゲームをしました。
21 |
22 | - Minecraft
23 | - ポケモン
24 | - Wii Sports
25 |
26 | Wii Sports ではボウリングをやり、順位をきめました！
27 |
28 | - 私
29 | - 太郎さん
30 | - 花子さん
31 |
32 | 優勝できてよかったです！
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/phase2/handouts/1-はじめに.md:
--------------------------------------------------------------------------------
1 | # 1 - はじめに
2 | **JavaScript**はクライアント側（ユーザの Web ブラウザ）で実行されるオブジェクト指向型のプログラミング言語です。よく Java と混同されますが、全くの別物です。JavaScript を用いることで Web ページに動きを加えたり、フォームに入力された内容を検証・送信したりすることができます。
3 |
4 | ## 1.1 試してみよう
5 | 任意の Web ページを開き、右クリック → 検証 から開発者ツールを開いてください。そしてコンソールタブに移り、Image1 が示すような場所に `1 + 1` と入力して Enter キーを押してみましょう。`2` と表示されるはずです。
6 |
7 | ---
8 | Image1：開発者ツールでの実行
9 |
10 | 
11 |
12 | ---
13 |
14 | このように JavaScript は本来 HTML に埋め込んで使用する言語ですが、小さいプログラムであれば開発者ツールから直接実行することができます。
15 |
16 | 従来、JavaScript は Web ブラウザ上で実行するプログラミング言語でしたが、近年では Node.js や Bun、Deno といったツールの登場によりネイティブで直接実行することができるようになりました。本研修で扱う Next.js も Node.js 上に構築されたソフトウェアであり、サーバーサイドで JavaScript が実行されています。
17 |
18 | また JavaScript は**動的型付け言語**と呼ばれ、実行時にプログラム中のデータ型が決定されます。これに対し、Java などの言語は**静的型付け言語**と呼ばれ、コーディング時に厳格にデータ型を指定し、コンパイル時や実行時に型の検証を行います。動的型付け言語はスクリプト言語（JavaScript や Python など）によく見られます。このような言語は取り掛かりやすく、コード量が少なく、記述時に型を深く考えないで良いなどの利点がありますが、その反面でエラーが起こりやすいなどの問題があります。特に大規模な開発になるとバグを産みやすく、設計の根幹を揺るがす事態になることもしばしばです。
19 |
20 | 近年は端末の高性能化などにより、Web サイトや Web アプリケーションの規模はますます大きく、複雑になってきています。JavaScript においては特にこの傾向が顕著で、前述の問題が指摘されるようになりました。そこで登場したのが **TypeScript** です。TypeScript は Microsoft 社によって開発されている静的型付け言語です。この言語の最大の特徴として、**JavaScript のスーパーセットである**という点が挙げられます。すなわち **JavaScript の構文は TypeScript においても正しい構文である**ことです。JavaScript の構文を阻害しないように型の定義ができるようになったのが TypeScript であるため、JavaScript からの移行がしやすく、学習コストが低いことも併せて爆発的に普及しました。今日では Web 開発のスタンダードとなっています。
21 |
22 | 本研修でも TypeScript を扱いたかったのですが、2 日間という制約上、型の概念の説明などで時間がかかってしまうことが予想されたため JavaScript を使用することにしました。ですが、JavaScript が書けるようになったらぜひ TypeScript にも挑戦してほしいと思います。
23 |
24 | ## 1.2 HTML での使用
25 | 次のコード Listing1 は HTML と JavaScript を併用する場合の例です。
26 |
27 | ---
28 | Listing1：HTML と JavaScript の併用
29 |
30 | ```html
31 |
32 |
33 |
34 |
38 |
39 |
40 | ```
41 |
42 | ---
43 |
44 | ---
45 | **演習1**
46 |
47 |
48 | `practice-1.html` を作成し、その中に Listing1 のコードを記述してブラウザで表示させてみましょう。こんにちは！と表示されるはずです。
49 |
50 | ---
51 |
52 | HTML において JavaScript を使用する際には **`script` タグを使用します**。`script` タグの中に記述された JavaScript のコードは、基本的にはこれを含む HTML ファイルが Webブラウザによって読み込まれた瞬間に実行されます。今後、この資料ではこのタグの中に JavaScript のコードを記述していくこととします。
53 |
54 | `console.log()` 関数を使用すると、引数に渡された任意の値を開発者ツールのコンソールに表示することができます。
55 |
56 | ---
57 | **演習2**
58 |
59 |
60 | `practice-2.html` を作成し、その中に Listing1 の `alert` の部分を `console.log` に置き換えたコードを記述してブラウザで表示させてみましょう。開発者ツールのコンソールタブにこんにちは！と表示されるはずです。
61 |
62 | ---
63 |
64 | **`console.log()` は今後極めて多く使用するので、必ず覚えておいてください。**
65 |
66 | 余談：Listing1 のコードでは `alert` 関数を使用しています。この関数の挙動をよく観察してみると、表示されたポップアップの「OK」を押すまではいかなる操作も受け付けてくれません。この挙動を面白がったある女子中学生は、とある掲示板では JavaScript のコードを投稿するとそのまま実行されるバグがあることを見つけて、無限ループの中で `alert` 関数を呼び出すようなコードを書いて投稿しました。数日後、彼女は不正指令電磁的記録供用未遂の疑いで家宅捜索・補導されてしまいました。なんともしょうもないというか、悲しい事件ですね（参考：[アラートループ事件](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E3%83%AB%E3%83%BC%E3%83%97%E4%BA%8B%E4%BB%B6)）。
--------------------------------------------------------------------------------
/phase2/handouts/2-数値演算.md:
--------------------------------------------------------------------------------
1 | # 2 - 数値演算
2 | 本章では数値演算について述べます。特に断りのない限り、`1 - はじめに` の章で作成した `practice-2.md` の `script` タグ内でコードを実行してみてください。
3 |
4 | ## 2.1 式と数値リテラル
5 | `1 + 1.1` のように、数学で用いられる数式のような記述を**式**と呼びます。この記述は JavaScript の世界でも妥当です。一方で `1` や `1.1` のように、これ以上分割することのできない数値を**数値リテラル**、あるいは単に**数値**と呼びます。なお**数値リテラルは式でもあります**。
6 |
7 | 数値リテラルには次のようなものがあります：
8 |
9 | - 10進数
10 | - 整数：`1`、`10`、`123`...
11 | - 小数：`1.234`...
12 | - 2進数：`0b00`、`0b01`
13 | - 16進数：`0x01`、`0xfe`...
14 |
15 | 式は式または数値リテラルどうしを**演算子**によって結合したものとして表されます。演算子とは `+` や `-` といった記号です。数値計算をするための演算子を**算術演算子**と呼びますが、基本的な算術演算子には次のようなものがあります：
16 |
17 | - `+`：足し算
18 | - `-`：引き算
19 | - `*`：掛け算
20 | - `/`：割り算
21 | - `%`：剰余算（あまり）
22 | - `**`：べき乗
23 |
24 | 算術演算子のみによる式を**算術式**と呼び、この式はまた数値を表します。
25 |
26 | ---
27 | **演習1**
28 |
29 | 次のコードを実行し、結果が `3` であることを確認しましょう。また、思いつくいくつかの式を実行して、演算子間に優先順位があることを確かめてください。実際の数学と一致するでしょうか。
30 |
31 | ```javascript
32 | console.log(2 * 2 - 1);
33 | ```
34 |
35 | ---
36 |
37 | ## 2.2 真偽値
38 | 真か偽を表す概念として、**真偽値**があります。JavaScript では `true` または `false` によって表されます。式の演算結果として真偽値を返すような式を**関係式**と呼びます。関係式を表現するには次に挙げるような**関係演算子**を使用します。
39 |
40 | - `<`：小なり
41 | - `>`：大なり
42 | - `<=`：小なりイコール
43 | - `>=`：大なりイコール
44 | - `==`：等値演算子
45 | - `!=`：非等値演算子
46 | - `===`：同値演算子
47 | - `!==`：非同値演算子
48 |
49 | ---
50 | **演習2**
51 |
52 | 次のコードを実行し、結果が `true` であることを確認しましょう。
53 |
54 | ```javascript
55 | console.log(2 < 3);
56 | ```
57 |
58 | 次の場合、結果は同じになるでしょうか（ヒント：文字列は `'` または `"` で囲って表現します）。
59 |
60 | ```javascript
61 | console.log(123 == '123');
62 | console.log(123 === '123');
63 | ```
64 |
65 | 結果が同じにならない場合、その理由を調べてみましょう（MDN：[等価](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Equality) / [同値](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)）。
66 |
67 | ---
68 |
69 |
--------------------------------------------------------------------------------
/phase2/handouts/3-文字列.md:
--------------------------------------------------------------------------------
1 | # 3 - 文字列
2 | ## 3.1 文字列リテラルの記述
3 | JavaScript において文字列を表現するには、対象の文字列を `'` または `"` で囲って表現します。例えば `"このようになります"`。これを**文字列リテラル**と呼びます。 `'` と `"` の使い分けは特にありませんが、チーム開発などの現場においてはどちらかで統一される場合がほとんどです。
4 |
5 | ---
6 | **演習1**
7 |
8 | 次のコードを実行し、`こんにちは` と表示されることを確認しましょう。また、`'` を取り除くとどうなるかも確認しておきましょう。
9 |
10 | ```javascript
11 | console.log('こんにちは');
12 | ```
13 |
14 | ---
15 |
16 | ## 3.2 改行とエスケープシーケンス
17 | 文字列の中で改行を表現するには、`\n` を使用します。例えば `'行1\n行2'` のようになります。この場合 `\n` や `n` は表示されず、純粋に改行を示します。このように、`\ + 一文字` で特殊な文字を表現する記法を**エスケープシーケンス**と呼びます。他にもタブ文字を表す `\t` などがあります。
18 |
19 | また、文字列中で `'` や `"` を使用する際にも役立ちます。例えば `'` で囲われた文字列の中で `'` を使用したい場合には、`'僕は\'太郎\'です'` のように表現します。
20 |
21 | ---
22 | **演習２**
23 |
24 | 次のコードを実行し、2 行に渡って `行1` `行2` と表示されることを確認しましょう。
25 |
26 | ```javascript
27 | console.log('行1\n行2');
28 | ```
29 |
30 | エスケープシーケンスによる `'` の使用も試してみましょう。
31 |
32 | ```javascript
33 | console.log('僕は\'太郎\'です');
34 | ```
35 |
36 | ---
--------------------------------------------------------------------------------
/phase2/handouts/4-変数.md:
--------------------------------------------------------------------------------
1 | # 4 - 変数
2 | ## 4.1 導入
3 | 例えば 200 円のノートと 100 円のノートをいくつか買って比較する場合のプログラムについて考えてみます。愚直に書くと次の Listing1 のようなコードになるでしょう。
4 |
5 | ---
6 | Listing1：おつかい
7 |
8 | ```javascript
9 | console.log(200 * 6 + 100 * 2);
10 | console.log(200 * 5 + 100 * 3);
11 | console.log(200 * 4 + 100 * 5);
12 | ```
13 |
14 | ---
15 |
16 | これでも良いのですが、ノートやペンの価格が変わった場合にはどうでしょう。3 つの式のそれぞれの値段を書き換える必要があってかなり面倒です。ここが変数の使いどきです。Listing2 のように変数に予め値段を代入しておくことで、何度も書き換えずに済むようになります。
17 |
18 | ---
19 | Listing2：おつ改
20 |
21 | ```javascript
22 | let note = 200;
23 | let pen = 100;
24 |
25 | console.log(note * 6 + pen * 2);
26 | console.log(note * 5 + pen * 3);
27 | console.log(note * 4 + pen * 5);
28 | ```
29 |
30 | ---
31 |
32 | また、変数にはもう一つの重要な役割があります。それは**右辺の式や値に名前をつけること**です。例えば `200 * 4 + 100 * 5` のような式をなんの前提知識も持たずに見たときに、何を示しているか分かるでしょうか。前後の文脈からある程度推測することができる場合もありますが、これが難しい場合も多くあります。これが `let sum = 200 * 4 + 100 * 5` となっていれば、この式が合計を示していることが明らかになり、コードが格段に読みやすくなります。
33 |
34 | ---
35 | **演習1**
36 |
37 | 次のコードに 800 円の `book` 変数を追加し、ノート 4 個、ペン 3 本、本 4 冊の合計金額を算出してみましょう。
38 |
39 | ```javascript
40 | let note = 200;
41 | let pen = 100;
42 |
43 | console.log(note * 4 + pen * 3); // ?
44 | ```
45 |
46 | ---
47 |
48 | ## 4.2 変数の宣言
49 | 前項では雰囲気で使ってしまいましたが、JavaScript において変数を宣言する場合には `let`、`const`、`var` のいずれかのキーワードを使用して次のように記述します。
50 |
51 | ---
52 | Listing3：変数の宣言
53 |
54 | ```javascript
55 | // 宣言時に値を代入する
56 | let note = 200;
57 | const pen = 100;
58 | var book = 800;
59 | ```
60 |
61 | ```javascript
62 | // 先に宣言だけをしてあとから代入する
63 | let note;
64 | var book;
65 |
66 | note = 200;
67 | book = 800;
68 | ```
69 |
70 | ---
71 |
72 | `let`、`const`、`var` にはそれぞれ使い分けがあります。
73 |
74 | - `let`
75 | - `let` 宣言された変数は、その後のプログラムで**再度代入することができます**。しかし、同じ名前で再度変数を宣言することはできません。一方で**変数のスコープ**（変数を使用できる範囲）は、この変数が宣言された**ブロック**（`{` と `}` で囲まれた範囲のこと）、その子のブロックのみです。
76 | - `const`
77 | - **再代入できない**点を除いて `let` と同様です。
78 | - 一見すると不便そうに見えますが、基本的に**プログラムはその後にできる操作をできるだけ制限する方向で記述すつほうがよい**とされているので、再代入させたくない変数があるならば積極的に使用すべきです。
79 | - `var`
80 | - `let` 宣言された変数は、その後のプログラムで**再度代入することができ**、また再度同じ名前で変数を宣言することができます。スコープも緩く、この変数が宣言された関数内であればどこでも使用することができます。一見便利そうに見えますが、**スコープの範囲がゆるいがゆえバグの温床になりやすく、現在ではあまり使用されません**。
81 |
82 | これに関しては [JavaDrive のサイト](https://www.javadrive.jp/javascript/var/index2.html#section3)にわかりやすい記述があるので、適宜参照してください。
83 |
84 | ## 4.3 undefined
85 | 次の Listing4 のように、変数の宣言だけして値を代入しない場合、その変数は `undefined` で初期化されます。別の値を代入すると `undefined` ではなくなりますが、明示的に `undefined` を代入したい場合には Listing5 のように `undefined` キーワードを使用します。
86 |
87 | ---
88 | Listing4：undefined
89 |
90 | ```javascript
91 | let note;
92 | console.log(note); // undefined
93 | ```
94 |
95 | ---
96 |
97 | ---
98 | Listing5：undefined の使用
99 |
100 | ```javascript
101 | let note = 200;
102 | console.log(note); // 200
103 |
104 | note = undefined;
105 | console.log(note); // undefined
106 | ```
107 |
108 | ---
109 |
110 | ## 4.4 変数の命名
111 | 基本的にアルファベット（大文字・小文字）と数字、_を使用することができますが、数字を先頭にすることはできません。また、多くの場合命名には**キャメルケース**が使用されます。ただし、変数名には[ここ](https://www.javadrive.jp/javascript/ini/index5.html#section1)で示されているような**予約語**を使用することはできません。
112 |
113 | ### 4.3.1 キャメルケース
114 | ある名前が一つの単語で構成されるならばその単語の小文字表記を、複数の単語の連結で表現したいのであれば最初の単語は小文字表記で、以降の単語は大文字始まりで連結していくというものです。JavaScript をはじめとして、Java や TypeScript、Kotlin などで使用されます。
115 |
116 | 例：`result`、`bookPrice`、`bookCasePrice`...
117 |
118 | ### 4.3.2 アッパーキャメルケース
119 | キャメルケースに似ていますが、全ての単語を大文字で始めるという点で異なります。C# で主に使用されます。
120 |
121 | 例：`Result`、`BookPrice`、`BookCasePrice`...
122 |
123 | ### 4.3.3 スネークケース
124 | 全ての単語を小文字で構成し、単語の区切りに `_` を使用する手法です。Python や Rust などでよく使われています。
125 |
126 | 例：`result`、`book_price`、`book_case_price`...
127 |
128 | ### 4.3.4 ケバブケース
129 | スネークケースの `_` を `-` に置き換えたものです。CSS などで使用されます。
130 |
131 | 例：`result`、`book-price`、`book-case-price`...
132 |
133 | ---
134 | **演習2**
135 |
136 | 自分の知っている言語で推奨されている命名規則を調べてみましょう。
137 |
138 | ---
--------------------------------------------------------------------------------
/phase2/handouts/5-配列.md:
--------------------------------------------------------------------------------
1 | # 5 - 配列
2 | ## 5.1 概要
3 | JavaScript で配列を扱うには `[]` を使用します。次の Listing1 はいくつかの配列の宣言方法を示しています。配列の n 番目の要素にアクセスするには `[n]` を使用します。n を**インデックス**と呼び、その範囲は **0 から 要素数 - 1** です。
4 |
5 | ---
6 | Listing1：配列
7 |
8 | ```javascript
9 | const numbers = [0, 1, 2, 3, 4, 5];
10 | console.log(numbers); // [0, 1, 2, 3, 4, 5]
11 |
12 | const alphabets = ['a', 'b', 'c'];
13 | console.log(alphabets); // ['a', 'b', 'c']
14 | console.log(alphabets[0]); // a
15 | console.log(alphabets[1]); // b
16 | console.log(alphabets[2]); // c
17 |
18 | alphabets[1] = 'x'; // 代入
19 | console.log(alphabets[1]); // x
20 | ```
21 |
22 | ---
23 |
24 | 配列の長さを取得するには `length` プロパティにアクセスします。
25 |
26 | ---
27 | Listing2：配列の長さ
28 |
29 | ```javascript
30 | const numbers = [0, 1, 2, 3, 4, 5];
31 | console.log(numbers.length); // 6
32 | ```
33 |
34 | ---
35 |
36 | 配列の中に配列を入れることもできます。
37 |
38 | ---
39 | Listing2：二次元配列
40 |
41 | ```javascript
42 | const numbers = [[1, 2], [3, 4], [5, 6]];
43 | console.log(numbers[0]); // [1, 2]
44 | ```
45 |
46 | ---
--------------------------------------------------------------------------------
/phase2/handouts/6-オブジェクト.md:
--------------------------------------------------------------------------------
1 | # 6 - オブジェクト
2 | JavaScript における**オブジェクト**は、**関連するデータや機能を1つのまとまりにして扱うための仕組み**です。オブジェクトは、キーと値の組み合わせを使って情報を格納します。これにより、データの整理と管理が容易になります。
3 |
4 | オブジェクトを作成するには、オブジェクトは波括弧 `{}` でくくり、中にキーと値を指定します。キーと値はコロン `:` で区切り、各ペアはコンマ `,` で区切ります。例を見てみましょう。
5 |
6 | ---
7 | Listing1：オブジェクトの作成
8 |
9 | ```javascript
10 | // 空のオブジェクトを作成
11 | let myObject = {};
12 |
13 | // キーと値を持つオブジェクト
14 | let person = {
15 | name: "John",
16 | age: 25,
17 | isStudent: true
18 | };
19 | ```
20 |
21 | ---
22 |
23 | オブジェクトの値にアクセスするには、**ドット演算子（`.`）** か角括弧 `[]` を使います。
24 |
25 | ---
26 | Listing2：オブジェクトの値にアクセスする
27 |
28 | ```javascript
29 | // ドット演算子
30 | console.log(person.name); // John
31 | console.log(person.age); // 25
32 |
33 | // 角括弧記法
34 | console.log(person['name']); // John
35 | console.log(person['age']); // 25
36 | ```
37 |
38 | ---
39 |
40 | 既存のオブジェクトに新しいキーと値を追加したり、既存の値を更新したりできます。
41 |
42 | ---
43 | Listing3：オブジェクトの値を更新する
44 |
45 | ```javascript
46 | // 新しいキーと値を追加
47 | person.gender = "Male";
48 |
49 | // 既存の値を更新
50 | person.age = 26;
51 | ```
52 |
53 | ---
--------------------------------------------------------------------------------
/phase2/handouts/7-制御構文.md:
--------------------------------------------------------------------------------
1 | # 7 - 制御構文
2 | ## 7.1 条件分岐
3 | JavaScript において条件分岐を行う場合には、**if 文**を使用します。if 文は次の Listing1 のように記述します。
4 |
5 | ---
6 | Listing1：if 文
7 |
8 | ```javascript
9 | // if 文
10 | if (条件式) {
11 | // 処理
12 | } else {
13 | // 条件式に該当しなかった場合の処理
14 | }
15 |
16 | // if-elseif 文
17 | if (条件式1) {
18 | // 条件式1に該当した場合の処理
19 | } else if (条件式2) {
20 | // 条件式2に該当した場合の処理
21 | } else {
22 | // 条件式に該当しなかった場合の処理
23 | }
24 | ```
25 |
26 | ---
27 |
28 | 各 if 文において `else` 節や `else if` 節は省略することもできます。条件式の部分には算術式や関係式が入りますが、JavaScript では真偽値以外の値も入れることができます。これは truthy / falthy の考え方で、truthy なオブジェクトは真と、falthy なオブジェクトは偽と判定されます。
29 |
30 | - truthy なオブジェクト
31 | - `true`
32 | - `0` 以外の数値
33 | - `null` や `undefined` でないオブジェクト
34 | - falthy なオブジェクト
35 | - `false`
36 | - `0`
37 | - `null`
38 | - `undefined`
39 |
40 | ## 7.2 繰り返し文：`for`
41 | JavaScript において繰り返しを実現する構文には `for` と `while` がありますが、まずは `for` について説明します。`for` は指定された回数、または配列に関して繰り返す場合に使用します。次の Listing2 では 0 から 99 までの数値を順に表示します。
42 |
43 | ---
44 | Listing2：for 文
45 |
46 | ```javascript
47 | for (let i = 0; i < 100; i++) {
48 | console.log(i);
49 | }
50 | ```
51 |
52 | ---
53 |
54 | for 文の `()`の中では次の 3 つの記述をし、それぞれを `;` で区切ります。なおこれら全てが省略可能で、例えば `for (;;)` のように記述すると無限ループとなります。
55 |
56 | - 1 番目：for 文内で使用する変数の宣言
57 | - 2 番目：繰り返し条件式（ここが `true` の間ループが繰り返される）
58 | - 3 番目：一度繰り返すごとにする処理
59 |
60 | また、配列のすべての要素を走査するには次のようにします。
61 |
62 | ---
63 | Listing3：配列における for 文
64 |
65 | ```javascript
66 | const alphabets = ['a', 'b', 'c'];
67 | for (let i = 0; i < alphabets.length; i++) {
68 | console.log(alphabets[i]);
69 | }
70 | ```
71 |
72 | ---
73 |
74 | ---
75 | **演習1**
76 |
77 | 足し算などの算術演算をせずに（3 番目のインクリメントを除く）1 から 200 までを表示してみましょう。
78 |
79 | ---
80 |
81 | ## 7.3 繰り返し文：`while`
82 | `while` 文も JavaScript における繰り返し処理です。for 文とは異なり、繰り返し条件式のみを記述するシンプルな繰り返しです。次の Listing3 は `while` 文の構文です。`while` 文では条件式が `true` の間処理を繰り返します。
83 |
84 | ---
85 | Listing4：while 文
86 |
87 | ```javascript
88 | while (条件式) {
89 | // 処理
90 | }
91 | ```
92 |
93 | ---
94 |
95 | ---
96 | **演習２**
97 |
98 | `while` 文を使って 1 から 100 までの数字を表示してみましょう。
99 |
100 | ---
101 |
102 | ## 7.4 `continue` と `break`
103 | 繰り返し（`for` や `while`）の処理の途中で繰り返しの最初に戻りたい場合や繰り返しをやめたい場合には、`continue` や `break` を使用します。前者の場合には `continue` を、後者の場合には `break` を記述します。次の Listing4 は、for 文において 50 を表示した瞬間に繰り返しを抜ける例です。
104 |
105 | ---
106 | Listing5：break
107 |
108 | ```javascript
109 | for (let i = 0; i < 100; i++) {
110 | console.log(i);
111 |
112 | if (i === 50) {
113 | break;
114 | }
115 | }
116 | ```
117 |
118 | ---
--------------------------------------------------------------------------------
/phase2/handouts/8-関数.md:
--------------------------------------------------------------------------------
1 | # 8 - 関数
2 | ## 8.1 概要
3 | **関数**は、実行する特定のタスクや処理をまとめたもので、名前をつけて呼び出すことができます。関数は、コードの再利用や構造化に役立ちます。基本的な構文は次の通りです。
4 |
5 | ---
6 | Listing1：関数の構文
7 |
8 | ```javascript
9 | function 関数名(パラメータ1, パラメータ2, ...) {
10 | // 関数の本体（処理）
11 | // ...
12 | return 結果;
13 | }
14 | ```
15 |
16 | ---
17 |
18 | 関数を作成するには、`function` キーワードを使います。関数を呼び出すには、関数名に続けて括弧 `()` をつけます。関数には、**パラメータ**と呼ばれる変数を指定することができます。これは**関数が呼び出される際に渡される値を受け取るためのもの**です。**引数**は、**関数を呼び出す際に渡す具体的な値**です。
19 |
20 | ---
21 | Listing2：関数の呼び出し
22 |
23 | ```javascript
24 | // 関数の定義
25 | function greet(name) {
26 | console.log("Hello, " + name + "!");
27 | }
28 |
29 | // 関数の呼び出し
30 | greet("Alice"); // Hello, Alice!
31 | greet("Bob"); // Hello, Bob!
32 | ```
33 |
34 | ---
35 |
36 | 関数は処理を実行した結果を返すことができます。return キーワードを使用して、関数が返す値を指定します。これを**戻り値**と呼びます。
37 |
38 | ---
39 | Listing3：戻り値
40 |
41 | ```javascript
42 | function add(x, y) {
43 | return x + y;
44 | }
45 |
46 | let sum = add(5, 7);
47 | console.log(sum); // 12
48 | ```
49 |
50 | ---
51 |
52 | ## 8.2 無名関数とアロー関数
53 | 関数には名前がない**無名関数**と呼ばれるものもあり、これを変数に代入することができます。
54 |
55 | ---
56 | Listing4：無名関数
57 |
58 | ```javascript
59 | // 無名関数
60 | let multiply = function(x, y) {
61 | return x * y;
62 | };
63 |
64 | console.log(multiply(3, 4)); // 12
65 | ```
66 |
67 | ---
68 |
69 | ## 8.3 アロー関数
70 | **アロー（allow：矢印）関数**は、ES6（ECMAScript 2015）で導入された新しい関数の構文です。アロー関数は通常の関数よりも簡潔であり、**主に無名関数として使われます**。以下に Listing4 の無名関数をアロー関数に書き換えたものを示します。
71 |
72 | ---
73 | Listing5：アロー関数
74 |
75 | ```javascript
76 | // 無名関数
77 | const multiply = (x, y) => {
78 | return x * y;
79 | };
80 |
81 | console.log(multiply(3, 4)); // 12
82 | ```
83 |
84 | ---
85 |
86 | **単一のパラメータを持つ場合、パラメータを括弧で囲む必要はありません**。また、処理ブロックを含む場合は、波括弧 `{}` を使用して複数の文をまとめることができます。
87 |
88 | ---
89 | Listing6：アロー関数2
90 |
91 | ```javascript
92 | // 単一のパラメータ
93 | const square = x => x * x;
94 |
95 | // 処理ブロックを含む場合
96 | const greet = name => {
97 | console.log("Hello, " + name + "!");
98 | };
99 | ```
100 |
101 | ---
102 |
103 | ---
104 | **演習1**
105 |
106 | Listing3 の `add` 関数をアロー関数に書き直してみましょう。
107 |
108 | ---
109 |
110 | ## 8.4 高階関数
111 | **高階関数**（Higher-Order Function）は、**他の関数を引数として受け取るか、または関数を戻り値として返す関数のこと**を指します。**JavaScript では関数が第一級オブジェクトである**ため、高階関数は非常に一般的であり、関数型プログラミングの概念をサポートしています。
112 |
113 | 以下は、高階関数の基本的な概念を示す例です。
114 |
115 | ### 8.4.1 関数を引数として受け取る高階関数
116 | ---
117 | Listing7：関数を引数として受け取る高階関数
118 |
119 | ```javascript
120 | const multiplyBy = (factor) => {
121 | // 引数として渡された関数を内部で呼び出す高階関数
122 | return (number) => {
123 | return number * factor;
124 | };
125 | }
126 |
127 | // 高階関数を使って新しい関数を作成
128 | const double = multiplyBy(2);
129 |
130 | // 新しい関数を使用
131 | console.log(double(5)); // 10
132 | ```
133 |
134 | ---
135 |
136 | この例では、`multiplyBy` という高階関数が、引数として渡された値に基づいて新しい関数を返しています。`multiplyBy(2)` を呼び出すことで、新しい関数 `double` が作成され、これが後で使われています。
137 |
138 | ### 8.4.2 関数を戻り値として返す高階関数
139 | ---
140 | Listing8：関数を戻り値として返す高階関数
141 |
142 | ```javascript
143 | const greet = (language) => {
144 | // 関数を戻り値として返す高階関数
145 | if (language === 'ja') {
146 | return (name) => {
147 | console.log('こんにちは、' + name + 'さん！');
148 | };
149 | } else {
150 | return (name) => {
151 | console.log('Hello, ' + name + '!');
152 | };
153 | }
154 | }
155 |
156 | // 高階関数を使って関数を取得
157 | const greetInJapanese = greet('ja');
158 | const greetInEnglish = greet('en');
159 |
160 | // 取得した関数を使用
161 | greetInJapanese('太郎'); // こんにちは、太郎さん！
162 | greetInEnglish('John'); // Hello, John!
163 | ```
164 |
165 | ---
166 |
167 | この例では、`greet` という高階関数が、引数として渡された言語に基づいて異なる挨拶のための関数を返しています。
168 |
169 | 特に React や Next.js では、関数を戻り値として返す高階関数を定義することがコンポーネントの定義と等価になります。少し難しい概念ですが、JavaScript の強力な文法を見事に利用したものですので、身につけておいて損はないでしょう。
--------------------------------------------------------------------------------
/phase2/handouts/README.md:
--------------------------------------------------------------------------------
1 | # フェーズ2：JavaScript
2 | フェーズ 2 では JavaScript を勉強し、HTML に組み込んで使用する方法について学習します。
3 |
4 | ## 事前準備
5 | このフェーズでは、常に手を動かしながら学ぶことが求められるため、作業をするためのディレクトリが必要です。このフェーズの学習を始める前に、自分の作業ディレクトリに `phase2` ディレクトリを作成してください。以降、このフェーズにおける演習は `phase2` ディレクトリ内で作業するものとします。また特に断りのない限り、エディタには **VSCode** を使用するものとします。
--------------------------------------------------------------------------------
/phase3/handouts/1-はじめに.md:
--------------------------------------------------------------------------------
1 | # 1. はじめに
2 |
3 | ## 目標
4 |
5 | 本資料では、ごく簡単なブログシステム（記事一覧／詳細の表示機能のみを備える）の作成を通じて、以下の技術を学習します。
6 |
7 | - React：Web アプリケーションの構築に必要なユーザーインターフェース（UI）フレームワーク。
8 | - Next.js：React のメタフレームワーク。使用するバージョンは v14。
9 |
10 | ## React とは
11 |
12 | Reactは、Facebook が開発する UI を構築するための JavaScript ライブラリです。主にシングルページアプリケーション（SPA）や大規模 Web アプリケーションの開発に利用されています。
13 |
14 | 公式サイト：https://ja.react.dev
15 |
16 | 以下に React の主な特徴を示します。
17 |
18 | - **コンポーネントベース**
19 | ページを「コンポーネント」と呼ばれる部品に分割して構築する。コンポーネントは再利用することが可能である。
20 | - **仮想 DOM を用いたレンダリング**
21 | 仮想 DOM を用いてレンダリングを行うことで、ページの描画を高速化する。
22 | - **JSX（JavaScript XML）**
23 | JSX と呼ばれる構文を使用して、JavaScript 内に HTML を直接記述することができる。
24 |
25 |
26 | ### 宣言的 UI
27 | React を説明する概念に「宣言的 UI」という言葉があります。従来のアプリケーションでは、状態（変数）と UI を同期するためには、変数の値に変更を加えた際に、UI を更新する操作を同時に記述する必要がありました。ところが React のように宣言的 UI を採用するフレームワークでは、状態と UI の同期はフレームワーク側で自動で行われるため、同期操作を意識して書く必要がなくなります。（難しい概念なので、そうしたものがある程度で抑えておけば大丈夫です）
28 |
29 | ## Next.jsとは
30 |
31 | Next.js は、Vercel が開発する React をより高次に発展させたメタフレームワーク（メタ＝「高次の」）です。すなわち、React を扱いやすくするために存在する、React を包含した最強フレームワークが Next.js の立ち位置である、といったイメージです。
32 |
33 | 公式サイト：https://nextjs.org
34 |
35 | Next.js は、React が提供しない次の機能をサポートします。
36 |
37 | - ページ や API のルーティング
38 | - データのキャッシュ
39 | - SSR, SSG（後述）
40 |
41 | ### MPA, SPA, SSR, SSG
42 |
43 | 次の用語は、近年の Web アーキテクチャに頻出の用語です。どれも一長一短であり、サイトの特徴や流行に合わせて使い分けられると良いと思います。
44 |
45 | - **MPA（Multiple Page Application）**
46 | 従来の Web サイトの形態。ページ遷移するとサーバは HTML ファイルを返す。
47 | - **SPA（Single Page Application）**
48 | 単一のページで Web サイトを構築する技術。必要に応じて追加でデータのみをダウンロードする。ページ遷移が発生しないのでスムーズ。
49 | - **SSR（Server Side Rendering）**
50 | SPA は初回レンダリングが遅いという欠点があった。これを解消するために、初回ロード時にクライアント（手元の端末）で行っていたレンダリング処理を、サーバ側で行う。
51 | - **SSG（Static Site Generation）**
52 | SSR ではアクセスの度にサーバ側でレンダリングを行う必要があった。これをビルド時に行ってしまうことで、さらなる速度の向上を目指す。更新頻度が少ない Web サイト（ブログ等）に推奨される。
53 |
54 | SPA と MPA に関しては、下記ページで解りやすく図解されています。
55 | [SPAとMPAって何が違うの？SPAにしたほうがいい？ - やわらかVue.js](https://scrapbox.io/vue-yawaraka/SPA%E3%81%A8MPA%E3%81%A3%E3%81%A6%E4%BD%95%E3%81%8C%E9%81%95%E3%81%86%E3%81%AE%EF%BC%9FSPA%E3%81%AB%E3%81%97%E3%81%9F%E3%81%BB%E3%81%86%E3%81%8C%E3%81%84%E3%81%84%EF%BC%9F)
56 |
--------------------------------------------------------------------------------
/phase3/handouts/2-基本.md:
--------------------------------------------------------------------------------
1 | # 2. 基本
2 |
3 | ## 目標
4 |
5 | 手を動かしながら React/Next.js の基礎について習得を目指します。
6 |
7 | ## 環境構築
8 |
9 | 今回は、本リポジトリの phase3/samples にテンプレートを記載したため、こちらを利用します。
10 |
11 | 以下のコマンドを実行して、Next.js の実行に必要なパッケージをインストールします。
12 | この操作は初回のみ行います。
13 |
14 | ```bash
15 | git clone git@github.com:ZDK-UTsukuba/ipc-web-training-2024.git
16 | cd ipc-web-training-2024/phase3/samples/repo
17 | yarn
18 | ```
19 |
20 | 続いて、Next.js のサーバを起動します。以下のコマンドを実行した後、適当な Web ブラウザを立ち上げて http://localhost:3000 にアクセスします。
21 |
22 | ```bash
23 | yarn run dev
24 | ```
25 |
26 | 備考
27 |
28 | - 最初からプロジェクトを構築する際は、[create-next-app](https://nextjs.org/docs/pages/api-reference/create-next-app) 等のコマンドを利用します。（今回は実行する必要はありません）
29 |
30 | ## ページの変更
31 |
32 | `/src/app` 以下に含まれる `page.js` はページを表します（詳細は後述）。今回は、このページに記事一覧画面を実装します。
33 |
34 | 中身を開くと、JavaScript の中に HTML のような記述が含まれていることがご理解いただけると思います。これが JSX です。
35 | JSX を含む関数は「関数コンポーネント」と呼ばれます。
36 | 最終的に、return 文によって返された戻り値がブラウザに表示されます。
37 |
38 | 初期状態では Hello World が表示されているので、これを*リスト 1* の通り「記事一覧」に変更して保存します。
39 | ホットリロードと呼ばれる機能により、ページをリロードしなくてもが表示が切り替わるはずです。
40 |
41 | ```jsx
42 | const Page = () => {
43 | return (
44 |