path: root/files/ja/learn/getting_started_with_the_web/javascript_basics/index.html

---
title: JavaScript の基本
slug: Learn/Getting_started_with_the_web/JavaScript_basics
tags:
  - Beginner
  - CodingScripting
  - JavaScript
  - Learn
  - Web
  - l10n:priority
translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>

<div class="summary">
<p>JavaScript はウェブサイトにインタラクティブ機能 (ゲーム、ボタンが押されたときやデータがフォームに入力されたときの反応、動的なスタイルの変更、アニメーションなど) を追加するプログラミング言語です。この記事は、このエキサイティングな言語を始めるのに役立ち、可能性についてのアイディアを提供します。</p>
</div>

<h2 id="What_is_JavaScript">JavaScript とは何か</h2>

<p>{{Glossary("JavaScript")}} (略して "JS") は成熟した{{Glossary("Dynamic_programming_language", "動的プログラミング言語")}}であり、{{Glossary("HTML")}} 文書に適用すると、ウェブサイトに動的な対話操作を提供できます。Mozilla プロジェクト、Mozilla Foundation、Mozilla Corporation の共同設立者である Brendan Eich によって考案されました。</p>

<p>JavaScript は汎用性が高く、初心者にもやさしいものです。経験を積めば、ゲーム、 2D や 3D のアニメーション、包括的なデータベース駆動型のアプリなどが作れるようになります。</p>

<p>JavaScript は比較的コンパクトですが、一方でとても柔軟性があります。開発者は JavaScript 言語のコアをベースに多種多様なツールを作成し、最小限の労力で膨大な様々な機能を利用できるようにしました。例えば以下のようなものがあります。</p>

<ul>
 <li>ブラウザーのアプリケーションプログラミングインターフェイス ({{Glossary("API")}})。ウェブブラウザーに組み込まれた API により、動的な HTML の作成、 CSS スタイルの設定、ユーザーのウェブカメラからの動画ストリームの収集や操作、3D グラフィックやオーディオサンプルの生成などの機能を提供する、ウェブブラウザーに組み込まれた API。</li>
 <li>開発者が Twitter や Facebook のような他のコンテンツプロバイダーのサイトから機能を組み込むことを可能にする、サードパーティの API。</li>
 <li>すばやくサイトやアプリケーションを構築することができ、 HTML に組み込み可能なサードパーティのフレームワークやライブラリー。</li>
</ul>

<p>コアの JavaScript 言語が上記のツールとどのように違うのか、その詳細を紹介することは、 JavaScript の軽い入門者向けの書籍であるこの記事の範囲外です。詳細は MDN の <a href="/ja/docs/Learn/JavaScript">JavaScript 学習エリア</a>や、 MDN の他の部分で詳しく学ぶことができます。</p>

<p>以下では、コア言語のいくつかの側面について紹介します。またブラウザーの API 機能についてもいくつか説明します。楽しみましょう！</p>

<h2 id="A_Hello_world!_example"><em>Hello world!</em> の例</h2>

<p>JavaScript は、最も人気のある現代のウェブ技術のひとつです。あなたの JavaScript のスキルが上がれば、あなたのウェブサイトのパワーと創造性は新たな次元に入るでしょう。</p>

