JavaScript

TIOBE#6

PYPL#3

GitHub#2

RedMonk#1

IEEESpectrum#3

JetBrains#1

プログラミング言語Web開発フロントエンドバックエンド関数型オブジェクト指向

プログラミング言語

JavaScript

概要

JavaScriptは、Web開発において欠かせない動的プログラミング言語です。

詳細

JavaScriptは1995年にBrendan Eichによって開発された、プロトタイプベースのオブジェクト指向プログラミング言語です。当初はWebブラウザ上でのクライアントサイド処理のために設計されましたが、Node.jsの登場によりサーバーサイド開発も可能になり、現在では最も広く使用されているプログラミング言語の一つとなっています。動的型付け、第一級関数、プロトタイプベース継承などの特徴を持ち、イベント駆動型プログラミングとコールバック関数を活用した非同期処理が得意です。ECMAScript標準に基づいて継続的に進化しており、モダンな構文と豊富なライブラリエコシステムにより、フロントエンド・バックエンド・モバイル・デスクトップアプリケーション開発まで幅広い用途で活用されています。

書き方の例

Hello World

// 基本的な出力
console.log("Hello, World!");

// 変数を使った出力
const message = "こんにちは、JavaScript!";
console.log(message);

// テンプレートリテラルを使った出力
const name = "太郎";
const age = 25;
console.log(`私の名前は${name}で、${age}歳です。`);

// ブラウザでのアラート表示
alert("Hello, JavaScript!");

変数とデータ型

// 変数の宣言
let number = 42;           // 数値
const text = "Hello";      // 文字列
let isTrue = true;         // 真偽値
let array = [1, 2, 3];     // 配列
let obj = { name: "太郎" }; // オブジェクト

// データ型の確認
console.log(typeof number);  // "number"
console.log(typeof text);    // "string"
console.log(typeof isTrue);  // "boolean"
console.log(typeof array);   // "object"
console.log(typeof obj);     // "object"

// 配列の操作
array.push(4);               // 要素の追加
console.log(array.length);   // 配列の長さ
console.log(array[0]);       // 最初の要素にアクセス

条件分岐

// 基本的なif文
const score = 85;
let grade;

if (score >= 90) {
    grade = "A";
} else if (score >= 80) {
    grade = "B";
} else if (score >= 70) {
    grade = "C";
} else {
    grade = "D";
}

console.log(`得点: ${score}, 評価: ${grade}`);

// 三項演算子
const result = score >= 80 ? "合格" : "不合格";
console.log(result);

// switch文
const day = "月曜日";
switch (day) {
    case "月曜日":
        console.log("週の始まりです");
        break;
    case "金曜日":
        console.log("もうすぐ週末です");
        break;
    default:
        console.log("今日も頑張りましょう");
}

配列とオブジェクト

// 配列の操作
const fruits = ["りんご", "バナナ", "オレンジ"];
fruits.push("ぶどう");        // 要素の追加
console.log(`果物リスト: ${fruits}`);

