JavaScript初級講座: 基本からイベント操作まで

JavaScriptの再入門編・前編

繊細なアニメーションやインタラクティブなページを作成したり、サーバーと連携したりとJavaScriptを理解することは、現在のウェブ開発においては重要なスキルの一つです。ここでは、JavaScript（ES6以降に追加された機能も含めて）の基本を復習していきましょう！という事で再入門記事を書いてみました。

記事が長すぎたので前後編に分けました。

1. JavaScriptとは？

JavaScriptとは、ウェブブラウザに組み込まれて動作するスクリプト言語です。
HTMLとCSSとともに、現代のウェブサイトを構築するための3つの基本技術の1つです。

2. JavaScriptの基本構文

JavaScriptの基本的な構文を学びます。

変数と定数

JavaScriptでは、let、const、およびvarキーワードを使用して変数と定数を宣言します。letはブロックスコープの変数を宣言し、constはブロックスコープの読み取り専用の定数を宣言します。varは関数スコープの変数を宣言しますが、現代のJavaScriptではあまり使用されません。

let name = 'John Doe';
const pi = 3.14159;

データ型

JavaScriptには主に7つの基本的なデータ型があります：Number、String、Boolean、Null、Undefined、Symbol、およびBigInt。加えて、オブジェクトという複合データ型があります。

let count = 10;  // Number
let message = 'Hello';  // String
let isActive = true;  // Boolean
let nothing = null;  // Null
let something;  // Undefined

制御フロー

JavaScriptでは、条件分岐にif、else、else if、およびswitchを、繰り返しにはfor、while、およびdo whileを使用します。

if (count > 0) {
  console.log('Positive');
} else if (count < 0) {
  console.log('Negative');
} else {
  console.log('Zero');
}

for (let i = 0; i < 10; i++) {
  console.log(i);
}

関数

JavaScriptでは、functionキーワードを使用して関数を定義します。
また、アロー関数も使用できます。

function greet(name) {
  return 'Hello, ' + name;
}

const square = (x) => x * x;

3. オブジェクトと配列

JavaScriptでは、複数の値をまとめて扱うためのデータ構造としてオブジェクトと配列が提供されています。オブジェクトは、キーと値のペアを格納することができ、配列は順序付けられた値のリストを格納します。

以下にそれぞれの例を示します：

// オブジェクトの作成
let person = {
    name: "John",
    age: 25,
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

person.greet(); // "Hello, John"

// 配列の作成
let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 1

また、これらのデータ型を操作するための組み込みメソッドも持っています。

// オブジェクト
let person = {
    name: "Alice",
    age: 20
};

console.log(person.name); // Alice

// 配列
let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 1

4. JavaScriptにおける関数の概念

関数は、JavaScriptにおける中心的な概念であり、このセクションでは関数の定義、スコープ、クロージャについて学びます。

関数の定義

JavaScriptには主に3つの関数定義の方法があります：
通常の関数定義、無名関数（関数式）、そしてアロー関数です。

以下にそれぞれのコード例を示します。

通常の関数定義（Function Declaration）:

function greet(name) {
    return "Hello, " + name;
}

console.log(greet("Alice"));  // Hello, Alice

無名関数（関数式、Function Expression）:

let greet = function(name) {
    return "Hello, " + name;
}

console.log(greet("Bob"));  // Hello, Bob

アロー関数（Arrow Function）:

let greet = (name) => {
    return "Hello, " + name;
}

console.log(greet("Charlie"));  // Hello, Charlie

また、アロー関数では、1行の式のみを実行する関数の場合、波括弧とreturnキーワードを省略することができます。これを省略形と呼びます。

let greet = name => "Hello, " + name;

console.log(greet("Dave"));  // Hello, Dave

以上のように、JavaScriptでは様々な方法で関数を定義することができますが、関数の形式を選ぶ際は、関数の目的や使用する文脈によって最適な形式を選択します。

スコープ

スコープは基本的に変数が存在する範囲やコンテキストを指します。JavaScriptには大きく分けて3つの種類のスコープがあります: グローバルスコープ、関数スコープ、ブロックスコープです。

グローバルスコープ:

プログラムのどこからでも参照できる変数が存在するスコープです。
例えば、次のようなコードでは、myVarはグローバルスコープに定義されています。

let myVar = "I'm global!";

function test() {
    console.log(myVar); // "I'm global!"
}

test();
console.log(myVar); // "I'm global!"

関数スコープ:

関数内部で宣言された変数は、その関数内部でのみ参照できます。これを関数スコープといいます。関数の外部からは参照できません。varキーワードで定義された変数は関数スコープを持ちます。

function test() {
    var myVar = "I'm local!";
    console.log(myVar); // "I'm local!"
}

test();
console.log(myVar); // ReferenceError: myVar is not defined

ブロックスコープ:

{}（波括弧）で囲まれた範囲で変数を宣言すると、その範囲内でのみ参照可能な変数となります。これをブロックスコープといいます。letやconstキーワードで宣言された変数はブロックスコープを持ちます。

{
    let myVar = "I'm block-scoped!";
    console.log(myVar); // "I'm block-scoped!"
}
console.log(myVar); // ReferenceError: myVar is not defined

以上のように、スコープは変数が参照できる範囲を定義します。
スコープの理解は、変数の振る舞いを理解し、バグを防ぐために重要です。

クロージャ

クロージャは、関数が定義されたスコープの変数にアクセスできる特性を指します。データのプライバシーや関数のメモリ化など、さまざまな使い方があります。

以下のコードはクロージャの基本的な例です：

function createCounter() {
    let count = 0;
    return function() {
        count++;
        console.log(count);
    };
}

let counter = createCounter();

counter(); // 1
counter(); // 2

5. DOM操作

JavaScriptを用いてHTML文書の構造（DOM、Document Object Model）を操作する方法をです。DOM操作は、ウェブページに動的な振る舞いを追加するための基本的なスキルです。
例えば、以下のコードはJavaScriptを使用してHTML要素を操作する基本的な例です：

// HTML要素の取得
let title = document.querySelector('h1');

// HTML要素のテキストを変更
title.textContent = 'Hello, World!';

// 新しいHTML要素の作成と追加
let p = document.createElement('p');
p.textContent = 'This is a paragraph.';
document.body.appendChild(p);

6. イベントハンドリング

イベントハンドリングはJavaScriptの重要な概念で、ブラウザでのユーザー操作（クリック、キーボード入力など）やブラウザ自体の動作（ページの読み込み完了、エラー発生など）を「捉えて」何かアクションを起こすための方法です。

イベントハンドラー（またはイベントリスナー）とは、特定のイベントが発生したときに実行される関数を指します。

以下にイベントハンドリングの基本的な例を示します。

// HTML要素を取得
let button = document.getElementById('myButton');

// クリックイベントに対するハンドラーを設定
button.addEventListener('click', function() {
    alert('Button was clicked!');
});

上記の例では、clickというイベント（ボタンのクリック）が発生すると、無名関数が呼び出され、その結果としてアラートが表示されます。この無名関数がイベントハンドラーです。

一般的に、イベントハンドラーはHTML要素（ボタン、入力フィールド、フォームなど）に設定しますが、ブラウザのwindowオブジェクト（例えば、ページの読み込み完了イベント）に設定することもあります。

window.addEventListener('load', function() {
    console.log('Page is fully loaded');
});

上記の例では、loadというイベント（ページの全てのリソースの読み込み完了）が発生すると、無名関数が呼び出され、その結果としてコンソールにメッセージが表示されます。

イベントハンドリングは、JavaScriptを使った対話的なウェブページの制作において中心的な役割を果たします。