<p>しかし、JavaScript を使いこなせるようになるのは HTML や CSS よりも少し難しいです。小さなものから始め、小さく確実な手順で作業を続ける必要があるかもしれません。始めるにあたって、<em>"hello world!"</em> を表示する例 (<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">基本的なプログラミング例の標準</a>) を作りながら、基本的な JavaScript をページに追加する方法を紹介しましょう。</p>

<div class="warning">
<p><strong>重要</strong>: これまでこのコースに沿って進めてきていない場合は、<a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">このサンプルコードをダウンロードして</a>作業を進めてください。</p>
</div>

<ol>
 <li>最初にテストサイトに行き、 <code>scripts</code> という名前の新しいフォルダーを作成してください。それから、 scripts フォルダーの中に <code>main.js</code> という新しいファイルを作成して保存してください。</li>
 <li><code>index.html</code> ファイルの <code>&lt;/body&gt;</code> 閉じタグの直前に新しい行で、以下の新しい要素を追加してください。
  <pre class="brush: html">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
 </li>
 <li>これは CSS の {{htmlelement("link")}} 要素の時の作業と基本的に同じです。これは JavaScript をページに適用するので、(CSS の時と同じく、ページ上の何に対しても) HTML に影響を与えることができます。</li>
 <li><code>main.js</code> ファイルに次のコードを追加してください。
  <pre class="brush: js">const myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';</pre>
 </li>
 <li>最後に、 HTML と JavaScript を書いたファイルを保存したことを確認し、ブラウザーで <code>index.html</code> を読み込んでください。<img alt="" src="hello-world.png" style="display: block; margin: 0px auto;"></li>
</ol>

<div class="note">
<p><strong>注</strong>: 上記の説明で {{htmlelement("script")}} 要素を HTML ファイルの末尾付近に置いたのは、<strong>ブラウザーがファイルに現れる順番でコードを読み込むからです</strong>。</p>

<p>JavaScript が先に読み込まれ、まだ読み込まれていない HTML に影響を与えることになると、問題が生じる可能性があります。 JavaScript を HTML ページの下部に配置することは、この依存関係に対応する一つの方法です。その他の方法については、<a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript#script_loading_strategies">スクリプトの読み込み戦略</a>をご覧ください。</p>
</div>

<h3 id="What_happened">何が起きたのか</h3>

<p>JavaScript を使用して、見出しの文字列が <em>Hello world!</em> に変更されました。最初に <code>{{domxref("Document.querySelector", "querySelector()")}}</code> と呼ばれる関数を使用して見出しの参照を取得し、 <code>myHeading</code> と呼ばれる変数に格納しています。これは CSS のセレクターを使用するのととてもよく似ています。要素に対して何かをしたくなったら、まずその要素を選択する必要があります。</p>

<p>その後、<code>myHeading</code> 変数の <code>{{domxref("Node.textContent", "textContent")}}</code> プロパティ (見出しの内容を表す) の値を <em>Hello world!</em> に設定します。</p>

<div class="note">
<p><strong>注 </strong>: 上の例で使用した機能はどちらも<a href="/ja/docs/Web/API/Document_Object_Model">ドキュメントオブジェクトモデル (DOM) API</a> の一部であり、これを使って文書を操作することができます。</p>
</div>

<h2 id="Language_basics_crash_course">言語の短期集中コース</h2>

<p>どのように動作するかをよりよく理解できるように、 JavaScript 言語の基本機能のいくつかを説明しましょう。これらの機能はすべてのプログラミング言語に共通しているので、これらの基本をマスターすれば、ほとんど何でもプログラムできるようになります！</p>

<div class="warning">
<p><strong>重要</strong>: この記事では、 JavaScript コンソールにサンプルコードを入力して、何が起こるのかを確認してみます。 JavaScript コンソールの詳細については、 <a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザー開発ツールを探る</a>を参照してください。</p>
</div>

<h3 id="Variables">変数</h3>

<p>{{Glossary("Variable", "変数")}} は、値を格納できる入れ物です。まず、 <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/var">var</a></code> (説明はややこしいですが、推奨しません) または <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/let">let</a></code> というキーワードと、その後に任意の名前を指定することで、変数を宣言します。</p>

<pre class="brush: js">let myVariable;</pre>

<div class="note">
<p><strong>注</strong>: 行末のセミコロンは文が終わる場所を示します。単一の行で複数の文を区切る場合には絶対に必要です。しかし、個々の文の末尾に置くことが良い習慣だと信じている人もいます。使用する場面と使用しない場合については他のルールもあります。詳しくは <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Your Guide to Semicolons in JavaScript</a> を参照してください。</p>
</div>

<div class="note">
<p><strong>注 </strong>: 変数にはほとんど何でも名前を付けることができますが、いくらかの制約があります(<a href="/ja/docs/Web/JavaScript/Guide/Grammar_and_types#variables">変数の命名規則についてはこの記事</a>を参照してください)。自信がない場合は、有効かどうか<a href="https://mothereff.in/js-variables">変数名を調べる</a>ことができます。</p>
</div>

<div class="note">
<p><strong>注</strong>: JavaScript は大文字と小文字を区別します。<code>myVariable</code> は <code>myvariable</code> とは異なる変数です。コードで問題が発生している場合は、大文字・小文字をチェックしてください。</p>
</div>

<div class="note">
<p><strong>注</strong>: <code>var</code> と <code>let</code> のより詳しい違いは、<a href="/ja/docs/Learn/JavaScript/First_steps/Variables#the_difference_between_var_and_let">var と let の違い</a>を見てください。</p>
</div>

<p>変数を宣言したら、以下のように値を割り当てることができます。</p>

<pre class="brush: js">myVariable = 'Bob';
</pre>

<p>好みに応じて、両方の操作を同一の行で行うことができます。</p>

<pre class="brush: js">let myVariable = 'Bob';</pre>

<p>変数の値は、名前で呼び出すだけで取得することができます。</p>

<pre class="brush: js">myVariable;</pre>

<p>変数に値を代入した後で、変更することもできます。</p>

<pre>let myVariable = 'Bob';
myVariable = 'Steve';</pre>

<p>なお、変数は様々な<a href="/ja/docs/Web/JavaScript/Data_structures">データ型</a>の値を保持することもできます。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="row">データ型</th>
   <th scope="col">説明</th>
   <th scope="col">例</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">{{Glossary("String")}}</th>
   <td>文字列と呼ばれる一連のテキスト。値が文字列であることを示すには、引用符で囲む必要があります。</td>
   <td><code>let myVariable = 'Bob';</code></td>
  </tr>
  <tr>
   <th scope="row">{{Glossary("Number")}}</th>
   <td>数。数字には引用符がありません。</td>
   <td><code>let myVariable = 10;</code></td>
  </tr>
  <tr>
   <th scope="row">{{Glossary("Boolean")}}</th>
   <td>論理値。 <code>true</code> と <code>false</code> は JS では特別なキーワードであり、引用符は必要ありません。</td>
   <td><code>let myVariable = true;</code></td>
  </tr>
  <tr>
   <th scope="row">{{Glossary("Array")}}</th>
   <td>単一の参照で複数の値を格納できる構造です。</td>
   <td><code>let myVariable = [1,'Bob','Steve',10];</code><br>
    配列の各メンバーはこのように参照してください。<br>
    <code>myVariable[0]</code>, <code>myVariable[1]</code>, など。</td>
  </tr>
  <tr>
   <th scope="row">{{Glossary("Object")}}</th>
   <td>基本的には何でも格納できます。 JavaScript のすべてがオブジェクトであり、変数に格納することができます。学ぶ際にはこれを覚えておいてください。</td>
   <td><code>let myVariable = document.querySelector('h1');</code><br>
    上記の例も同様です。</td>
  </tr>
 </tbody>
</table>

<p>ではなぜ変数が必要なのでしょうか。何か面白いプログラミングをするには変数が必要です。値が変更できなければ、挨拶のメッセージをパーソナライズしたり、画像ギャラリーに表示されている画像を変更するなどの動的な操作ができないのです。</p>

<h3 id="Comments">コメント</h3>

<p>コメントは、ブラウザーから無視される、コードの間に入れられた短いテキストスニペットです。CSS と同じように、JavaScript のコードではコメントを付けることができます。</p>

<pre class="brush: js">/*
挟まれているすべてがコメントです。
*/</pre>

<p>コメントに改行が含まれていない場合、次のように 2 つのスラッシュの後ろに記載する方が簡単です :</p>

<pre class="brush: js" style="font-size: 14px;">// これはコメントです
</pre>

<h3 id="Operators">演算子</h3>

<p>{{Glossary("operator", "演算子")}}は、2 つの値 (または変数) に基づいて結果を生成する数学的な記号です。次の表では、JavaScript コンソールで試してみるいくつかの例とともに、最も単純な演算子をいくつか見ることができます。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="row">演算子</th>
   <th scope="col">説明</th>
   <th scope="col">シンボル</th>
   <th scope="col">例</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">加算/連結</th>
   <td>2 つの数字を加えるか、2 つの文字列を結合します。</td>
   <td><code>+</code></td>
   <td><code>6 + 9;<br>
    'Hello ' + 'world!';</code></td>
  </tr>
  <tr>
   <th scope="row">減算、乗算、除算</th>
   <td>基本的な数学の計算を実施します。</td>
   <td><code>-</code>, <code>*</code>, <code>/</code></td>
   <td><code>9 - 3;<br>
    8 * 2; // JavaScript で乗算はアスタリスク<br>
    9 / 3;</code></td>
  </tr>
  <tr>
   <th scope="row">代入</th>
   <td>すでに出てきました。変数に値を割り当てます。</td>
   <td><code>=</code></td>
   <td><code>let myVariable = 'Bob';</code></td>
  </tr>
  <tr>
   <th scope="row">等価</th>
   <td>2 つの値と型が互いに等しいかどうかを調べ、<code>true</code>/<code>false</code> (論理値)の結果を返します。</td>
   <td><code>===</code></td>
   <td><code>let myVariable = 3;<br>
    myVariable === 4;</code></td>
  </tr>
  <tr>
   <th scope="row">否定、非等価</th>
   <td>その後にあるものと論理的に反対の値を返します。たとえば <code>true</code> を <code>false</code> に換えます。等価演算子と一緒に使用されると、否定演算子は 2 つの値が等しく<em>ない</em>かどうかをテストします。</td>
   <td><code>!</code>, <code>!==</code></td>
   <td>
    <p>"Not" の場合、基本式は <code>true</code> ですが、それを否定しているので比較結果は <code>false</code> になります。</p>

    <p><code>let myVariable = 3;<br>
     !(myVariable === 3);</code></p>

    <p>「等しくない」は、基本的に同じ結果を異なる構文で与えます。ここでは「<code>myVariable</code> が 3 とは等しくない」ことをテストします。 <code>myVariable</code> は 3 と等しいので、<code>false</code> を返します。</p>

    <p><code>let myVariable = 3;<br>
     myVariable !== 3;</code></p>
   </td>
  </tr>
 </tbody>
</table>

<p>他にも演算子はもっとたくさんありますが、今のところはこれで十分です。全体の一覧については、<a href="/ja/docs/Web/JavaScript/Reference/Operators">式と演算子</a>を参照してください。</p>

<div class="note">
<p><strong>注</strong>: データ型を混在させると、計算を実行するときに奇妙な結果になる可能性があるため、変数を正しく参照し、期待通りの結果を得るように注意してください。例えばコンソールに <code>'35' + '25'</code> と入力してみてください。期待通りの結果にならないのはなぜでしょうか。引用符は数字を文字列に変換するので、数字を加算するのではなく、文字列を連結する結果になったのです。 <code>35 + 25</code> を入力すれば、正しい結果が得られます。</p>
</div>

<h3 id="Conditionals">条件文</h3>

<p>条件文は、ある式が true を返すかどうかをテストし、その結果次第でそれぞれのコードを実行するコード構造です。条件文のよくある形は <code>if ... else </code> 文です。例えば以下の通りです。</p>

<pre class="brush: js">let iceCream = 'チョコレート';
if(iceCream === 'チョコレート') {
  alert('やった、チョコレートアイス大好き！');
} else {
  alert('あれれ、でもチョコレートは私のお気に入り......');
}</pre>

<p><code>if( ... )</code> の中の式が条件です — ここでは等価演算子を使用して、変数 <code>iceCream</code> と<code>チョコレート</code>という文字列を比較し、2 つが等しいかどうかを調べています。この比較が <code>true</code> を返した場合、コードの最初のブロックが実行されます。比較が真でない場合、最初のブロックはスキップされ、 <code>else</code> 文の後にある 2番目のコードブロックが代わりに実行されます。</p>

<h3 id="Functions">関数</h3>

<p>{{Glossary("Function", "関数")}} は、再利用したい機能をパッケージ化する方法です。プロシージャが必要なときは、毎回コード全体を書くのではなく関数名を使って関数を呼び出すことができます。すでにいくつかの関数の仕様を見てきました。例えば以下のようなものです。</p>

<ol>
 <li>
  <pre class="brush: js">let myVariable = document.querySelector('h1');</pre>
 </li>
 <li>
  <pre class="brush: js">alert('hello!');</pre>
 </li>
</ol>

<p>これらの関数、 <code>document.querySelector</code> と <code>alert</code> は、必要なときにいつでも使えるようブラウザーに組み込まれています。</p>

<p>もし変数名に見えるものがあったとしても、その後に括弧 <code>()</code> が付いていれば、おそらくそれは関数です。関数は普通、仕事をするのに必要な小さなデータである{{Glossary("Argument", "引数")}}を取ります。引数は括弧の中に入れ、複数の引数がある場合はカンマで区切ります。</p>

<p>例えば、 <code>alert()</code> 関数はブラウザーのウィンドウにポップアップボックスを表示しますが、ポップアップボックスに何を書き込むかを関数に指示するために、文字列を引数として渡す必要があります。</p>

<p>嬉しいことに、自分で関数を定義することができます。次の例では、引数として 2 つの数値をとり、それらを乗算するという単純な関数を記載します。</p>

<pre class="brush: js">function multiply(num1,num2) {
  let result = num1 * num2;
  return result;
}</pre>

<p>上記の関数をコンソールで実行し、いくつかの引数を指定してテストしてみてください。例えば次のようなものです。</p>

<pre class="brush: js">multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);</pre>

