今更はじめるJavaScript 基本構文チートシート

（この記事は無料で最後までお読みいただける投げ銭方式の記事です）

今までJavaScriptを雰囲気で書いていたので改めて勉強中です。勉強の中で出てきた構文等のチートシートを作りたいと思います。わかりにくい箇所は構文と例示を両方載せました。
今回は基本的な構文等です。DOMの操作などはまた今度。

ダイアログボックスの表示

alert('hogehoge');    // 警告ダイアログボックスの表示。戻り値はundefined
confirm('hogehoge');  // 確認ダイアログボックス（はい、いいえ）の表示。戻り値はtrue（はい）、false（いいえ）。
promp('hogehoge');    // 入力ダイアログボックスの表示。戻り値は入力された文字列。

変数・定数の宣言

var hogehoge;            // 変数の宣言のみ
var fugafuga = 'fuga';　　// 変数の宣言と同時に代入。
const PIYOPIYO = 'piyo'; // 定数の宣言と同時に代入。

varの他にもletで宣言する方法もあり、有効なスコープが異なる。詳細は以下記事を参考に。

JavaScript var/let/constによる変数宣言 - Qiita

条件分岐　if文

// 単純なif文
if (条件式) {
    // 条件が真のときに行う処理
} else {
    // 条件が偽のときに行う処理
}

// else if文
if (条件式1) {
    // 条件式1が真のときに行う処理
} else if (条件式2) {
    // 条件式1が偽で、条件式2が真のときに行う処理
}

論理演算子

if文などの条件式で使う演算子。

&&    // ～かつ～。例：A && B
||    // ～または～。例： A || B
!     // ～ではない（否定）。例：!A

場合分け switch文

if文でも書けるけど、場合分けの際はこちらで書いた方が読みやすい。break;を書き忘れると後続のcaseの処理も実行されるため注意が必要。

switch (変数) {
    case 場合1の値:
        // 変数が場合1の値のときに実行する処理
        break;
    case 場合2の値:
        // 変数が場合2の値のときに実行する処理
        break;
    default:
        // どのケースにも該当しないときに実行する処理
}

ランダムな値の作り方

作りたいパターンの数が決まっていて、ランダムでいずれかのパターンを出したい場合は以下でできる。

// Math.random()は0以上1未満の数値をランダムに生成する
// Math.floor()は小数点以下を切り捨てる
var hoge = Math.floor(Math.random() * 作りたいパターンの数) + 1;

関数の宣言と呼び出し

何回も実行する処理は関数にまとめる。長ったらしい処理も機能ごとに関数に分割する。

// *関数の宣言
/*
function 関数名(引数1, 引数2, ..., 引数n) {
    // 関数で実行する処理
    return 戻り値; // 戻り値なしだとundefinedが戻り値になる。
}
*/

// 例
function getHoge(fuga, piyo) {
    // 関数で実行する処理
    return result;
}

// 関数の呼び出し
/*
関数名(引数1, 引数2, ..., 引数n);
*/

// 例
getHoge('fuga', 2);

繰り返し while文

同じ処理をある条件まで繰り返すときにwhile文を使う。for文でも代替可能だが、while文は繰り返し回数が決まっていない場合に便利。

// while文
// 条件式が真の間繰り返したいときに
while (条件式) {
    // 条件式が真の間実行する処理
}

// do while文
// while文の繰り返し処理を最低1回は実行したいときに
do {
    // 1回目と条件式が真の間実行する処理
} while (条件式)

繰り返し for文

同じ処理をある条件まで繰り返すときにfor文を使う。while文でも代替可能だが、for文は繰り返し回数が決まっている場合に便利。

// for文
/*
for (変数の宣言・初期化; 繰り返し条件; 変数のカウントアップ) {
    // 実行する処理
}
*/

// 例:100回繰り返す
for (var i = 0; i < 100; i++) {
    // 実行する処理
}

繰り返しの中断・スキップ

何らかの理由でwhile文やfor文の繰り返しを中断または次回までスキップしたい場合はbreak・continueを使う。

// 繰り返しを中断したい（while文を抜けたい）
while (条件式) {
    // 実行する処理
    if (中断する条件式) {
        break;
    }
}

// 繰り返しをスキップしたい（while文の先頭まで戻りたい）
while (条件式) {
    // 実行する処理
    if (スキップする条件式) {
        continue;
    }
    // スキップされる処理
}

配列

複数のデータをまとめておける。インデックス（何番目のデータか）でアクセスする。

// 配列の宣言
// var 配列の変数名 = [データ1, データ2, …, データn];
var hoge = ['hoge', 'fuga', 'piyo'];

// 配列のデータにアクセス
// 配列の変数名[何番目か];
hoge[0]; // 0番目のデータにアクセス

// 配列のデータ数を取得
hoge.length;

オブジェクト

複数のデータをプロパティとしてまとめておける。配列とは違い、プロパティでデータにアクセスできる。

// オブジェクトの宣言
/*
var 変数名 = {
    プロパティ1: プロパティ1の値,
    プロパティ2: プロパティ2の値,
    …,
    プロパティn: プロパティnの値
}
*/
// 例
var hoge = {
    id : 1,
    name : 'fuga'
}

// オブジェクトのプロパティにアクセス
// 変数名.プロパティ;
hoge.name;

今回はここまで。DOMの操作などはまた今度。

いちばんやさしいJavaScriptの教本 第2版 ECMAScript 2017(ES8)対応 人気講師が教えるWebプログラミング入門 (「いちばんやさしい教本」シリーズ)