必要な情報を保存する — 変数 - ウェブ開発を学ぶ

必要な情報を保存する — 変数
===============

* 前のページ
* Overview: First steps
* 次のページ

前回までの記事を読んで、高度な視点からその機能を概観し、JavaScript とは何なのか、それで何ができるのか、他のウェブの技術とどう一緒に使うのか、そして、どのような機能があるのかが分かったのではないでしょうか。この記事では、本当の基本に立ち返り、JavaScript の基本的な構成要素である変数について見てみましょう。

|  |  |
| --- | --- |
| 前提条件: |
 基本的なコンピューターの知識、HTML と CSS
 の基本についての理解、JavaScript が何かが分かっていること。
  |
| 目的: | JavaScript の変数についての基礎を習得する。 |

必要なツール
------

この記事を通じて、理解した内容を確認するために、コードを入力してもらうことがあるでしょう。デスクトップを使用しているのなら、JavaScript のサンプルコードを打ち込むのに最適なのは、ブラウザーの JavaScript コンソールでしょう（詳しくはブラウザーの開発者ツールとはをご覧ください）。

変数とは
----

変数は値の入れものです。数を合計したり、ある文章の一部を格納するのに使用します。変数が特別なのは、変数が持っている値を変更できることにあります。

### 変数の例

単純な例を見てみましょう。

```html
<button id="button\_A">押してください</button>
<h3 id="heading\_A"></h3>
```

```js
const buttonA = document.querySelector("#button\_A");
const headingA = document.querySelector("#heading\_A");

buttonA.onclick = () => {
  const name = prompt("あなたの名前は何ですか？");
  alert(`こんにちは、${name}さん、はじめまして！`);
  headingA.textContent = `${name}さん、ようこそ`;
};
```

この例では、ボタンを押すとちょっとしたコードが走ります。最初の行では、ボタンを押した人の名前を入力するボックスが画面に表示されます。そして入力された値を変数に保存します。2 行目では、入力した人の名前を変数から取り出して、あいさつのメッセージに含めています。3 行目では、ページ上にその名前を表示しています。

### 変数がない場合

なぜこれが便利なのかを理解するためには、変数を使用せずにこの例と同じことをするためにはどのようにすればよいのか考えてみましょう。恐らく次のようになるでしょう。

```html
<button id="button\_B">押してください</button>
<h3 id="heading\_B"></h3>
```

```js
const buttonB = document.querySelector("#button\_B");
const headingB = document.querySelector("#heading\_B");

buttonB.onclick = () => {
  alert(
    `こんにちは、${prompt("あなたの名前は何ですか？")}さん、はじめまして！`,
  );
  headingB.textContent = `${prompt("あなたの名前は何ですか？")}さん、ようこそ`;
};
```

もしかしたら、まだ完全にはコードの内容がわからないかもしれませんね！けれども、変数がなければ、名前が必要になるたびに読み手に尋ねなければならなくなります。

変数というのはとても合理的です。JavaScript に慣れていけばとても自然なものに感じられるでしょう。

変数についてもう一つ特筆すべき点は、変数には文字列や数字だけでなく、何でも格納できるということです。複雑なデータや、すごいことをする関数全体ですら保持できます。先に進めばさらに理解できるようになるでしょう。

**メモ:** 変数に値を「格納する」と言っていますが、これは重要な区別です。変数は値を保持するもので、値そのものではありません。つまり値の箱です。物を入れる段ボール箱のようなものだと思ってください。

![JavaScript の変数の例を示す 3 つの 3 次元の段ボール箱のスクリーンショットです。各ボックスには、さまざまな JavaScript のデータ型を表す仮想的な値が格納されています。サンプル値はそれぞれ "Bob", true, 35 です。](/ja/docs/Learn/JavaScript/First_steps/Variables/boxes.png)

変数の宣言
-----

変数を使用するためには、まずは変数を作らなければなりません。より正確には、「宣言する」といいます。そのためには `var` または `let` キーワードに続けて変数名を書きます。

```js
let myName;
let myAge;
```

ここでは 2 つの変数 `myName` と `myAge` を宣言しています。それではこの 2 つの行をブラウザーのコンソールに入力してみましょう。続けて、好きな名前で変数を作ってみましょう。

**メモ:** JavaScript では、命令の行末ごとにセミコロン (`;`) を書かなければなりません。1 行ずつ書いているうちは動くかもしれませんが、複数行を書き始めたら動かなくなってしまうでしょう。いつでもセミコロンを書くようにして、慣れていきましょう。

今実行している環境に値が存在するかどうか、変数名を入力して確かめることができます。例えば、

```js
myName;
myAge;
```

これらの変数は現在、値を保持しておらず、空です。変数の名前を入力すると、`undefined` という値が表示されるでしょう。もし変数自体が存在していない場合はエラーメッセージが表示されます。以下の変数を入力してみてください。

```js
scoobyDoo;
```

**メモ:** 変数が存在していて値がないのと、変数自体が存在していないことを混同しないでください。この違いは重要です。上記の箱の例えでは、変数自体が存在しないということは値の箱（変数）がないということとなります。値がないということは、箱は確かにあるけれどその中に値がないということです。

変数の初期化
------

変数を宣言したら、値を入れて初期化できます。初期化するには、変数名に続けて等号記号 (`=`) を入力し、変数に入れたい値を渡します。例えば次のように。

```js
myName = "Chris";
myAge = 37;
```

コンソールに戻って上の行を入力してみてください。コンソール上に、変数に設定した値がその都度戻ってくることが確認できるでしょう。先ほど言ったように、変数の名前をコンソールに入力することで、その値が確認できます。もう一度、やってみましょう。

```js
myName;
myAge;
```

変数の宣言と初期化を一度にすることもできます。

```js
let myDog = "Rover";
```

2 つの操作を別個の行で行うより早いので、おそらくほとんどの場合、この方法で書くでしょう。

var についてのメモ
-----------

おそらく、`var` キーワードを使用した異なる方法で変数を宣言しているのも目にすることがあるでしょう。

```js
var myName;
var myAge;
```

JavaScript が最初に作成されたときには、これが変数を宣言する唯一の方法でした。`var` の設計は設計は混乱しやすく、エラーを引き起こしやすいものです。そこで、`let` が現代の JavaScript で導入されました。これは、`var` とは多少異なる動作をする変数を作成するための新しいキーワードで、その過程での問題を修正しています。

一部の簡単な違いを以下に説明します。ここではすべての違いについて説明するわけではありませんが、JavaScript について詳しく学習するにつれてそれらの違いがわかるようになります（今すぐ読みたい場合は、let のリファレンスページを参照してください）。

はじめに、変数を宣言して初期化する複数行の JavaScript プログラムを作成した場合、変数を初期化した後で実際に変数を `var` で宣言することができます。例えば次のようになります。

```js
myName = "Chris";

function logName() {
  console.log(myName);
}

logName();

var myName;
```

**メモ:** ウェブコンソールで複数行の JavaScript を実行しているときだけでは、JavaScript コンソールに 1 行ずつ入力してもうまくいきません。

これは**巻き上げ**が行われるため、動作します。件名に関する詳細については var の巻き上げを読んでください。

巻き上げは `let` で動作しなくなりました。上記の例で var を let に変更すると、エラーで失敗します。これは良いことです。変数を初期化した後に宣言すると混乱しやすくなり、コードを理解するのが難しくなります。

第二に、`var` を使用するとき、好きなだけ同じ変数を何度でも宣言することができます、しかし `let` ではできません。次の例は動作します。

```js
var myName = "Chris";
var myName = "Bob";
```

しかし、次のようにすると 2 行目でエラーが発生します。

```js
let myName = "Chris";
let myName = "Bob";
```

代わりにこれをしなければならないでしょう。

```js
let myName = "Chris";
myName = "Bob";
```

繰り返しますが、これは言語の賢明な決定です。変数を再宣言する必要はありません。それは物事をより混乱させるだけです。

これらの理由と複数の理由から、コードでは `var` よりも `let` を使用することをお勧めします。古いブラウザーの対応を明確に書いている場合を除き、2015 年以降、現代のすべてのブラウザーが `let` に対応しているため、`var` を使用する理由はなくなりました。

**メモ:** このコードをブラウザーコンソールで試す場合は、ここにあるコードブロックのそれぞれを丸ごとコピー & ペーストするのがよいでしょう。Chrome のコンソールの機能には、`let` と `const` による変数の再宣言が許可されているものがあります。
```

> let myName = 'Chris';
  let myName = 'Bob';
// 1 回の入力: SyntaxError: Identifier 'myName' has already been declared

> let myName = 'Chris';
> let myName = 'Bob';
// 2 回の入力: 両方とも成功
```

変数の値を変更する
---------

変数を初期化して値が入ったら、もう一度値を入れなおすことで、変数の値を変更することができます。次の行を入力してみてください。

```js
myName = "Bob";
myAge = 40;
```

### 変数の名前付けのルール

変数には制限はあるものの、大体どんな名前を付けることができます。ただし、一般的に、アルファベットと数字 (0-9, a-z, A-Z) やアンダースコアだけを使用すべきでしょう。

* 上記以外の文字を使用するのはやめましょう。環境によってはエラーとなったり、他の国の人々にとって理解しがたいものとなります。
* 変数名の先頭にアンダースコアは使用してはいけません。一部の JavaScript のコンストラクターにとっては特別な意味を持つため、問題となることがあります。
* 変数名の先頭に数字を使用してはいけません。これは JavaScript の文法エラーとなります。
* 複数の単語をつなげる場合は、「小文字から始まるキャメルケース」と呼ばれる書き方に従いましょう。最初の単語を全て小文字で書いて、その後に続く単語の最初の文字を大文字にする記法です。この記事ではこの書き方を採用しています。
* 保持するデータを説明する、分かりやすい名前を付けましょう。1 つの文字・数字や、長すぎる命名はしないようにしましょう。
* 変数名は大文字・小文字を区別します。`myage` と `myAge` は違うものになります。
* 最後に、JavaScript の予約語 ( これは JavaScript の文法を構成する単語のことです) を変数名には付けないようにしましょう。`var`、`function`、`let`、`for` 等を変数名として使用することは出来ません。ブラウザーはそれを異なるように解釈し、結果としてエラーとなるでしょう。

**メモ:** 避けるべき予約語の一覧は字句文法 — キーワードにあります。

良い名前の例：
```

age
myAge
init
initialColor
finalOutputValue
audio1
audio2
```

悪い名前の例：
```

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongvariablenameman
```

さらにいくつかの変数を作成してみましょう。上記の内容をしっかりと覚えてください。

変数のデータ型
-------

変数に保持する値にはいくつかの種類があります。このセクションでは、その種類について簡単に解説します。さらに詳細については、もっと先の記事で紹介します。

ここまで最初の 2 つは見てきましたが、他にもあります。

### 数値型

変数には数値を格納することができます。数値は 30 のような整数値や、2.456 のような実数値（浮動小数点数とも呼ばれます）が存在します。その他の言語とは違い、JavaScript ではデータ型を宣言する必要はありません。もし数値を変数に設定するならば、引用符は付けてはいけません。

```js
let myAge = 17;
```

### 文字列型

文字列とは文字が連なったもののことです。変数に文字列値を設定する場合、単一引用符 (`'`) または二重引用符 (`"`) で文字を囲みます。囲み忘れると、JavaScript はその文字を変数名として解釈しようとしてしまいます。

```js
let dolphinGoodbye = "So long and thanks for all the fish";
```

### 論理値

論理値は `true` と `false` の 2 つの値だけを持ちます。どちらのコードを実行するべきかといった、条件を判定するためによく使います。例として、簡単なコードは以下のようなものです。

```js
let iAmAlive = true;
```

実際には以下のように使われます。

```js
let test = 6 < 3;
```

これは「小なり」演算子 (`<`) を使用して 6 が 3 より小さいかどうかを判定しています。想像の通り、6 は 3 より小さくないためにこれは `false` となります。このような演算子はまた今度じっくりと紹介します。

### 配列

配列とは角括弧 (`[]`) にカンマで区切った複数の値を格納できるオブジェクトです。コンソールに以下のように入力してみましょう。

```js
let myNameArray = ["Chris", "Bob", "Jim"];
let myNumberArray = [10, 15, 40];
```

配列を宣言したら、配列中の位置を指定することで、その値にアクセスすることができます。次のように入力してみましょう。

```js
myNameArray[0]; // 'Chris' と表示されます
myNumberArray[2]; // 40 と表示されます
```

角括弧で表示したい値の位置に応じた添字を指定します。気づいたかもしれませんが JavaScript の配列は 0 から始まり、最初の要素の添字が 0 となります。

配列についても先の記事にて紹介します。

### オブジェクト

プログラミングにおいて、オブジェクトとは現実のもの（オブジェクト）をモデルとしたコードの構造です。幅と長さについての情報をもつ駐車場を表す単純なオブジェクトもあれば、名前や身長、体重、話す言葉やあいさつもすることもできる、人を表すオブジェクトも作ることができます。

次の行をコンソールに入力してみましょう。

```js
let dog = { name: "ポチ", breed: "ダルメシアン" };
```

オブジェクトに格納された情報を取得するには、以下のような書き方をします。

```js
dog.name;
```

とりあえずオブジェクトについて、今はここまでです。オブジェクトについてはもっと先のモジュールで紹介します。

動的型付け
-----

JavaScript は他の言語と異なり、「動的型付け言語」という、格納するデータ型 (数値や文字列や配列など ) を変数に対して指定する必要のない言語です。

たとえば、もし変数を宣言して、引用符で囲んだ値を渡すとします。すると、ブラウザーはこれを文字列として扱うでしょう。

```js
let myString = "Hello";
```

それが数字を含んでいたとしても、文字列になってしまうので、気を付けてください。

```js
let myNumber = "500"; // oops, this is still a string
typeof myNumber;
myNumber = 500; // much better — now this is a number
typeof myNumber;
```

上の 4 行をコンソールに一つづつ入力して、結果を見てみてください。`typeof` という演算子に気づきましたか？これは渡した変数のその時点でのデータ型を返します。最初に使用したとき、`myNumber` には `'500'` という文字列が入っているため、`string` と返ってきます。2 回目に呼んだときに何が返ってくるかを見てみましょう。

JavaScript の定数
--------------

変数と同様に、定数も宣言することができます。これらは、以下の点を除けば、変数と同じです。

* 宣言した時点で初期化する必要がある。
* 初期化した後、新しい値を割り当てることはできない。

例えば、`let` を使用すると、変数を初期化せずに宣言することができます。

```js
let count;
```

これを `const` を使用して行おうとすると、エラーが表示されます。

```js
const count;
```

同様に、`let` で変数を初期化し、新しい値を割り当てることができます（これは変数を再代入するとも呼ばれます）。

```js
let count = 1;
count = 2;
```

これを `const` を使用して行おうとすると、エラーが表示されます。

```js
const count = 1;
count = 2;
```

JavaScript で定数は、常に同じ値に名前を付けなければなりませんが、名前を付けた値の内容は変更することができることに注意してください。これは、数値や論理値のような単純な型では有益な違いではありませんが、オブジェクトを考えてみてください。

```js
const bird = { species: "Kestrel" };
console.log(bird.species); // "Kestrel"
```

オブジェクトの内容が変わっても、定数は同じオブジェクトを指しているので、`const` を使って宣言したオブジェクトのプロパティを更新したり、追加したり、削除したりすることができます。

```js
bird.species = "Striated Caracara";
console.log(bird.species); // "Striated Caracara"
```

いつ const を使い、いつ let を使うか
------------------------

もし `const` で `let` と同じことができないのであれば、なぜ `let` よりも `const` を使用した方がいいのでしょうか？実際、`const`はとても有益なものです。もし `const` を使用して値に名前をつけると、コードを見ている人に、この名前は決して異なる値に割り当てることができないことを指示します。この名前を見た人は、その名前が何を参照しているのかがいつでもわかるようになるのです。

このコースの中では、いつ `let` を使用し、いつ `const` を使用するかについて、以下の原則を採用しています。

*可能であれば `const` を使用し、必要ならば `let` を使用する。*

つまり、宣言時に変数を初期化でき、後で再代入する必要がない場合は、その変数を定数にします。

スキルテスト
------

この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。Test your skills: variables (en-US) を見てください。

まとめ
---

ここまでで JavaScript の変数の作り方について理解して、それ以外にもそれなりの知識を得ましたね。次の記事では、数値に焦点を当てて、JavaScript の数値計算の基礎について見ていきます。

* 前のページ
* Overview: First steps
* 次のページ


何が間違っている? JavaScript のトラブルシューティング - ウェブ開発を学ぶ

何が間違っている? JavaScript のトラブルシューティング
=================================

* 前のページ
* Overview: First steps
* 次のページ

前の記事の「数字当てゲーム」を作っていて、動かないことはありませんでしたか？恐れることはありません。この記事では、そんな心配をしなくて済むように、JavaScript のエラーを見つけて直す方法を伝授します。

| 前提条件: | 基本的なコンピューターリテラシー、HTML および CSS の基本的な理解、JavaScript についての理解。 |
| --- | --- |
| 目的: | コード内のシンプルな問題を修正し始める能力と自信を得る。 |

エラーの種類
------

コードに誤りがある場合、一般的に以下の 2 つのうち、どちらかの誤りであることがよくあります。

* **構文エラー**: プログラムが全く動かなかったり、途中で止まったりするような記述エラーで、通常はエラーメッセージが出力されます。正しいツールに慣れて、エラーメッセージの内容がわかるのなら、さほど無理なく修正が可能です。
* **論理エラー**: 書き方は正しくても、コードが意図した通りに動ないエラーです。つまりプログラムは動くのですが、間違った結果を返します。たいていの場合に、問題となる箇所に直接のエラーメッセージが出ることがないため、構文エラーよりも直すのが難しいことが多いです。

まあ、こんなに単純ではありません。もっと深く追及していくと違う種類のエラーも出てくることでしょう。しかし、見習いのうちは上の分類で十分です。上記の 2 つの種類のエラーについて見ていきましょう。

誤りの例
----

始めるにあたり、数字当て (今回は当たらない) ゲームに戻りましょう。わざとエラーになるバージョンを見ていきます。Github に行って number-game-errors.html をローカルにコピーしてください (ライブ実行はこちらを見てください)。

1. 始めるには、コピーしたファイルをお好みのテキストエディターとブラウザーで開きます。
2. ゲームで遊んでみてください。気づきましたか。"予想を入力" ボタンを押しても動きません！

**メモ:** もしかしたら、あなたにも直したいと思っているバージョンがあるかもしれませんね。ですが、まずはこちらで用意したバージョンを直してみてください。そうすれば、ここで教えるテクニックが身につきます。それから、あなた自身のプログラムに戻って直してみてください。

それでは、開発者コンソールで構文エラーがあるか調べてみましょう。それからエラーを修正します。どうやって修正すればいいかは今から教えます。

構文エラーを修正する
----------

以前に開発者ツールの JavaScript コンソールで、簡単なコマンドを入力してもらったことがあったと思います (思い出せなければ、リンクを見て開き方を調べてください)。コンソールの何が便利かといえば、ブラウザーの JavaScript エンジンに読み込ませようとしている JavaScript コードに構文エラーがあれば、すべて教えてくれるのです。さあ、バグを潰していきましょう。

1. `number-game-errors.html` ファイルを開いているタブを選択して、JavaScript コンソールを開いてください。以下のメッセージが表示されていますね。
 ![](/ja/docs/Learn/JavaScript/First_steps/What_went_wrong/not-a-function.png)
2. これは分かりやすいエラーです。ブラウザーからもいくつか情報が出ています (上のスクリーンショットは FireFox のものですが、他のブラウザーでも同様の情報が表示されるでしょう)。左から順に説明します。
    * 赤色の 「x」 ボタンはエラーがあることを示しています。
    * 「TypeError: guessSubmit.addeventListener is not a function」というエラーメッセージが、何が問題かを示しています。
    * 「Learn More」 のリンクがエラー内容についてもっと詳細に説明する MDN のページを指しています。
    * JavaScript のファイルの名前が出ています。このリンクをクリックすると、開発者ツールのデバッガータブで問題のあるファイルが開きます。ハイライトされているエラーの箇所が見えるでしょう。
    * エラーがある行の行番号と、最初の文字が始まる番号が出ています。上の例では 86 行目の 3 文字目です。
3. テキストエディターで 86 行目を見てみましょう。

```js
guessSubmit.addeventListener("click", checkGuess);
```

4. エラーでは、"guessSubmit.addeventListener is not a function" とあり、これは JavaScript インタープリターに呼び出している関数が認識されないという意味です。しばしば、このエラーメッセージは、スペルミスをしたということです。もし正しい綴りがわからなければ、MDN のサイトで使用している機能を調べてみてください。きっと見つかります。いつもはお好みの検索エンジンで「mdn *機能の名前*」と検索してみるのがよいでしょう。今回は代わりに `addEventListener()` のリンクを張っておきます。
5. ページによると、関数の名前を間違えたみたいですね！JavaScript は大文字・小文字を区別しますので、ちょっとでも違うとエラーの原因になることを覚えておきましょう。それでは `addeventListener` を `addEventListener` に修正してエラーを直しましょう。