<div class="note">
<p><strong>注 </strong>: <a href="/ja/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> 文は <code>result</code> の値を関数内から関数の外に戻すことをブラウザーに指示し、それを利用できるようにします。これが必要な理由は、関数内で定義された変数が、その関数内でしか利用できないためです。これは変数の{{Glossary("Scope", "スコープ")}}と呼ばれています(<a href="/ja/docs/Web/JavaScript/Guide/Grammar_and_types#variable_scope">変数のスコープのより詳しい説明</a>をお読みください)。</p>
</div>

<h3 id="Events">イベント</h3>

<p>ウェブサイトを実際にインタラクティブにするには、イベントが必要です。イベントは、ブラウザーの中で起きていることを検出し、その応答としてコードを実行するコード構造です。最も分かりやすい例は <a href="/ja/docs/Web/API/Element/click_event">click イベント</a>で、マウスで何かをクリックするとブラウザーによって発行されるものです。これを実行するには、コンソールに以下のように入力してから、現在のウェブページ上をクリックしてください。</p>

<pre class="brush: js">document.querySelector('html').onclick = function() {
    alert('痛っ! つつくのはやめて!');
}</pre>

<p>要素にイベントを割り当てる方法はたくさんあります。ここでは {{htmlelement("html")}} 要素を選択し、<code><a href="/ja/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> ハンドラープロパティに、クリックイベントで実行したいコードを含む無名 (つまり名前がない) 関数を代入します。</p>

