講義 第1回

# 初めに
## 今回の目的
- JavaScriptの基礎知識を身につける
- 実装の仕方・調べ方を身につける

# 講義中の確認資料

- 【入門】初心者が練習すべき Linux コマンドの一覧　
https://hogetech.info/linux/base/command
- Linux viのコマンド一覧
https://itsakura.com/centos_vi_command
 

# 講義
## 開発
### 流れの一例
- 要件定義
- 機能設計
- 開発 ←ここ
- テスト
- プルリクエスト レビュー
- リリース

### 開発とは...
要求された機能をコーディングなどで実装していく作業

### JavaScriptとは...
クライアントサイド（ブラウザ内）・サーバーサイドどちらの処理も出来る多目的な言語
- **動的型付け言語**
- **インタプリタ言語**
- **非同期処理**
- イベント駆動型
- シングルスレッド環境

#### Node.jsとは...
サーバーサイドでJavaScriptを使う実行環境の一つ
 
### 体験(ハンズオン)
#### ファイル作成
```bash
$ vi test.js
```
#### プログラム記述
```javascript:test.js
console.log("test");
```
#### プログラム実行
```bash:実行結果
$ node test.js
```

## 開発をする上での基本スタンス
### 覚えようとしない　　
調べれば良い
### 完全に理解できなくても気にせず先に進む
徐々に理解できる
### 一定期間調べ、考えてもわからなければ聞く
例：15分
### 考えることが大事
似たような事象が起きたときに役に立つ
### とにかく書いてみる
自分なりに変更してみる
### 人が読みやすいコードを書く
チームで開発するため
### エラーをよく読む
```oddEvenIdentifier.js```の```12```行目で
```ReferenceError: aa is not defined```
というエラーが発生している
```bash
/hoge/answer/oddEvenIdentifier.js:12
    };aa
      ^

ReferenceError: aa is not defined
```
### Geogle検索をうまく使う
- ```after:```2023
2023年以降の記事のみ表示
- ReferenceError: ```*``` is not defined
*にはどんな文字が入っても良い→エラー検索に活用
- ```site:```developer.mozilla.org
developer.mozilla.orgのドメインの記事のみ表示
- apple ```"```green```"```
appleの記事の中からgreenを必ず含む記事のみ検索



## 基礎知識
### 変数
値を再利用するため、変数に格納する。
- const 再代入しない変数を定義する **基本的にはこちらを使う**
- let 再代入する変数を定義する
```javascript
const word = "hello";
let number = 12;

word = "bye"; // エラー
number = 13; // OK
```
### データ型
|データ型　    |説明    |例           |
|-----------|-------|------------ |
|String     |文字列  |"hello" 'Bye'|
|Number     |数字    |100 -3       |
|Boolean    |真偽値  |true false    |
|(Undefined)|変数に値が未割り当て|undefined|
|-----------|-------|--------------|
|Object　　　　　　  |オブジェクトなど| {"本":"book", ペン:"pen"}|
|　　　　　　　　　　　　　　　　　　  |配列(Array) |[1,2,5]|
|     |空(Null)　     |null          |

それぞれの型がそれぞれメソッドを持つ
```javascript
const word = "hello";
const upperWord = word.toUpperCase(); // "hello".toUpperCase()
console.log(upperWord);
```

```bash:実行結果
HELLO
```
#### **※メソッド**
処理をひとまとまりにしたもの
```toUpperCase()```は文字列を大文字にする処理

#### **調べ方：**
- Stringのメソッドは下記から参照する(String.prototype.を見る)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String
- Geogle・chatGPTで調べる

#### ハンズオン(5分)
処理を記述して下記が表示されるようにしてください。
```bash
$ vi helloworld.js
```
```javascript:helloworld.js
const hello = "Hello!";
const world = "World";
// 下記に処理を記述
```
```bash:実行結果
$ node helloworld.js
Hello!World
```
##### Tips:
- 公式リファレンス　　
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/concat
- Geogle で検索
```
JavaScript 文字列　結合　メソッド
```
- Chat GPTに聞く
```
JavaScriptで文字列を結合する方法を教えてください。
```

### 配列とオブジェクトについて
#### 配列 []
##### 使用ケース
同種のデータを集めて、順番付ける際に使用されることが多い
##### 例
```javascript
const colors  = ['red', 'yellow', 'blue'];
const numbers = [1, 2, 3];
```
###### データへのアクセス方法 
***※最初のindexは0***
```javascript
console.log(numbers[0]);
1

console.log(numbers[1]);
2
```

#### オブジェクト {}
##### 使用ケース
異種のデータを関連づけて、構造化する際に使用されることが多い
値だけでなく関数保持できる
```{ key:value }```

|objectが保持しているもの|名称|
|--------|-------|
|値|プロパティ|
|関数(処理)|メソッド|
##### 例
```javascript
const user = {
  name: "Taro",
  age: 24
};
```
###### データへのアクセス方法 
```javascript
console.log(user.name);
Taro

console.log(user["age"]);
24
```

