【ツール活用】JavaScript入門

概要

JavaScriptは、ウェブブラウザ上で動的なコンテンツを実現するために開発されたプログラミング言語です。しかし、その進化はウェブブラウザの領域に留まらず、Node.jsの登場によってサーバーサイド、デスクトップアプリケーション（Electron）、モバイルアプリケーション（React Native）、さらにはIoTデバイスまで、非常に多岐にわたるプラットフォームで利用される汎用性の高い言語へと成長しました。

DevOpsやインフラエンジニアの皆さんにとっても、JavaScriptの知識は現代の技術スタックにおいて不可欠なものとなりつつあります。例えば、Node.jsを使ったCLIツールの開発、自動化スクリプトの作成、API連携処理、クラウドインフラのプロビジョニングツール（CDKなど）のスクリプト記述、あるいは監視ツールのフロントエンドカスタマイズなど、その活用範囲は広大です。本記事では、JavaScriptの基本的な文法から、現代的な開発に必須となる概念までを網羅し、皆さんがこの強力な言語を習得するための第一歩を支援します。

詳細解説

JavaScriptの実行環境

JavaScriptは主に以下の二つの環境で実行されます。

• ブラウザ環境: ウェブページにインタラクティブ性をもたらすために利用されます。DOM (Document Object Model) 操作を通じてHTML要素を動的に変更したり、イベントを処理したりします。
• Node.js環境: Google ChromeのV8 JavaScriptエンジンをベースに構築されたサーバーサイドJavaScriptの実行環境です。ファイルシステム操作、ネットワーク通信、データベース連携など、OSレベルの機能にアクセスでき、CLIツールやAPIサーバーの開発に利用されます。

変数の宣言: let, const, var

JavaScriptで変数を宣言するには、let、const、varの3つのキーワードがあります。現代のJavaScriptでは、letとconstの使用が推奨されます。

• const: 再代入不可能な変数を宣言します。定数として扱うべき値や、オブジェクト・配列への参照が変更されない場合に使用します。ブロックスコープを持ちます。
• let: 再代入可能な変数を宣言します。変数の値が後で変更される可能性がある場合に使用します。ブロックスコープを持ちます。
• var: ES2015 (ES6) 以前から存在するキーワードで、関数スコープを持ちます。巻き上げ (hoisting) やスコープの挙動が混乱を招くことがあるため、特別な理由がない限り使用は避けるべきです。

データ型

JavaScriptにはプリミティブ型とオブジェクト型があります。

