---
layout: "@/layouts/MarkdownLayout.astro"
---

import RenderFile from "@/components/RenderFile";
import RenderHtml from "@/components/RenderHtml";

export const title = "HTMLから値を読み込む";

# {title}

## TOC

これまでは、ボタンをクリックしたときに決まった動作をするプログラムを作ってきました。  
しかし実際のWebページでは、**ユーザーが入力した値**を使って処理を行うことが多いです。

ここでは、HTMLの`<input>`タグなどから値を取得する方法を学びます。

## input要素から値を取得する

まずは、テキストボックスに入力された文字を取得してみましょう。

```html file=src/sample/js/input-basic.html
src/sample/js/input-basic.html
内容を取得できませんでした
```

<RenderFile path="src/sample/js/input-basic.html" />

<br />

テキストボックスに何か入力してボタンを押すと、入力した内容がそのまま表示されます。

重要なのは以下の部分です。

```html file=src/sample/js/input-basic.html {9}
src/sample/js/input-basic.html
内容を取得できませんでした
```

`input`要素の`value`プロパティを使うことで、**ユーザーが入力した値**を取得できます。

### input要素のtype属性

`<input>`タグには、`type`属性を指定することで様々な種類の入力欄を作ることができます。

```html
<!-- テキスト入力 -->
<input type="text" id="name">

<!-- 数値入力 -->
<input type="number" id="age">

<!-- メールアドレス入力 -->
<input type="email" id="email">

<!-- パスワード入力 (入力内容が隠される) -->
<input type="password" id="password">

<!-- 日付入力 -->
<input type="date" id="birthday">
```

どのタイプでも、基本的には`value`プロパティで値を取得できます。

## 数値として扱う

`type="number"`を指定していても、JavaScriptで取得した値は**文字列**として扱われます。  
計算に使いたい場合は、`Number()`を使って数値に変換する必要があります。

```html file=src/sample/js/input-number.html
src/sample/js/input-number.html
内容を取得できませんでした
```

<RenderFile path="src/sample/js/input-number.html" />

<br />

重要なのは以下の部分です。

```html file=src/sample/js/input-number.html {14-15}
src/sample/js/input-number.html
内容を取得できませんでした
```

`Number()`で囲むことで、文字列を数値に変換しています。  
これをしないと、`"10" + "20"` が `"1020"` という文字列になってしまいます。

## チェックボックスの値を取得する

チェックボックスの場合は、`value`ではなく`checked`プロパティを使います。  
これは`true`(チェックされている)または`false`(チェックされていない)のBoolean型の値です。

```html file=src/sample/js/input-checkbox.html
src/sample/js/input-checkbox.html
内容を取得できませんでした
```

<RenderFile path="src/sample/js/input-checkbox.html" />

<br />

```html file=src/sample/js/input-checkbox.html {9-15}
src/sample/js/input-checkbox.html
内容を取得できませんでした
```

`checkbox.checked`が`true`ならチェックされている、`false`ならチェックされていないという意味です。

## 属性から値を取得する

HTML要素には、`id`、`class`、`data-*`などの様々な属性があります。  
これらの値を取得するには、`getAttribute()`メソッドを使います。

```html file=src/sample/js/get-attribute.html
src/sample/js/get-attribute.html
内容を取得できませんでした
```

<RenderFile path="src/sample/js/get-attribute.html" />

<br />

```html file=src/sample/js/get-attribute.html {11-13}
src/sample/js/get-attribute.html
内容を取得できませんでした
```

`getAttribute("属性名")`で、指定した属性の値を取得できます。

`data-*`属性は、HTMLに独自のデータを持たせたいときに便利です。  
例えば、商品の価格や商品IDなどを埋め込んでおき、JavaScriptから取得して使うことができます。

### dataset を使った取得方法

`data-*`属性は、`dataset`プロパティを使って取得することもできます。

```js
const button = document.querySelector("#myButton");

// getAttribute を使う方法
const userId1 = button.getAttribute("data-user-id");

// dataset を使う方法 (より簡潔)
const userId2 = button.dataset.userId;  // data-user-id → userId
```

`dataset`を使う場合、属性名の`data-`部分は省略し、ハイフンの後ろは大文字にします(キャメルケース)。

## 複数の入力値を組み合わせる

実際のWebページでは、複数の入力値を組み合わせて処理することが多いです。

```html file=src/sample/js/input-multiple.html
src/sample/js/input-multiple.html
内容を取得できませんでした
```

<RenderFile path="src/sample/js/input-multiple.html" />

<br />

このように、複数の`<input>`から値を取得して、それらを組み合わせて処理することができます。

## まとめ

HTMLから値を取得する方法を学びました。

1. `<input>`の値は`value`プロパティで取得する
2. 数値として扱いたい場合は`Number()`で変換する
3. チェックボックスは`checked`プロパティで取得する
4. 属性の値は`getAttribute()`または`dataset`で取得する

これらを使うことで、ユーザーの入力に応じた動的なWebページを作ることができます。