#### 注意点
##### 文の末に```;```を付ける
つけなくても挙動に差は**ほぼ**ない

##### 全角は使わない
文字や***スペース***
バイト数が違うため

##### コメントアウト
行の初めに```//```がある行は***処理がされない***
コードの説明などを書く場合が多い

```javascript
// 読み込みがされない

```

#### ハンズオン(5分)
処理を記述して、下記が表示されるようにしてください。
```bash
$ vi introduce.js
```
```javascript:introduce.js
const person = {name: "John", age: 24};
// 処理を記述
```
```bash:実行結果
$ node introduce.js
私の名前はJohnです。年齢は24歳です。
```
##### Tips
- Geogle で検索
```
JavaScript オブジェクト　値取得
```
- Chat GPTに聞く
```
JavaScriptでオブジェクトで値を取得する方法を教えてください。
```
**※テンプレートリテラル**
```javascript
const temperature = 24;
console.log(`今の気温は${temperature}度です`);
```
```bash:実行結果
今の気温は24度です
```

## 実行パターン
### 順次実行
コードは上から下に実行される

### ループ
繰り返し処理
#### for
```javascript
for (初期化式; 条件式; 増分式){
  // 繰り返し実行する処理
};
```
-　初期化式
繰り返し処理の前に一度だけ実行される処理（変数の初期化など）  
-　条件式 
trueを返す間は処理を続ける
-　増分式  
繰り返しの終わりに実行する処理

##### 例
```javascript
for (let i = 0; i < 10; ++i){
  console.log(i);
};
// 実行結果
0
1
2
...
9
```
##### Tips
- オブジェクト{}
for ... in が使える
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...in
```javascript
const obj = { a: "あ", b: "い", c: "う" };
for (const key in obj) {
  console.log(key, obj[key]);
};

// 実行結果
a あ
b い
c う
```
- 配列[]
for ... of が使える
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of
```javascript
const array = [1, 2, 3];

for (const ele of array) {
  console.log(ele);
};

// 実行結果
1
2
3
```


#### while
```javascript
while(条件式){
  // 繰り返し処理
  // 増分処理
};
```
-　条件式 
trueを返す間は処理を続ける
-　増分式  
繰り返しの終わりに実行する処理　　
**記述しないと無限ループに陥るので注意**

##### 例
```javascript
let i = 0;
while (i < 10) {
  console.log(i);
  i += 1 // i = i + 1
};

// 実行結果
0
1
2
...
9
```

### 条件分岐
条件によって処理を替える
#### if　・else　if　・else
```javascript
if (条件式１) {
  // 条件式1がtrueの時　実行する処理
} else if (条件式2){
  // 条件式1がfalseかつ条件式2がtrueの時 実行する処理
} else {
  // 条件式1がfalseかつ条件式2がfalseの時 実行する処理
};
```
##### 例
```javascript
if (number > 0) {
  console.log(number + " は正の数です。");
} else if (number < 0) {
  console.log(number + " は負の数です。");
} else {
  console.log("数値は0です。");
};
```

#### switch
分岐が多いときに使用する
**breakを記述しないと無限ループに陥るので注意**
```javascript
switch (値) {
  case a:
    // 値 === aの時に実行する処理
    break;
  case b:
    // 値 === bの時に実行する処理
    break;
  default:
    // 当てはまらなかったときに実行する処理
};
```
##### 例
```javascript
switch (food_categry) {
  case "meat":
    console.log("肉");
    break;
  case "vegetable":
    console.log("野菜");
    break;
  case "fruits":
    console.log("果物");
    break;
  default:
    console.log("知らない食べ物");
};
```
#### ハンズオン(10分)
***switchを使って***
dayが
"月"〜”金”の時```平日```
"土"、"日"の時```休日```
と表示する機能
```bash
$ vi day_of_week.js
```
```javascript:day_of_week.js
let day = "火"; // 月火水木金土日のいずれかを入れる
// 処理を記述
```  
```bash:実行結果
$ node day_of_week.js

平日
```

##### Tips
- それぞれの日で分岐する
- caseの後に複数条件を指定できるか
  - Geogle で検索
```
JavaScript switch 条件　複数
```
-  -  Chat GPTに聞く
```
JavaScriptでswitchを使用する際、複数の条件を指定したい
```

### スコープ
変数がアクセスできる範囲の事
**{}の中から外にはアクセス可能**
**{}の外から中にはアクセス不可**
```javascript
const name = "Tom";

if (true){
  console.log(name); // アクセス可
  
  const color = "red" ;
}

console.log(color); // アクセス不可

```

## 開発の進め方
ハンズオン(15分)
実装したい機能
```
1から10の値に
奇数には"奇数:"
偶数には"偶数:"
を付けて表示する
```
#### 結果
```bash:実行結果
$ node oddEvenIdentifier.js

奇数:1
偶数:2
奇数:3
偶数:4
奇数:5
偶数:6
奇数:7
偶数:8
奇数:9
偶数:10
```
### 考え方
#### 機能を細分化
- 1-10の配列の全ての値を判定する(= for)
→配列にはfor ofが使える
- 偶数か奇数かの条件で処理を変える(= if)
→偶数でない場合(else)は必ず奇数になる
- 偶数は2で割って余りが出ない・奇数は余りが出る
→余りを求める演算子がある