• プリミティブ型:
  • number: 整数および浮動小数点数。
  • string: 文字列。シングルクォート (')、ダブルクォート (")、バッククォート (`) で囲みます。バッククォートはテンプレートリテラルを可能にし、変数埋め込みや複数行記述に便利です。
  • boolean: 真偽値 (trueまたはfalse)。
  • null: 意図的に「値がない」ことを示す特別な値。
  • undefined: 値が代入されていない変数や、存在しないプロパティにアクセスした場合のデフォルト値。
  • symbol: ES6で追加された、一意で不変な値。オブジェクトのプロパティキーとして利用されます。
  • bigint: ES2020で追加された、非常に大きな整数を扱える型。
• オブジェクト型:
  • object: プリミティブ型以外のすべての値（オブジェクト、配列、関数など）。キーと値のペアでデータを格納します。
  • array: 順序付けられたデータのコレクション。
  • function: 実行可能なコードブロック。JavaScriptでは関数もオブジェクトの一種です。

演算子

算術演算子 (+, -, *, /, %)、比較演算子 (==, ===, !=, !==, <, >, <=, >=)、論理演算子 (&&, ||, !)、代入演算子 (=, +=など) などがあります。特に重要なのは、厳密等価演算子 === と厳密不等価演算子 !== です。これらは値と型の両方が等しいか（等しくないか）を比較し、型変換による意図しない挙動を防ぎます。

制御フロー

プログラムの実行順序を制御する構文です。

• if/else if/else: 条件に基づいてコードブロックを実行します。
• switch: 複数の条件分岐を簡潔に記述します。
• for: 指定された回数だけコードブロックを繰り返します。
• while: 条件が真である間、コードブロックを繰り返します。
• do/while: 少なくとも1回はコードブロックを実行し、その後条件が真である間繰り返します。
• for...of: 配列や文字列などのイテラブルなオブジェクトの要素を反復処理します。
• for...in: オブジェクトの列挙可能なプロパティ名を反復処理します。

関数

特定のタスクを実行するコードブロックを定義します。再利用性や可読性を高めます。

• 関数宣言: function funcName(params) { ... }
• 関数式: const funcName = function(params) { ... };
• アロー関数 (ES6): const funcName = (params) => { ... };
  • 簡潔な記述。
  • thisの挙動が従来の関数と異なり、定義時のスコープに束縛されます。

オブジェクトと配列

JavaScriptのデータ構造の根幹をなします。

• オブジェクト: { key1: value1, key2: value2 } の形式で、キーと値のペアを格納します。プロパティへのアクセスはドット記法 (obj.key) またはブラケット記法 (obj['key']) で行います。
• 配列: [element1, element2, ...] の形式で、順序付けられた要素を格納します。インデックス (0から始まる数値) で要素にアクセスします。多くの便利なメソッド (push, pop, map, filterなど) を持ちます。

非同期処理の基本

JavaScriptはシングルスレッドで動作しますが、ネットワークリクエストやファイルI/Oなどの時間のかかる処理をメインスレッドをブロックせずに実行するために、非同期処理の仕組みが不可欠です。

• コールバック関数: 非同期処理が完了したときに実行される関数を引数として渡す方法。コールバック地獄 (callback hell) の原因となることがあります。
• Promise (ES6): 非同期処理の最終的な完了（または失敗）を表すオブジェクト。チェーン可能なメソッド (.then(), .catch(), .finally()) を提供し、コールバック地獄を回避しやすくします。
• async/await (ES2017): Promiseをより同期的なコードのように記述できるようにする構文糖衣。asyncキーワードで関数を宣言し、その中でawaitキーワードを使ってPromiseの解決を待つことができます。現代のJavaScriptで非同期処理を扱う最も推奨される方法です。

サンプルコード

以下に、これまで解説した基本的な概念を網羅するJavaScriptのサンプルコードを示します。Node.js環境で実行することを想定しています。

// 1. 変数の宣言とデータ型

const appName = "MyDevOpsTool"; // 定数

let version = "1.0.0"; // 再代入可能な変数

let isActive = true; // 真偽値

let config = null; // null値

let undefinedVar; // undefined値

console.log(`アプリケーション名: ${appName}, バージョン: ${version}`);

console.log(`アクティブ状態: ${isActive}`);

console.log(`設定: ${config}, 未定義変数: ${undefinedVar}`);
// 2. 厳密等価演算子

const numStr = "10";

const num = 10;

console.log(`'10' == 10 は ${numStr == num}`);   // true (型変換が行われる)

console.log(`'10' === 10 は ${numStr === num}`); // false (型も比較される)
// 3. 配列とオブジェクト

const users = [

    { id: 1, name: "Alice", role: "admin" },

    { id: 2, name: "Bob", role: "user" },

    { id: 3, name: "Charlie", role: "admin" }

];
console.log(`ユーザー数: ${users.length}`);

console.log(`最初のユーザー: ${users[0].name}`);
// 4. 制御フロー (for...ofとif/else)

console.log("\n--- 管理者ユーザーリスト ---");

for (const user of users) {

    if (user.role === "admin") {

        console.log(`- ID: ${user.id}, 名前: ${user.name}`);

    }

}
// 5. 関数 (アロー関数)

const greet = (name) => {

    return `こんにちは、${name}さん！`;

};
console.log(greet("DevOps Engineer"));
const add = (a, b) => a + b; // 1行で書ける場合

console.log(`10 + 5 = ${add(10, 5)}`);
// 6. 非同期処理 (Promiseとasync/await)

// 擬似的な非同期処理をシミュレート

const fetchData = (id) => {

    return new Promise((resolve, reject) => {

        setTimeout(() => {

            if (id === 1) {

                resolve({ id: 1, data: "データA" });

            } else {

                reject(new Error("データが見つかりません"));

            }