JavaScriptキーワード一覧

編集

以下はJavaScriptのキーワードをアルファベット順に整理し、それぞれのキーワードが使用される構文とコード例を説明したものです。

構文
async function name() { }
async () => { }
説明
asyncキーワードは、関数を非同期関数として定義するために使用されます。async関数は常にPromiseを返し、関数内部でawaitキーワードを使用できます。
コード例
// 名前付き非同期関数
async function greet(name) {
    return `Hello, ${name}!`;
}

// 匿名の非同期アロー関数
const getData = async () => {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('データ取得エラー:', error);
    }
};

// 使用例
greet('World').then(console.log);
getData().then(data => {
    console.log(data);
});
構文
await expression;
説明
awaitは非同期関数内で、Promiseが解決されるのを待つために使用されます。
コード例
async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
}
fetchData().then(data => {
    console.log(data);
}).catch(error => {
    console.error(error);
});
構文
break;
説明
breakはループやswitch文から即座に抜けるために使用されます。
コード例
for (let i = 0; i < 10; i++) {
    if (i === 5) break;
    console.log(i); // 0, 1, 2, 3, 4
}
構文
case value:
    // 処理
説明
caseswitch文で値に一致する処理を指定します。
コード例
const fruit = "apple";
switch (fruit) {
    case "apple":
        console.log("りんごです");
        break;
    case "banana":
        console.log("バナナです");
        break;
    default:
        console.log("未知の果物です");
}
構文
try {
    // 処理
} catch (error) {
    // エラー処理
}
説明
catchは例外を捕捉してエラーを処理します。
コード例
try {
    throw new Error("エラー発生");
} catch (error) {
    console.log("エラー:", error.message);
}
構文
class ClassName {
    constructor() {
        // 初期化
    }
}
説明
classはオブジェクトのクラスを定義するために使用します。
コード例
class Person {
    constructor(name) {
        this.name = name;
    }
    greet() {
        console.log(`(こんにちは、${this.name}さん!)`);
    }
}
const person = new Person("太郎");
person.greet(); // こんにちは、太郎さん!
構文
const variableName = value;
説明
constは再代入ができない定数を定義します。
コード例
const PI = 3.14;
console.log(PI); // 3.14

continue

編集
構文
continue;
説明
continueはループの現在の反復をスキップして次に進みます。
コード例
for (let i = 0; i < 5; i++) {
    if (i === 2) continue;
    console.log(i); // 0, 1, 3, 4
}

debugger

編集
構文
debugger;
説明
debuggerはデバッガを起動するために使用します。
コード例
let x = 10;
debugger; // デバッガで停止
x++;
console.log(x); // 11

default

編集
構文
default:
    // 処理
説明
defaultswitch文で他の条件に一致しない場合に実行されます。
コード例
const color = "blue";
switch (color) {
    case "red":
        console.log("赤です");
        break;
    default:
        console.log("未知の色です"); // 未知の色です
}

delete

編集
構文
delete object.property;
説明
deleteはオブジェクトのプロパティを削除します。
コード例
const obj = { name: "太郎", age: 25 };
delete obj.age;
console.log(obj); // { name: "太郎" }
構文
do {
    // 処理
} while (条件);
説明
doは少なくとも1回はループを実行します。
コード例
let count = 0;
do {
    console.log(count);
    count++;
} while (count < 3); // 0, 1, 2
構文
if (条件) {
    // 処理
} else {
    // その他の処理
}
説明
elseif条件がfalseの場合に実行される処理を指定します。
コード例
const num = 10;
if (num > 20) {
    console.log("20より大きい");
} else {
    console.log("20以下"); // 出力: 20以下
}
構文
// enumはJavaScriptの標準仕様には含まれません。
// TypeScriptなどで利用可能です。
説明
enumは列挙型を定義しますが、JavaScriptには直接存在せず、TypeScriptで利用します。

export

編集
構文
export const name = "value";
export default function() { /* 処理 */ }
説明
exportはモジュールをエクスポートし、他のファイルで利用可能にします。
コード例
module.js
export const greeting = "こんにちは";
export default function sayHello(name) {
    console.log(`(${greeting}, ${name}さん!)`);
}
main.js
import sayHello, { greeting } from './module.js';
sayHello("太郎"); // こんにちは, 太郎さん!

extends

