JavaScriptの基本

# JavaScriptとは
JavaScriptは、Web開発で広く使用されるプログラミング言語です。
ブラウザ上で動作し、HTMLやCSSと連携して動的なWebサイトを作成できます。
また、ブラウザとテキストエディタがあれば、特別な環境構築をせずに手軽に扱うことができます。
さらに、Node.jsなどの実行環境を利用することで、サーバ上でも動作し、バックエンドの開発にも用いられます。


# 変数とデータ型
### 変数
変数とは、データ（値）を保存するための箱のようなものです。プログラムの中で、数値や文字列などの情報を一時的に保存し、後で使うことができます。

``` js
// 文字列（String）
var name = "太郎";
// 数値（Number）
let age = 25;
// 真偽値（Boolean）
const isStudent = true;
// 配列（Array）
let arr = [1, 2, 3, "hello"];
// オブジェクト（Object）
let obj = { name: "Alice", age: 25 };
```

### 変数の宣言と種類
| 宣言 | 特徴 |
|---------|------|
| `var` | 古い方法。再宣言・再代入が可能。関数スコープ。|
| `let` | 再代入が可能。ブロックスコープ。|
| `const` | 再代入不可。ブロックスコープ。|

### スコープ
スコープとは、変数が有効な範囲のことです。JavaScriptでは主に以下の2種類のスコープがあります。  
| スコープの種類 | 有効範囲 | 適用される変数 |
|-------------|---------|--------------|
| **関数スコープ** | 関数内のみ有効 | `var` |
| **ブロックスコープ** | `{}`（ブロック）内のみ有効 | `let`、`const` |


### データ型
データ型とは「プログラムで扱う値の種類」を定義したものです。  
例えば、「数値」と「文字列」は違う種類のデータなので、それらを適切に処理するために区別する必要があります。

| データ型 | 説明 | 例 |
|---------|------|----|
| **Number** | 数値（整数・小数） | `42`, `3.14` |
| **String** | 文字列（テキスト） | `"Hello"`, `'World'` |
| **Boolean** | 真偽値（true/false） | `true`, `false` |
| **Undefined** | 値が未定義 | `let x;`（`x` は `undefined`） |
| **Null** | 値が存在しない | `let y = null;` |
| **Array** | 複数の値を順番に保持 | `[1, 2, 3, "hello"]` |
| **Object** | キーと値のペアのデータ |	`{ name: "Alice", age: 25 }` |
| **Function** | 関数（コードのまとまり） |	`function greet() {}` |

# ログ出力
JavaScriptのログ出力は`console.log`を使用します。
`console.log` は、JavaScriptで **デバッグのために値を出力する** 標準的な方法です。  
開発者ツールの「コンソール」にメッセージを表示できます。
``` js
// 「Hello World!!」と出力される
console.log("Hello World!!"); 
```

# コメント
コメントとは、**コードの説明やメモを書き込むための部分** であり、JavaScriptの実行には影響しません。  他のプログラマーや自分が後でコードを理解しやすくするために使います。
``` js
// これはコメントです。
// コメントを残すだけでなく、処理も無効かできます。

/**
 * これはもコメントです。関数ヘッダーでよく使用します。
 */
```

# 条件分岐
条件分岐とは、**特定の条件によって処理を変えること** です。  
例えば、ユーザーがログインしているかどうかで表示を変えたり、数値によって異なる処理を実行できます。
``` js
if (age >= 20) {
    console.log("成人です");
} else {
    console.log("未成年です");
}
```

# ループ処理
ループ（繰り返し処理）とは、**同じ処理を複数回実行するための構文** です。  
例えば、配列の要素を順番に処理したり、特定の条件を満たすまで処理を繰り返すのに使います。

``` js
for (let i = 1; i <= 5; i++) {
    console.log("カウント: " + i);
}
```
# 関数
関数とは、**特定の処理をひとまとまりにして、再利用できるようにしたもの** です。  
同じ処理を何度も書かずに済み、コードを効率的に管理できます。

``` js
function greet(userName) {
    return "こんにちは、" + userName + "さん！";
}
console.log(greet("太郎"));
```

## イベントリスナー
イベントリスナー（Event Listener）は、ユーザーの操作（クリック、キー入力、マウス移動など）に応じて処理を実行する仕組みです。addEventListener メソッドを使うことで、イベントを検知し、特定の処理を実行できます。
```js
document.getElementById("myButton").addEventListener("click", function() {
    alert("ボタンがクリックされました！");
});
```

| イベントタイプ | 説明 |
|--------------|--------------------------------|
| `click`      | 要素がクリックされたとき |
| `dblclick`   | 要素がダブルクリックされたとき |
| `mousedown`  | マウスボタンが押されたとき |
| `mouseup`    | マウスボタンが離されたとき |
| `mousemove`  | マウスが動いたとき |
| `mouseover`  | マウスが要素上に来たとき |
| `mouseout`   | マウスが要素から離れたとき |
| `keydown`    | キーが押されたとき |
| `keyup`      | キーが離されたとき |
| `keypress`   | キーが押されたとき（非推奨） |
| `input`      | 入力フィールドの値が変更されたとき |
| `change`     | フォーム要素の値が変更されたとき（確定時） |
| `focus`      | 要素にフォーカスが当たったとき |
| `blur`       | 要素のフォーカスが外れたとき |
| `submit`     | フォームが送信されたとき |
| `dragstart`  | ドラッグが開始されたとき |
| `drag`       | 要素がドラッグされている間 |
| `dragend`    | ドラッグが終了したとき |
| `drop`       | ドロップが発生したとき |