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

はじめに

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

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

変数

varは使わない

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

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

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

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

詳しくはこちらのブログに分かりやすくまとまっていますのでご確認下さい。

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

関数

アロー関数を使う

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

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

アロー関数

// 通常の関数
function functionName( ) {
  "ここに処理を記述"
}

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

for文

ループは基本的にforループで

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

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

JavaScriptのforループ

for(let i = 0; i < 10; i++){

}

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

処理スピードが速いから
　こちらの記事にループ処理の速度がまとめられています。

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

配列のループ

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

配列を利用した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文でいいかと思います。特に難しいところはないのですが、判定の時に==または、===を使うことを覚えておいてください。
　== の場合は、文字列であろうと、数値であろうと、値自体が同じであれば等しいと判定されます。
　===の場合は、文字列なのか数値なのかまで厳密に判断して等しいかどうかを判定します。

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

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文の利用をおすすめします。

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の要素を制御する処理などについて解説していこうと思います。