編集
構文
class SubClass extends SuperClass {
    // サブクラスの内容
}
説明
extendsはクラスを継承するために使用します。
コード例
class Animal {
    speak() {
        console.log("動物の声");
    }
}
class Dog extends Animal {
    speak() {
        console.log("ワンワン!");
    }
}
const dog = new Dog();
dog.speak(); // ワンワン!
構文
const value = false;
説明
falseはブール値のfalseを表します。
コード例
const isFinished = false;
if (!isFinished) {
    console.log("まだ終わっていません"); // 出力
}

finally

編集
構文
try {
    // 処理
} catch (error) {
    // エラー処理
} finally {
    // 常に実行される処理
}
説明
finallyは、エラーの有無に関係なく必ず実行される処理を定義します。
コード例
try {
    console.log("処理中...");
    throw new Error("エラー発生");
} catch (error) {
    console.log("エラー:", error.message);
} finally {
    console.log("終了処理"); // 必ず実行される
}

JavaScriptでは、次の3種類のfor構文があります:

  1. for(C風の構文)
  2. for...in
  3. for...of

それぞれの構文の使用例と説明を以下に示します。

for(C風の構文)

編集

これは最も一般的なforループで、C言語や他の多くの言語に似た構文です。指定された回数分、条件が真である間繰り返し処理を行います。

構文
for (初期化; 条件; 反復) {
    // 処理
}
コード例
for (let i = 0; i < 5; i++) {
    console.log(i);
}
// 出力:
// 0
// 1
// 2
// 3
// 4
説明
  • 初期化: ループが始まる前に一度だけ実行されるコード(例: let i = 0)。
  • 条件: 各繰り返しの前に評価される条件。条件がtrueであればループが続行され、falseなら終了します(例: i < 5)。
  • 反復: 各ループの最後に実行されるコード(例: i++iを1増加させる)。

for...inはオブジェクトの列挙可能なプロパティを反復処理するために使います。配列を扱う場合にも使えますが、配列のインデックスを取得するため、配列の順番が保証されない点に注意が必要です。

構文
for (const key in object) {
     // 処理
 }
コード例
const person = {
    name: "Alice",
    age: 25,
    job: "Developer"
};

for (const key in person) {
    console.log(key + ": " + person[key]);
}
// 出力:
// name: Alice
// age: 25
// job: Developer
説明
  • オブジェクトのプロパティ名(キー)を反復して処理します。

配列の場合でも使えますが、インデックス順に処理するわけではないため、配列の順序が保証されない点を考慮する必要があります。