#### 機能ごとに実装
##### 調べながらコーディングする
- Googleで検索
```
JavaScript 余り　求め方
```
- Chat GPTに聞く
```
JavaScriptで余りを求める演算子を教えてください。
（演算子の意味も教えてください。）
```

#### 具体化して実装する
- 抽象的なものは具体化して考える
- 繰り返し処理が必要なものは一回の処理のみで考える
など

#### 動作確認
- 変数に格納されている値を確認したいとき
プログラムに下記を記述
```javascript
console.log(<確認したい変数名>);
```

- プログラム実行
```bash
$ node <ファイル名>
変数の値が表示される
```

### 全体での動作確認
変数名の整理など
```bash
$ node <ファイル名>
```

## 関数とクラス
コードを構造化し、読みやすく再利用しやすくするために使用
メンテナンス性が向上
**なるべく処理を共通化し、コード量を少なくすることを意識する**
### 関数
```javascript
// 関数定義
function plus (a, b) {
  return a + b;
};
// 関数実行
plus(1,5);

6
```
or
```javascript
const plus = function (a, b) {
  return a + b;
};
```
or
```javascript
const plus = (a, b) => a + b;
```

### クラス
オブジェクトの設計図を決めて
それを元に新たなオブジェクト（インスタンス）を作成する
```javascript
class Person {
  constructor(name, age){
    this.name = name;
    this.age = age;
  }

  laugh(){
    console.log(this.name + "www");
  }
}

const tom = new Person("Tom", "22");
const nancy = new Person("nancy, 24");

tom.laugh();

nancy.laugh();
```

### ハンズオン(10分)
- 関数を使って下記2問を計算してください

```bash:問題
1.
333 × 334 ÷ 3

2.
4857 × 4444 × 1111 ÷ 4
```
```bash
vi calculate.js
```
```javascript:calculate.js
// 処理を記述
```
```bash:実行結果
$ node calculate.js
```

- ```実行結果```は同じ出力になるように、下記コードを記述量をなるべく減らして書いてください(コードを整理===***リファクタリング***)
```bash
$ vi national.js
```
```javascript:national.js
const data1 = {place: "Japan", isMarried: true, food: ["mochi", "sukiyaki"]};
const data2 = {place: "America", isMarried: false , food: ["steak", "hamburger"]};
const data3 = {place: "France", isMarried: true , food: ["cheese", "quiche"]};


console.log("私は" + data1.place + "出身です");
if (data1.isMarried){
  console.log("結婚してます");
} else {
  console.log("結婚してません");
}

console.log(data1.food[0]);
console.log(data1.food[1]);
console.log("が好きです");

console.log("\n");

console.log("私は" + data2.place + "出身です");
if (data2.isMarried){
  console.log("結婚してます");
} else {
  console.log("結婚してません");
}

console.log(data2.food[0]);
console.log(data2.food[1]);
console.log("が好きです");

console.log("\n");

console.log("私は" + data3.place + "出身です");
if (data3.isMarried){
  console.log("結婚してます");
} else {
  console.log("結婚してません");
}

console.log(data3.food[0]);
console.log(data3.food[1]);
console.log("が好きです");
```

```bash:実行結果
$ node national.js

私はJapan出身です
結婚してます
mochi
sukiyaki
が好きです

私はAmerica出身です
結婚してません
steak
hamburger
が好きです

私はFrance出身です
結婚してます
cheese
quiche
が好きです
```

#### Tips
- 処理が共通している部分を探す
→関数でまとめられる
→ループも使用できる


## チェックポイント
### 必須
- エラーが起きないで処理が完了している
- 要求を全て網羅している

### できれば
- インデントを合わせる
半角スペース2つ or 半角スペース4つ など
チームによって違う
**他の人が見たときに処理の単位が分かりやすい**
- 変数名をわかりやすくする
変数名だけで何を定義しているのかを分かりやすくする
```javascript
const a = "math";  // ×

const subject = "math"; // 〇

const bestSubject = "math"; // ◎
```
- 関数やクラスを使って、処理を共通化する
読みやすく、修正する際に容易

### いずれ
- 機能をそれぞれモジュール化する
- パフォーマンスの高い記述にする

## よくあるエラー
### タイプミス
```javascript:Reference Error
const hoge = 12345;
console.log(hohe); // hogeが正しい
```

### 文法エラー
```javascript:Syntax Error
for (let i =0; i < 10; i++ ) {
  if (a = 0) {
    console.log(a)
  };
  // } がない
```

### 型エラー
```javascript:Type Error
const num = 12345;
console.log(num.toUpperCase());
// Number型でString型のメソッドを使用
```

## 宿題
実行すると今日の曜日を返す処理を実装する

```bash
$ node dayOfWeek.js
金曜日
```

## 次回予告
- 非同期処理
- APIから情報取得