path: root/files/ja/learn/javascript/first_steps/variables/index.html

---
title: 必要な情報を保存する — 変数
slug: Learn/JavaScript/First_steps/Variables
tags:
  - Arrays
  - Booleans
  - JavaScript
  - Numbers
  - Objects
  - Updating
  - Variables
  - declaring
  - initializing
  - 'l10n:priority'
  - loose typing
  - strings
translation_of: Learn/JavaScript/First_steps/Variables
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div>

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

<table class="learn-box">
 <tbody>
  <tr>
   <th scope="row">前提条件:</th>
   <td>基本的なコンピューターの知識、HTML と CSS の基本についての理解、JavaScript が何かが分かっていること。</td>
  </tr>
  <tr>
   <th scope="row">目的:</th>
   <td>JavaScript の変数についての基礎を会得する。</td>
  </tr>
 </tbody>
</table>

<h2 id="Tools_you_need" name="Tools_you_need">必要なツール</h2>

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

<h2 id="What_is_a_variable" name="What_is_a_variable">変数とは</h2>

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

<pre class="brush: html notranslate">&lt;button&gt;押してください&lt;/button&gt;</pre>

<pre class="brush: js notranslate">const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('あなたの名前は何ですか？');
  alert('こんにちは、' + name + 'さん、初めまして！');
}</pre>

<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>

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

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

<pre class="example-bad notranslate">let name = prompt('あなたの名前は何ですか？');

if (name === 'アダム') {
  alert('こんにちは、アダムさん初めまして！');
} else if (name === 'アラン') {
  alert('こんにちは、アランさん初めまして！');
} else if (name === 'ベラ') {
  alert('こんにちは、ベラさん初めまして！');
} else if (name === 'ビアンカ') {
  alert('こんにちは、ビアンカさん初めまして！');
} else if (name === 'クリス') {
  alert('こんにちは、クリスさん初めまして！');
}

// ... さらに続く ...</pre>

<p>もしかしたら、まだ完全にはコードの内容がわからないかもしれませんね！けれども、変数がなければ、適切なメッセージを表示するために、どんな名前が入力されたのかを延々と判定し続ける巨大なコードを書かなければならないことが、何となくでもわかるのではないでしょうか。これはまったくもって非効率です(このコードは 5人の名前しか表示できないのに既に大きくなっています)。さらに、すべての状況に対応するようには書くことはできないでしょう。</p>

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

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

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

<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p>

<h2 id="Declaring_a_variable" name="Declaring_a_variable">変数を宣言する</h2>

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

<pre class="brush: js notranslate">let myName;
let myAge;</pre>

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

<div class="note">
<p><strong>注</strong>: JavaScript では、命令の行末ごとにセミコロン (<code>;</code>) を書かなければなりません。1行ずつ書いているうちは動くかもしれませんが、複数行を書き始めたら動かなくなってしまうでしょう。いつでもセミコロンを書くようにして、慣れていきましょう。</p>
</div>

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

<pre class="brush: js notranslate">myName;
myAge;</pre>

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

<pre class="brush: js notranslate">scoobyDoo;</pre>

<div class="note">
<p><strong>注</strong>: 変数が存在していて値がないのと、変数自体が存在していないことを混同しないでください。この違いは重要です。上記の箱の例えでは、変数自体が存在しないということは値の箱（変数）がないということとなります。値がないということは、箱は確かにあるけれどその中に値がないということです。</p>
</div>

<h2 id="Initializing_a_variable" name="Initializing_a_variable">変数を初期化する</h2>

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

<pre class="brush: js notranslate">myName = 'Chris';
myAge = 37;</pre>

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

<pre class="brush: js notranslate">myName;
myAge;</pre>

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

<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myDog <span class="operator token">=</span> <span class="string token">'Rover'</span><span class="punctuation token">;</span></code></pre>

<p>2行で書くよりも簡単に書けるので、ほとんどの場合はこのように書くでしょう。</p>

<h2 id="The_difference_between_var_and_let" name="The_difference_between_var_and_let">var と let の違い</h2>

<p>ここまでで、「なぜ変数を定義するのに 2 つのキーワードが必要なのですか。なぜ <code>var</code> と<code> let</code> があるのでしょうか」と考えるかもしれません。</p>

<p>その理由はやや歴史的なものです。JavaScript が最初に作成されたときには、<code>var</code> しかありませんでした。ほとんどの場合、基本的にはうまく機能しますが、その機能にはいくつかの問題があります。その設計は時々混乱したり、実に迷惑になることがあります。そこで、<code>let</code> を最新のバージョンの JavaScript で作成しました。これは、<code>var</code> とは多少異なる動作をする変数を作成するための新しいキーワードで、その過程での問題を修正しています。</p>