for...of反復可能オブジェクト(例えば[[JavaScript/Array|Array]や[[JavaScript/String|String]、[[JavaScript/Map|Map]、[[JavaScript/Set|Set]など)をループするために使います。for...inと異なり、オブジェクトのを反復処理します。
構文
for (const element of iterable) {
    // 処理
}
コード例
const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
    console.log(num);
}
// 出力:
// 1
// 2
// 3
// 4
// 5
説明
  • 反復可能オブジェクト([[JavaScript/Array|Array]や[[JavaScript/String|String]、[[JavaScript/Map|Map]、[[JavaScript/Set|Set]など)を反復し、各要素の値を変数に代入して処理します。

比較

編集
  • for: 明示的にループの回数を制御したいときに使用します。カウンタ変数を使って、繰り返し回数やインデックスを操作できます。
  • for...in: 主にオブジェクトのプロパティを列挙するのに使います。配列の場合、順序が保証されないため注意が必要です。
  • for...of: 反復可能オブジェクトの要素を処理するのに使います。[[JavaScript/Array|Array]や[[JavaScript/String|String]、[[JavaScript/Map|Map]、[[JavaScript/Set|Set]などを扱う場合に便利です。

これらのforの種類は、それぞれ異なるシチュエーションに応じて使い分けることで、より効率的で可読性の高いコードを書くことができます。

function

編集
構文
function functionName(parameters) {
    // 処理
}
説明
functionは関数を定義します。
コード例
function add(a, b) {
    return a + b;
}
console.log(add(2, 3)); // 5
構文
if (条件) {
    // 処理
}
説明
ifは条件が真の場合に処理を実行します。
コード例
const age = 18;
if (age >= 18) {
    console.log("成人です"); // 出力
}

import

編集
構文
import { name } from "module";
import defaultName from "module";
説明
importはモジュールをインポートします。
コード例
module.js
export const greeting = "こんにちは";
main.js
import { greeting } from './module.js';
console.log(greeting); // こんにちは
構文
property in object;
説明
inは指定したプロパティがオブジェクトに存在するかをチェックします。
コード例
const obj = { name: "太郎", age: 25 };
console.log("name" in obj); // true
console.log("gender" in obj); // false

instanceof

編集
構文
object instanceof Constructor;
説明
instanceofはオブジェクトが特定のコンストラクタ関数のインスタンスであるかを判定します。
コード例
class Person {}
const taro = new Person();
console.log(taro instanceof Person); // true
console.log(taro instanceof Object); // true
構文
let variableName = value;
説明
letはブロックスコープを持つ変数を宣言します。
コード例
let count = 10;
if (count > 5) {
    let message = "カウントは5より大きい";
    console.log(message); // カウントは5より大きい
}
// console.log(message); // エラー: messageはスコープ外
構文
new Constructor(arguments);
説明
newはコンストラクタ関数を呼び出して新しいオブジェクトを生成します。
コード例
class Person {
    constructor(name) {
        this.name = name;
    }
}
const taro = new Person("太郎");
console.log(taro.name); // 太郎
構文
const value = null;
説明
nullは値が空であることを明示的に示します。
コード例
let data = null;
if (data === null) {
    console.log("データがありません"); // 出力: データがありません
}

return

編集
構文
return value;
説明
returnは関数から値を返し、処理を終了させます。
コード例
function multiply(a, b) {
    return a * b;
}
console.log(multiply(2, 3)); // 6
構文
super.method(arguments);
説明
superは親クラスのメソッドやコンストラクタを呼び出します。
コード例
class Animal {
    speak() {
        console.log("動物の声");
    }
}
class Dog extends Animal {
    speak() {
        super.speak();
        console.log("ワンワン!");
    }
}
const dog = new Dog();
dog.speak(); 
// 動物の声
// ワンワン!

switch

編集
構文
switch (expression) {
    case value1:
        // 処理
        break;
    case value2:
        // 処理
        break;
    default:
        // その他の処理
}
説明
switchは式の値に応じて異なる処理を実行します。
コード例
const color = "赤";
switch (color) {
    case "青":
        console.log("青です");
        break;
    case "赤":
        console.log("赤です"); // 出力: 赤です
        break;
    default:
        console.log("色が不明です");
}
構文
this.property;
説明
thisは現在のコンテキストを指します。
コード例
class Person {
    constructor(name) {
        this.name = name;
    }
    greet() {
        console.log(`(こんにちは、${this.name}さん!)`);
    }
}
const taro = new Person("太郎");
taro.greet(); // こんにちは、太郎さん!
構文
throw expression;
説明
throwはエラーを発生させます。
コード例
function checkAge(age) {
    if (age < 18) {
        throw new Error("未成年です");
    }
    console.log("成人です");
}
try {
    checkAge(16);
} catch (error) {
    console.log(error.message); // 未成年です
}
構文
const value = true;
説明
trueはブール値のtrueを表します。
コード例
const isComplete = true;
if (isComplete) {
    console.log("処理が完了しました"); // 出力: 処理が完了しました
}
構文
try {
    // 処理
} catch (error) {
    // エラー処理
}
説明
tryはエラーが発生する可能性があるコードを記述するために使用します。
コード例
try {
    console.log("処理を開始します");
    throw new Error("エラー発生");
} catch (error) {
    console.log("エラー:", error.message); // エラー: エラー発生
}

typeof

編集
構文
typeof expression;
説明
typeofは式のデータ型を返します。
コード例
console.log(typeof 42); // number
console.log(typeof "Hello"); // string
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined
console.log(typeof null); // object
console.log(typeof {}); // object
console.log(typeof function() {}); // function
構文
var variableName = value;
説明
varは関数スコープを持つ変数を宣言します。現在はletconstの使用が推奨されます。
コード例
var message = "こんにちは";
if (true) {
    var message = "別のメッセージ";
    console.log(message); // 別のメッセージ
}
console.log(message); // 別のメッセージ
構文
void expression;
説明
voidは式を評価してundefinedを返します。
コード例
const result = void 0;
console.log(result); // undefined
構文
while (condition) {
    // 処理
}
説明
whileは条件が真である間、処理を繰り返します。
コード例
let count = 0;
while (count < 3) {
    console.log(count);
    count++;
}
// 出力:
// 0
// 1
// 2
構文
with (object) {
    // 処理
}
説明

withは指定されたオブジェクトのプロパティをスコープチェーンに追加します。ただし、withは推奨されていません。

コード例
const obj = { a: 1, b: 2 };
with (obj) {
    console.log(a + b); // 3
}
構文
yield expression;
説明
yieldはジェネレーター関数の実行を一時停止し、値を呼び出し元に返します。
コード例
function* generator() {
    yield 1;
    yield 2;
    yield 3;
}
const gen = generator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3