**メモ:** TypeError: "x" is not a function のリファレンスページで、このエラーに関する詳細な説明が見られます。

### 構文エラーその 2

1. ファイルを保存してブラウザーを更新すると、エラーが消えています。
2. 予想を入力して、予想を入力ボタンを押してみると、...別のエラーが起きています！
 ![](/ja/docs/Learn/JavaScript/First_steps/What_went_wrong/variable-is-null.png)
3. 今回のエラーを見ると、 78 行目で"TypeError: lowOrHi is null"が起きています。

**メモ:** `Null` は「何もない」ことや「値がない」ことを表す特別な値です。つまり `lowOrHi` が宣言されて初期化されているけれど、意味のある値ではない — つまり型も値もないということです。

**メモ:** このエラーは関数内部 (`checkGuess() { ... }` ブロックの中) で発生したため、ページを読み込んだだけでは出てきませんでした。後に続く関数の記事を読み進めていけば分かりますが、内側の関数のスコープは外側の関数のスコープとは異なります。今回のケースでは、 86 行目の `checkGuess()` 関数が実行されるまで実行されず、エラーも発生していませんでした。
4. 78 行目を見てください。以下のコードが書かれています。

```js
lowOrHi.textContent = "今の予想は大きすぎです!";
```

5. この行は `lowOrHi` 定数の `textContent` プロパティに文字列を設定しようとしていますが、`lowOrHi` 定数に適切な値が設定されていないため上手く動きません。`lowOrHi` が使用されている箇所をコードのほかの部分から探してみましょう。最初に見つかるのは 48 行目でしょう。

```js
const lowOrHi = document.querySelector("lowOrHi");
```

6. ここでは、HTML の要素を参照する変数を作ろうとしています。この行の後ろで、値が `null` になっているか確認するため以下のコードを直後の 49 行目に追加します。

```js
console.log(lowOrHi);
```

**メモ:** `console.log()` は値をコンソールに出力する、デバッグするときにとても便利な関数です。これで 48 行目で `lowOrHi` にセットしたはずの値がコンソールに出力されるでしょう。
7. ファイルを保存して再度ブラウザーで読み込みます。そして `console.log()` の結果をコンソールで見てみましょう。
 ![](/ja/docs/Learn/JavaScript/First_steps/What_went_wrong/console-log-output.png)わかりましたね。`lowOrHi` の値は `null` でした。これで問題が 48 行目にあることがわかりました。
8. それでは何が問題となり得るか考えてみましょう。 48 行目では要素への参照を CSS セレクターを使用して取得する `document.querySelector()` メソッドが使用されています。ファイルの少し上のほうにある、問題となる`<p>` 要素を見てみましょう。

```js
<p class="lowOrHi"></p>
```

9. ここではクラスセレクターが必要です。クラスセレクターはドット (`.`) で始まりますが、 48 行目で `querySelector()` メソッドに渡された文字列にはドットがありません。これが問題でしょう！ 48 行目の `lowOrHi` を `.lowOrHi` に変更してみてください。
10. ファイルを保存して再度読み込むと、`console.log()` の文は求めていた `<p>` 要素を表示しています。何とか次のエラーを潰すことができました！`console.log()` の行は削除してもいいですし、後で使うために残しておいても大丈夫です。

**メモ:** TypeError: "x" is (not) "y" のリファレンスページで、このエラーに関する詳細な説明が見られます。

### 構文エラーその 3

1. さて、もう一度ゲームをプレイしてみましょう。ゲームは問題なく動いているようです。正解するか、残りの予想回数がなくなって、ゲームが終わるまでは...。
2. ここで、またゲームが止まってしまいました。最初のエラーと同じく "TypeError: resetButton.addeventListener is not a function" というエラーです！しかし、今回は 94 行目から発生していると表示されています。
3. 94 行目を見ると、同じ間違いを犯したことがわかります。もう一度 `addeventListener` を `.addEventListener` に直してください。
論理エラー
-----

今回はゲームは上手く動いているようです。しかし、何度か動かしていると、予想すべき「ランダムな」数字が常に 1 であることに気づくでしょう。これはあまりやりたくないゲームですね！

これはゲームのロジックに間違いなく問題があります。ゲームはエラーとはなっていませんが、正しく動いてはいません。

1. `randomNumber` 変数にランダムな数値が最初にセットされる場所を検索してみましょう。ゲームの開始で推測するランダムな数字を保存しようとしているのは 44 行目のあたりです。

```js
let randomNumber = Math.floor(Math.random()) + 1;
```

2. そして、それぞれのゲームの合間に次のランダムな数字を設定しているのは 113 行目のあたりです。

```js
randomNumber = Math.floor(Math.random()) + 1;
```

3. これらの行が問題となるかを確認するため、`console.log()` にもう一度登場してもらいましょう。先ほどのそれぞれの行の直下に以下のコードを追加します。

```js
console.log(randomNumber);
```

4. 保存して再度読み込んで、何度かプレイしてみましょう。コンソールに出力される `randomNumber` の値が常に 1 であることに気づきます。
### ロジックを修正する

これを直すには、この行が何をしているのか考えなければなりません。まず `Math.random()` を呼んでいます。これは 0 から 1 までのランダムな実数値を生成します。例えば 0.5675493843 などです。

```js
Math.random();
```

次に `Math.random()` の実行結果を `Math.floor()` に渡して、一番近い整数に切り捨てています。そしてその結果に 1 を加えます。

```js
Math.floor(Math.random()) + 1;
```

0 から 1 のランダムな実数を切り捨てると、結果は常に 0 となり、それに 1 を加えることで常に 1 となります。ランダムな数を切り捨てる前に 100 を乗算しなければなりません。次のコードは 0 から 99 を返すでしょう。

```js
Math.floor(Math.random() \* 100);
```

さらに 1 を加えることで、1 から 100 のランダムな数字を返してくれるようになります。

```js
Math.floor(Math.random() \* 100) + 1;
```

先ほどの 2 行をそれぞれ修正してください。保存して再度読み込むと、思い通りに動くようになっているでしょう！

その他のよくあるエラー
-----------

コードを書いていると、よくあるエラーは他にもあります。このセクションではそれらを紹介してみましょう。

### SyntaxError: missing ; before statement

たいてい、このエラーはコード行のどこかの末尾にセミコロン (;) がないことを意味しています。しかし、時にはもっと難解なこともあります。例えば `checkGuess()` 関数内のこの行を、

```js
let userGuess = Number(guessField.value);
```

以下のように変更してみます。

```js
let userGuess === Number(guessField.value);
```

そうすると、このエラーが吐かれます。違うことをやろうとしているように見えるのでしょう。値を変数に設定する代入演算子 (`=`) と、等値演算子 (`===`) を、これはある値が別の値と同じかどうかを判定して `true` または `false` を返しますが、間違わないようにしてください。

**メモ:** SyntaxError: missing ; before statement のリファレンスページで、このエラーに関する詳細な説明が見られます。

### プログラムが入力の内容に関わらずいつでも勝ちだと言ってくる

これは代入と比較を混同している別の症状でしょう。たとえば、`checkGuess()` 関数内の、この行を

```js
if (userGuess === randomNumber) {
```

以下のように変更してみます。

```js
if (userGuess = randomNumber) {
```

判定で常に `true` が返るようになり、常にプレイヤーが勝ったことになってしまいます。気を付けましょう！

### SyntaxError: missing ) after argument list

これは単純です。大体は関数やメソッドの呼び出しで閉じ括弧を忘れたことを表しています。

**メモ:** SyntaxError: missing ) after argument list のリファレンスページで、このエラーに関する詳細な説明が見られます。

### SyntaxError: missing : after property id

たいてい、このエラーは JavaScript のオブジェクトの書き方が正しくないことに関連しているのですが、

```js
function checkGuess() {
```

上記のコードを以下のように変えても起きるでしょう。

```js
function checkGuess( {
```

この変更でブラウザーは関数の内容を関数の引数として渡しているように勘違いしてしまいます。括弧には気を付けましょう！

### SyntaxError: missing } after function body

これは簡単ですね。たいていの場合、関数や条件ブロックの終わりの閉じ波括弧が抜けていることを表します。`checkGuess()` 関数の最後の閉じ波括弧を消すと発生します。

### SyntaxError: expected expression, got '*string*' または SyntaxError: unterminated string literal

これらのエラーは文字列の始まりもしくは終わりの引用符が抜けていることを表します。最初のエラーは、文字列の始めの引用符の代わりに、ブラウザーが予期しない文字列を見つけた (string には実際に見つけた文字列が入ります) ことを表し、2 つ目のエラーは文字列が引用符で終わっていないことを表します。

どのエラーにも言えることですが、上の例でも見たように、考えてください。エラーが起きた時に、エラーが起きた行の番号をみて、その行にエラーがあるか見てみます。エラーはその行に存在しないこともありますし、上述した理由以外で起きることもあるということを心に留めておいてください。

**メモ:** SyntaxError: Unexpected token と SyntaxError: unterminated string literal のリファレンスページで、これらエラーに関する詳細な説明が見られます。

まとめ
---

やっとここまで来ましたね。簡単な JavaScript プログラムのエラーを見つけ出すための基本が理解できました。コードの間違いを解決するのがいつも簡単とは限りませんが、特に学習の最初の過程では、うまくいかない時にも寝る時間を数時間節約し、多少早く進捗をあげられるでしょう。

関連情報
----

* ここで挙げたもの以外にも多数の種類のエラーがあります。その意味を詳しく説明した資料を作成しています。 JavaScript エラーリファレンスをご覧ください。
* この記事を読んでもまだ直し方がわからないエラーにコードで遭遇した場合は、助けを求めましょう！ MDN Discourse フォーラムの Learning カテゴリー (英語) や MDN Web Docs room (英語) などで聞いてください (訳注: 日本語では Mozilla Japan コミュニティの Slack など)。どんなエラーなのか教えてくれれば、助けてあげられるかもしれません。コードを見せてくれるのもいいですね。
* 前のページ
* Overview: First steps
* 次のページ


テキストの扱い — JavaScript での文字列 - ウェブ開発を学ぶ

テキストの扱い — JavaScript での文字列
==========================

* 前のページ
* Overview: First steps
* 次のページ

次に、文字列に注目しましょう。プログラミングでは、テキストの断片をこう呼びます。この記事では、文字列の作成、文字列内の引用符のエスケープ、文字列の結合など、JavaScript を学ぶ上で実に知っておくべき文字列に関する共通事項をすべて見ていきます。

|  |  |
| --- | --- |
| 前提条件: | 基本的なコンピューターリテラシー、HTML と CSS の基本的な理解、JavaScript とは何かということを理解していること。 |
| 目的: | JavaScript での文字列の基本的な扱いに慣れること。 |

言葉の力
----

言葉はコミュニケーションの大部分を担う、人類にとって、とても大切なものです。ウェブは情報の共有やコミュニケーションができるように設計された大規模な文字ベースの媒体ですので、そこで使用される言葉を操作できると便利です。HTML は意味付けされ、構造化されたテキストを提供し、CSS がきれいに体裁を整える事を可能にし、そして JavaScript には、挨拶用の文章を生成したり、適切なラベルを表示したり、言葉を並べ替えたりといった、文字列を操作するたくさんの機能が含まれています。

このコースのこれまで示したプログラムのほとんどすべてが、何らかの文字列操作を含んでいます。

文字列 — 基本
--------

文字列は一見すると数値と同じように見えますが、少し深く見ていくと、違いに気づくことでしょう。まずは慣らすために基本的なコードをブラウザーの開発者ツールに入力してみましょう。

### 文字列の作成

1. 初めに、次の行を入力してみましょう。

```js
const string = "革命はテレビでは放送されない。";
console.log(string);
```

数値のところでやったのと同じように、変数を宣言して、値を入れて初期化しています。そして値を返しています。ただ違うのは、文字列が引用符で囲まれて書かれていることです。
2. もし引用符で囲わななかったり、どちらか一方を書き忘れたりすると、エラーになります。

```js
const badString = これはテストです;
const badString = 'これはテストです;
const badString = これはテストです';
```

これらの行は動作しません。引用符で文字を囲わなければ、変数名や、プロパティ名や、予約語などと解釈されてしまうためです。もしブラウザーが引用符を見つけられないと、エラーとなります（たとえば "missing; before statement" [文の前に、セミコロンが見つかりません] のようなエラーです）。2 行目の例のように、ブラウザーが引用符を見つけても、文字列の終わりが示されていなければ、これもエラーとなります ("unterminated string literal" [文字列リテラルの終わりがありません] というエラーです)。このようなエラーがプログラムで起きたら、全ての文字列について、引用符の付け忘れがないかを確認してください。
3. 続くコードは先ほど変数を `string` という名前で宣言していれば、動くでしょう。試してみましょう。

```js
const badString = string;
console.log(badString);
```

`badString` という変数に `string` という変数の値が設定されたことでしょう。
### 単一引用符と二重引用符

1. JavaScript では、文字列を囲む引用符として、単一引用符と二重引用符を使用することができます。以下のどちらの例も正しく動きます。

```js
const sgl = '単一引用符';
const dbl = "二重引用符";
console.log(sgl);
console.log(dbl);
```

2. どちらを使ってもほとんど違いはありません。どちらを使うかは好みの問題ですが、どちらを使うかは統一するべきでしょう。両方を同時に使うと混乱してしまいます、特に同じ文字列に二種類の引用符を使ってしまうときなど！次の行はエラーです。

```js
const badQuotes = 'いったい何なんだ？";
```

3. ブラウザーは上の文字列が閉じていないと認識します。なぜなら、文字列を囲うのに使用していない引用符はその文字列の中に含めることができるからです。たとえば次の例は問題ありません。

```js
const sglDbl = 'Would you eat a "fish supper"?';
const dblSgl = "I'm feeling blue.";
console.log(sglDbl);
console.log(dblSgl);
```

4. ただし、文字列の中に、囲んでいるのと同じ種類の引用符を含めることはできません。以下の例は文字列の終わりがわからないので、ブラウザーを混乱させてしまいます。

```js
const bigmouth = 'I've got no right to take my place…';
```

それでは同じ種類の引用符を含めるにはどのようにすればよいでしょうか。
### 文字列のエスケープ

先ほどのコード行を直すには、問題となっている引用符をエスケープする必要があります。文字のエスケープとは、その文字が、コードではなく、文字列の一部であるとブラウザーに認識させる書き方です。JavaScript ではバックスラッシュ ( \ [環境によっては円マーク (￥)]) を文字の前におくことでエスケープすることができます。

```js
const bigmouth = 'I\'ve got no right to take my place…';
console.log(bigmouth);
```

これでうまく動きます。 同じ方法で他の文字をエスケープする (例えば `\"`) ことができ、それ以外にも特別なコードがあります。詳細はエスケープシーケンスを見てください。

文字列の連結
------

連結とは単に「結合する」という意味です。JavaScript で文字列を結合するには、*テンプレートリテラル* と呼ばれる異なる形の文字列を使用することができます。