<p>一部の簡単な違いを以下に説明します。ここではすべての違いについて説明するわけではありませんが、JavaScript について詳しく学習するにつれてそれらの違いがわかるようになります (今すぐ読みたい場合は、<a href="/ja/docs/Web/JavaScript/Reference/Statements/let">let のリファレンスページ</a>を参照してください)。</p>

<p>はじめに、変数を宣言して初期化する複数行の JavaScript プログラムを作成した場合、変数を初期化した後で実際に変数を <code>var</code> で宣言することができます。例えば：</p>

<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">myName <span class="operator token">=</span> <span class="string token">'Chris'</span><span class="punctuation token">;</span>

<span class="keyword token">function</span> <span class="function token">logName</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>myName<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="function token">logName</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="keyword token">var</span> myName<span class="punctuation token">;</span></code></pre>

<div class="note">
<p><strong>メモ</strong>: Web コンソールで複数行の JavaScript を実行しているときだけでは、JavaScript コンソールに 1行ずつ入力してもうまくいきません。</p>
</div>

<p>これは<strong>巻き上げ</strong>のために動作します。件名に関する詳細については <a href="/ja/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var の巻き上げ</a>を読んでください。</p>

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

<p>第二に、<code>var</code> を使用するとき、好きなだけ同じ変数を何度でも宣言することができます、しかし <code>let</code> ではできません。次のようにします。</p>

<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> myName <span class="operator token">=</span> <span class="string token">'Chris'</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> myName <span class="operator token">=</span> <span class="string token">'Bob'</span><span class="punctuation token">;</span></code></pre>

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

<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myName <span class="operator token">=</span> <span class="string token">'Chris'</span><span class="punctuation token">;</span>
<span class="keyword token">let</span> myName <span class="operator token">=</span> <span class="string token">'Bob'</span><span class="punctuation token">;</span></code></pre>

<p>代わりにこれをしなければならないでしょう：</p>

<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myName <span class="operator token">=</span> <span class="string token">'Chris'</span><span class="punctuation token">;</span>
myName <span class="operator token">=</span> <span class="string token">'Bob'</span><span class="punctuation token">;</span></code></pre>

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

<p>これらの理由などから、コードでは <code>var</code> ではなく可能な限り <code>let</code> を使用することをお勧めします。コードで古いバージョンの Internet Explorer をサポートする必要がない限り、<code>var</code> を使用する理由はありません (バージョン 11 まで <code>let</code> をサポートしていません。最近の Windows Edge ブラウザーでは、<code>let</code> をサポートしています)。</p>

<h2 id="Updating_a_variable" name="Updating_a_variable">変数の値を変更する</h2>

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

<pre class="brush: js notranslate">myName = 'Bob';
myAge = 40;</pre>

<h3 id="An_aside_on_variable_naming_rules" name="An_aside_on_variable_naming_rules">変数の名前付けのルール</h3>

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

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

<div class="note">
<p><strong>注</strong>: 避けるべき予約語の一覧は<a href="/ja/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">字句文法 — キーワード</a>で見つかるでしょう。</p>
</div>

<p>良い名前の例：</p>

<pre class="example-good notranslate">age
myAge
init
initialColor
finalOutputValue
audio1
audio2</pre>

<p>悪い名前の例：</p>

<pre class="example-bad notranslate">1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongstupidvariablenameman</pre>

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

<h2 id="Variable_types" name="Variable_types">変数のデータ型</h2>

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

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

<h3 id="Numbers" name="Numbers">数値型</h3>

<p>変数には数値を格納することができます。数値は 30 のような整数値や、2.456 のような実数値 (浮動小数点数とも呼ばれます ) が存在します。その他の言語とは違い、JavaScript ではデータ型を宣言する必要はありません。もし数値を変数に設定するならば、クォーテーションマークは付けてはいけません。</p>

<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myAge <span class="operator token">=</span> <span class="number token">17</span><span class="punctuation token">;</span></code></pre>

<h3 id="Strings" name="Strings">文字列型</h3>