<p>なお、</p>

<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre>

<p>は以下のものと同等です。</p>

<pre class="brush: js">let myHTML = document.querySelector('html');
myHTML.onclick = function() {};</pre>

<p>短くしただけです。</p>

<h2 id="Supercharging_our_example_website">ウェブサイトの例を膨らませる</h2>

<p>さて、 JavaScript の基本のおさらいが終わったところで、例題のサイトに新しい機能を追加してみましょう。</p>

<p>先に進む前に、 <code>main.js</code> ファイルの現在の内容を削除して、空のファイルを保存してください。そうしないと、 "Hello world!" の例で使用した既存のコードが、これから追加する新しいコードと衝突してしまいます。</p>

<h3 id="Adding_an_image_changer">画像の切り替えの追加</h3>

<p>このセクションでは、 DOM API 機能をもっと使用して、サイトに画像を追加しましょう。画像をクリックすると JavaScript を使用して 2 つの画像を切り替えることができます。</p>

<ol>
 <li>まずサイトに掲載したいと思う別な画像を見つけてください。最初の画像と同じサイズか、できるだけ近いものを使用してください。</li>
 <li>この画像を <code>images</code> フォルダーに保存してください。</li>
 <li>この画像の名前を <em>firefox2.png</em> に変更してください。</li>
 <li><code>main.js</code> ファイルに次の JavaScript を入力してください。
  <pre class="brush: js">let myImage = document.querySelector('img');

myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute('src','images/firefox2.png');
    } else {
      myImage.setAttribute('src','images/firefox-icon.png');
    }
}</pre>
 </li>
 <li><code>index.html</code> をブラウザーに読み込みます。画像をクリックすると、もう一方の画像に変わります。</li>
</ol>

<p>{{htmlelement("img")}} 要素への参照を変数 <code>myImage</code> に格納します。次にこの変数の <code>onclick</code> イベントハンドラープロパティに、名前のない関数(無名関数)を代入します。そうすれば、この要素がクリックされるたびに以下の動きをします。</p>

<ol>
 <li>画像の <code>src</code> 属性の値を取得します。</li>
 <li>条件文を使って、<code>src</code> の値が元の画像のパスと等しいかどうかをチェックします。
  <ol>
   <li>そうであれば、<code>src</code> の値を  2 番目の画像へのパスに変更し、もう一方の画像が強制的に {{htmlelement("img")}} 要素の中に読み込まれるようにします。</li>
   <li>そうでない (すでに変更されている) 場合、<code>src</code> の値を元の画像のパスに戻して、元の状態に戻ります。</li>
  </ol>
 </li>
</ol>

<h3 id="Adding_a_personalized_welcome_message">パーソナライズされた挨拶メッセージの追加</h3>

