[Day3] JavaScriptの基礎 part2

本記事は一人アドベントカレンダー企画の一つです。
[30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー](https://qiita.com/advent-calendar/2022)

[JAVASCRIPT.INFO](https://ja.javascript.info/)を元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。



## 2.10 条件分岐: if, '?'

### 知らない単語
- 無し

### 学んだこと
- if文は括弧の中の式を判断して、Boolean型に変換する
例えば、数値 0,空文字 "",null,undefined,NaN は「false」になるので「偽」と判定される
if (0) { 
  ...
}
このコードは0で偽なので、実行されない
if (1) {
  ...
}
しかし1であれば真なので実行される

- 条件が偽の場合、「else」での分岐があれば、分岐の処理が実行される
if (month == 12) {
  alert( ... !);
} else {
  alert( ...? ); // 12以外のケースが実行される
}

- elseを含むif文は三項演算子で書く事ができる
書き方をは
条件式 ? 真の処理 : 偽だった時の処理　となる

例えば
let age = 25;
let drink = (age >= 20) ? "お酒" : "お茶";
console.log(drink); // "お酒"
などと書ける

### 感想
- 三項演算子はiqueryでも使用していたが、コードを短く書く時に便利なので上手に使っていきたい。

## 2.11 論理演算子
### 知らない単語
- アンパサンド
  - 「＆」のこと、言語やシチュエーションによって役割が違う

### 学んだこと
- JavaScriptには4つの論理演算子、|| (OR:論理和), && (AND:論理積), ! (NOT:否定), ?? (Null合体)がある

- 「||」(OR)
日本語では「または」の意味

4つのあり得る論理的な組み合わせを見てみると
alert( true || true );   // true
alert( false || true );  // true
alert( true || false );  // true
alert( false || false ); // false
となり、両方のオペランドが「false」の場合以外は「true」が返ってくる

大抵「||」は、if文の中で、条件のいずれかが正しいかを確認するのに使う
例えば、
let hour = 8;
if (hour < 11 || hour > 19) {
  alert( 'The shop is closed.' );
}
などと書けば条件とは合ってないとわかる

- && (AND)
日本語では「かつ」の意味
両方のオペランドが真のときに「true」を返し、それ以外の場合は「false」を返す
alert( true && true );   // true
alert( false && true );  // false
alert( true && false );  // false
alert( false && false ); // false
となる

- ! (NOT)
真偽値否定演算子は感嘆符 "!" で表現する
役割はオペランドを真偽値型に変換し、逆の値を返す
例えば
alert( !true ); // false
alert( !0 ); // true
というように逆の真偽値が返ってくる

### 感想
- 論理演算子はif文との組み合わせでよく使うことになると思うので、それぞれの役割をしっかり記憶しておきたい。

## 2.12 NULL合体演算子
### 知らない単語
- シーケンス
  - 決められた順序で処理を行うこと

### 学んだこと
- NULL合体演算子は２つの疑問符「??」で記述される
使い方は
a ?? b 
と書くと「a」がnullあるいはundefinedでなければ「a」,それ以外の場合は「b」となる
要するにnull/undefinedでなければ最初の引数を返し、それ以外の場合は2つ目の引数を返す

- OR演算子「||」は「??」と同じ方法で使うことができるが、重要な違いは
「||」は最初の真の値を返し、「??」は最初の定義済みの値を返すことである

- エラーが出る可能性が高いので、「&&」や「||」と一緒に「??」を使用するのは推奨されていない

### 感想
- NULL合体演算子「??」の使い方は知らなかったので、同じように使える「||」と間違えないようにする。

## 2.13 ループ: while と for
### 知らない単語
- イテレーション 
  - whileループにおいて、ループ本体の1回の実行の事、アジャイル開発で使われる開発サイクルの単位を指したりもする

- プロンプト 
  - 画面上で表示される、「ここから入力しなさい」という指示のマーク

### 学んだこと
- ループ処理の書き方の1つ目、whileループ
  - while (条件) {
  ...　　// 処理
}
条件が「true」の間、ループの本体の処理が実行される

例えば
let i = 1;
while (i < 5) { // 1, 次に 2, 次に 3 を表示
  alert( i );
  i++;
}
となる

- ループ処理の書き方の2つ目、do..whileループ
  - 書き方は
do {
  ...　// 処理
} while (条件);
となり、最初に処理を実行した後、条件をチェックして、条件が真である間、本体の実行を繰り返す
do..whileループは、条件が真になるかは関係なく、少なくとも1度はループ本体を実行したいという場合のみに使用した方が良い

- ループ処理の書き方の3つ目、forループ
  - 書き方は
for (条件) {
  ...　// 処理
}
1番使われるループであり、条件はイテレーションの前にチェックされ、追加設定もできる

- 無限ループを作るには、while(true)が使われるが、無限ループは他のループと同様にbreakディレクティブで停止する事ができる
let Hello = 0;
while (true) {

  let World = +prompt(...);

  if (!World) break; // (*)

  Hello += World;

}
これでループが停止する

逆にcontinueディレクティブを使うと現在の処理を停止し、強制的に新しい処理をスタートさせる
for (let i = 0; i < 20; i++) {

  // true の場合、本体の残りの処理をスキップ
  if (i % 2 == 0) continue;

  alert(i); 
}
のように書く

### 感想
- 基本的にはfor文でループ処理を書くことがほとんどだと思うが、breakやcontinueを使うことも少なからずあると思うので、使い方を正しく覚えておく。

## 2.14 switch文
### 知らない単語
- デッドコード 
  - プログラム実行時に実行される可能性がない文やプログラムの事

### 学んだこと
- switch文はif文に置き換える事ができる
例えば
switch(a) {
  case 'val1':  // if (a === 'val1')
    ...
    [break]
  case 'val2':  // if (a === 'val2')
    ...
    [break]
  default:
    ...
    [break]
}
というコードで、aの値は、最初のcase(val1)の値と「===」で比較をされ、次のcase(val2)も同じく比較される
等しいものがあれば、該当するcaseの処理をbreakまで実行する
該当するものが無い場合は、defaultが実行される

### 感想
- 処理の順番や比較された後、何が実行されるかをきちんと理解する。


## 2.15 関数
### 知らない単語
- パラメーター
  - 引数の事

- フルアクセス権
  - ファイルやフォルダへのアクセス許可の型の一つで、すべての権限が許可に設定された特殊な状態、あらゆる操作が可能

### 学んだこと
- 関数定義の書き方
function name(parameters) {
  ...処理...
}

functionがきて、次のnameが関数名、parametersが引数となる

- 呼び出し時に引数が与えられていない場合、「undefined」がデフォルト値になる
例えば
function showMessage(hello,world) {
  alert(world);
}
showMessage('aaa')
上記の場合、第1引数のみなので「hello」に「'aaa'」が入り、「world」には何も無いので「undefined」が出力される

ちなみに「undefined」はエラーではないので、処理は継続できる

### 感想
- 引数がどこに対してなのか、返り値が何かなどをすぐ判断できるようにする。

## 2.16 関数式
### 知らない単語
- コードブロック
  - 複数の構文や命令など、コードを一括りにまとめたもの

### 学んだこと
- 関数式は簡単に言うと、変数が関数として使える

普通の関数
function world() {
  alert( "Hello" );
}

関数式
let world = function() {
  alert( "Hello" );
};

関数式になると変数だが、型が構造型になるので動作する

- 関数と関数式の違いは
関数の場合、ファイルを読み込んだ瞬間から作動している
関数式の場合、その式が呼び出された瞬間から作動する
また、関数式は他の関数と違い再代入できる

- コールバック関数
簡単に言うと変数に関数を入れる事ができる

### 感想
- 最近はコードを短くする事やサーバーの負荷も考慮して、関数式で書くのがトレンドと聞いているので、極力関数式で書くように心がける。

## 2.17 アロー関数の基本
### 知らない単語
- ワンライナー
  - 1行で作られたコマンドの組み合わせや簡単なプログラムのこと

### 学んだこと
- アロー関数の書き方
let world = (a, b) => a + b;

(a, b) => a + b は a と b 、2つの引数を受け取る関数を意味する

引数が1つの場合、括弧は省略できる
let world = n => n * 3;

引数がない場合、空括弧が必要
let world = () => alert("Hey!");

### 感想
- 今まで意味をあまり理解せずに使っていたので、アロー関数はワンライナーに対して使う方が良い事や2つの引数を受け取る書き方など忘れないようにする。


## 最後に
jqueryで勉強してきた事と被っている内容も多いので理解しやすいが、if文や関数など、なんとなくわかったつもりで使っていた部分もあるので、この機会に覚えた様々な使い方や意味を忘れないようにする。