テンプレートリテラルは通常の文字列と同じように見えますが、単一または二重引用符 (`'` または `"`) の代わりに、バックティック文字 (```) を使用します。

```js
const greeting = `Hello`;
```

これは通常の文字列と同じように動作しますが、`${ }` 文字の中に変数を記述することができ、その変数の値が結果に挿入されます。

```js
const name = "Chris";
const greeting = `Hello, ${name}`;
console.log(greeting); // "Hello, Chris"
```

同じ手法を使用して、2 つの変数を結合することができます。

```js
const one = "Hello, ";
const two = "how are you?";
const joined = `${one}${two}`;
console.log(joined); // "Hello, how are you?"
```

### コンテキストでの連結

実際に使用されている連結を見てみましょう。

```html
<button>押してみて！</button>
```

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

function greet() {
  const name = prompt("あなたの名前は?");
  alert(`こんにちは ${name} さん、はじめまして！`);
}

button.addEventListener("click", greet);
```

ここでは `window.prompt()` 関数を使用して、テキストを入力できるポップアップダイアログを表示し、ユーザによって入力された文字列を変数へ、この場合は `name` 変数へ格納しています。そして、`window.alert()` 関数を使用して、一般的な挨拶メッセージに名前を挿入した文字列が入った別のポップアップが表示されます。

### "+" を用いた結合

`+` 演算子を使用して文字列を連結することもできます。

```js
const greeting = "Hello";
const name = "Chris";
console.log(greeting + ", " + name); // "Hello, Chris"
```

しかし、通常、テンプレートリテラルを使用すると、より読み取り可能なコードが得られます。

```js
const greeting = "Hello";
const name = "Chris";
console.log(`${greeting}, ${name}`); // "Hello, Chris"
```

数値と文字列
------

では、文字列と数字を組み合わせるとどうなるのでしょうか。コンソールで試してみましょう。

```js
const name = "フロント ";
const number = 242;
console.log(`${name}${number}`); // "フロント 242"
```

エラーが起きると予想したかもしれませんが、普通に動作します。文字列を数値として表すのには意味がありませんが、数値を文字で表すのはわかりますね。つまりブラウザーはどうやら、数値を文字列に変換し、2 つの文字列としてから結合しているようです。

文字列に変換したいがそれ以外は変更しない数値変数、または数値に変換したいがそれ以外は変更しない文字列変数がある場合、以下の 2 つの構文を使用することができます。

* `Number()` 関数は渡されたものすべてを数値に変換します。次の例を実行してみましょう。

```js
const myString = "123";
const myNum = Number(myString);
console.log(typeof myNum);
```

* 反対に全ての数値は `toString()` という文字列に変換するメソッドを持っています。

```js
const myNum2 = 123;
const myString2 = myNum2.toString();
console.log(typeof myString2);
```

この生成方法は状況によってはとても便利です。例えば、ユーザがフォームのテキストフィールドに数字を入力した場合、入力された値は文字列です。しかし、その数字を使って計算したい場合、数値にしなければなりません。そんな時は `Number()` に任せましょう。これは実際に数字当てゲームの 59 行目で使用した方法です。

文字列内に式を含める
----------

単純な変数と同様に、JavaScript の式をテンプレートリテラルに含めることができ、その結果も結果に含まれます。

```js
const song = "Fight the Youth";
const score = 9;
const highestScore = 10;
const output = `I like the song ${song}. I gave it a score of ${
 (score / highestScore) \* 100
}%.`;
console.log(output); // "I like the song Fight the Youth. I gave it a score of 90%."
```

複数行の文字列
-------

テンプレートリテラルは、ソースコードの改行を尊重するので、次のように複数行にまたがる文字列を書くことができます。

```js
const output = `I like the song.
I gave it a score of 90%.`;
console.log(output);

/\*
I like the song.
I gave it a score of 90%.
\*/
```

通常の文字列を使用して同等の出力をするためには、文字列の中に改行文字 (`\n`) を記載する必要があります。

```js
const output = "I like the song.\nI gave it a score of 90%.";
console.log(output);

/\*
I like the song.
I gave it a score of 90%.
\*/
```

さらなる例と高度な機能の詳細については、テンプレートリテラルのリファレンスページを参照してください。

結論
--

ここまでが JavaScript での文字列の基礎になります。次の記事では、JavaScript で使える文字列操作の組み込み関数と、それを使って思い通りの形に文字列を変換する方法を、その基礎の上に建てていきましょう。

* 前のページ
* Overview: First steps
* 次のページ


JavaScriptでの基本演算 — 数値と演算子 - ウェブ開発を学ぶ

JavaScriptでの基本演算 — 数値と演算子
=========================

* 前のページ
* Overview: First steps
* 次のページ

今回は JavaScript での数学的処理についてです。我々の命令を実行するために上手く数値を操作するのにどのように 演算子 や、その他の機能を使用できるのかを見ていきましょう。

| 前提条件: | 基本的なコンピューターの知識、HTML と CSS の基本についての理解、JavaScript が何かが分かっていること。 |
| --- | --- |
| 目的: | JavaScript での基礎的な数値処理に慣れる。 |

みんな数学が大好き
---------

まあ、みんなではないですね。好きな人もいれば、九九や長い数字の割り算が出てきてから嫌いになってしまった人もいるでしょう。どちらでもない人も。けれど、数学が生活に必要なものであるということは、否定することは出来ません。特に JavaScript のプログラミングを学習しているのなら、なおさらです。数値データを処理したり、計算をしたりすることが多いので、JavaScript に数学的な関数が十分にそろっていることは、驚くことではありません。

この記事ではまず知っておくべき基礎的なものに絞って見ていきます。

### 数値の種類

プログラミングをしていると、慣れ親しんだ普通の数値ですら難しいと思えるかもしれません。数値と言ってもいくつか種類があり、それぞれ名前を付けて区別しています。

* **整数** ( integer ) とは 10、400、-5 といった数値のことです。
* **浮動小数点数** ( float ) とは小数以下の数と小数桁を持つ 12.5 や 56.7786543 といった数値のことです。
* **倍精度浮動小数点数** ( double ) は浮動小数点数の特殊な型であり、通常の浮動小数点数よりも大きな精度を持ちます (つまりより大きい桁数まで精度を保つことを意味します)。

さらに通常とは異なる数値表現も使います！今まで出てきた数値は 10 を基数 (0 ～ 9 を 1 つの桁として扱う) とした十進数でしたが、他にも以下のようなものがあります。

* **二進数** — 0 と 1 だけで表現される、コンピューターの最も低レベルな言語です。
* **八進数** — 8 を基数として、1 桁を 0 ～ 7 で表します。
* **十六進数** — 16 を基数として、1 桁を 0 ～ 9、a ～ f で表します。もしかしたら CSS の色を設定するときに見たかもしれませんね。

\*\*脳みそが溶けそうだと思う前に、少し待ってください！\*\*まず、この講座では十進数しか扱いません。それに「もしかすれば」ですが、他の数値表現について考える機会は訪れないということだってあり得ます。

さらにちょっといいことを教えましょう。いくつかの他のプログラミング言語とは違い、JavaScript には数値(整数と小数の両方)を表すデータ型が一つしかありません。わかりますか？`Number (数値)` で、これは整数と小数の両方です。これは JavaScript でどんな型の数値を扱おうとも、それらを全く同じように扱うことが可能だということを意味します。

**メモ:** 実際に、JavaScript には 2 つ目の数値型であるBigInt があり、これはとても大きな整数に使います。しかしこのコースの目的としては、`Number` の値だけに関心を持つことにします。

### すべてが「Number」に見えるよね

書き方の復習を兼ねてちょっと数字で遊んでみましょう。以下に示すコマンドを開発者ツールの JavaScript コンソール入力してみましょう。もちろんこのページに埋め込みのコンソールを使っても構いません。

1. まず、変数を 2 つ宣言して、それぞれ整数と浮動小数点数で初期化してみましょう。そして、変数の名前を入力して、期待通りに値が入っていることを確認してみましょう。

```js
var myInt = 5;
var myFloat = 6.667;
myInt;
myFloat;
```

2. 数値にはクォーテーションマークが不要です。次に進む前にもう少し変数の宣言と初期化をしてみてください。
3. さて、それでは上で入力した 2 つの変数が同じデータ型であるか確認してみましょう。JavaScript では、`typeof` という演算子を使用することで、データ型を確認することができます。次の 2 行を入力してみましょう。

```js
typeof myInt;
typeof myFloat;
```

どちらの変数についても `"number"` という文字が戻ってきましたね。もし、別々の数値型が存在しているとすれば、別々に処理しなければならないので、そう考えるととても簡単に思えますよね！
### 便利な Number メソッド

`Number` オブジェクトは、あなたが JavaScript を使う時すべての基本的な数値を表現するインスタンスですが、その中には、数値を操作するための沢山の便利なメソッドがあります。この記事では、簡単な紹介と基本的な要点だけまとめたいので、詳しくは割愛しますが、この段落を何回か読んだら、オブジェクト参照ページに行って、どんなメソッドが使えるのかを勉強するのが良いと思います。

例えば、数値を固定の桁数に丸めるには `toFixed()` メソッドを使用します。ブラウザーのコンソールに次の行を入力します。

```js
let lotsOfDecimal = 1.766584958675746364;
lotsOfDecimal;
let twoDecimalPlaces = lotsOfDecimal.toFixed(2);
twoDecimalPlaces;
```

### 数値データ型への変換

たまに、文字列型として格納されている数字で計算ができなくなってしまうことがあります。これは、データがフォーム入力に入力され、input タイプが text である場合によく起こります。この問題を解決する方法があります - 文字列の値を `Number()` コンストラクタに渡して、同じ値の数値バージョンを返します。

例えば、これらの命令をコンソールに入力してみてください。

```js
let myNumber = "74";
myNumber + 3;
```

答えは 743 です。77 ではありません。 なぜなら `myNumber` は string として定義されているからです。以下の命令で確認することができます。

```js
typeof myNumber;
```

これは以下のようにして修正することができます。

```js
Number(myNumber) + 3;
```

算術演算子
-----

算術演算子は JavaScript で計算をするのに使用する最も基本的な演算子です。

| 演算子 | 名前 | 目的 | 例 |
| --- | --- | --- | --- |
| `+` | 加算 | 左項と右項を足す。 | `6 + 9` |
| `-` | 減算 | 左項より右項の数を引く。 | `20 - 15` |
| `*` | 乗算 | 左項と右項を掛ける。 | `3 * 7` |
| `/` | 除算 | 左項の数値を右項で割る。 | `10 / 5` |
| `%` | 剰余 (モジューロともいう) | 左項を右項で割った余りを求める。 | `8% 3` (8 を 3 で割ったとき、商 2 余り 2 の ２ ですね) |
| `**` | 指数 | `基数`を`指数`の累乗にします。つまり、`指数`の回数だけ`基数`の数自身を乗算します。EcmaScript 2016 で最初に導入されました。 | `5 ** 2` ( `25` を返します。その値は `5 * 5` と同じですね) |

**メモ:** 演算子 (オペレーター) に必要とされる数のことをオペランドと呼ぶことがあります。

**メモ:** 指数が古い `Math.pow()` メソッドを使って表現されているのを見ることがあるかもしれませんが、それはとてもよく似た働きをします。たとえば、`Math.pow(7, 3)`では、`7` が基底で `3` が指数であるため、式の結果は `343` になります。`Math.pow(7, 3)` は `7**3` と同じです。

たぶん基本的な数学を教える必要はないでしょうが、ここに出てくる文法を理解しているかをテストしたいと思います。書き方を覚えるため、以下に示す例を開発者ツールの JavaScript コンソールに入力してみましょう。

1. まずは次のような簡単な例を自分で試してみてください。

```js
10 + 7;
9 \* 8;
60 % 3;
```

2. そして、変数を宣言して初期化し、数を変数に格納します。それから変数を使って計算してみましょう。変数は計算するにあたり、保持している値がそこにあるかのように使えます。例えば次の通り。

```js
let num1 = 10;
let num2 = 50;
9 \* num1;
num1 \*\* 3;
num2 / num1;
```

3. それではさらに難しい計算式を入力してみましょう。

```js
5 + 10 \* 3;
(num2 % 9) \* num1;
num2 + num1 / 8 + 2;
```

最後の例の中に予想した結果と違う答えがありませんでしたか。次の章でなぜそうなったかを説明してみましょう。

### 演算子の優先順位

先ほどの計算式の一番最後の例を見てみましょう。`num2` に 50、`num1` に 10 が格納されているものとします。(最初はそうでしたよね。)

```js
num2 + num1 / 8 + 2;
```

ある人は、先に「50 + 10 = 60」と「8 + 2 = 10」を先に計算して、その後で「60 ÷ 10 = 6」となるように計算するかもしれません。

けれどもブラウザーは「10 ÷ 8 = 1.25」を先に計算してから「50 + 1.25 + 2 = 53.25」を計算します。

どうしてこうなるのかといえば、**演算子には優先順位がある**からです。ある演算子は (プログラムの*式*によっては) 他の演算子よりも先に実行されます。JavaScript の演算子の優先順位は算数の授業で教わったものと同じです。つまり、乗算と除算は常に最初に行われ、それから加算と減算が実行されます(通常の計算は常に左から右に評価されます)。

もし、演算子の優先順位を変更したいならば、先に実行したい部分を括弧 (`()`) を使って囲みます。もし先ほどの例で 6 が答えになるようにしたいなら次のようにします。

```js
(num2 + num1) / (8 + 2);
```

実際に実行し、結果を見てみてください。

**メモ:** JavaScript の演算子とその優先順位については式と演算子で確認することができます。

インクリメント演算子とデクリメント演算子
--------------------

たまに、繰り返し値を足したり引いたりしたいときがあるでしょう。そんなときに便利なのがインクリメント演算子 (`++`) とデクリメント演算子 (`--`) です。もう既に、JavaScript への最初のダイブ (en-US)に出てくる「数字当てゲーム」で、ユーザーの残り予想回数を求めるために使用する `guessCount` 変数に 1 を加えるのに `++` を使用しましたね。

```js
guessCount++;
```

**メモ:** これらの演算子は、このコースの後で学ぶ繰り返し処理でよく使われます。例えば、価格の一覧があって、それに対して掛かる税金を各要素に足していきたいとします。恐らく繰り返し処理を使用して、それぞれの価格に対して必要な計算をすることになるでしょう。そのときに、次の値に移動するためインクリメント演算子を使用します。どのように行うかを説明する簡単な例をご用意しました。— インクリメント演算子に興味を持ったらライブで実行、およびソースコードの閲覧をしてみてください。繰り返しについては、このコースの後で詳細を見てみます。

それでは、コンソールで試してみましょう。ただし、その前に注意点です。この演算子は数値には直接使用できません。変に思えるかもしれませんが、これは対象の値そのものに作用するわけではなく、変数に対して新しい値を代入するのです。次の例はエラーになります。

```js
3++;
```

既に存在する値に対してのみインクリメントすることができます。

```js
let num1 = 4;
num1++;
```

また変なことが起きましたね！上のコードを実行したとき「4」がコンソールに表示されました。これはブラウザーが現在の値を先に返して、その後にインクリメントを実行したためです。もう一度変数を入力してみると、変数がインクリメントされていることがわかります。

```js
num1;
```

それは `--` 演算子についても同様です。以下のコードも試してみてください。

```js
var num2 = 6;
num2--;
num2;
```

**メモ:** 変数の前に演算子を置くことで、ブラウザーにインクリメントまたはデクリメントを先にさせてから値を戻すようにすることもできます。上記の例に戻って今度は `++num1` や `--num2` のように入力してみてください。

代入演算子
-----

代入演算子は変数に値を代入します。すでに一番基本的な `=` 演算子を何度も使用しています。この演算子は単に左辺に記述された値を右辺に代入します。

```js
let x = 3; // x には 3 が入る
let y = 4; // y には 4 が入る
x = y; // x には y と同じ値:4 が入る
```

ただし、コードを簡潔に効率よく書くための、もっと複雑な方法が用意されています。よく見かけるものを以下に示します。

| 演算子 | 名前 | 目的 | 例 | 同様のコード |
| --- | --- | --- | --- | --- |
| `+=` | 加算代入 | 右辺の値を左辺の変数値に加算してから、新しい値を返します | `x += 4;` | `x = x + 4;` |
| `-=` | 減算代入 | 右辺の値を左辺の変数値より減算してから、新しい値を返します | `x -= 3;` | `x = x - 3;` |
| `*=` | 乗算代入 | 左辺の変数値に右辺の値を乗算してから、新しい値を返します | `x *= 3;` | `x = x * 3;` |
| `/=` | 除算代入 | 左辺の変数値を右辺の値で除算してから、新しい値を返します | `x /= 5;` | `x = x / 5;` |

どのように動いているか理解するため、コンソールに上記の例をいくつか入力してみましょう。どの例も、2 行目を入力する前にコードがどのようになるかを予想してから入力しましょう。

ちなみに、どの演算子も右辺には自由に変数を置くことができます。例えば以下のように。

```js
let x = 3; // x には 3 が入る
let y = 4; // y には 4 が入る
x \*= y; // x は 12 になる
```

**メモ:** もっとたくさんの代入演算子がありますが、とりあえず今は基本的なものだけ知っておけばよいでしょう。

アクティブラーニング: Canvas のボックスのサイズを変更する
---------------------------------

練習として、数値と演算子を使用してボックスのサイズを変更してみましょう。ブラウザーの Canvas API を使用してボックスを描きます。どうやって描くかについて気にする必要はありません。今は計算に集中しましょう。ボックスの幅と高さ (ピクセル単位で) 変数 `x` と `y` で宣言しています。最初は 50 になっています。

**新しいウィンドウで開く**

上の編集可能なコードには、変更すべき 2 つの行にコメントが書かれています。その行を適切な演算子および値を用いて変更し、拡大縮小させてください。それではやってみましょう。

* ボックスの幅を 50px としたまま x の値を求める行を変更してください。ただし、50 を 43 と 7、算術演算子を一つ使って演算によって求めてください。
* ボックスの高さを 75px になるよう y の値を求める行を変更してください。ただし、75 を 25 と 3、算術演算子を一つ使用して演算によって求めてください。
* ボックスの幅を 250px になるように x の値を求める行を変更してください。ただし、250 は 2 つの数値と、剰余演算子を使用して演算によって求めてください。
* ボックスの高さを 150px になるように y の値を求める行を変更してください。ただし 150 は 3 つの数値と減算演算子および除算演算子を使用して演算によって求めてください。
* ボックスの幅が 200px になるように x の値を求める行を変更してください。ただし 200 は 4 と代入演算子を一つ使用して演算によって求めてください。
* ボックスの高さが 200px になるように y の値を求める行を変更してください。ただし 200 は 50 と 3 と乗算演算子、加算演算子を使用して求めてください。

コードを完全に壊してしまっても大丈夫です。いつでもリセットボタンを押すことで何度でも最初から実行できます。上の問題に全問正解したら、もう少し遊んでみてもいいですし、自分で問題を作ってみてもいいですね。

比較演算子
-----

ときには、true または false を判定し、その結果により動作を変更したいと思う時があるでしょう。そのようなことをするために**比較演算子**を使用します。

| 演算子 | 名前 | 目的 | 例 |
| --- | --- | --- | --- |
| `===` | 厳密な等価 | 右辺と左辺が厳密に同一の値であるかを判定します | `5 === 2 + 4` |
| `!==` | 厳密な不等 | 右辺と左辺が厳密に同一の値**ではない**ことを判定します | `5 !== 2 + 3` |
| `<` | 小なり | 左辺の値が右辺の値より小さいこととを判定します | `10 < 6` |
| `>` | 大なり | 左辺の値が右辺の値より大きいことを判定します | `10 > 20` |
| `<=` | 以下なり | 左辺の値が右辺の値以下であることを判定します | `3 <= 2` |
| `>=` | 以上なり | 左辺の値が右辺の値以上であることを判定します | `5 >= 4` |

**メモ:** もしかしたら `==` や `!=` といった演算子を同値かどうかの判定に使用する人を見かけることがあるかもしれません。これらも JavaScript の有効な演算子ですが、`===` や `!==` とは異なります。前者のバージョンは値が同様であるかを判定しますが、データ型が同様かは判定しません。後者は厳格なバージョンで値とデータ型の両方を判定します。厳格なバージョンはエラーとなることが少ないため後者を使用することをお勧めします。

もし、これらの値をコンソールに入力したら、すべて `true` または `false` の値を返します。これは前回の記事で言及した、真偽値です。真偽値はとても便利です。コードで判断をすることを可能にしてくれます。また選択肢を選ぶときには毎回使うことになるでしょう。例えば以下のような場合に。

* 機能が使用可能かどうかに応じてボタンに表示するテキストを変更する
* 負けた時にゲームオーバー、勝った時に勝利のメッセージを表示する
* 時候のあいさつを時期に応じて表示する
* 選択されたズームレベルに応じて地図を拡大する

後の記事にて、条件文でどのようにロジックをコーディングするのかを見ていきます。とりあえずの簡易な例で見てみましょう。

```html
<button>起動する</button>
<p>マシンは停止中です。</p>
```

```js
const btn = document.querySelector("button");
const txt = document.querySelector("p");

btn.addEventListener("click", updateBtn);

function updateBtn() {
  if (btn.textContent === "起動する") {
    btn.textContent = "停止する";
    txt.textContent = "マシンが起動しました！";
  } else {
    btn.textContent = "起動する";
    txt.textContent = "マシンは停止中です。";
  }
}
```

**新しいウィンドウで開く**

等価演算子が `updateBtn()` 関数の中で使用されていることがわかりますね。今回の場合は数値が同じ値かを判定するためには使用していません。ボタンの内容として設定されている文字列が、特定の文字列であるかどうかを比較しています。ただし、原理的には同じ働きです。もしボタンに「起動する」と書かれていれば、押されたときにボタンのラベルが「停止する」に代わります。もしボタンに「停止する」と書かれていれば、再度入れ替わって元に戻ります。

**メモ:** 2 つの状態を行き来するこのような操作を一般的に**トグル**といいます。スイッチの ON/OFF のように、ある状態がもう一つの状態にトグル (切り替え) するといいます。

スキルをテストしよう!
-----------

この記事の終わりまで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を取得したかのテストを見ることができます — Test your skills: Math を見てください。

まとめ
---

この記事では、JavaScript の数値処理で知っておくべき基礎的なことを学びました。JavaScript を学習する間、今後も繰り返し数値を扱うことになるので、しっかりと復習しておきましょう。数学が好きではなくとも、この章はとても短いので安心して (復習して) ください。

次の章では文字列と、文字列を JavaScript で操作する方法について見ていきます。

**メモ:** もし数学が好きで、JavaScript にどう実装されているかをもっと知りたいのであれば、MDN の JavaScript のメインの章に詳細がたくさん載っています。まずは数値と日付や式と演算子辺りの記事から読むのがいいでしょう。

* 前のページ
* Overview: First steps
* 次のページ


バカ話ジェネレーター - ウェブ開発を学ぶ

バカ話ジェネレーター
==========

* 前のページ
* Overview: First steps

この評価試験では、このモジュールを通して身に付けた知識を生かして、ランダムなバカ話を生成する楽しいアプリを作ります。楽しんでください！

| 前提条件: | この評価試験を試す前に、このモジュール内のすべての記事を一通り作業しておくべきです。 |
| --- | --- |
| 目的: | JavaScript の基礎である、変数、数値、演算子、文字列、配列などの理解をテストする。 |

開始地点
----

評価試験を開始するには...

* GitHub からサンプル用の HTML ファイルを取ってきて自分のコンピュータの新しいディレクトリーに `index.html` という名前で保存します。ここには見た目をきれいにするため、CSS も含まれています。
* この生テキストを含むページに移動してどこか別のブラウザータブで開いたままにしておきます。後で必要となります。

**メモ:** 上記の手順に代わって、JSBin や Thimble のようなサイトを使って評価試験を実施できます。HTML、CSS、JavaScript をオンラインエディターにペーストできます。使っているオンラインエディターが独立した JavaScript パネルを持たない場合、HTML ページ内の `<script>` 要素内に書いても問題ありません。

プロジェクトの要点
---------

HTML および CSS と少しのテキストと JavaScript 関数がありますね。JavaScript を必要なだけ書いて、下記のような動作をするプログラムを書きましょう。

* "Generate random story" ボタンが押された時にバカな話を生成する。
* バカな話を生成するボタンが押される前に "Enter custom name" のテキストフィールドに名前が入力されていた場合には、既定の "Bob" という名前を入力された名前に置き換える。
* バカな話を生成するボタンが押される前に UK のラジオボタンがチェックされていた場合のみ、既定の US (米国) の重さと気温を UK (英国) の同等な単位に変換する。
* ボタンが再度 (何度でも) 押されたら、別のランダムなバカ話を生成する。

下記のスクリーンショットは完成したプログラムが出力する例を表しています:

![](/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator/assessment-1.png)

これ以上のアイデアを与えるには完成プログラムの例を見てください (ソースコードは覗かないで！)

完成させるステップ
---------

以下の項目が達成すべきリストです。

基本的なセットアップ

1. `index.html` ファイルと同じディレクトリーに `main.js` を作ります。
2. `<script>` 要素を使用して、HTML ファイルに `main.js` への参照を外部 JavaScript として適用します。`<script>` 要素は `</body>` タグの直前に配置します。

最初の変数と関数

1. 先ほどのテキストファイル内の "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" という見出しの直後にあるコードをコピーして `main.js` の先頭に貼り付けます。これで "Enter custom name" テキストフィールド (`customName`) 、"Generate random story" ボタン (`randomize`) 、HTML の body の下のほうにある `<p>` 要素 (`story`) への参照を保持することができます。さらに `randomValueFromArray()` という、引数として配列を取りその配列からランダムに 1 つの項目を戻り値として返す関数が使えるようになります。
2. 次にテキストファイルの 2 番目のセクションを見てみましょう。"2. RAW TEXT STRINGS" という見出しのところです。このプログラムの入力となる文字列が書かれています。`main.js` の内部で使用できるように、これらの文字列を変数に保持してください。
    1. 先頭の長い長い文字列を `storyText` という変数に格納します。
    2. 3 つセットになっている最初の文字列の組を `insertX` という配列に格納します。
    3. 2 組目の文字列を `insertY` という配列に格納します。
    4. 3 組目の文字列を `insertZ` という配列に格納します。

イベントハンドラーと未完成の関数の配置:

1. テキストファイルに戻ります。
2. "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" という見出しの直後にあるコードをコピーして `main.js` ファイルの最後に貼り付けます。これで、
    * `randomize` 変数へのクリックイベントリスナーが追加され、その変数に紐づくボタンが押された場合に `result()` 関数が実行されるようになります。
    * 部分的に実装されている `result()` 関数の定義が追加されます。この課題の中で、この関数の残りを実装し、正しく動作するようにします。

`result()` 関数の作成

1. `newStory` という変数を作り、`storyText` の値を `newStory` 変数に格納します。これはボタンが押された場合に、毎回新しい話を作り出すために必要となります。もし `storyText` 変数自体に変更を加えてしまうと一度しか面白い話が生成できなくなってしまいます。
2. `xItem`、`yItem`、`zItem` という変数を 3 つ作成し、それぞれ対応する配列で呼び出した `randomValueFromArray()` の戻り値を設定します (それぞれの配列に含まれる文字列がランダムに選ばれます)。例えば、関数を呼び出して `insertX` から一つの文字列を取得するには `randomValueFromArray(insertX)` のように書きます。
3. 次に `newStory` 文字列内の `:insertx:`、`:inserty:`、`:insertz:` という 3 か所のプレースホルダーをそれぞれ `xItem`、`yItem`、`zItem` に格納されている文字列で置き換えます。ここでは適切なメソッドを使用して、`newStory` に対して何度メソッドを呼び出しても `newStory` 自体の値を変えずに置換された文字列が手に入るようにしてください。これでボタンが何度押されても、プレースホルダーの値をランダムなバカ話で置き換えることができます。もう少しヒントを出すと、そのメソッドは見つけた最初の部分文字列だけを置き換えるため、同じ部分文字列を置換するためには 2 回メソッドを呼び出す必要があるでしょう。
4. 最初の `if` ブロックで、`newStory` の文字列内で見つかる 'Bob' という文字列を `name` 変数の値で置換するため、別の文字列置換のメソッド呼び出し追加します。このブロック内では、「もし ( if ) `customName` テキストフィールドに何かが入力されていれば、Bob をその文字列で置き換える」ということを言っています。
5. 次の `if` ブロックの中では、`uk` のラジオボタンが選択されているかどうかを調べています。もし選択されているのなら、重さと温度の単位をポンド・華氏から、ストーン・摂氏に変換したいと思います。そのために必要なことは...
    1. ポンドからストーンへ変換する公式、および、華氏から摂氏へ変換する公式を調べます。
    2. `weight` 変数が宣言されている行内の、300 を ポンドからストーンに変換した値で置き換えます。そして `' stone'` (ストーン) を `Math.round()` の結果に対して、その後ろに結合します。
    3. `temperature` 変数が宣言されている行内の、94 を華氏から摂氏に変換した値で置き換えます。こちらには `' centigrade'` (摂氏～度) という文字を `Math.round()` の結果に対して、後ろに結合します。
    4. 上記 2 つの変数の宣言の直後に、さらにもう 2 つ文字列を置換するコードを書いて、'94 farenheit' を `temperature` 変数の内容に、'300 pounds' を `weight` 変数の内容にそれぞれ置換します。
6. 最後に、関数の下から 2 行目にある、`story` 変数の `textContent` プロパティ(段落を参照している) を、`newStory` 変数の内容で置き換えます。
ヒントと tips
---------

* JavaScript を HTML に適用する以外に、HTML を変更する必要は全くありません。
* もし、JavaScript が HTML に適切に適用されているかどうかを知りたければ、JavaScript ファイルから一時的に全てのコードを削除して、確実に何かが起きるようなコードを追加して、JavaScript ファイルを保存して HTML ファイルを更新してみましょう。次の例は `<html>` 要素の背景色を赤くするコードです。JavaScript が適切に HTML に適用されていれば、ブラウザーのウィンドウが真っ赤になることでしょう。

```js
document.querySelector("html").style.backgroundColor = "red";
```

* Math.round() は JavaScript の組み込みメソッドで、計算結果を整数値に四捨五入します。
* 置き換えなければならない文字列のインスタンスが３つあります。 `replace()` メソッドを複数回繰り返すか、正規表現を使用するかします。具体的には、 `var text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like');` とするとすべての 'love' のインスタンスを 'like' に置き換えます。なお、 String は変化しないことに注意してください。
評価
--

もし特定の組織の元でこのコースを受けているのなら、先生やメンターに出来たものを見せて、評価をお願いしてみましょう。もし自分だけでやっているのなら、この評価試験のスレッドや、Mozilla IRC の #mdn IRC チャンネルに評価をお願いしてみましょう。まずはやってみましょう。カンニングしても得られるものはないですよ！

* 前のページ
* Overview: First steps


JavaScript の最初の一歩 - ウェブ開発を学ぶ

JavaScript の最初の一歩
=================

* 前のページ
* Overview: First steps
* 次のページ

JavaScript の理論や何ができるかを学んだところで、実践的なチュートリアルをガイドすることで、単純な JavaScript プログラムを作成するプロセスがどのようなものなのかを解説します。ここでは単純な「数当てゲーム」を手順を追って作っていきます。

|  |  |
| --- | --- |
| 前提条件: | 基本的なコンピューターリテラシー、 HTML と CSS の基本的な理解、 JavaScript とは何かを理解していること。 |
| 目的: | JavaScript を書く最初の経験をし、少なくとも JavaScript プログラムを書くことの基本的な理解を得ること。 |

ここでは実に明確な目標を設定したいと思います。この記事の終わりまでに JavaScript を習得することや、あなたに依頼するコードをすべて理解することは期待されていません。その代わりに、 JavaScript の機能がどのように連携して動作するのか、 JavaScript を書くことがどのような感じなのか、そのイメージをつかんでもらいたいと思います。この後の記事で、ここで示した機能をすべてさらに詳しく説明しますので、すぐに理解できなくても心配しないでください。

**メモ:** JavaScript の機能として紹介する、関数や繰り返しなどの機能は、ほとんどが他のプログラミング言語にもあります。書き方は異なりますが、概念は大体同じです。

プログラマーのように考える
-------------

プログラミングで一番難しいのは、書き方を覚えることではなく、現実の問題にどう適用するかということです。プログラマーのように考え始める必要があります。それは一般的に、そのプログラムが何をしなければならないかという説明を見て、それを満たすためにコードのどんな機能を用いるかを考え、さらにそれを組み合わせていかなければなりません。

これには努力、プログラミング構文の経験、練習に加え、多少の想像力が必要です。たくさんコードを書けばもっと慣れていくでしょう。たったの 5 分で「プログラマー脳」を開発することは約束できませんが、このコースを通じてプログラマーのように考えるたくさんの機会を提供したいと思います。

まずはそれを念頭に置いてから、この記事で作るプログラムの実例を見てみましょう。さらにその後、具体的な手順に落とし込む方法について学習しましょう。

例: 数当てゲーム
---------

この記事では、以下に示す簡単なゲームを作る方法を紹介します。

さあ、ゲームで遊んでみてください。次に進む前にゲームに慣れておきましょう。

上司から、次のように作るゲームの概要を聞いたところを想像してみてください。

>
> 数字を予想する単純なゲームを作って欲しい。ランダムな 1 から 100 の数字を決めて、プレイヤーに 10 回以内に当ててもらうゲームだ。プレイヤーには予想する都度、正解か間違いかを表示する。もしプレイヤーが間違っていれば、プレイヤーが予想した数字に応じて、大きすぎるか小さすぎるかを表示する。また、プレイヤーの前回の予想がどうだったかも表示する。ゲームはプレイヤーの予想が正しかった場合、もしくは回数の上限に達した場合に終了する。ゲームが終了したら、プレイヤーはもう一度プレイ開始できるようにする。
>
>
>

できるだけプログラマーのように考えると、この概要から最初に行うべきことは、簡潔な実行可能な単位に分割することです。

1. 1 から 100 までの数字をランダムに一つ生成する。
2. プレイヤーの予想した回数を記録する。最初は 1 回から。
3. プレイヤーが数字が何かを予想する方法を用意する。
4. 予想が入力されたら、プレイヤーが以前の予想を見られるように、どこかに記録する。
5. 入力された数字が正しいかどうかを調べる。
6. 入力された数字が正しい場合...
    1. 正解したお祝いのメッセージを表示する。
    2. プレイヤーが次の予想を出来ないようにする。(ゲームがおかしくならないように)
    3. プレイヤーが次のゲームを始められるようなコントロールを表示する。
7. プレイヤーの予想が間違いで、予想回数の上限にはまだ達していない場合...
    1. プレイヤーが間違っていることを表示する。
    2. 次の予想を入力できるようにする。
    3. 予想回数に 1 を加算する。
8. プレイヤーの予想が間違いで、予想回数の上限に達した場合...
    1. プレイヤーにゲームオーバーであることを伝える。
    2. プレイヤーが次の予想を出来ないようにする。(ゲームがおかしくならないように)
    3. プレイヤーが次のゲームを始められるようなコントロールを表示する。
9. ゲームがもう一度始まったら、画面とロジックが完全にリセットされるようにして、1.に戻る。

さあ、先に進みましょう。この手順をどのようにコードにするのか見て、 JavaScript の機能を探求していきましょう。

### 初期設定

チュートリアルを開始するにあたり、自分のコンピューターに number-guessing-game-start.html ファイル（こちらでデモが見られます）をコピーしてください。テキストエディターとブラウザーの両方でそのファイルを開いてください。すると、簡単な見出しと説明の段落、予想を入力するフォームが見えるでしょう。ただし、そのフォームはまだ何もできません。

コードを入力するのはすべて HTML の一番下にある `<script>` 要素の中です。

```html
<script>
 // JavaScript をここに書きます
</script>
```

### データを格納する変数を追加する

始めましょう。まず、`<script>` 要素の中に以下の内容を書いてみてください。

```js
let randomNumber = Math.floor(Math.random() \* 100) + 1;

const guesses = document.querySelector(".guesses");
const lastResult = document.querySelector(".lastResult");
const lowOrHi = document.querySelector(".lowOrHi");

const guessSubmit = document.querySelector(".guessSubmit");
const guessField = document.querySelector(".guessField");

let guessCount = 1;
let resetButton;
```

上記の部分のコードは、プログラムが使用するデータを格納する変数と定数をセットアップしています。

変数とは基本的には値（数字やテキストの文字列など）の名前です。 `let` キーワードに続いて変数の名前を書くことで、変数を作成します。

定数も値に名前を付けるために使用しますが、変数とは異なり、一度設定した値を変更することはできません。この用途では、ユーザーインターフェイスの部品への参照を格納するために定数を使用しています。これらの要素の中のテキストは変わるかもしれませんが、それぞれの定数は常に初期化されたのと同じ HTML 要素を参照しています。定数を作成するには、キーワード `const` の後に定数の名前を続けます。

変数や定数に値を割り当てるには、等号 (`=`) に続けて与えたい値を指定します。

この例では次のことが行われます。

* 最初の変数 (`randomNumber`) には、数学的なアルゴリズムにより計算された 1 から 100 までのランダムな数字が代入されます。
* 最初の 3 つの定数は、それぞれ HTML の結果の段落への参照を格納するために作られており、後のコードで段落に値を挿入するために使用されます（それらは `<div>` 要素の中にあることに注意してください。この要素は、後でゲームを再開するときに、 3 つすべてを選択してリセットするために使用します）。

```html
<div class="resultParas">
  <p class="guesses"></p>
  <p class="lastResult"></p>
  <p class="lowOrHi"></p>
</div>
```

* 次の 2 つの定数にはテキスト入力フォームおよび送信ボタンへの参照が保持され、後で予想の送信をコントロールする際に使用されます。

```html
<label for="guessField">Enter a guess: </label>
<input type="number" id="guessField" class="guessField" />
<input type="submit" value="Submit guess" class="guessSubmit" />
```

* 最後の 2 つの変数は、プレイヤーが予想した回数を記録するため 1 を（プレイヤーが何回予想したかの回数を追跡します）、そしてまだ存在していない（あとで追加する）リセットボタンへの参照を保持します。

**メモ:** 変数や定数についてはこのコースの間、次の記事を始めとして何度も出てきます。

### 関数

次に、以下のコードを先ほどの JavaScript に追加してください。

```js
function checkGuess() {
  alert("I am a placeholder");
}
```

関数は再利用可能なコードのかたまりです。何度も実行することができ、同じコードを書く手間を省けます。これはとても便利です。関数の書き方 (定義の仕方) はいくつかありますが、今回は集中するために、一つの簡単な書き方だけを使用します。ここでは `function` キーワードに続いて関数の名前、括弧 ( `()` )、中括弧 ( `{ }` )が続く書き方で定義しました。中括弧の中に、関数を呼ぶたびに実行されるコードを書きます。

関数を実行したい場合には、関数の名前に続いて括弧を書きます。

それでは試してみましょう。コードを保存してブラウザーを再読み込みしてみてください。開発者ツールの JavaScript コンソールを開いてください。そして次のコードを実行します。

```js
checkGuess();
```

`Return`/`Enter` を押した後で、"ここはプレースホルダです"という警告が表示されましたね。呼び出すと、いつでも警告が表示される関数を定義することができました。

**メモ:** 関数についてもこのコースの後の方で詳しく学びます。

### 演算子

JavaScript で演算子を使用して値の確認をしたり、計算したり、文字を結合したりなど、いろいろなことができます。

コードを保存してブラウザーを再読み込みしてみてください。まだ開いていなければ、開発者ツールの JavaScript コンソールを開いて、表の「例」の列に書いてある通りに入力してみましょう。例を一つ入力したら、その都度 `Return`/`Enter` キーを押してください。結果が表示されるはずです。

まずは算術演算子の例を見てください。

| 演算子 | 名前 | 例 |
| --- | --- | --- |
| `+` | 加算 | `6 + 9` |
| `-` | 減算 | `20 - 15` |
| `*` | 乗算 | `3 * 7` |
| `/` | 除算 | `10 / 5` |

複合代入演算子と呼ばれるもっと短い書き方もあります。すでにある文字列に、さらに文字を追加した結果を返したい場合などに使います。例えば、

```js
let number1 = 1;
number1 += 2;
```

これは次のものと同等です。

```js
let number2 = 1;
number2 = number2 + 2;
```

true/false テスト（例えば条件内 - 下記参照）を実行しているとき、比較演算子を使用します。例えば、

| 演算子 | 名前 | 例 |
| --- | --- | --- |
| `===` | 厳密に等しい (全く同じかどうか) |
```js
5 === 2 + 4 // false
'Chris' === 'Bob' // false
5 === 2 + 3 // true
2 === '2' // false; number versus string
```

 |
| `!==` | 等しくない (違うかどうか) |
```js
5 !== 2 + 4 // true
'Chris' !== 'Bob' // true
5 !== 2 + 3 // false
2 !== '2' // true; number versus string
```

 |
| `<` | 小なり |
```js
6 < 10 // true
20 < 10 // false
```
 |
| `>` | 大なり |
```js
6 > 10 // false
20 > 10 // true
```
 |

### テキスト文字列

文字列はテキストを表すのに使用します。文字列変数はすでに見てきました。以下のコードでは `"I am a placeholder"` が文字列です。

```js
function checkGuess() {
  alert("I am a placeholder");
}
```

文字列は二重引用符 (`"`) または一重引用符 (`'`) を用いて宣言することができますが、単一の文字列宣言の先頭と末尾には同じ形式を使用する必要があります: `"I am a placeholder` " と書くことはできません。

バックスティック(```)を用いて文字列を宣言することもできます。このように宣言された文字列は「テンプレートリテラル」と呼ばれ、いくつかの特別なプロパティがあります。具体的な性質として、文字列の中に他にも変数や発生した式を埋め込むことができます。

```js
const name = "Mahalia";

const greeting = `Hello ${name}`;
```

これは文字列を連結する仕組みを提供します。

### 条件式

先ほどの `checkGuess()` 関数に話を戻します。当然ですが、ただ単にプレースホルダメッセージを出したいわけではありませんよね。この関数にはプレイヤーの予想が正しいかどうかを調べて適切に返事をすることを望みます。

それでは、今の `checkGuess()` 関数を以下のように書き換えてみましょう。

```js
function checkGuess() {
  const userGuess = Number(guessField.value);
  if (guessCount === 1) {
    guesses.textContent = "Previous guesses:";
  }
  guesses.textContent = `${guesses.textContent} ${userGuess}`;

  if (userGuess === randomNumber) {
    lastResult.textContent = "Congratulations! You got it right!";
    lastResult.style.backgroundColor = "green";
    lowOrHi.textContent = "";
    setGameOver();
  } else if (guessCount === 10) {
    lastResult.textContent = "!!!GAME OVER!!!";
    lowOrHi.textContent = "";
    setGameOver();
  } else {
    lastResult.textContent = "Wrong!";
    lastResult.style.backgroundColor = "red";
    if (userGuess < randomNumber) {
      lowOrHi.textContent = "Last guess was too low!";
    } else if (userGuess > randomNumber) {
      lowOrHi.textContent = "Last guess was too high!";
    }
  }

  guessCount++;
  guessField.value = "";
  guessField.focus();
}
```

たくさん書きましたね！各部分に分割して、それぞれの部分を詳細に見て何をしているか説明しましょう。

* 関数の最初の行（上のコードの 2 行目）で、`userGuess` という変数を宣言して、現在のテキストフィールドに入力された値をセットしています。そして、組み込みの `Number()` 関数を呼び出して、テキストフィールドに入力された値が間違いなく数値であることも確認しています。この変数は変更しないので、 `const` を使用して宣言します。
* 次に、初めて条件分岐を伴うコードブロックが出てきます。条件分岐は、条件の判定結果が真 (true) であるかどうかによって、次に実行するコードが変わります。見た目が少しだけ関数に似ていますが、違うものです。条件分岐の最も単純な書き方は `if` キーワードから始まり、括弧が続き、中括弧が続きます。括弧の中には分岐する条件を書きます。条件が `true` となれば、中括弧の中にあるコードが実行されます。条件が `true` にならなければ、中括弧の次のコードまで移動します。今回の条件は `guessCount` 変数が `1` であるかどうかを判定しています。（つまり、プレイヤーの初回の予想かどうかを判定しているのです。）

```js
guessCount === 1;
```

もしそうなら、guesses の段落（`<p>` 要素）の内容を `Previous guesses:` に変更します。違うなら、何もしません。
* 次に、テンプレートリテラルを使用して、現在の `userGuess` 変数の値を空白と共に `guesses` の段落の末尾に追加しています。
* 次の部分には、確認すべきことがいくつかあります。
    + 最初の `if(){ }` は、プレイヤーの予想が、JavaScript のコードの先頭で設定したランダムな数字を格納した `randomNumber` 変数の値と等しいかどうかを調べています。もし等しければ、プレイヤーは正解し勝ちとなるため、祝福のメッセージを素敵な緑色で表示します。さらに、数字の大小を表示する段落をクリアして、後で説明する `setGameOver()` 関数を実行します。
    + 今度は `else if(){ }` という部分で、ひとつ前の条件に続けて条件を書いています。この条件はユーザの最後のターンかどうかを調べています。もし最後の回ならば、プログラムは祝福のメッセージの代わりにゲームオーバーメッセージとする以外は、ひとつ前の部分と同じことをします。
    + このコードに連なる最後のブロック (`else { }`) は、前の二つの条件がどちらも真とならなかった場合にのみ実行されます。(つまり、プレイヤーは間違えてはいるものの、予想回数が残っている場合です。) この場合、プレイヤーに予想が間違っていることを伝え、入力された数字が大きいか小さいかを伝えるため、さらなる条件の確認を行います。
* 最後の 3 行 (26 行目～ 28 行目) は、次の予想の入力を受け取るための準備です。`guessCount` 変数に 1 を加算して、プレイヤーの予想回数を数えます。(`++` はインクリメント演算子で、1 だけインクリメント(増加)します。) そして、入力フォームのテキストフィールドを空にしてからフォーカスを当て、プレイヤーの次の入力に備えます。
### イベント

ここまでで、`checkGuess()` 関数を上手に実装することができました。しかしまだ何も起きません。なぜなら、まだこの関数を呼び出していないからです。出来れば、"予想を入力"のボタンが押されたときに、この関数が呼ばれるようにしたいです。そのためにはイベントを使います。イベントとは、ボタンが押されたり、ページが読み込まれたり、ビデオを再生したりといったブラウザーで起きることで、それに反応してコードを実行させることができます。**イベントリスナー**は特定のイベントを監視し、イベントが発生したことに応答して実行するコードブロックである**イベントハンドラー**を呼び出します。

`checkGuess()` 関数の下に、以下の一文を加えましょう。

```js
guessSubmit.addEventListener("click", checkGuess);
```

`guessSubmit` ボタンに対して、イベントリスナーを追加しました。これは発生したことを知りたいイベントの種類 (この場合は `click`)と、イベントが発生した場合に実行するコード (この場合は `checkGuess()`) の 2 つの入力値 (*引数*と言います) を取る関数です。(`addEventListener()`の中では括弧を書く必要はありません。)

保存して再度コードを読み直してください。今度はきっとある程度まで動くはずです。ただし、まだ問題があります。もし正解したり、予想回数の上限に達してしまった場合には、ゲームが止まってしまうでしょう。なぜなら、ゲームが終わった時に実行されるべき関数 `setGameOver()` をまだ定義していないためです。さあ、足りないコードを書いてチュートリアルの機能を完成させましょう。

### ゲームの機能を完成させる

`setGameOver()` 関数をコードの一番下に追加して、中身を見てみましょう。これを JavaScript の一番下に追加します。

```js
function setGameOver() {
  guessField.disabled = true;
  guessSubmit.disabled = true;
  resetButton = document.createElement("button");
  resetButton.textContent = "Start new game";
  document.body.append(resetButton);
  resetButton.addEventListener("click", resetGame);
}
```

* 最初の 2 行は入力フォームのテキストフィールドとボタンの `disabled` プロパティを `true` に設定することで、入力できないようにしています。ゲーム終了後にユーザーがさらに予想を入力し、ゲームが予期しない動作をすることを防ぐために必要です。
* さらに次の 3 行では、新しい `<button>` 要素を生成し、そのラベルに"`新しいゲームを始める`"という文言を設定し、HTML ページに追加しています。
* 最後の行では、上で生成したボタンがクリックされたときに `resetGame()` という関数が実行されるようにイベントリスナーを設定しています。

この関数も定義しなければなりませんね！もう一度、以下のコードを JavaScript のいちばん下に追加してください。

```js
function resetGame() {
  guessCount = 1;

  const resetParas = document.querySelectorAll(".resultParas p");
  for (const resetPara of resetParas) {
    resetPara.textContent = "";
  }

  resetButton.parentNode.removeChild(resetButton);

  guessField.disabled = false;
  guessSubmit.disabled = false;
  guessField.value = "";
  guessField.focus();

  lastResult.style.backgroundColor = "white";

  randomNumber = Math.floor(Math.random() \* 100) + 1;
}
```

ちょっと長めのこのコードブロックは、プレイヤーが次のゲームができるように、ゲームを起動したときの状態に完全にリセットします。

* `guessCount` に 1 を代入して元に戻します。
* 情報の段落のテキストをすべて空にします。 `<div class="resultParas"></div>` 内のすべての段落を選択し、それぞれをループして `textContent` を `''` （空文字列）に設定します。
* リセットボタンをページから削除します。
* 入力フォームの要素を使用可能にして、新しい予想が入力できるようにテキストフィールドを空にしてフォーカスを設定します。
* 最終結果を表示している `lastResult` 段落の背景色を消去します。
* 同じ数字以外の数字でゲームができるように、新しいランダムな数字を再度生成します。

**ここまでで (単純ではありますが) 動くゲームの完成です。お疲れ様でした!**

この記事では、あと少し説明しなければならない大事な機能が残っています。既に見ているはずですが気づいたでしょうか。

### ループ（繰り返し）

上のコードでもう少し詳しく説明しなければならないのは、 for...of ループです。ループはプログラミングにおいてとても重要な概念です。ある条件に達するまで何度も何度もコードを繰り返し実行することができます。

ブラウザーの開発者ツールの JavaScript コンソール をもう一度開いて次のコードを入力してみましょう。

```js
const fruits = ["apples", "bananas", "cherries"];
for (const fruit of fruits) {
  console.log(fruit);
}
```

どうなりましたか。 `'apples', 'bananas', 'cherries'` の文字列がコンソールに出力されましたね。

これはループのためです。 `const fruits = ['apples', 'bananas', 'cherries'];` の行は配列を作成します。このモジュールの後半で、配列の完全ガイドを読み終えてから作業しますが、とりあえず、配列は項目（この場合は文字列）の集合です。

`for...of` ループは配列でそれぞれの項目を取得し、それに対して JavaScript を実行する方法を提供します。 `for (const fruit of fruits)`という行は次のような意味です。

1. `fruits` の最初の項目を取得する。
2. その項目を変数 `fruit` に設定し、中括弧 `{}` の間のコードを実行する。
3. `fruits` の中の次の項目を取得し、`fruits` の末尾に達するまで 2 を繰り返す。

この場合、中括弧の中のコードは `fruit` をコンソールに書き出しています。

さて、それでは数当てゲームに登場したループを見てみましょう。`resetGame()` 関数に以下の記述がありますね。

```js
const resetParas = document.querySelectorAll(".resultParas p");
for (const resetPara of resetParas) {
  resetPara.textContent = "";
}
```

このコードは `<div class="resultParas">` に含まれるすべての段落を、 `querySelectorAll()` メソッドを使用して取得しています。そしてループを使用してその一つ一つの要素の中身を消去しています。

たとえ `resetPara` が定数であっても、`textContent` のような内部プロパティは変更できることに注意してください。

### オブジェクトについての簡単な説明

オブジェクトについて説明する前に、プログラムに対して最後のちょっとした改良を加えてみましょう。JavaScript の書き出しの方にある `let resetButton;` のすぐ下に、以下の行を追記してファイルを保存します。

```js
guessField.focus();
```

この行はページが読み込まれるとすぐ、 `focus()` メソッドを呼び出して、入力フォームの `<input>` 要素に対して自動的にカーソル (フォーカス) を設定しています。つまり、ページが開いたと同時に、入力フォームを最初にクリックすることなくプレイヤーが予想を入力できるようにしているのです。本当にちょっとしたことですが、ユーザーにゲームで遊ぶためには何をすればよいかの視覚的なヒントを教えてあげることで、使い勝手が向上します。

もう少し詳細に何が起こっているのか分析しましょう。JavaScript では、すべてのものはオブジェクトです。オブジェクトというのは 1 か所に関連する機能をまとめたものです。自分でオブジェクトを作ることもできますが、高度なことなので、このコースの大分後まで出てきません。今は簡単に、これを使うと多くの便利なことができるようになる、ブラウザーに含まれる組み込みオブジェクトについて説明します。

この具体的なケースでは、HTML のテキスト入力フィールドを参照するために、最初に `guessField` 変数を作成しました。以下の行は最上部のあたりの変数定義で見つかります、

```js
const guessField = document.querySelector(".guessField");
```

この参照を得るため、`document` オブジェクトの`querySelector()` メソッドを使用しています。`querySelector()` はある情報 (必要な要素を選択する CSS セレクタ) を受け取ります。

`guessField` に `<input>` 要素の参照が得られたので、これでたくさんのプロパティ（基本的にはオブジェクトの内部に保持されている変数のことですが、中には値を変えられないものもあります）とメソッド（基本的にはオブジェクトの内部に保持されている関数のこと）にアクセスできるようになりました。ようやく input 要素のメソッドの一つである `focus()` メソッドを使ってテキストフィールドにフォーカスを当てられます。

```js
guessField.focus();
```

入力フォームの要素の参照を含まない変数に対しては、`focus()` は使用できません。例えば、`guesses` 変数には `<p>` 要素への参照が入っていますし、`guessCount` には数値が入っています。

### ブラウザーのオブジェクトで遊ぼう

少しブラウザーが持っているオブジェクトで遊んでみましょう。

1. まずブラウザーでプログラムを開いてください
2. 次に開発者ツールを開き、 JavaScript コンソールのタブが開いたのを確認します
3. `guessField` と入力してみてください。するとコンソールに `<input>` 要素を含む変数が表示されます。また、気づいたと思いますが、コンソールは実行中の環境にある変数名を含んだオブジェクト名を自動的に補完しました!
4. さらに下のように入力してみてください。

```js
guessField.value = 2;
```

`value` プロパティは今のテキストフィールドに入力された値を表しています。コマンドを入力したら、テキストフィールドの値が変わりましたね！
5. さらに続けて `guesses` と入力してリターンを押してみてください。コンソールには `<p>` 要素を含む変数が表示されますね。
6. そして次のコードを入力します。

```js
guesses.value;
```

コンソールには `undefined` という文字が返ってきましたね。段落には `value` プロパティがないからです。
7. 段落内のテキストを変えたい場合には、 `textContent` プロパティを使用する必要があります。次のようにしてみてください。

```js
guesses.textContent = "Where is my paragraph?";
```

8. ちょっと遊んでみましょう。下のコードを一つずつ入力してみてください。

```js
guesses.style.backgroundColor = "yellow";
guesses.style.fontSize = "200%";
guesses.style.padding = "10px";
guesses.style.boxShadow = "3px 3px 6px black";
```

ページ内に存在するすべての要素は `style` プロパティを持っていて、そのオブジェクトを介して CSS のインラインスタイルで要素に適用されるすべてのプロパティにアクセスすることができます。これを使うことで、JavaScript から動的に要素の CSS のスタイルを設定できるのです。
ここで一息
-----

これで数当てゲームができました。最後までついて来れましたね！作ったプログラムを動かしてみてください 。（最後のプログラムはこちらでも遊べます。）もし作ったプログラムが動かなければ、ソースコードと見比べてみてください。

* 前のページ
* Overview: First steps
* 次のページ


JavaScript とは - ウェブ開発を学ぶ

JavaScript とは
=============

* Overview: First steps
* 次のページ

MDN 初心者向け JavaScript コースへようこそ！ この最初の記事では、高水準から JavaScript を見ていき、「JavaScript とは何か？」「これを使うと何ができるか？」などの質問に答えます。 JavaScript の用途にきっちりと親しめるようになります。

|  |  |
| --- | --- |
| 前提知識: | 基本的なコンピューターリテラシー、HTML および CSS の基本的な理解。 |
| 到達目標: | JavaScript とは何か、何ができるか、どのようにウェブサイトに適用できるかについて親しむ。 |

高水準の定義
------

 JavaScript はウェブページにて複雑な機能をできるようにするプログラミング言語です — ウェブページが読み込まれるたびに、単にあなたが見ている静的な情報を表示する以上のことをしています — 更新されたコンテンツの定期表示や、インタラクティブな地図や、 2D/3D グラフィックのアニメーションや、ビデオジュークボックスのスクロールなど — たぶん JavaScript が組み込まれています。
 ウェブ技術をケーキだとするとこれは 3 つ目の層で、他の 2 つ (HTML と CSS) は学習エリアの他の部分でもっと詳しく扱ってきました。

![ウェブの標準技術である HTML、CSS、JavaScript の 3 つのレイヤー。](/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript/cake.png)

* HTML はマークアップ言語で、これを使ってウェブコンテンツに構造と意味を与えます。例えば段落や見出しや表を定義したり、ページに画像や動画を入れたりします。
* CSS は HTML コンテンツに適用するスタイリング規則の言語です。例えば背景とフォントの色を設定したり、複数カラムにコンテンツをレイアウトしたりします。
* JavaScript は動的にコンテンツを更新したり、マルチメディアを管理したり、その他多くのことができるスクリプト言語です。（はい、すべてできるわけではないですが、 JavaScript の数行でできることは素晴らしいです。）

この 3 層は素晴らしい構成です。例としてシンプルなテキストラベルを見てみます。HTML を使って構造と意図をマークアップできます。

```html
<p>Player 1: Chris</p>
```

![Player 1: Chris の段落をプレーンテキストで表示](/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript/just-html.png)

次に、 CSS を加えて、見栄えをよくします:

```css
p {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0, 0, 200, 0.6);
  background: rgba(0, 0, 200, 0.3);
  color: rgba(0, 0, 200, 0.6);
  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}
```

![Player 1: Chris のスタイル段落](/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript/html-and-css.png)

最後に、JavaScript を加えて動的なふるまいを実装します:

```js
const para = document.querySelector("p");

para.addEventListener("click", updateName);

function updateName() {
  const name = prompt("名前を入力して下さい");
  para.textContent = `Player 1: ${name}`;
}
```

テキストラベルの最新バージョンをクリックしてみて、何が起きるのか見てみます (このデモは GitHub でも見られます— ソースコードまたはライブ実行を参照してください)。

JavaScript はそれ以上のことができます — もっと詳しく見てみましょう。

実際に何ができるのか
----------

JavaScript は次のことを実現する一般的なプログラミング機能で構成されています。

* 有用な値を変数に格納する。上の例では、ユーザーに新しい名前を問いかけて、`name` と名付けられた変数に入力された新しい名前を格納しています。
* 連なった文字 (プログラミングでは「文字列」と呼ばれます) に対する操作。上の例では「Player 1: 」という文字列と `name` 変数を繋げて「Player 1: Chris」というような新しいラベルを生成しています。
* ウェブページで起きる事柄に対処する。先ほどの例では `click` イベントを使用して、ボタンがクリックされたことを検出し、ラベルを更新するコードを実行しました。
* 他にもたくさんのことができます！

さらに面白いのは、JavaScript からすぐに使えるように構築されている機能です。それは **Application Programming Interface** (**API**) と呼ばれ、JavaScript のコードにさらなる強力な力を与えてくれることでしょう。

 API がなければ難しかったり、不可能であるようなコードを、すぐに使えるブロックのように、開発者がプログラムを作ることを可能にします。
 家を作るときの既製の家具と同じことを、プログラミングでしてくれるのです。自分で設計し、使用する木材を選定し、正しい形で板を切り出して、正しいサイズのネジを見つけて、自分で組み立てるよりも、既に切り出されたボードとネジを使って本棚を組み立てるだけの方がずっと簡単ですよね。

API は大まかに 2 種類に分けられます。

![2 つのカテゴリーの API がある。サードパーティーの API がブラウザーの横に示されており、ブラウザーの API はブラウザーの中に示されている。](/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript/browser.png)

**ブラウザー API** はウェブブラウザーに組み込まれていて、コンピューターを取り巻く環境からデータを取り出したり、複雑で便利なことをしてくれたりします。例えば、

* `DOM (Document Object Model) API` は HTML と CSS の操作を可能とします。HTML を生成し、削除し、変更し、動的にページの見た目を変更することなどが可能です。もし (先ほどの簡単な例で見たように) ページ内でポップアップウィンドウを見たり、新しいコンテンツが表示されたりしたのなら、DOM が使用されていることでしょう。
* `Geolocation API` は地理的な情報を取得します。これは Google マップがあなたの所在地を見つけて地図上にプロットする場合に使用されています。
* `Canvas` と `WebGL` の API は 2D や 3D グラフィックでのアニメーションを可能とします。このウェブ技術を使用してすごいことをやってのける人たちがいます。 Chrome Experiments や webglsamples などのページを見てください。
* 音声と動画の API、たとえば `HTMLMediaElement` や `WebRTC` などは適切な音声・動画をウェブページで再生することや、ウェブカメラの動画を撮って他の人のコンピューターで流すといった、マルチメディアの可能性を示してくれます（我々が作った Snapshot demo を見てみてください）。

**メモ:** 上記の多くは古いブラウザーでは動作しません。試すには Firefox、Chrome、Edge、Opera といった最近のブラウザーを使うとよいでしょう。
 プロダクションコードを提供する (顧客に実際のコードを納品する) 段になったら、クロスブラウザーテストを読んでみるとよいでしょう。

**サードパーティ API** はブラウザーには組み込まれておらず、さらに普通はウェブ上のどこかからそのコードと情報を探さなければなりません。例えば、

* Twitter API を使用すると、ウェブサイトに最新のツイートを表示させることができます。
* Google マップ API や OpenStreetMap API を使用すると、ウェブサイトに専用の地図を埋め込み、付加機能を付けることもできます。

**メモ:** このような API は先進的ですが、このモジュールでは扱いません。詳しく知りたければ クライアントサイド Web API モジュール で扱っています。

ワクワクすることはもっとたくさんあります！ ですが、まだ興奮しすぎないでください。24 時間程度の勉強だけでは、Facebook や Google マップや Instagram は作れません。まずはやらなければならない基本がたくさんあるのです。さあ、先に進みましょう！

JavaScript は何をするのか
------------------

まずは実際にコードを見てみましょう。そしてページで JavaScript を動かすと何が起きるのか見てみましょう。

ブラウザーをウェブページに読み込んだときの話を簡単に説明します（CSS の仕組みの記事で最初に出てきました）。ウェブページをブラウザーで見たとき、実行環境 (ブラウザーのタブ) の中で、コード (HTML、CSS そして JavaScript) が実行されます。これは素材 (コード) を加工して製品 (ウェブページ) を出力する工場のようなものです。

![HTML、CSS、JavaScript のコードが組み合わされ、ページが読み込まれたときにブラウザーのタブに表示されるコンテンツを作成する](/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript/execution.png)

 JavaScript のごく一般的な用途は、(先ほど例示した) Document Object Model API を介して動的に HTML と CSS を変更し、ユーザーインターフェイスを更新することです。
 なお、ウェブ文書上のコードは通常、ページ上に現れる順序で読み込まれて実行されます。
 もし JavaScript が読み込まれ、影響を受ける HTML および CSS が読み込まれる前に実行しようとすると、エラーが発生する可能性があります。
 この回避策については、記事の後半の「スクリプトの読み込み方針」の節でで学習します。

### ブラウザーのセキュリティ

 ブラウザーのそれぞれのタブは、コードを実行するための入れ物を個別に持ちます (この入れ物を技術的用語では「実行環境」と呼びます)。つまり、それぞれのタブ内でコードは完全に分かれて実行されており、あるタブで動いているコードは他のタブや他のウェブサイトのコードに、直接的には干渉できません。これは良いセキュリティ対策です。
 互いに干渉することが出来てしまえば、ウェブの悪党たちは、他のタブで開いているウェブサイトから情報を盗み出したり、もっとひどいことをするためにコードを書き始めることでしょう。

**メモ:** 他のウェブサイトや、タブに安全にデータや実行可能なコードを送る方法はあります。けれども、このコースでは扱わない高度な技術です。

### JavaScript の実行順序

 ブラウザーが JavaScript のブロックを見つけたとき、たいていは先頭から最後に向かって順番に実行されます。
 つまりどの順番で実行されるかということに気を配らなければなりません。
 例えば、最初の例で見た JavaScript のブロックに戻りましょう。

```js
const para = document.querySelector("p");

para.addEventListener("click", updateName);

function updateName() {
  const name = prompt("名前を入力して下さい");
  para.textContent = `Player 1: ${name}`;
}
```

このコードでは文章段落を選択して (1 行目)、イベントリスナーを登録して (3 行目) 段落がクリックされたとき、`updateName()` というコードブロック (5 行目から 8 行目) が実行されるようにしています。`updateName()` というコードブロック (再利用可能なコードブロックで「関数」と呼びます) は、ユーザーに新しい名前を尋ねて、表示内容を変更するため、段落にその名前を挿入します。

 もし、最初の 2 行を入れ替えた場合、動かなくなってしまいます。代わりにブラウザーの開発者コンソールに `TypeError: para is undefined` というエラーが出るでしょう。
 この意味は `para` オブジェクトがまだ存在しないため、イベントリスナーを設定できないということを表しています。

**メモ:** これはとてもよくあるエラーです。オブジェクトに対して何かをする前にはそのオブジェクトへの参照が存在していることに気を配らなければなりません。

### インタープリターとコンパイルコード

 もしかしたら、**インタープリター**と**コンパイル**という用語をプログラミングの文脈で聞いたことがあるかもしれませんね。
 インタープリター言語では、コードが上から下に実行されてコードの実行結果がすぐに返ってきます。
 ブラウザーが実行する前にコードを何らかの形に変換する必要はありません。
 コードはプログラマーに親しみやすいテキストで受け取られ、それが直接処理されます。

一方、コンパイル言語はコンピューターで実行する前に他の形式に変換（コンパイル）しなければなりません。例えば C/C++ は機械語にコンパイルされてから、コンピューターで実行されます。プログラムは、元のプログラムソースコードから生成されるバイナリーフォーマットで実行されます。

JavaScript は軽量なインタープリター型プログラミング言語です。ウェブブラウザーは元のテキストの形で JavaScript コードを受け取り、それからスクリプトを実行します。技術的な見地からは、たいていの JavaScript インタープリターは **実行時コンパイル** (just-in-time compiling) というテクニックを使ってパフォーマンスを向上させています。スクリプトが使われるときに、JavaScript コードが速いバイナリーフォーマットにコンパイルされて、可能な限り高速に実行されます。しかし、JavaScript は、事前ではなく実行時にコンパイルされるために、インタープリター言語と考えられています。

ここで詳細は話しませんが、どちらの方式も長所と短所があります。

### サーバーサイドコードとクライアントサイドコード

**サーバーサイド**と**クライアントサイド**という言葉も聞いたことがあるかもしれません。特にウェブ開発でよく聞かれます。
 クライアントサイドコードはユーザーのコンピューター上で実行されるコードです。ウェブページを見ているとき、ページのクライアントサイドコードがダウンロードされて、ブラウザーで実行されて表示されます。
 このモジュールのことを明示的に**クライアントサイド JavaScript** と言います。

一方、サーバーサイドコードはサーバー上で実行され、結果がブラウザーにダウンロードされて表示されます。ウェブで人気のあるサーバーサイドの言語は、PHP、Python、Ruby、ASP.NET など。そして JavaScript です！ JavaScript はサーバーサイドの言語としても使われます。人気のある Node.js 環境がその例です。サーバーサイドの JavaScript については動的なウェブサイト – サーバーサイドプログラミングのトピックを見てください。

### 動的コードと静的コード

クライアントサイドの JavaScript と、サーバーサイドの言語を説明するのに**動的**という言葉を使います。これはウェブページやウェブアプリが必要に応じてコンテンツを生成し、異なる状況において異なる表示ができるという能力を指しています。サーバーサイドのコードは、データベースからデータを取得して動的にコンテンツを生成します。一方、クライアントサイドの JavaScript はクライアント上のブラウザーで HTML のテーブルを生成したり、そのテーブルにサーバーから指示を受け、データを追加したり、ウェブページ上でユーザーにテーブルを表示したりするなどして、動的にコンテンツを生成します。それぞれの文脈で、少し異なる意味合いではありますが、関連しています。そしてどちらの方式も (サーバーサイドもクライアントサイドも) たいていは同時に使用されます。

動的に更新されるコンテンツを含まないウェブページは**静的**と表現されます。静的なウェブページとは常に同じコンテンツを表示するページのことです。

ページに JavaScript を追加する方法
-----------------------

JavaScript は CSS と同じような方法で、HTML ページに適用することができます。CSS では `<link>` 要素を使用することで外部のスタイルシートを適用することができ、また、`<style>` 要素を使用することで HTML 内部に書かれたスタイルシートを適用することが出来ました。しかし、JavaScript で HTML に書く必要があるのは `<script>` 要素だけです。どのように書くのか見てみましょう。

### 内部の JavaScript

1. まずは apply-javascript.html ファイルを自分のコンピューターにコピーします。どこか適当な場所に保存してください。
2. キストエディターとウェブブラウザーでそのファイルを開いてください。クリックできるボタンが 1 つあるウェブページを作る HTML だということがわかりますね。
3. 次に、テキストエディターで `</head>` タグの直前に以下のコードを追加します。

```html
<script>
 // JavaScript をここに書きます
</script>
```

4. それでは `<script>` 要素内に JavaScript を書いて、もうちょっと面白いことをしてみましょう。「// JavaScript をここに書きます」と書いてあるすぐ下に、以下のコードを追加してください。

```js
document.addEventListener("DOMContentLoaded", () => {
  function createParagraph() {
    const para = document.createElement("p");
    para.textContent = "ボタンが押されました!";
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll("button");

  for (const button of buttons) {
    button.addEventListener("click", createParagraph);
  }
});
```

5. ファイルを保存してブラウザーを更新してください。ボタンを押す度に新しい段落が作られて、下に表示されるようになりましたね。

**メモ:** もし上記の例が上手く動いていないとしたら、もう一度最初から手順を確認してください。
 コピーしてコードを書いたファイルは `.html` というファイル名ですか？
 `<script>` 要素を `</head>` タグの直前に追加しましたか？
 JavaScript を上の例の通りに書きましたか？ **JavaScript は大文字小文字を区別しますので、見えている通りに書かなければなりません。正しく書いていなければ、動いてくれません。**

**メモ:** GitHub にあるこちらのバージョン、apply-javascript-internal.html (ライブ)でも見ることもできます。

### 外部の JavaScript

これで JavaScript が動きましたね。しかし、JavaScript を外部のファイルに書きたいときはどうすればよいでしょうか？ 次の例を見てみましょう。

1. まず、先ほどの HTML ファイルと同じディレクトリーに新しいファイルを作ります。これを `script.js` と名付けます。 .js という拡張子であることを確認してください。それで JavaScript であると認識されるのです。
2. `<script>` 要素を以下のコードで置き換えます。

```html
<script src="script.js" defer></script>
```

3. `script.js` に、次のスクリプトを追加します。

```js
function createParagraph() {
  const para = document.createElement("p");
  para.textContent = "ボタンが押されました!";
  document.body.appendChild(para);
}

const buttons = document.querySelectorAll("button");

for (const button of buttons) {
  button.addEventListener("click", createParagraph);
}
```

4. HTML ファイルを保存して、ブラウザーを更新してください。同じページが見えますね！
 同じように動いていますが、今回は外部の JavaScript ファイルです。
 コードを整理して、複数の HTML ファイルから再利用できるようにするには、このようにするのが良いでしょう。
 大きなスクリプトの塊がないほうが、HTML も読みやすくなります。

**メモ:** GitHub でこちらのバージョンも見られます。apply-javascript-external.html と script.js です (ライブでも見られます)。

### インラインの JavaScript ハンドラー

 たまに JavaScript のコードが HTML の途中に書かれているのを見かけます。
 こんな感じで。

```js
function createParagraph() {
  const para = document.createElement("p");
  para.textContent = "ボタンが押されました！";
  document.body.appendChild(para);
}
```

```html
<button onclick="createParagraph()">押してください</button>
```

このバージョンのデモは以下で確認できます。

このデモは先ほどの節のものと同じ機能を持っていますが、 `<button>` 要素に `onclick` 属性を付けてボタンが押されたときに関数が実行されるようにハンドラーを直接書いています。

\*\*ただし、このようにはしないでください。\*\*この書き方は HTML を JavaScript で汚してしまう悪い書き方です。さらに、`onclick="createParagraph()"` という属性を JavaScript を適用したいボタンすべてに書かなければなりませんので、とても非効率です。

### 代わりに addEventListner を使用する

 HTML に JavaScript を含めるのではなく、純粋な JavaScript の構成使用してください。
 `querySelectorAll()` 関数を使うと、ページ上のすべてのボタンを選択することができます。
 そして、ループ処理でそれぞれのボタンに対して、 `addEventListener()` を使ってハンドラーを割り当てることができます。
 このためのコードを以下に示します。

```js
const buttons = document.querySelectorAll("button");

for (const button of buttons) {
  button.addEventListener("click", createParagraph);
}
```

 これは `onclick` 属性よりも少し長いかもしれませんが、ページ上にいくつボタンがあっても、またいくつ追加されたり削除されたりしても、すべてのボタンに対して機能します。
 JavaScript は変更する必要がありません。

**メモ:** 自分の `apply-javascript.html` ファイルを編集して、いくつかボタンを追加してみて下さい。
 再度読み込むとどのボタンを押しても段落が作られるのがわかるでしょう。
 素敵でしょ！

### スクリプトの読み込み方針

 スクリプトを適切なタイミングで読み込むためには、いくつかの問題があります。それは見掛けほど簡単ではありません！
 一般的な問題は、ページ上のすべての HTML が、現れた順に読み込まれることです。
 JavaScript を使用してページ上の要素（またはより正確には、ドキュメントオブジェクトモデル）を操作する場合、何かをしようとする対象の HTML よりも前に JavaScript が読み込まれて解釈されても、コードは動作しません。

 上のコード例では、内部の例と外部の例では、HTML 本文が解釈される前に JavaScript が読み込まれて文書の head で実行されています。
 これによりエラーが発生する可能性があるため、いくつかの構文を使用して回避しています。

内部の例では、コードの周りにこの構造を見ることができます。

```js
document.addEventListener("DOMContentLoaded", () => {
  // …
});
```

これはブラウザーの `DOMContentLoaded` イベントを待ち受けするイベントリスナーで、 HTML の本体がが完全に読み込まれて解釈されたことを示します。このブロック内の JavaScript は、そのイベントが発生するまで実行されないため、エラーは回避されます（コースの後半でイベントについて学習します）。

外部の例では、より現代的な JavaScript 機能の `defer` 属性を使用して問題を解決し、`<script>` 要素に達した後も HTML コンテンツのダウンロードを続行するようブラウザーに指示します。

```html
<script src="script.js" defer></script>
```

この場合、スクリプトと HTML の両方が同時に読み込まれ、コードが機能します。

**メモ:** 外部の場合は、`defer` 属性が問題を解決したため、`DOMContentLoaded` イベントを使用する必要はありませんでした。
 `defer` は外部スクリプトに対してのみ機能するため、内部の例では `defer` による解決策を使用しませんでした。

 この問題に対する昔ながらの解決策は、すべての HTML が解釈された後に読み込まれるように、 body の下部に（たとえば `</body>` タグの直前に） script 要素を置くことでした。
 この解決の問題点は、HTML DOM が読み込まれるまでスクリプトの読み込みと解釈が完全にブロックされることです。
 JavaScript がたくさんある大規模なサイトでは、これは大きなパフォーマンス上の問題を引き起こす可能性があり、サイトを遅くします。

#### async と defer

実際には、スクリプトのブロッキングの問題を回避できる現代的な機能が 2 つあります — `async` と `defer` （すでに見てきました）です。これらの 2 つの違いを見てみましょう。

`async` 属性を使ってスクリプトを読み込むと、ページをブロックすることなくスクリプトをダウンロードします。
 しかし、ダウンロードが完了すると、スクリプトが実行され、ページのレンダリングがブロックされます。
 複数のスクリプトが特定の順序で実行されるという保証はありません。
 ページ内のスクリプトが互いに独立して実行され、ページ内の他のスクリプトに依存しない場合は、 `async` を使用するのが最もよい方法です。

`defer` 属性で読み込まれたスクリプトは、ページに表示されている順番に読み込まれます。
 ページのコンテンツがすべて読み込まれるまで実行されません。これは、スクリプトが DOM に依存している場合（例えば、ページ上の 1 つ以上の要素を変更する場合）に便利です。

ここでは、スクリプトの読み込み方法の違いと、それがページにとってどのような意味を持つかを視覚的に表現しています。

![3 種類のスクリプト読み込み方法の仕組みです。既定では、 JavaScript の取得と実行の間、解釈がブロックされます。 async を使用すると、解釈は実行時のみ一時停止します。 defer を使用すると、解釈は一時停止しません、すべてが解釈された後に実行されます。](/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript/async-defer.jpg)

*この画像は HTML 仕様書からのもので、 CC BY 4.0 ライセンス条件に基づきコピーと縮小版への切り抜きを行っています。*

たとえば、次のスクリプト要素があるとします。

```html
<script async src="js/vendor/jquery.js"></script>

<script async src="js/script2.js"></script>

<script async src="js/script3.js"></script>
```

 スクリプトが読み込まれる順序に頼ることはできません。
 `jquery.js` が読み込まれるのは `script2.js` と `script3.js` よりも前かもしれませんし、後かもしれません。この場合、これらのスクリプトの関数が `jquery` に依存していると、スクリプトの実行時に `jquery` が定義されないため、エラーが発生します。

読み込むバックグラウンドスクリプトがいくつもあって、それらをできるだけ早く実行したい場合に `async` を使用するべきです。例えば、ゲームを実際に開始するときに必要になるいくつかの読み込むべきゲームデータファイルがあるとして、今のところは、スクリプトを読み込むことによってブロックされずに、ゲームのイントロ、タイトル、ロビーを表示したいだけ、という場合です。

`defer` 属性つきのスクリプト(下記のようなもの)は、ページに現れた順序でスクリプトを実行し、スクリプトとコンテンツがダウン読み込まれるとすぐにスクリプトを実行します。

```html
<script defer src="js/vendor/jquery.js"></script>

<script defer src="js/script2.js"></script>

<script defer src="js/script3.js"></script>
```

`defer` 属性を持つすべてのスクリプトは、ページに現れた順序で読み込まれます。したがって、2 番目の例では、`jquery.js` が `script2.js` と `script3.js` の前に読み込まれ、`script2.js` が `script3.js` の前に読み込まれることは確実です。ページコンテンツがすべて読み込まれるまでは、実行せず、これはスクリプトが DOM 配置に依存している場合に便利です（例: ページの要素を変更する場合）。

要約すると、

* `async` と `defer` のどちらも、ページのその他の部分（DOM など）と並行して、ブラウザーにスクリプトを別スレッドでダウンロードするよう指示するので、読み取りの過程で読み取りプロセスがブロックされることはなくなります。
* `async` 属性を付けたスクリプトは、ダウンロードが完了し次第、すぐに実行されます。
 これはページをブロックし、特定の実行順序を保証することはありません。
* `defer` 属性を付けたスクリプトは、出現順に読み込まれ、すべての読み込みが終了した後に実行されます。
* スクリプトを直ちに実行するべきであり、依存関係がない場合は、 `async` を使用してください。
* スクリプトが解釈を待つ必要があり、他のスクリプトや DOM 上の位置に依存する場合は、 `defer` を使用して読み込んでください。対応する `<script>` 要素をブラウザーに実行させたい順に配置してください。
コメント
----

 HTML や CSS と同様に、 JavaScript でもコード内にブラウザーが実行しない「コメント」を書くことができます。仲間の開発者（または、コードを忘れた 6 カ月後の自分自身）に対して動作方法を書くことができます。
 コメントはとても便利ですしたくさん書きましょう。大きなプログラムを書くのならなおのことです。
 コメントの書き方は 2 種類あります。

* 1 行で収まるコメントは 2 つのスラッシュ (//) のあとに続けて書きます。

```js
// これはコメントです
```

* 複数行に渡るコメントは /\* から \*/ の間に書きます。

```js
/\*
 これも
 コメントです
\*/
```

先ほどのデモでコメントを書くならば、以下のようにします。

```js
// 関数: HTML の body タグ内の一番下に新しい段落を追加します。

function createParagraph() {
  let para = document.createElement("p");
  para.textContent = "ボタンが押されました！";
  document.body.appendChild(para);
}

/\*
 1. ページ内のボタンへの参照をすべて取り出して配列に入れる。
 2. すべてのボタンをループで回し、クリックイベントのリスナーを追加する

 どのボタンが押されても、 createParagraph() 関数が実行されるようにする。
\*/

const buttons = document.querySelectorAll("button");

for (const button of buttons) {
  button.addEventListener("click", createParagraph);
}
```

**メモ:** 一般的にコメントは多いほうが少ないよりも優れていますが、変数が何であるかを説明する (変数名はおそらくもっと直感的にするべきです) ため、または非常に単純な操作を説明する (コードが複雑すぎるかもしれません) ために、多くのコメントを追加する場合は注意が必要です。

まとめ
---

 さて、 JavaScript の世界に足を踏み入れましたね。
 なぜ JavaScript を使い、何ができるのかということに慣れるため、まずは理論から始めました。
 進むにつれ、少しでしたが例を見て、何よりも JavaScript がどのようにウェブサイトの他のコードに組み込まれているかを学習しました。

 JavaScript が少し大変だと思いましたか。でも心配は無用です。このコースを受講することで一歩ずつ、理解しながら前に進んで行きましょう。
 次の記事で、まっすぐに飛び込んで自分で JavaScript のページを作って実践に飛び込んでいきましょう。

* Overview: First steps
* 次のページ


ハイパーリンクとは？ - ウェブ開発を学ぶ

ハイパーリンクとは？
==========

この記事では、ハイパーリンクとは何か、なぜ重要なのかを詳しく説明します。

|  |  |
| --- | --- |
| 前提条件: | まずインターネットはどのように動くのかを理解し、ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いについてよく理解している必要があります。 |
| 目標: | ウェブ上のリンクとその重要性について学びます。 |

概要
--

ハイパーリンクは通常リンクと呼ばれ、ウェブの背後にある基本概念です。リンクとは何かを説明するために、ウェブアーキテクチャの基本に戻る必要があります。

ウェブの発明者でもあるティム・バーナーズ・リーは、 1989 年にウェブを支える 3 つの柱について語りました。

1. URL、ウェブ文書を追跡するアドレスシステム
2. HTTP、URL が与えられたときに文書を見つけるための転送プロトコル
3. HTML、埋め込み**ハイパーリンク**を可能にする文書形式

3 つの柱からわかるように、ウェブ上のすべてのものは文書とそのアクセス方法を中心に展開されています。ウェブの当初の目的は、テキスト文書に簡単にアクセスし、読み込み、そしてナビゲートする方法を提供することでした。それ以来、ウェブは画像、ビデオ、およびバイナリーデータへのアクセスを提供するように進化しましたが、これらの改善によって 3 つの柱が変わることはほとんどありませんでした。

ウェブが登場する前は、文書にアクセスして別の文書に移動することはとても困難でした。人が読めるので、 URL はすでに物事を簡単にしますが、文書にアクセスする都度長い URL を入力するのは困難です。これがハイパーリンクがすべてに革命をもたらしたところです。リンクは任意のテキスト文字列を URL と関連付けることができるため、ユーザーはリンクを起動することで対象の文書にすぐにアクセスできます。

下線が引かれ、青いテキストで囲まれていることで、リンクは周囲のテキストから目立っています。リンクをタップまたはクリックしてアクティブにするか、キーボードを使用している場合は、リンクがフォーカスされるまで Tab キーを押して Enter キーまたはスペースバーを押します。

![Example of a basic display and effect of a link in a web page](/ja/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks/link-1.png)

リンクは、ウェブをとても便利で成功させた画期的なものです。この記事の残りの部分では、さまざまな種類のリンクと、それらが現代のウェブデザインにとって重要であることについて説明します。

より深く掘り下げる
---------

すでに述べたように、リンクは URL に関連付けられたテキスト文字列です。リンクを使用すると、ある文書から別の文書に簡単に移動できます。とは言っても、考慮すべきいくつかのニュアンスがあります。

### リンクの種類

内部リンク

両方ともあなたのウェブサイトに属している 2 つのウェブページ間のリンクは、内部リンクと呼ばれます。内部リンクがなければ、ウェブサイトのようなものはありません（もちろん、 1 ページのウェブサイトでもない限りはですが）。

外部リンク

あなたのウェブページから他の誰かのウェブページへのリンク。ウェブはウェブページのネットワークであるため、外部リンクがなければウェブはありません。あなたのウェブページを通して利用可能なコンテンツ以外の情報を提供するには外部リンクを使用してください。

被リンク

他の人のウェブページからあなたのサイトへのリンク。外部リンクの反対です。誰かがあなたのサイトにリンクしたときにあなたはリンクバックする必要はないことに注意してください。

ウェブサイトを構築するときは、内部リンクに集中してください。これらのリンクを使用すると、サイトが使用可能になります。リンク数が多すぎることと少なすぎることの間でバランスの取れたものを見つけてください。別の記事でウェブサイトナビゲーションの設計について説明しますが、原則として、新しいウェブページを追加するときは必ず、他のページの少なくとも 1 つがその新しいページにリンクしていることを確認してください。一方、サイトに 10 ページを超えるページがある場合は、他のすべてのページからすべてのページにリンクするのは非生産的です。

始めて間もないうちは、それほど外部と入ってくるリンクについて心配する必要はありません。しかし検索エンジンにサイトを見つけさせたいならそれらは非常に重要です（詳細については下記を参照してください）。

### アンカー

ほとんどのリンクは 2 つのウェブページを結び付けています。**アンカー**は 1 つの文書の 2 つのセクションを一緒に結びます。 アンカーを指すリンクをたどると、ブラウザーは新しい文書を読み込むするのではなく、現在の文書の別の部分にジャンプします。ただし、他のリンクと同じ方法でアンカーを作成して使用します。

![Example of a basic display and effect of an anchor in a web page](/ja/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks/link-2.png)

### リンクと検索エンジン

リンクはユーザーにとっても検索エンジンにとっても重要です。検索エンジンは、ウェブページをクロールするたびに、そのウェブページで利用可能なリンクをたどってウェブサイトにインデックスを付けます。検索エンジンは、リンクをたどってウェブサイトのさまざまなページを見つけるだけでなく、リンクの表示テキストを使用して、どの検索クエリーが対象のウェブページにアクセスするのに適しているかを判断します。

リンクは、検索エンジンがサイトにどれだけ早くリンクするかに影響します。問題は、検索エンジンのアクティビティを測定するのが難しいということです。企業は当然、自分のサイトが検索結果の上位にランクされることを望んでいます。検索エンジンがサイトのランクをどのように決定するかについては、次のことがわかっています。

* リンクの**表示テキスト**は、どの検索クエリーが特定の URL を検索するかに影響します。ウェブページの**被リンク**が多いほど、検索結果のランクは高くなります。
* **外部リンク**は、元のウェブページと遷移先のウェブページの両方の検索ランキングに影響を与えますが、その程度は不明です。

SEO （検索エンジン最適化）は、検索結果でウェブサイトを上位にランク付けする方法の研究です。ウェブサイトのリンクの使用を改善することは、有益な SEO テクニックのうちの一つです。

次のステップ
------

それでは、いくつかウェブページにリンクを設定しましょう。

* すべてのリンクが URL を指しているので、より理論的な背景を得るには、URL とその構造について学びます。
* もう少し実用的なものが欲しいですか？ HTML 入門モジュールの記事「ハイパーリンクの作成」で、リンクの実装方法について詳しく説明しています。


ドメイン名とは？ - ウェブ開発を学ぶ

ドメイン名とは？
========

|  |  |
| --- | --- |
| 前提知識: | まずインターネットはどのように動くのかについて知り、 URL とは何かを理解しておく必要があります。 |
| 目標: | ドメイン名とはどのようなもので、どのように働くのか、なぜ重要なのかを学びます。 |

概要
--

ドメイン名はインターネット基盤の重要な部分です。インターネット上で利用できるあらゆるウェブサーバーに対して、人間が読めるアドレスを提供します。

インターネットに接続しているコンピューターはすべて、パブリック IP アドレス、 IPv4 アドレス（例: `173.194.121.32`）または IPv6 アドレス（例: `2027:0da8:8b73:0000:0000:8a2e:0370:1337`）でたどり着くことができます。

コンピューターはこれらのアドレスを簡単に処理できますが、人間にとってはだれがサーバーを運営しているのか、またはウェブサイトがどのようなサービスを提供しているかを理解するのは困難です。 IP アドレスは覚えにくく、時間の経過とともに変わる可能性があります。

これらすべての問題を解決するために、ドメイン名と呼ばれる人間が読めるアドレスを使用します。

より深く掘り下げる
---------

### ドメイン名の構造

ドメイン名は単純な構造であり、ドットで区切られたいくつかの部分（1 つの部分だけの場合もあれば、2 つ、3 つの場合も……）からできており、**右から左に向かって読まれます**。

![Anatomy of the MDN domain name](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name/structure.png)

これらのそれぞれの部分は、ドメイン名全体に関する特定の情報を提供します。

TLD （トップレベルドメイン）

TLD は最も一般的な情報を提供します。 TLD は、ドメイン名の背後にあるサービスの全般的な目的をユーザーに伝えます。多くの一般的な TLD (`.com`, `.org`, `.net`) はウェブサービスが特定の基準を満たしていることを要求しませんが、 TLD によってはより厳密な基準を適用するため、目的がより明確になります。例えば、

* `.jp`, `.us`, `.fr`, `.se` などのローカル TLD では、サービスを特定の言語で提供しているか、特定の国でホスティングされていることを要求します。これらは、特定の言語や国のリソースであることを示しているとみなされます。
* `.gov` や `.go.jp` を含む TLD は、政府機関のみが使用できます。
* `.edu` や `.ac.jp` のような TLD は教育・学術機関のみで使用されていると見なされます。

TLD にはラテン文字だけでなく特殊文字も含めることができ、長さは最大 63 文字ですが、ほとんどは 2 〜 3 文字です。

TLD の完全なリストは ICANN が管理しています。

ラベル（またはコンポーネント）

ラベルは、TLD に続くものです。ラベルは大文字と小文字を区別しない文字列で、A から Z の文字、0 から 9 の数字、および - 文字（ラベルの最初または最後の文字であってはならない）のみで構成されます。 `a`, `97`, `hello-strange-person-16-how-are-you` はすべて有効なラベルの例です。

TLD の直前にあるラベルは、**二次レベルドメイン** (SLD) とも呼ばれます。

ドメイン名は多数のラベル（またはコンポーネント）を持つことができますが、ドメイン名を構成するのにラベルを 3 つ持つことが必須でも必要でもありません。例えば、 www.inf.ed.ac.uk は正しいドメイン名です。制御権のあるドメイン（例えば mozilla.org）には、 developer.mozilla.org, iot.mozilla.org, bugzilla.mozilla.org のように、互いに異なる内容で「サブドメイン」を作成することができます。

### ドメイン名の購入

#### 誰がドメイン名を所有しているか

「ドメイン名を買う」ことはできません。これは、未使用のドメイン名が最終的に他の人が再び使用できるようになるためです。すべてのドメイン名が購入されてしまうと、ウェブはすぐにロックされていて誰も利用ができない未使用のドメイン名であふれてしまいます。

代わりに、 1 年間または数年間ドメイン名を使用する権利を購入します。この権利は更新することができ、他の人々の応募よりも更新の方が優先されます。しかし、決してドメイン名を所有するわけではありません。

登録機関と呼ばれる会社は、ドメイン名のレジストリーを使用して、あなたをドメイン名に結び付ける技術的および管理的情報を維持します。

**メモ:** ドメイン名によっては、追跡を担当している登録機関ではない可能性があります。たとえば、`.fire` の下のすべてのドメイン名は Amazon によって管理されています。

#### 利用可能なドメイン名を探す

特定のドメイン名が利用可能かどうかを調べるには、

* ドメイン名の登録機関のウェブサイトにアクセスしてください。ほとんどの登録機関は、 "whois" と呼ばれるドメイン名が利用できるかどうかを知ることができるサービスを提供しています。
* あるいは、シェルを内蔵しているシステムを使用している場合は `whois` コマンドを入力して下さい。 `mozilla.org` の場合は次のようになります。
```

$ whois mozilla.org
Domain Name:MOZILLA.ORG
Domain ID: D1409563-LROR
Creation Date: 1998-01-24T05:00:00Z
Updated Date: 2013-12-08T01:16:57Z
Registry Expiry Date: 2015-01-23T05:00:00Z
Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
Sponsoring Registrar IANA ID: 292
WHOIS Server:
Referral URL:
Domain Status: clientDeleteProhibited
Domain Status: clientTransferProhibited
Domain Status: clientUpdateProhibited
Registrant ID:mmr-33684
Registrant Name:DNS Admin
Registrant Organization:Mozilla Foundation
Registrant Street: 650 Castro St Ste 300
Registrant City:Mountain View
Registrant State/Province:CA
Registrant Postal Code:94041
Registrant Country:US
Registrant Phone:+1.6509030800
```

ご覧のとおり、 `mozilla.org` を登録することはできません。 Mozilla Foundation がすでに登録しているからです。

一方、 `afunkydomainname.org` を登録できるかどうか確認しましょう。
```

$ whois afunkydomainname.org
NOT FOUND
```

ご覧のとおり、ドメインは（執筆時点で） `whois` データベースには存在しませんので、登録を依頼することができます。知っておくと良いでしょう。

#### ドメイン名の取得

プロセスは非常に簡単です。

* 登録機関のウェブサイトにアクセスします。
* 通常、「ドメイン名を取得する」という操作があります。それをクリックします。
* フォームに必要事項をすべて記入してください。希望するドメイン名のスペルを間違えていないことを特に確認してください。支払いが済んだら、手遅れです。
* 登録機関は、ドメイン名が正しく登録されたことを知らせます。数時間以内に、すべての DNS サーバーがあなたの DNS 情報を受信するでしょう。

**メモ:** この過程で、登録機関は現実世界の住所を尋ねます。国によっては、有効な住所を提供できないと登録機関がドメインを強制的に閉鎖する可能性があるため、正しく入力するようにしてください。

#### DNS の更新

DNS データベースは世界中のすべての DNS サーバーに格納されており、これらのサーバーはすべて「権威ネームサーバー」または「トップレベル DNS サーバー」と呼ばれるいくつかの特別なサーバーを参照しています。これらはシステムを管理する上司サーバーのようなものです。

登録機関が特定のドメインの情報を作成または更新するたびに、すべての DNS データベース内で情報を更新する必要があります。指定されたドメインについて知っている DNS サーバーはそれぞれ、しばらく情報を保持し、その後で情報を自動的に無効化して更新します（DNS サーバーが権威サーバーに照会し、そこから更新された情報を取得します）。したがって、このドメイン名について知っている DNS サーバーが最新の情報を入手するには時間がかかります。

### DNS リクエストはどのように機能するのか

すでに見たように、ブラウザーにウェブページを表示したい場合は、 IP アドレスよりもドメイン名を入力する方が簡単です。プロセスを見てみましょう。

* ブラウザーのロケーションバーに `mozilla.org` と入力してください。
* ブラウザーは、このドメイン名で識別される IP アドレスを (ローカル DNS キャッシュを使用して) すでに認識しているかどうかをコンピューターに確認します。存在する場合、ドメイン名は IP アドレスに変換され、ブラウザーはウェブサーバーとコンテンツをネゴシエートします。話は終わりです。
* どの IP が `mozilla.org` の名前の背後にあるのかわからない場合は、DNS サーバーに問い合わせます。DNS サーバーの役割は、登録されている各ドメイン名に一致する IP アドレスをコンピューターに通知することです。
* コンピューターがリクエストされた IP アドレスを認識したので、ブラウザーはウェブサーバーとコンテンツをネゴシエートできます。

![Explanation of the steps needed to obtain the result to a DNS request](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name/2014-10-dns-request2.png)

次のステップ
------

さて、私たちはプロセスとアーキテクチャについて多くのことを話しました。そろそろ次に進みましょう。

* 実際にやってみたいのであれば、そろそろウェブページの構造の設計と構造を探求するのがよいでしょう。
* また、ウェブサイトを構築するためのいくつかの面で費用がかかることも注目に値します。ウェブサイトを構築するのにかかる費用を参照してください。
* あるいはウィキペディアでドメイン名についてもっと読んでください。
* DNS がどのように機能するかについての楽しくカラフルな説明もここにあります。


ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いは？ - ウェブ開発を学ぶ

ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いは？
=================================

この記事では、ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンなどのウェブに関係する色々な概念に関して解説します。これらの用語はウェブの初心者を混乱させたり、間違って使われたりしています。それぞれの意味を学びましょう。

|  |  |
| --- | --- |
| 前提条件: | インターネットはどのように動くのかを知っておく必要があります。 |
| 目標: | ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いを説明できるようになること。 |

概要
--

あらゆる分野の知識と同様に、ウェブにも多くの専門用語があります。すべてを一気に押し付けるつもりはありませんのでご心配なく (興味をお持ちなら用語集があります)。しかし、最初に理解しておく必要がある基本的な用語がいくつかあり、これは読む際に常に聞く表現です。これらは互いに関連するものの、異なる役割を持つため、混同しやすいものです。実際、ニュースやその他の場所でこれらの用語が誤って使用されているのを時々見かけるので、これらをまとめて理解しましょう。

これらの用語と技術の詳細に関して詳しく説明しますが、これらを簡単に定義することが良いスタートるになるでしょう。

ウェブページ

Firefox や Google Chrome、Opera、Microsoft Internet Explorer、Edge、Apple の Safari などのウェブブラウザーで表示可能な文書です。これらはよく単に「ページ」とも呼ばれることもあります。

ウェブサイト

グループ化され、通常はさまざまな方法で一緒に接続されたウェブページの集まりです。よく「ウェブサイト」または単に「サイト」と呼ばれます。

ウェブサーバー

インターネット上でウェブサイトをホスティングするコンピューターです。

検索エンジン

他のウェブページを見つけるのに役立つウェブサービスで、 Google、Bing、Yahoo、DuckDuckGo などがあります。検索エンジンは通常、ウェブブラウザーから (例えば、Firefox、Chrome などのアドレスバーで直接検索エンジンによる検索を実行することができる)、またはウェブページ (例えば bing.com や duckduckgo.com) を介してアクセスされます。

公共図書館に簡単に例えてみましょう。図書館に行ったときに一般的に行うことは次の通りです。

1. 検索インデックスを探して、読みたい書籍のタイトルを探します。
2. その書籍のカタログ番号をメモします。
3. 書籍が収蔵されている特定の書架へ行き、カタログ番号を見つけて、本を入手します。

ウェブサーバーと図書館を比較してみましょう。

* 図書館はウェブサーバーのようなものです。いくつかの書架があり、複数のウェブサイトをホスティングしているウェブサーバーに似ています。
* 図書館の様々な書架 (科学、数学、歴史など) はウェブサイトのようなものです。それぞれの書架は個々のウェブサイトのようなものです (同じ本が複数の書架にあることはありません)。
* それぞれの書架にある書籍はウェブページのようなものです。1 つのウェブサイトに複数のウェブページがあることがあります。たとえば、科学の書架 (ウェブサイト) には、熱、音、熱力学、静力学などに関する書籍があります (ウェブページ)。ウェブページはそれぞれ固有の場所 (URL) で見つかります。
* 検索インデックスは検索エンジンのようなものです。それぞれの書籍は図書館内にカタログ番号で特定できる独自の場所にあります (同じ場所に2冊の本を保管することはできません)。
アクティブラーニング
----------

*利用可能なアクティブラーニングはまだありません。ぜひ協力をご検討ください。*

より深く掘り下げる
---------

それでは、それらの 4 つの用語がどのように関連しているのか、なぜそれらが互いに混同されているのかについて詳しく調べてみましょう。

### ウェブページ

**ウェブページ**はブラウザーで表示することができる簡単な文書です。文書は HTML 言語で書かれています (他の記事で詳しく説明しています)。ウェブページには、次のような様々な種類のリソースを埋め込むことができます。

* **スタイル情報** — ページの見た目の制御
* **スクリプト** — ページへのインタラクティブ機能を追加
* **メディア** — 画像、音楽、動画など

**メモ:** ブラウザーは PDF ファイルや画像などのような他の文書も表示することができますが、**ウェブページ**という用語は、特に HTML 文書を指します。それ以外の場合、単に**文書 (またはドキュメント)** という用語を使用します。

ウェブ上で利用可能なすべてのウェブページには、固有のアドレスを使用して到達することができます。ページにアクセスするには、そのアドレスをブラウザーのアドレスバーに入力するだけです。

![ブラウザーのアドレスバーにあるウェブページのアドレスの例](/ja/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines/web-page.jpg)

### ウェブサイト

**ウェブサイト**はリンクされたウェブページ (および関連するリソース) の集合で、固有のドメイン名を共有しています。指定されたウェブサイトの各ウェブページは明示的なリンク — 多くの場合はクリック可能なテキストの部分の形 — を提供しており、ユーザーがウェブサイトのあるページから他のページに移動することができます。

ウェブサイトにアクセスするために、ブラウザーのアドレスバーにドメイン名を入力すると、ブラウザーはウェブサイトのメインウェブページ、または**ホームページ** (略して「ホーム」と呼ばれる) を表示します。

![ブラウザーのアドレスバーにあるウェブサイトのドメイン名の例](/ja/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines/web-site.jpg)

**ウェブページ**と**ウェブサイト**は、特に 1 枚だけの**ウェブページ**を含む**ウェブサイト**である場合に混同しやすくなります。このようなウェブサイトは**単一ページのウェブサイト**と呼ばれることがあります。

### ウェブサーバー

**ウェブサーバー**は、 1 つ以上の**ウェブサイト**をホスティングするコンピューターです。「ホスティング」はすべての**ウェブページ**や補助的なファイルをコンピューター上で利用できるようにするという意味です。**ウェブサーバー**は、任意のユーザーのリクエストに応じて、ホスティング中の**ウェブサイト**から任意の**ウェブページ**をユーザーのブラウザーに送信します。

**ウェブサイト**と**ウェブサーバー**を混同しないようにしてください。例えば、誰かが「私のウェブサイトから応答がありません」と言うのを聞いた場合、実際には**ウェブサーバー**が応答していないのであり、その結果として**ウェブサイト**が利用できないのです。もっと重要なことは、ウェブサーバーは複数のウェブサイトをホスティングすることができるため、**ウェブサーバー**という言葉はウェブサイトを特定するために使用することはできず、大きな混乱を招く可能性があります。先に挙げた例で、「私のウェブサイトから応答がありません」と言った場合、そのウェブサーバー上のウェブサイトがすべて利用できないことになります。

### 検索エンジン

検索エンジンはよくウェブに関する誤解のもとになります。検索エンジンは特殊な種類のウェブサイトで、ユーザーが**他の**ウェブサイトを見つけるのを助けるものです。

Google, Bing, Yandex, DuckDuckGo など、たくさんあります。一般的なものもあれば、特定のトピックについて専門化されたものもあります。好きなものを使いましょう。

多くのウェブの初心者は、検索エンジンとブラウザーを混同しています。明確にしましょう。**ブラウザー**はソフトウェアの一つで、ウェブページを受け取り表示するものです。**検索エンジン**はウェブサイトであり、人々が他のウェブサイトからウェブページを探すのを手助けします。この混乱は、ブラウザーを起動したとき、ブラウザーが検索エンジンのホームページを表示しているために発生します。これは、ブラウザーで最初にやりたいことが表示させるウェブページであることが明らかであるため、よく分かります。インフラ (ブラウザーなど) とサービス (検索エンジンなど) を混同しないでください。この区別はかなり役立ちますが、専門家によっては曖昧に話すこともあるので、心配しないでください。

こちらは、 Firefox のインスタンスが既定のスタートアップページとして Google 検索ボックスを表示している様子です。

![Example of Firefox nightly displaying a custom Google page as default](/ja/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines/search-engine.jpg)

次の段階
----

* より深く掘り下げる: ウェブサーバーって何？
* ウェブページがどのようにウェブサイトにリンクされているかを見る: ウェブのリンクを理解する


インターネットはどのように動くのか？ - ウェブ開発を学ぶ

インターネットはどのように動くのか？
==================

この記事はインターネットの仕組みとどのように動いているかを説明します。

|  |  |
| --- | --- |
| 前提条件: | ありませんが、最初にプロジェクトの目標を設定することの記事を先に読むことをおすすめします。 |
| 目標: | ウェブの技術インフラストラクチャの基礎と、インターネットとウェブの違いについて学びます。 |

概要
--

**インターネット**はウェブのバックボーンであり、ウェブを可能にする技術基盤です。インターネットは、最も簡単に言うと、すべてが一元的に通信を行う大規模なコンピューターネットワークです。

インターネットの歴史は、やや不明瞭です。 1960 年代に米軍の資金援助を受けて始まった調査プロジェクトに始まり、多くの大学と民間企業の支援を受けて 1980 年代に公共インフラへと発展しました。インターネットを支える様々なテクノロジーは時間の経過とともに進化してきましたが、大きくは変わっていません。インターネットは、コンピューターを一元的に接続し、何が起きても接続を維持する方法を見つけます。

アクティブラーニング
----------

* How the internet Works in 5 minutes: アーロン・タイタスによるインターネットの基礎を理解するための 5 分間の動画。
* How does the Internet work? 詳細をよく視覚化した 8 分間の映像。
より深く掘り下げる
---------

### 単純なネットワーク

2 つのコンピューターが通信を必要とする時、物理的に (通常はイーサネットケーブル) や無線 (Wi-Fi や Bluetooth など) で接続する必要があります。現在のすべてのコンピューターでは通信を維持することができます。

**メモ:** 残りの記事では物理ケーブルのみ説明を行いますが、無線ネットワークでも同じように動きます。

![2 台のコンピューターを連動させる](/ja/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-1.png)

このようなネットワークでは 2 つのコンピューターという制限はありません。あなたの望むように多くのコンピューターに接続することができます。しかしそれはすぐに複雑になります。例えば 10 台のコンピューターに接続しようとした場合、 45 本のケーブルとそれぞれのコンピューターに 9 つのプラグ差込口が必要になります。

![10 台のコンピューターを一斉に](/ja/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-2.png)

この問題を解決するために、それぞれのコンピューターが**ルーター**と呼ばれる特別な小さなコンピューターにつなぎます。この**ルーター**の仕事は一つだけです。電車の信号機のように、特定のコンピューターから送信されたメッセージが正しい宛先コンピューターに到着することを確認します。コンピューター B に メッセージを送信するには、コンピューター A がメッセージをルーターに送信し、メッセージをコンピューター B に転送し、コンピューター C にメッセージが配信されないようにする必要があります。

一度ルーターをシステムに追加すると、ネットワークに繋がる 10 個のコンピューターは 10 個のケーブルが必要です。またそれぞれのコンピューターに一つのプラグ差込口が必要でルーターには 10 個のプラグ差込口が必要です。

![コンピューター 10 台とルーター](/ja/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-3.png)

### ネットワークのネットワーク

ここまでは順調ですね。しかし何百、何千、何十億ものコンピューターを接続する場合はどうですか？もちろん、1台の**ルーター**ではそれほど規模を拡大することはできませんが、注意深く読んだ場合、**ルーター**は他のコンピューターと同じようにコンピューターと呼ばれており、２台の**ルーター**を接続するのに問題はないのでしょうか？何も問題はありません。では、繋いでみましょう。

![Two routers linked together](/ja/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-4.png)

コンピューターをルーターに、そしてルーターをルーターに接続することで、無限に拡張することができます。

![Routers linked to routers](/ja/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-5.png)

このようなネットワークは、私たちがインターネットと呼ぶものに非常に近いのですが、私たちは何かを見逃しているのです。私たちは自分たちの目的のためにそのネットワークを構築しました。他にもネットワークはあります。友人や隣人など、誰でも自分のコンピューターのネットワークを持つことができます。しかし、自分の家とそれ以外の場所の間にケーブルを設置することは実際には不可能です。では、どのように対処すればいいのでしょうか？さて、あなたの家には、例えば電力や電話など、すでにケーブルがつながっています。電話のインフラは、すでに世界中の誰とでもつながっているので、私たちが必要とする完璧な電線なのです。ネットワークと電話のインフラをつなぐには、**モデム**と呼ばれる特別な装置が必要です。このモデムは、私たちのネットワークからの情報を、電話インフラが管理できる情報に変換し、その逆もまた可能です。

![A router linked to a modem](/ja/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-6.png)

電話のインフラに接続します。次のステップは、私たちのネットワークから接続できるネットワークにメッセージを送信することです。そのために、ネットワークをインターネットサービスプロバイダー (Internet Service Provider、以下 ISP) に接続します。 ISP は、すべてをリンクする特別な**ルーター**を管理する会社で、他の ISP のルーターにもアクセスできます。 したがって、私たちのネットワークからのメッセージは、ISP ネットワークのネットワークを通して宛先のネットワークに運ばれます。インターネットは、このネットワーク全体のインフラで構成されています。

![Full Internet stack](/ja/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-7.png)

### コンピューターを探す

コンピューターにメッセージを送りたい場合、どれかを特定する必要があります。 したがって、ネットワークにリンクしたコンピューターは、自身を識別するための固有のアドレスがあり、これは「IP アドレス」(IP は**インターネットプロトコル**を意味します) と呼ばれます。これは、ドットで区切られた一連の4つの数字からなるアドレスです (例 : `192.168.2.10`)。

それはコンピューターにとって完璧ですが、このようなアドレスを人間が覚えることは難しいです。そこで簡単にするために、**ドメイン名**と呼ばれる人間がわかりやすい名前で IP アドレスを置き換えることができます。例えば、 `google.com` はトップの IP アドレス `173.194.121.32` で使用されるドメイン名です。ドメイン名を使用することは、インターネット経由でコンピューターにアクセスする最も簡単な方法です。

![Show how a domain name can alias an IP address](/ja/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/dns-ip.png)

### インターネットとウェブ

ご存知のとおり、ウェブブラウザーでウェブを閲覧する場合、通常はドメイン名を使用してウェブサイトにアクセスします。これはインターネットとウェブが同じであることを意味するのでしょうか？実はそれほど単純な話ではありません。私たちが見てきたように、インターネットは何十億ものコンピューターをすべて接続できる技術インフラです。これらのコンピューターの中には、一部のコンピューター (**ウェブサーバー**と呼ばれる) がウェブブラウザーに分かりやすいメッセージを送信することができます。**インターネット**はインフラですが、**ウェブ**はインフラの上に構築されたサービスです。 電子メールや IRC など、インターネット上に構築されたいくつかのサービスがあります。

### イントラネットとエクストラネット

 イントラネットは、特定の組織のメンバーに限定された**プライベート**なネットワークです。
 一般的には、メンバーが共有リソースに安全にアクセスし、コラボレーションやコミュニケーションを行うためのポータルを提供するために使用されます。
 例えば、ある組織のイントラネットでは、部門やチームの情報を共有するためのウェブページ、重要文書やファイルを管理するための共有ドライブ、ビジネス管理タスクを実行するためのポータル、Wiki、ディスカッションボード、メッセージングシステムなどのコラボレーションツールをホストする場合があります。

 エクストラネットはイントラネットとよく似ていますが、プライベートネットワークの全部または一部を開放して、他の組織との共有やコラボレーションを可能にするものです。
 これは、通常、ビジネスと密接に協力している顧客や関係者と安全かつセキュアに情報を共有するために使用されます。
 多くの場合、イントラネットと同様の機能（情報やファイルの共有、コラボレーションツール、ディスカッションボードなど）を提供します。

 イントラネットもエクストラネットも、インターネットと同じ種類のインフラストラクチャ上で動作し、同じプロトコルを使用します。
 そのため、権限のあるメンバーであれば、物理的に異なる場所にいてもアクセスすることができます。

![Graphical Representation of how Extranet and Intranet work](/ja/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-8.png)

次のステップ
------

* ウェブのしくみ
* ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いは？
* ドメイン名とは？


ウェブサーバーとは？ - ウェブ開発を学ぶ

ウェブサーバーとは？
==========

この記事では、ウェブサーバーとは何か、ウェブサーバーの仕組み、なぜウェブサーバーが重要なのかを説明します。

|  |  |
| --- | --- |
| 前提知識: | すでにインターネットはどのように動くのか、ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いについて知っておく必要があります。 |
| 目標: | ウェブサーバーとは何かを学び、その仕組みに関して全般的な理解すること。 |

概要
--

「ウェブサーバー」はハードウェアまたはソフトウェア、あるいは両方が動作しているものを指します。

1. ハードウェアの観点では、ウェブサーバーとは、ウェブサーバーソフトウェアとウェブサイトのコンポーネントファイル (例えば、 HTML 文書、画像、 CSS スタイルシート、 JavaScript ファイル) を格納しているコンピューターのことです。インターネットに接続され、ウェブに接続された他の端末と物理的なデータ交換に対応しています。
2. ソフトウェアの観点では、ウェブサーバーとは、ホストにあるファイルに対する、ウェブユーザーのアクセスを制御する、いくつかの部品の集まりです。最小限の部品は HTTP サーバーです。HTTP サーバーは URL （ウェブアドレス）および HTTP （ブラウザーがウェブページを閲覧するためのプロトコル）を理解するソフトウェアのことです。格納しているウェブサイトのドメイン名（`mozilla.org` など）を通してアクセスすることができ、コンテンツをエンドユーザーの端末に配信します。

最も基本的な水準では、ブラウザーはウェブサーバーが保持しているファイルが必要になったらいつでも、 HTTP でファイルをリクエストします。リクエストが正しいウェブサーバー（ハードウェア）に届くと、**HTTP サーバー**（ソフトウェア）がリクエストを受け付け、リクエストされた文書を探し（ない場合は 404 レスポンスが返される）、ブラウザーに HTTP を通して送り返します。

![HTTP を通したクライアント/サーバー接続の基本的な説明](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server/web-server.svg)

ウェブサイトを公開するには、静的または動的ウェブサーバーが必要です。

**静的ウェブサーバー**は、スタックとも呼ばれますが、コンピューター（ハードウェア）と HTTP サーバー（ソフトウェア）から構成されます。サーバーが保持しているファイルをブラウザーへ「そのまま」送るので、「静的」と呼ばれます。

**動的ウェブサーバー**は、静的ウェブサーバーと追加のソフトウェアからなります。追加ソフトウエアは、一般的には**アプリケーションサーバー**と**データベース**からなります。アプリケーションサーバーが、 保持しているファイルを変更してから、HTTP サーバーを通してブラウザーに送信するので「動的」と呼ばれます。

例えば、ブラウザーで見ることができる最終的なウェブページを生成するために、アプリケーションサーバーはデータベースからのコンテンツで HTML のテンプレートを埋めることがあります。 MDN やウィキペディアのようなサイトは非常に多くのウェブページを持っていますが、実際の HTML 文書が存在するわけではなく、巨大なデータベースとわずかな HTML テンプレートのみが存在しているのです。この構成をとることで、より速く、より簡単にコンテンツを保守したり配信したりすることができます。

より深く掘り下げる
---------

すでに述べたとおり、ウェブページを呼び出すために、ブラウザーはウェブサーバーにリクエストを送信し、ウェブサーバーは自身のストレージスペースからリクエストされたファイルを探し始めます。ファイルを見つけると、サーバーはファイルを読み込み、必要に応じて処理を行い、ブラウザーに送信します。それらのプロセスを詳細に見てみましょう。

### ファイルの格納

ウェブサーバーは最初に、ウェブサイトの HTML 文書およびその関連資産である画像、 CSS スタイルシート、 JavaScript ファイル、フォント、動画などのファイルを格納する必要があります。

技術的には、これらのすべてのファイルを自分のコンピューターでホスティングすることができますが、以下のような理由で専用のウェブサーバーにすべてを格納したほうがはるかに便利です。

* 専用ウェブサーバーは、一般的に、利用可能性（稼働中）が高いです。
* ダウンタイムやシステムトラブルを除けば、専用ウェブサーバーは常にインターネットに接続されています。
* 専用ウェブサーバーは、いつでも IP アドレスが同じです。これは**専用 IP アドレス**と呼ばれています。（すべての プロバイダー が家庭用の回線に固定 IP アドレスを提供しているとは限りません。）
* 専用ウェブサーバーは、通常、サードパーティによって管理されています。

これらすべての理由から、良いホスティングのプロバイダーを探すことは、ウェブサイトを構築する上で重要な部分です。様々なサービス会社が提供するものを探し、ニーズや予算に合う一つを選択しましょう（無料のものから月当たり数千ドルまでのサービスがあります）。詳しくはこの記事にあります。

ウェブのホスティングサービスを契約したら、後はウェブサーバーにファイルをアップロードするだけです。

### HTTP による通信

次に、ウェブサーバーは HTTP (**H**yper**t**ext **T**ransfer **P**rotocol) への対応を提供しています。名前にある通り、 HTTP はコンピューター間でハイパーテキスト（リンクされたウェブ文書）を転送する方法を定義しています。

プロトコルは二台のコンピューター間で通信をする規則を設定します。 HTTP はテキストによる、ステートレス（下記参照）のプロトコルです。

テキストによる

すべてのコマンドがプレーンテキストで、人間が読める形です。

ステートレス

サーバーもクライアントも以前の通信を覚えていません。例えば、 HTTP 単独では、サーバーは入力したパスワードや、処理中のどのステップにいるかを覚えていることはできません。このような仕事をするには、アプリケーションサーバーが必要になります。 (以降の記事で様々な技術を説明します。)

HTTP はクライアントとサーバーがどのように通信するかについての明確なルールを提供しています。 HTTP 自体については、後で技術記事で説明します。これからは、以下のようなことに気を付けてください。

* **クライアント**だけが HTTP リクエストを作成することができ、**サーバー**だけに送ることができます。サーバーは**クライアント**の HTTP リクエストに**返答**することだけができます。
* HTTP でファイルをリクエストするとき、クライアントはファイルの URL を示さなければなりません。
* ウェブサーバーはすべての HTTP リクエストに応える必要があります。処理できない場合でも、エラーメッセージを返す必要があります。

ウェブサーバーでは、 HTTP サーバーが受信したリクエストを処理し、応答する役割を担っています。

1. リクエストを受信すると、 HTTP サーバーは最初にリクエストされた URL が既存のファイルに一致するかどうかをチェックします。
2. もしあれば、ウェブサーバーはブラウザーにファイルを送り返します。なければ、アプリケーションサーバーが必要なファイルを作成します。
3. どちらの処理もできない場合、ウェブサーバーは `404 Not Found` としてよく知られているエラーメッセージをブラウザーに返します。
 404 エラーはよく起こるので、多くのウェブデザイナーが 404 エラーページのデザインに時間を割いています。
 ![The MDN 404 page as an example of such error page](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server/mdn-404.jpg)
### 動的コンテンツと静的コンテンツ

大まかに言って、サーバーは静的コンテンツと動的コンテンツのどちらかを提供することができます。「静的」は「そのまま提供する」という意味です。静的なウェブサイトは構築するのが最も簡単なので、最初に静的サイトを作成することをお勧めします。

「動的」はサーバーがコンテンツを処理したり、データベースからその場で作成したりすることを意味します。この方法は、柔軟なページを提供できる反面、技術的難易度が高く、ウェブサイトの構築が複雑になります。

アプリケーションサーバーは多くの種類があり、特定のサーバーを選ぶのはとても難しいといえます。あるものは、ブログ、Wiki、 E ショップなどに特殊化しています。いっぽう、 CMS (Content Management System) と呼ばれるものはより一般的です。動的ウェブサイトを構築するときは、ニーズに合ったツールの選択に時間をかけましょう。ウェブサーバープログラミングを学習しようとするのでなければ（これ自体はエキサイティングな領域ですが）、独自のアプリケーションサーバーを作成する必要はありません。それは車輪の再発明のような、無用な努力になるからです。

次のステップ
------

ウェブサーバーのことがよく分かったら、次のステップに進みましょう。

* ウェブ上で何かをするためにどれくらいコストがかかるかを知る
* ウェブサイトを作成するのに必要な様々なソフトウェアについてもっと学ぶ
* ファイルをウェブサーバーにアップロードするにはのような、実践的な記事を読む


URL とは？ - ウェブ開発を学ぶ

URL とは？
=======

この記事では URL (Uniform Resource Locator) について説明し、その内容と構造を説明します。

|  |  |
| --- | --- |
| 前提知識: | インターネットはどのように動くのか、ウェブサーバーとは、ウェブ上のリンクの背後にある概念を知っておく必要があります。 |
| 目標: | URL とは何か、ウェブ上でどう働くのかについて学習します。 |

概要
--

ハイパーテキストや HTTP とともに、 ***URL*** はウェブの重要な概念の一つです。ブラウザーがウェブ上の公開されたリソースを取得するために使用する仕組みです。

**URL** は *Uniform Resource Locator* の略です。 URL はウェブ上の特定の一意のリソースのアドレスにすぎません。理論的には、それぞれ有効な URL は一意のリソースを指しています。そのようなリソースは HTML ページ、 CSS 文書、画像などである可能性があります。実際には一部例外もあります。最も一般的なものは、もはや存在しないリソースや移動したリソースを指す URL です。 URL で表されるリソースと URL 自体はウェブサーバーによって処理されるため、ウェブサーバーの所有者がそのリソースとその関連 URL を慎重に管理する必要があります。

基本: URL の解剖
-----------

URL の例を次に示します
```

https://developer.mozilla.org
https://developer.mozilla.org/ja/docs/Learn/
https://developer.mozilla.org/ja/search?q=URL
```

これらの URL のいずれかをブラウザーのアドレスバーに入力して、関連するページ（リソース）をロードするように指示することができます。

URL はさまざまな部分で構成されていますが、必須のものと任意のものもあります。次の URL を使用して最も重要な部分を見てみましょう（下記の節で詳細を提供しています）。

![full URL](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/mdn-url-all.png)

**メモ:** URL を通常の郵便の住所として考えることもできます。スキーム (*scheme*) は利用したい郵便サービス、ドメイン名 (*domain name*) は市町村、ポート番号 (*port*) は郵便番号のようなもの、パス (*path*) は郵便物を届けるべき建物、引数 (*parameters*) はその建物の部屋番号など追加情報、アンカー (*anchor*) は実際の宛先人物を表します。

**メモ:** URL に関してはいくつかの追加の部分と追加のルールがありますが、これらは普通のユーザーとウェブ開発者には関係ありません。気にしないでください。これを知る必要はありませんし、 URL のすべての機能を使用する必要もありません。

スキーム
----

![スキーム](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/mdn-url-protocol@x2_update.png)

URL の最初の部分は**スキーム**で、ブラウザーがリソースをリクエストするために使用するプロトコルを示します（プロトコルとは、コンピューターネットワーク上でデータを交換または転送するための一連の手順です）。通常、ウェブサイトのプロトコルは、 HTTPS または HTTP （保護なしバージョン）です。しかし、ブラウザーは `mailto:` （メールクライアントを開く）のような他のスキームを処理する方法も知っているので、他のプロトコルを見かけても驚かないでください。

オーソリティ
------

![オーソリティ](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/mdn-url-authority.png)

次に**オーソリティ**が続きます。これはスキームから `://` の文字パターンで区切られます。オーソリティがある場合は、**ドメイン**（例えば `www.example.com`）と**ポート番号** (`80`) がコロン区切りで含まれます。

* ドメインは、どのウェブサーバーを要求しているのかを示します。通常はドメイン名ですが、 IP アドレスを使うこともあります（ただし、これは利便性に欠けるので稀です）。
* ポートは、ウェブサーバー上のリソースにアクセスするために使用される技術的な「門」 を示します。ウェブサーバーが HTTP プロトコルの標準ポート（HTTP は 80、 HTTPS は 443）を使用してリソースへのアクセスを許可している場合は、通常、この項目は省略されます。それ以外の場合は必須です。

**メモ:** スキームとオーソリティの間の区切り文字は `://` です。コロンはスキームと URL の次の部分を分離し、 `//` は URL の次の部分がオーソリティであることを示します。

オーソリティを使用しない URL の一例として、メールクライアント (`mailto:foobar`) があります。これはスキームを含んでいますが、オーソリティ部分を使用していません。したがって、コロンの後には 2 つのスラッシュがなく、スキームとメールアドレスの間の区切り文字としてのみ機能します。

リソースへのパス
--------

![ファイルへのパス](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/mdn-url-path@x2.png)

`/path/to/myfile.html` は、ウェブサーバー上のリソースへのパスです。初期のウェブでは、このようなパスはウェブサーバー上の物理的なファイルの場所を表していました。今日ではほとんどの場合、物理的なものではなくウェブサーバーによって処理される抽象的なものです。

引数
--

![引数](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/mdn-url-parameters@x2.png)

`?key1=value1&key2=value2` は、ウェブサーバーに提供される追加の引数です。これらの引数は `&` 記号で区切られたキー/値の組のリストです。ウェブサーバーは、リソースを返す前にこれらの引数を使用して追加の処理を行うことができます。各ウェブサーバーには引数に関する独自のルールがありますので、特定のウェブサーバーが引数を処理するかどうかを確認する確実な方法は、ウェブサーバーの所有者に問い合わせることだけです。

アンカー
----

![アンカー](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/mdn-url-anchor@x2.png)

`#SomewhereInTheDocument` は、リソース自体の別の部分へのアンカーです。アンカーはリソース内の一種の「ブックマーク」を表し、ブラウザーにそのブックマークされた場所にあるコンテンツを表示するための指示を与えます。たとえば、 HTML 文書では、ブラウザーはアンカーが定義されている位置までスクロールします。ビデオやオーディオ文書では、ブラウザーはアンカーが表す時刻に移動しようとします。 **#** の後の部分は**フラグメント識別子**とも呼ばれ、リクエストとともにサーバーに送信されることはありません。

### URL の使い方

ブラウザーのアドレスバーの中に正しく URL を入力すれば、それに対応するリソースを得ることができます。しかし、これは氷山の一角にすぎません。

HTML 言語では — 後述しますが — URL を幅広く使用しています。

* `<a>` 要素により、他の文書へのリンクを生成する
* `<link>` や `<script>` のような様々な要素を介して、文書を関連するリソースと結びつける
* 画像（`<img>` 要素による）、動画（`<video>` 要素による）、音声と音楽（`<audio>` 要素による）などのメディアを表示する
* `<iframe>` 要素により、他の HTML 文書を表示する

**メモ:** URL を指定してページの一部としてリソースを読み込む際（`<script>`, `<audio>`, `<img>`, `<video>` を使用する場合など）は、 HTTP と HTTPS の URL のみを使用してください。いくつかの例外はあります（注目すべきは `data:` です。データ URL を参照してください）。たとえば FTP を使用しても、安全になることはなく、多くのブラウザーでは対応していません。

CSS や JavaScript などの他の技術は、URL を広範囲に使用し、真にウェブの中核です。

絶対 URL と相対 URL
--------------

上記で見たものは**絶対 URL** と呼ばれていますが、**相対 URL** と呼ばれるものもあります。 URL 標準では両方が定義されています。 — ここでは*絶対 URL 文字列*および*相対 URL 文字列*という言葉が使われています。これは URL オブジェクト（URL のメモリー内の表現）と区別するためです。

URL のコンテキストで*絶対*と*相対*の意味の違いを確認してみましょう。

URL の必須部分は、その URL が使用されているコンテキストによって大きく異なります。ブラウザーのアドレスバーでは、 URL にはコンテキストがありません。そのため、上で見たように、完全（または**絶対**） URL を指定する必要があります。プロトコル（ブラウザーは既定で HTTP を使用します）やポート番号（対象となるウェブサーバーが通常以外のポートを使用している場合にのみ必要）を含める必要はありませんが、 URL の他の部分はすべて必要です。

HTML ページ内など、文書内で URL が使用されている場合は状況が少し異なります。ブラウザーはすでに文書自身の URL を持っているので、この情報を文書内で利用される URL の欠けている部分を補うために利用することができます。**絶対 URL** と**相対 URL** は、 URL の**パス**の部分を見るだけで区別することができます。 URL のパスの部分が "`/`" の文字で始まっていれば、ブラウザーは現在の文書で指定されているコンテキストを参照せずに、サーバーの最上位のルートからそのリソースを取得します。

これを明確にするためにいくつかの例を見てみましょう。

### 絶対 URL の例

|  |  |
| --- | --- |
| 完全 URL (以前に使用したものと同じ) |
```
https://developer.mozilla.org/ja/docs/Learn
```
 |
| 暗黙のプロトコル |
```
//developer.mozilla.org/ja/docs/Learn
```

この場合、ブラウザーはその URL をホストしている文書を読み込むために使用されたものと同じプロトコルで、その URL を呼び出します。 |
| 暗黙のドメイン名 |
```
/ja/docs/Learn
```

 これは、 HTML 文書内の絶対 URL の最も一般的な使用例です。ブラウザーは、その URL をホストしている文書を読み込むために使用されたものと同じプロトコルおよび同じドメイン名を使用します。
 \*\*メモ:\*\*
 *プロトコルを省略せずにドメイン名だけ省略することはできません。*
 |

### 相対 URL の例

次の例をよく理解するために、これらの URL が `https://developer.mozilla.org/ja/docs/Learn` という URL にある文書内から呼び出されると仮定しましょう。

|  |  |
| --- | --- |
| サブリソース |
```
Skills/Infrastructure/Understanding_URLs
```

URL が `/` で始まっていないので、ブラウザーは現在のリソースを含んでいるディレクトリーのサブディレクトリーでその文書を見つけようとします。そのため、この例では本当に達したい URL である次の URL に達します。https://developer.mozilla.org/ja/docs/Learn/Skills/Infrastructure/Understanding\_URLs. |
| ディレクトリーツリー内をさかのぼる |
```
../CSS/display
```

この場合、 UNIX ファイルシステムの世界から継承された `../` の表記規則を使用して、ブラウザーにあるディレクトリーの上に移動したいことを伝えます。つまり、次の URL にアクセスしようとします。https://developer.mozilla.org/ja/docs/Learn/../CSS/displayこれは、次のように単純化することができます。https://developer.mozilla.org/ja/docs/CSS/display |

### セマンティック URL

URL はとても技術的な香りがするにもかかわらず、人間が読めるウェブサイトの入口を表します。覚えやすく、誰でもブラウザーのアドレスバーに入力することができます。人々はウェブの中核にいるので、**セマンティック URL** と呼ばれるものを構築することがベストプラクティスと考えられています。セマンティック URL は、技術的な知識に関係なく、誰でも理解できる固有の意味を持つ単語を使用します。

言語的セマンティックはもちろんコンピューターとは無関係です。おそらくランダムな文字を組み合わせたように見える URL を見たことがあるでしょう。しかし、人間が読める URL を作成することには多くの利点があります。

* より操作しやすくなります。
* ウェブ上のどこにいるのか、何をしているのか、何を読んでいるのか、何と対話しているかといった観点のことが、ユーザーにとって明確になります。
* 検索エンジンによっては、関連するページを分類するためにこれらのセマンティックを使用することがあります。
関連情報
----

データ URL — データ URL とは、 URL の前に`data:`スキームを付けたもので、コンテンツ制作者が小さなファイルを文書内にインラインで埋め込むことを可能にします。