<p>次に、もう 1 つの小さなコードを追加し、ユーザーがサイトにアクセスしたときに、ページの表題をパーソナライズされた挨拶メッセージに変更してみましょう。この挨拶メッセージは、ユーザーがサイトを離れて後で戻った時にも保存されるようにします。<a href="/ja/docs/Web/API/Web_Storage_API">Web Storage API</a> を使用して保存しましょう。したがって、必要な時にいつでもユーザーと挨拶メッセージを変更できるオプションも用意しましょう。</p>

<ol>
 <li><code>index.html</code> では、 {{htmlelement("script")}} 要素の直前に次の行を追加します。

  <pre class="brush: html">&lt;button&gt;ユーザーを変更&lt;/button&gt;</pre>
 </li>
 <li><code>main.js</code> では、次のコードを下記のとおりにファイルの最後に配置します。これは新しいボタンと見出しへの参照を変数に格納します。
  <pre class="brush: js">let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');</pre>
 </li>
 <li>パーソナライズされた挨拶を設定する以下の関数を追加しましょう。まだ何も起こりませんが、すぐに修正します。
  <pre class="brush: js">function setUserName() {
  let myName = prompt('あなたの名前を入力してください。');
  localStorage.setItem('name', myName);
  myHeading.textContent = 'Mozilla はすばらしいよ、' + myName;
}</pre>
  この関数では <a href="/ja/docs/Web/API/Window/prompt"><code>prompt()</code></a> 関数を使用して、<code>alert()</code> のようにダイアログボックスを表示しています。しかし、<code>prompt()</code> は <code>alert()</code> とは異なり、ユーザーにデータを入力するよう求め、ユーザーが <strong>OK</strong> を押した後に変数にそのデータを格納します。この場合、ユーザーに名前を入力するよう求めます。次に、<code>localStorage</code> と呼ばれる API を呼び出すことで、ブラウザーにデータを格納して後で受け取ることができます。 localStorage の <code>setItem()</code> 関数を使って、<code>'name'</code> と呼ばれるデータを作成し、 <code>myName</code> に入っているユーザーから入力されたデータを格納します。最後に、見出しの <code>textContent</code> に文字列と新しく格納されたユーザーの名前を設定します。</li>
 <li>次に、この <code>if ... else</code> ブロックを追加します。これは初期化コードと呼ぶことができ、最初の読み込みでアプリを構成します。
  <pre class="brush: js">if(!localStorage.getItem('name')) {
  setUserName();
} else {
  let storedName = localStorage.getItem('name');
  myHeading.textContent = 'Mozilla はすばらしいよ、' + storedName;
}</pre>
  このブロックでは、最初に <code>name</code> のデータが存在しているかどうかをチェックするために否定演算子 (! で表される論理否定) を使用しています。存在しない場合は、作成するために <code>setUserName()</code> 関数が実行されます。存在する場合は (つまり、以前の訪問時にユーザーが設定した場合)、 <code>getItem()</code> を使用して格納された名前を受け取り、 <code>setUserName()</code> の中で行ったのと同様に、見出しの <code>textContent</code> に文字列とユーザーの名前を設定します。</li>
 <li>最後に、以下の <code>onclick</code> イベントハンドラーをボタンに設定します。クリックすると、<code>setUserName()</code> 関数が実行されます。これでユーザーがボタンを押すことで、好きな時に新しい名前を設定できるようになります。
  <pre class="brush: js">myButton.onclick = function() {
  setUserName();
}
</pre>
 </li>
