「2024年」最新のJavaScriptサンプルコード集

JavaScriptは、ウェブ開発において不可欠なプログラミング言語です。フロントエンドからバックエンドまで幅広く利用され、モダンなウェブアプリケーションを構築するための強力なツールを提供します。ここでは、すぐに使える最新のJavaScriptサンプルコードを、具体的な使用例とともに紹介します。

1. フェッチAPIを使用したデータ取得

フェッチAPIは、ネットワークリクエストを行うためのモダンな方法です。以下のサンプルコードは、外部APIからデータを取得し、コンソールに表示します。

async function fetchData(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Fetch error: ', error);
    }
}

fetchData('https://api.example.com/data');

説明

fetch関数を使って、指定されたURLからデータを取得します。
awaitキーワードを使用して非同期処理を待機します。
データが正常に取得できない場合は、エラーメッセージを表示します。

2. モジュールの使用

JavaScriptモジュールを使用すると、コードを分割し、再利用可能なコンポーネントに整理できます。以下の例は、簡単なモジュールの作成と使用方法を示します。

math.js

export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

main.js

import { add, subtract } from './math.js';

console.log(add(5, 3));        // 8
console.log(subtract(5, 3));   // 2

説明

exportキーワードを使って、関数を他のファイルからインポート可能にします。
importキーワードを使って、他のファイルから関数をインポートし、利用します。

3. クラスとオブジェクト指向プログラミング

JavaScriptのクラスを使って、オブジェクト指向プログラミングの概念を適用できます。以下のサンプルコードは、簡単なクラスの定義とインスタンスの作成方法を示します。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

const john = new Person('John', 30);
john.greet();  // Hello, my name is John and I am 30 years old.

説明

classキーワードを使ってクラスを定義します。
constructorメソッドで、クラスのインスタンス化時に初期化を行います。
クラスメソッドを定義して、インスタンスで呼び出せるようにします。

4. プロミスと非同期処理

プロミスは、非同期操作の結果を表現するオブジェクトです。以下のサンプルコードは、プロミスを使って非同期処理を管理する方法を示します。

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function asyncTask() {
    console.log('Task started');
    await delay(2000);  // 2秒待機
    console.log('Task completed');
}

asyncTask();

説明

Promiseオブジェクトを使って、非同期処理を管理します。
asyncキーワードを使って、非同期関数を定義します。
awaitキーワードを使って、プロミスが解決するのを待機します。

5. アロー関数

アロー関数は、より簡潔に関数を記述できるシンタックスシュガーです。以下のサンプルコードは、アロー関数の基本的な使い方を示します。

const add = (a, b) => a + b;
const square = x => x * x;
const greet = () => console.log('Hello, world!');

console.log(add(5, 3));  // 8
console.log(square(4));  // 16
greet();                // Hello, world!

説明

constキーワードを使って、関数を変数に割り当てます。
=>（アロー）記号を使って、関数を定義します。
引数が1つの場合は、括弧を省略できます。

6. デストラクチャリング

デストラクチャリングを使って、配列やオブジェクトから要素を簡単に取り出すことができます。以下のサンプルコードは、デストラクチャリングの使い方を示します。

const person = {
    name: 'Alice',
    age: 25,
    address: {
        city: 'New York',
        zip: '10001'
    }
};

const { name, age, address: { city, zip } } = person;

console.log(name);  // Alice
console.log(age);   // 25
console.log(city);  // New York
console.log(zip);   // 10001

説明

オブジェクトのプロパティを変数に割り当てるためにデストラクチャリングを使用します。
ネストされたオブジェクトからもプロパティを取り出すことができます。

7. スプレッド構文とレスト構文

スプレッド構文とレスト構文を使って、配列やオブジェクトの要素を展開または結合できます。以下のサンプルコードは、これらの構文の使い方を示します。

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5, 6];

console.log(newNumbers);  // [1, 2, 3, 4, 5, 6]

const person = {
    name: 'Alice',
    age: 25
};

const updatedPerson = {
    ...person,
    age: 26,
    city: 'New York'
};

console.log(updatedPerson);  // { name: 'Alice', age: 26, city: 'New York' }

説明

スプレッド構文（...）を使って、配列やオブジェクトを展開します。
オブジェクトのコピーを作成し、新しいプロパティを追加または上書きします。

まとめ

これらのサンプルコードを活用することで、最新のJavaScript機能を簡単に取り入れ、効率的なコーディングが可能になります。フェッチAPIを使ったデータ取得、モジュールの利用、クラスとオブジェクト指向プログラミング、プロミスと非同期処理、アロー関数、デストラクチャリング、スプレッド構文とレスト構文など、モダンなJavaScriptの基本をマスターして、さらに高度なアプリケーションを開発していきましょう。