はじめに

今回は、JavaScriptの基本文法についてまとめていきます。WebクリエイターボックスのManaさんの書籍、「1冊ですべて身につくJavaScript入門講座」を参考に、勉強していきます。

JavaScriptのコード解説

下記では、JavaScriptの基本中の基本である文法についてまとめています。今後はこれらを基に、コードを組んでアニメーションを起こそうと思います。

変数

/* 変数 */
let y = 20; // 昔の標準だったvarに代わり、現在よく使われる方法。
const z = 30; // 再代入ができない定数を宣言する。変更が不要な値には、これを使用する。

console.log(); // JavaScriptでデバッグや情報の出力を行うためのメソッドです。

console.log();では以下の４つを目的に使用されます。

コードの実行時に変数の値や処理の流れを確認するために使用します。
ユーザーや開発者に対して情報やメッセージを表示するために使用します。
複雑なオブジェクトや配列のデータ構造を視覚的に確認するために使用します。
エラーや警告を簡単に確認するためにconsole.error()やconsole.warn()を使用することもありますが、console.log()は基本的な出力に使われます。

データ型

/* データ型 */
let number = 100; // 整数や少数の数値を格納する。
let text = "Hello, World!"; // 文字列(String)は、テキストデータを指す。
let isTrue = true; // Booleanは、trueまたはfalseを表示する。
let fruits = ["apple", "banana", "cherry"]; // 配列(Array)複数の値を一つにまとめる。
let person = { name: "John", age: 30 }; // Objectキーと値のペアを持つデータ。

変数の再代入と再宣言

let a = 5;
a = 10; // OK

const b = 5;
b = 10; // エラー

条件分岐

/* if文 */
if (条件) {
  // 条件がtrueの場合に実行されるコード
}

/* 例題 */
let age = 18;
if (age >= 18) {
  console.log("成人です");
}

最も基本的な条件分岐です。条件がtrueの場合にのみ、コードブロックが実行されます。

/* if...else文 */
if (条件) {
  // 条件がtrueの場合に実行されるコード
} else {
  // 条件がfalseの場合に実行されるコード
}

/* 例題 */
let age = 16;
if (age >= 18) {
  console.log("成人です");
} else {
  console.log("未成年です");
}

if文の条件がfalseの場合に実行されるコードを指定できます。

/* if...else if...else文 */
if (条件1) {
  // 条件1がtrueの場合に実行されるコード
} else if (条件2) {
  // 条件2がtrueの場合に実行されるコード
} else {
  // 条件1も条件2もfalseの場合に実行されるコード
}

/* 例題 */
let score = 85;
if (score >= 90) {
  console.log("優秀");
} else if (score >= 70) {
  console.log("合格");
} else {
  console.log("不合格");
}

複数の条件をチェックするための構文です。

三項演算子

/* 三項演算子 */
let age = 20;
let canVote = age >= 18 ? "投票できます" : "投票できません";
console.log(canVote);

簡単な条件分岐には、条件 ? trueの場合の値: falseの場合の値という構文を使います。

Switch文

switch (式) {
  case 値1:
    // 式が値1と一致する場合に実行されるコード
    break;
  case 値2:
    // 式が値2と一致する場合に実行されるコード
    break;
  default:
    // どのcaseとも一致しない場合に実行されるコード
}

/* 例題 */
let day = 3;
switch (day) {
  case 1:
    console.log("月曜日");
    break;
  case 2:
    console.log("火曜日");
    break;
  case 3:
    console.log("水曜日");
    break;
  default:
    console.log("不明な曜日");
}

複数の選択肢の中から一致するケースを選び出すのに便利です。caseブロックがマッチするまでチェックが続きます。

まとめ

今回の記事では、JavaScriptの基本文法をまとめました。Webデザイナーとして最低限、一からコードを書ける、コードの意味が分かるレベルを目指します。