<p>文字列とは文字が連なったもののことです。変数に文字列値を設定する場合、シングルクォーテーション (<code>'</code>) またはダブルクォーテーション (<code>"</code>) で文字を囲みます。囲み忘れると、JavaScript はその文字を変数名として解釈しようとしてしまいます。</p>

<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> dolphinGoodbye <span class="operator token">=</span> <span class="string token">'So long and thanks for all the fish'</span><span class="punctuation token">;</span></code></pre>

<h3 id="Booleans" name="Booleans">真偽値</h3>

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

<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> iAmAlive <span class="operator token">=</span> <span class="boolean token">true</span><span class="punctuation token">;</span></code></pre>

<p>実際には以下のように使われます。</p>

<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> test <span class="operator token">=</span> <span class="number token">6</span> <span class="operator token">&lt;</span> <span class="number token">3</span><span class="punctuation token">;</span></code></pre>

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

<h3 id="Arrays" name="Arrays">配列</h3>

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

<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myNameArray <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'Chris'</span><span class="punctuation token">,</span> <span class="string token">'Bob'</span><span class="punctuation token">,</span> <span class="string token">'Jim'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
<span class="keyword token">let</span> myNumberArray <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">15</span><span class="punctuation token">,</span> <span class="number token">40</span><span class="punctuation token">]</span><span class="punctuation token">;</span></code></pre>

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

<pre class="brush: js notranslate">myNameArray[0]; // 'クリス'と表示されます
myNumberArray[2]; // 40 と表示されます</pre>

<p>角括弧で表示したい値の位置に応じたインデックス値を指定します。気づいたかもしれませんが JavaScript の配列は 0 始まりで、最初の要素のインデックスが 0 となります。</p>

<p>配列についても<a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">先の記事</a>にて紹介します。</p>

<h3 id="Objects" name="Objects">オブジェクト</h3>

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

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

<pre class="brush: js notranslate">let dog = { name : 'ポチ', breed : 'ダルメシアン' };</pre>

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

<pre class="brush: js notranslate">dog.name</pre>

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

<h2 id="Loose_typing" name="Loose_typing">動的型付け</h2>

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

<p>たとえば、もし変数を宣言して、クォーテーションマークで囲んだ値を渡すとします。すると、ブラウザーはこれを文字列として扱うでしょう。</p>

<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myString <span class="operator token">=</span> <span class="string token">'Hello'</span><span class="punctuation token">;</span></code></pre>

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

<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myNumber <span class="operator token">=</span> <span class="string token">'500'</span><span class="punctuation token">;</span> <span class="comment token">// oops, this is still a string</span>
<span class="keyword token">typeof</span> myNumber<span class="punctuation token">;</span>
myNumber <span class="operator token">=</span> <span class="number token">500</span><span class="punctuation token">;</span> <span class="comment token">// much better — now this is a number</span>
<span class="keyword token">typeof</span> myNumber<span class="punctuation token">;</span></code></pre>

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

<h2 id="Constants_in_JavaScript" name="Constants_in_JavaScript">JavaScript の定数</h2>

<p>多くのプログラミング言語は定数の概念を持っています — 一度宣言されると変更できない値です。セキュリティ (サードパーティのスクリプトによってこのような値が変更された場合に問題が発生する可能性がある) からデバッグやコードの理解 (変更してはいけない値を誤って変更して混乱する) まで、実行するさまざまな理由があります。</p>

<p>JavaScript の初期の頃は、定数は存在しませんでした。現代の JavaScript では、<code>const</code> というキーワードがあります。これにより、絶対に変更できない値を格納できます。</p>

<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">const</span> daysInWeek <span class="operator token">=</span> <span class="number token">7</span><span class="punctuation token">;</span>
<span class="keyword token">const</span> hoursInDay <span class="operator token">=</span> <span class="number token">24</span><span class="punctuation token">;</span></code></pre>

<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number"><code>const</code></span></span></span></span> は <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number"><code>let</code></span></span></span></span> と全く同じように動作しますが、<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number"><code>const</code></span></span></span></span> に新しい値を与えることはできません。次の例では、2行目でエラーが発生します。</p>

<pre class="brush: js notranslate"><code class="language-js"><span class="keyword token">const</span> daysInWeek <span class="operator token">=</span> <span class="number token">7</span><span class="punctuation token">;</span>
daysInWeek <span class="operator token">=</span> </code><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">8;</span></span></span></span></pre>

<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2>

<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を取得したかのテストを見ることができます — <a href="/ja/docs/Learn/JavaScript/First_steps/Test_your_skills:_variables">Test your skills: variables</a> を見てください。</p>

<h2 id="Summary" name="Summary">まとめ</h2>

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

<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</p>

<h2 id="In_this_module" name="In_this_module">このモジュール</h2>

<ul>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li>
</ul>