</ol>

<h3 id="A_user_name_of_null">A user name of null?</h3>

<p>この例を実行してユーザー名を入力するダイアログボックスが出たとき、<em>キャンセル</em>ボタンを押してみてください。結果として "Mozilla is cool, null" というタイトルが表示されるでしょう。これはプロンプトをキャンセルしたときに、値が <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code>、つまり値がないことを示す JavaScript の特殊な値に設定されるためです。</p>

<p>また何も入れずに <em>OK</em> を押してみてください — 結果として "Mozilla is cool," というタイトルが表示され、これは理由が明白です。</p>

<p>この問題を避けるには、ユーザーーが <code>null</code> や空白の名前を入力していないかチェックするよう、<code>setUserName()</code> 関数を書き換えます。</p>

<pre class="brush: js">function setUserName() {
  let myName = prompt('Please enter your name.');
  if(!myName) {
    setUserName();
  } else {
    localStorage.setItem('name', myName);
    myHeading.textContent = 'Mozilla is cool, ' + myName;
  }
}</pre>

<p>人間の言語では — <code>myName</code> に値がない場合や、<code>null</code>の場合、 最初から <code>setUserName()</code> を実行します。値がない場合 (上記の式が真でない場合)には、<code>localStorage</code> に値をセットして、見出しのテキストにもセットします。</p>

<h2 id="Conclusion">まとめ</h2>

<p>最後までこの記事の手順に従った場合は、最終的に次のようなページが表示されているでしょう (<a href="https://mdn.github.io/beginner-html-site-scripted/">こちらで作成した版を表示する</a>こともできます)。</p>

<p><img alt="" src="website-screen-scripted.png" style="display: block; margin: 0px auto;"></p>

<p>行き詰まったら、自分の作業を <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">Github 上の完成したサンプルコード</a>と比べてみてください。</p>

<p>私たちは JavaScript に少し触れただけです。楽しく遊んだり、もっと上達したい場合は、<a href="/ja/docs/Learn/JavaScript">JavaScript の学習トピック</a>に進んでください。</p>

<h2 id="See_also">関連情報</h2>

<dl>
 <dt><a href="/ja/docs/Learn/JavaScript">JavaScript による動的なクライアント側スクリプト</a></dt>
 <dd>もっと詳細な JavaScript に飛び込みましょう。</dd>
 <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt>
 <dd>ウェブ開発者を目指す方に最適な教材です! インタラクティブな環境で、短いレッスンとインタラクティブなテスト、自動評価によるガイドで、 JavaScript を学ぶことができます。最初の 40 レッスンは無料です。全コースは少額の一括払いでご利用いただけます。</dd>
</dl>

<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>

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

<ul>
 <li id="Installing_basic_software"><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li>
 <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a></li>
 <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li>
 <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li>
 <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li>
 <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li>
 <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website">ウェブサイトの公開</a></li>
 <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">ウェブのしくみ</a></li>
</ul>