// 配列の反復処理
fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`);
});

// 配列のメソッド
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);          // [2, 4, 6, 8, 10]
const evens = numbers.filter(n => n % 2 === 0);   // [2, 4]
const sum = numbers.reduce((acc, n) => acc + n, 0); // 15

// オブジェクトの操作
const person = {
    name: "田中太郎",
    age: 30,
    city: "東京",
    greet: function() {
        return `こんにちは、${this.name}です`;
    }
};

person.job = "エンジニア";  // プロパティの追加
console.log(person.greet());
console.log(`職業: ${person.job}`);

// オブジェクトの分割代入
const { name, age } = person;
console.log(`名前: ${name}, 年齢: ${age}`);

ループ、繰り返し処理

// for文
for (let i = 0; i < 5; i++) {
    console.log(`カウント: ${i}`);
}

// 配列のfor...of文
const colors = ["赤", "青", "緑"];
for (const color of colors) {
    console.log(`色: ${color}`);
}

// オブジェクトのfor...in文
const student = { name: "太郎", age: 20, grade: "A" };
for (const key in student) {
    console.log(`${key}: ${student[key]}`);
}

// while文
let count = 0;
while (count < 3) {
    console.log(`while カウント: ${count}`);
    count++;
}

// 配列のメソッドによる反復
const items = ["a", "b", "c"];
items.forEach((item, index) => {
    console.log(`${index}: ${item}`);
});

関数の定義と呼び出し

// 基本的な関数
function greet(name) {
    return `こんにちは、${name}さん！`;
}

// 関数式
const add = function(a, b) {
    return a + b;
};

// アロー関数
const multiply = (a, b) => a * b;

// デフォルト引数
const calculateArea = (width, height = 10) => {
    return width * height;
};

// 関数の呼び出し
console.log(greet("山田"));
console.log(add(5, 3));
console.log(multiply(4, 7));
console.log(calculateArea(5)); // heightはデフォルト値10を使用

// 高階関数の例
const processNumbers = (numbers, callback) => {
    return numbers.map(callback);
};

const squares = processNumbers([1, 2, 3, 4], n => n * n);
console.log(squares); // [1, 4, 9, 16]

クラスとオブジェクト指向

// ES6クラス構文
class Car {
    constructor(make, model, year) {
        this.make = make;
        this.model = model;
        this.year = year;
        this.mileage = 0;
    }
    
    drive(distance) {
        this.mileage += distance;
        console.log(`${distance}km 運転しました。総走行距離: ${this.mileage}km`);
    }
    
    getInfo() {
        return `${this.year}年式 ${this.make} ${this.model}`;
    }
    
    // ゲッターとセッター
    get description() {
        return `${this.getInfo()} (走行距離: ${this.mileage}km)`;
    }
    
    set totalMileage(miles) {
        if (miles >= 0) {
            this.mileage = miles;
        }
    }
}

// 継承
class ElectricCar extends Car {
    constructor(make, model, year, batteryCapacity) {
        super(make, model, year);
        this.batteryCapacity = batteryCapacity;
        this.charge = 100;
    }
    
    chargeUp() {
        this.charge = 100;
        console.log("バッテリーを充電しました");
    }
}

// クラスの使用
const myCar = new Car("トヨタ", "プリウス", 2022);
console.log(myCar.getInfo());
myCar.drive(50);
console.log(myCar.description);

const electricCar = new ElectricCar("テスラ", "Model 3", 2023, 75);
electricCar.drive(30);

非同期処理

// Promise
const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = Math.random() > 0.5;
            if (success) {
                resolve("データを取得しました");
            } else {
                reject("エラーが発生しました");
            }
        }, 1000);
    });
};

// Promiseの使用
fetchData()
    .then(data => console.log(data))
    .catch(error => console.error(error));

// async/await
async function getData() {
    try {
        const result = await fetchData();
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}

getData();

// 複数の非同期処理を並行実行
const urls = [
    'https://api.example1.com/data',
    'https://api.example2.com/data'
];

Promise.all(urls.map(url => fetch(url)))
    .then(responses => Promise.all(responses.map(r => r.json())))
    .then(data => console.log('すべてのデータ:', data))
    .catch(error => console.error('エラー:', error));

DOM操作（ブラウザ環境）

// 要素の取得
const title = document.getElementById('title');
const buttons = document.querySelectorAll('.button');
const firstParagraph = document.querySelector('p');

// 要素の作成と追加
const newDiv = document.createElement('div');
newDiv.textContent = '新しい要素';
newDiv.className = 'new-element';
document.body.appendChild(newDiv);

// イベントリスナーの追加
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
    console.log('ボタンがクリックされました');
    event.preventDefault(); // デフォルトの動作を停止
});

// スタイルの変更
title.style.color = 'blue';
title.style.fontSize = '24px';

// クラスの操作
newDiv.classList.add('active');
newDiv.classList.remove('inactive');
newDiv.classList.toggle('highlight');

// フォームの処理
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
    event.preventDefault();
    const formData = new FormData(form);
    const data = Object.fromEntries(formData);
    console.log('フォームデータ:', data);
});

特徴的な機能

分割代入

// 配列の分割代入
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first);  // 1
console.log(second); // 2
console.log(rest);   // [3, 4, 5]

// オブジェクトの分割代入
const user = { name: "太郎", age: 25, city: "東京" };
const { name, age, city = "不明" } = user;
console.log(`${name}さん、${age}歳、${city}在住`);

// 関数の引数での分割代入
const displayUser = ({ name, age }) => {
    console.log(`名前: ${name}, 年齢: ${age}`);
};
displayUser(user);

スプレッド演算子

// 配列のスプレッド
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// オブジェクトのスプレッド
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

// 関数の引数でのスプレッド
const numbers = [1, 2, 3, 4, 5];
const max = Math.max(...numbers); // 5
console.log(max);

モジュールシステム

// export (エクスポート)
// utils.js
export const PI = 3.14159;
export function add(a, b) {
    return a + b;
}
export class Calculator {
    multiply(a, b) {
        return a * b;
    }
}

// デフォルトエクスポート
export default function subtract(a, b) {
    return a - b;
}

// import (インポート)
// main.js
import subtract, { PI, add, Calculator } from './utils.js';
import * as Utils from './utils.js';

console.log(PI);
console.log(add(5, 3));
console.log(subtract(10, 4));

const calc = new Calculator();
console.log(calc.multiply(6, 7));

バージョン

バージョン	正式名称	リリース日	主な新機能
ES2024 (ES15)	ECMAScript 2024	2024-06	`Object.groupBy()`, Well-Formed Unicode Strings
ES2023 (ES14)	ECMAScript 2023	2023-06	Array findLast(), toSorted(), Hashbang Grammar
ES2022 (ES13)	ECMAScript 2022	2022-06	Top-level await, Private fields, at() method
ES2021 (ES12)	ECMAScript 2021	2021-06	String replaceAll(), Promise.any(), Logical Assignment
ES2020 (ES11)	ECMAScript 2020	2020-06	Optional chaining, Nullish coalescing, BigInt
ES2019 (ES10)	ECMAScript 2019	2019-06	Array flat(), Object.fromEntries()
ES2018 (ES9)	ECMAScript 2018	2018-06	Async iteration, Rest/Spread properties
ES2017 (ES8)	ECMAScript 2017	2017-06	async/await, Object.entries(), String padding
ES2016 (ES7)	ECMAScript 2016	2016-06	Array includes(), Exponentiation operator
ES2015 (ES6)	ECMAScript 2015	2015-06	Classes, Modules, Arrow functions, let/const

参考ページ

公式ドキュメント

MDN Web Docs - Mozilla公式JavaScript ドキュメント
ECMAScript® Language Specification - ECMAScript仕様書
TC39 Proposals - 新機能提案一覧

学習リソース

JavaScript.info - 包括的なJavaScript学習サイト
Eloquent JavaScript - 無料のJavaScript書籍
You Don't Know JS - JavaScript深掘り書籍シリーズ

開発ツールとライブラリ

Node.js - サーバーサイドJavaScript実行環境
npm - Node.jsパッケージマネージャー
Babel - JavaScript トランスパイラー
ESLint - JavaScript リンター
Prettier - コードフォーマッター

フレームワーク・ライブラリ

React - UI構築ライブラリ
Vue.js - プログレッシブフレームワーク
Angular - フルスタックフレームワーク
Express.js - Node.js Webフレームワーク