JavaScriptを始めようと思い立った人のためのJavaScript超入門

# はじめに
　この記事は、JavaScriptを始めようと思い立った際に古くなった情報を頼りに学習した結果、それに気づかず古臭いコードを書き散らかしてしまった~~（しかもそれが嫌すぎて全部書き直した）~~自分の反省から、JavaScriptを勉強し始めた駆け出しの方が同じ目に合わないように、一人でも救えるようにと願いを込めて書いたものです。
　内容自体は至極超入門なものなので、初学者の方は安心して読み進めて頂ければと思います。また見識の深い方には、僕が初学者の方に間違いを教えてしまっている場合はその点指摘していただけると幸いです。

　今回は基礎中の基礎、「変数」「関数」「for文」「if文」の4項目の書き方について記述していきます。

# 変数
### varは使わない
 古い本を買ってしまうと、大体変数は```var```を使っているでしょう。ですがこれ、やめた方がいいです。

　JavaScriptでは、変数宣言に```var, let, const```の3種類が利用可能です。「再宣言」と「値の上書き」の2点から、それぞれの違いについて簡単に説明していきます。

|種類|再宣言|再代入|
|:-:|:-:|:-:|
|var |〇|〇|
|let |✕|〇|
|const| ✕|✕|

ご覧の通りなわけですが、```var```は一度宣言した変数を簡単に上書きできてしまいます。これが一概に悪というわけではありませんが、思いもしないところでエラーを引き起こす可能性があるので、避ける傾向にあります。

詳しくは[こちらのブログ](https://numb86-tech.hatenablog.com/entry/2016/08/27/132310)に分かりやすくまとまっていますのでご確認下さい。

**基本的には```const```**、**値を上書きする必要がある値の場合は```let```**を使うようにしましょう。


# 関数
### アロー関数を使う
　この辺りは正直好みの問題かもしれませんが、個人的には関数定義の際に都度```function( ) { }```と書いていられないという気持ちなので、時短の意味合いと文字数削減のために**アロー関数**を利用しています。

　書き方は他の言語と同様です。

```javascript:アロー関数
// 通常の関数
function functionName( ) {
  "ここに処理を記述"
}

// アロー関数
const functionName = ( ) => {
  "ここに処理を記述"
}
```

# for文
### ループは基本的にforループで
　ループ処理といえば```for```の他に、```while```や```do...while```などがありますが、特別な理由がない場合は```for```一択とすることをおすすめします。
　理由は2点あります。
　　1. 分かりやすいから
　　2. 処理スピードが速いから

**分かりやすいから**
　こちらも主観の入った意見となり恐縮ですが、```for```ループの条件式って非常に読みやすいですよね。初期値、ループを抜ける条件、インクリメントの順番は、言語化してもそのままなので非常にすっきりとしています。

```javascript:JavaScriptのforループ
for(let i = 0; i < 10; i++){

}
```

　```while```文や```do...while```文の場合はカウンターとなる変数を事前に定義していなければならないため、条件式の中だけを見て最終的に何回処理を行うのかパッと見て分かりづらいです。

**処理スピードが速いから**
　[こちらの記事](https://qiita.com/noxi515/items/e2813a4be0747013a88c)にループ処理の速度がまとめられています。


可読性が高くて速度が速いとなると、```for```でいいじゃんってなりますよね。


### 配列のループ
　実際に```for```文を使うときは、上記の例のように回数を指定して行うことはあまりありません。何か処理をしたい値の集まり（配列など）に対して処理を行うことが多いので、その個数を取得してループの終了条件に利用します（配列については特段難しいことはないので、説明は割愛させて頂きます）。

```javascript:配列を利用したforループ
const array = [1, 2, 3, ... , 98, 99, 100]  // 1~100までの値がある配列

for(let i = 0, len = array.length; i<len; i++){
  // 繰り返す処理を記述
}
```

実はこれも処理速度をより早くできる書き方と言われています。
第2引数に直接```i < array.length```と書くこともできますが、第一引数でカウンターと併せて配列の個数```len```を定義しておく方が処理が早く済みます。


# 条件分岐
### if文
　基本的にはif文でいいかと思います。特に難しいところはないのですが、判定の時に```==```または、```===```を使うことを覚えておいてください。
　```==``` の場合は、文字列であろうと、数値であろうと、値自体が同じであれば等しいと判定されます。
　```===```の場合は、文字列なのか数値なのかまで厳密に判断して等しいかどうかを判定します。

　また、もう一つ大事なポイントとして、条件式の中は**必ず比較したい値を左側に書く**ようにしてください。こういった細かなルールを作っておけば、作業の引継ぎなどが発生した場合も問題が起きにくいです。
　その他の比較演算子は以下の通りです。

```javascript:if文の構文
if(a < b){ }  // aはbより小さい
if(a <= b) { }  // aはb以下
if(a > b){ }  // aはbより大きい
if(a >= b) { }  // aはb以上
if(a != b) { } // aとbは等しくない
if(a !== b) { }  // aとbは等しくない（型まで評価）
```

### switch文
　```if```文、```else if```文で表記すると雑多になってしまうような場合は、```switch```文の利用をおすすめします。

```javascript:switch文
const name = "tanaka";
switch(name){
  case 'sato':
    console.log('1番多い苗字ですね。');
    break;
  case 'suzuki':
    console.log('2番目に多い苗字ですね。');
    break;
  case 'tanaka':
    console.log('3番目に多い苗字ですね。');
    break;
  default:
    console.log("ふ～ん");
    break;
}
```

　上のように、比較したい変数名を引数に入れ、```case```文の後ろに比較する値を入れてあげるだけです。
　ポイントとしては、各```case```の処理の最後には最後に必ず```break;```を入れるようにしてください。また、想定外の値に備えて```default: ```も記述するようにして下さい。


# まとめ
　といった具合で、今回はJavaScriptの基本中の基本となる項目を確認しました。
　次は何か題材を見つけて、HTMLの要素を制御する処理などについて解説していこうと思います。