initial commit

1 files changed, 437 insertions, 0 deletions

diff --git a/files/ja/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ja/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..61095df0eb
--- /dev/null
+++ b/files/ja/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -0,0 +1,437 @@
+---
+title: JavaScript の基本
+slug: Learn/Getting_started_with_the_web/JavaScript_basics
+tags:
+  - JavaScript
+  - Learn
+  - Web
+  - codescripting
+  - '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 は Web サイトにインタラクティブ機能 (ゲーム、ボタンが押されたときやデータがフォームに入力されたときの反応、動的なスタイルの変更、アニメーションなど) を追加するプログラミング言語です。この記事は、このエキサイティングな言語を始めるのに役立ち、可能性についてのアイディアを提供します。</p>
+</div>
+
+<h2 id="What_is_JavaScript_really" name="What_is_JavaScript_really">そもそも JavaScript とは何か</h2>
+
+<p>{{Glossary("JavaScript")}} (略して "JS") <span id="result_box" lang="ja"><span>は成熟した{{Glossary("Dynamic_programming_language", "動的プログラミング言語")}}であり、{{Glossary("HTML")}} 文書に適用すると、 Web サイトに動的な対話操作を提供できます。Mozilla プロジェクト、Mozilla Foundation、Mozilla Corporation の共同設立者である Brendan Eich によって考案されました。</span></span></p>
+
+<p>JavaScript の用途は多彩です。小さいものでは、カルーセル、画像ギャラリー、レイアウトの変更、ボタンのクリックに対するレスポンスなどから始めることができます。もっと経験を積むと、ゲーム、2D および 3D のアニメーショングラフィック、包括的なデータベース駆動型アプリケーションなどを作成することができます。</p>
+
+<p>JavaScript はとてもコンパクトですが、一方でとても柔軟性があります。開発者は JavaScript 言語のコアをベースに多種多様なツールを作成し、最小限の労力で膨大な様々な機能を利用できるようにしました。例えば以下のようなものがあります。</p>
+
+<ul>
+ <li>ブラウザのアプリケーションプログラミングインターフェイス({{Glossary("API")}})。 Web ブラウザに組み込まれた API により、動的な HTML の作成、 CSS スタイルの設定、ユーザの Web カメラからの動画ストリームの収集や操作、3D グラフィックやオーディオサンプルの生成などの機能を提供する、 Web ブラウザに組み込まれた API。</li>
+ <li>開発者が Twitter や Facebook のような他のコンテンツプロバイダのサイトから機能を組み込むことを可能にする、サードパーティの API。</li>
+ <li>すばやくサイトやアプリケーションを構築することができ、HTML に組み込み可能なサードパーティのフレームワークやライブラリ。</li>
+</ul>
+
+<p>この記事は JavaScript の簡単な紹介に留めるべきだと思いますので、現段階では、JavaScript 言語のコアと上記の様々なツールの違いを詳しく話して混乱させることは避けるようにします。それらは、この後に続く詳細、<a href="/ja/docs/Learn/JavaScript">JavaScript 学習エリア</a>、およびMDN の他の部分で詳しく学ぶことができます。</p>
+
+<p>以下では、コア言語のいくつかの側面について紹介します。またブラウザの API 機能についてもいくつか説明します。楽しみましょう！</p>
+
+<h2 id="A_hello_world_example" name="A_hello_world_example">"Hello world" の例</h2>
+
+<p>上記の章は実にエキサイティングに聞こえるかもしれませんが、それもそのはずです — JavaScript は最も活気のある Web 技術の 1 つで、使い始めれば、 Web サイトは力と創造性の新しい次元に入るでしょう。</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> という新しいファイルを作成してください。それを <code>scripts</code> フォルダに保存してください。</li>
+ <li>次に、 <code>index.html</code> ファイルの <code>&lt;/body&gt;</code> 閉じタグの前に新しい行を追加し、以下の新しい要素を追加してください。
+  <pre class="brush: html notranslate">&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 notranslate">const myHeading = document.querySelector('h1');
+myHeading.textContent = 'Hello world!';</pre>
+ </li>
+ <li>最後に、 HTML と JavaScript を書いたファイルを保存したことを確認し、ブラウザで <code>index.html</code> を読み込んでください。<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>: {{htmlelement("script")}} 要素を HTML ファイルの末尾付近に置いたのは、ブラウザが HTML をファイルに現れる順番で読み込むからです。もし JavaScript が最初に読み込まれ、その下の HTML に影響を与えると見られる場合、 HTML の準備ができる前に JavaScript が読み込まれ、正しく動作できない場合があります。したがって、 HTML ページの末尾付近に JavaScript を配置することは多くの場合、最良の方法です。</p>
+</div>
+
+<h3 id="What_happened" name="What_happened">何が起きたか</h3>
+
+<p>JavaScript を使用して、見出しの文字列が "Hello world!" に変更されました。最初に <code>{{domxref("Document.querySelector", "querySelector()")}}</code> と呼ばれる関数を使用して見出しの参照を取得し、 <code>myHeading</code> と呼ばれる変数に格納しています。これは CSS のセレクターを使用するのととてもよく似ています。要素に対して何かをしたくなったら、まずその要素を選択する必要があります。</p>
+
+<p>その後、<code>myHeading</code> 変数の <code>{{domxref("Node.textContent", "textContent")}}</code> プロパティ(見出しの内容を表す)の値を "Hello world!" に設定します。</p>
+
+<div class="note">
+<p><strong>注 </strong>: 上の例で使用した機能はどちらも<a href="/ja/docs/DOM/DOM_Reference">ドキュメントオブジェクトモデル (DOM) API</a> の一部であり、これを使って文書を操作することができます。</p>
+</div>
+
+<h2 id="Language_basics_crash_course" name="Language_basics_crash_course">言語の短期集中コース</h2>
+
+<p>どのように動作するかをよりよく理解できるように、 JavaScript 言語の基本機能のいくつかを説明しましょう。これらの機能はすべてのプログラミング言語に共通しているので、これらの基本をマスターすれば、ほとんど何でもプログラムできるようになります！</p>
+
+<div class="warning">
+<p><strong>重要</strong>: この記事では、 JavaScript コンソールにサンプルコードを入力して、何が起こるのかを確認してみます。 JavaScript コンソールの詳細については、 <a href="/ja/Learn/Discover_browser_developer_tools">ブラウザ開発ツールを探る</a>を参照してください。</p>
+</div>
+
+<h3 id="Variables" name="Variables">変数</h3>
+
+<p>{{Glossary("Variable", "変数")}} は、値を格納できる入れ物です。まず、 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code> (説明はややこしいですが、推奨しません) まはた <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> というキーワードと、その後に任意の名前を指定することで、変数を宣言します。</p>
+
+<pre class="brush: js notranslate">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="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">var と let の違い</a>を見てください。</p>
+</div>
+
+<p>変数を宣言したら、以下のように値を割り当てることができます。</p>
+
+<pre class="brush: js notranslate">myVariable = 'Bob';</pre>
+
+<p>好みに応じて、両方の操作を同一の行で行うことができます。</p>
+
+<pre class="brush: js notranslate">let myVariable = 'Bob';</pre>
+
+<p>変数の値は、名前で呼び出すだけで取得することができます。</p>
+
+<pre class="brush: js notranslate">myVariable;</pre>
+
+<p>変数に値を代入した後で、変更することもできます。</p>
+
+<pre class="notranslate">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" name="Comments">コメント</h3>
+
+<p>コメントは、ブラウザーから無視される、コードの間に入れられた短いテキストスニペットです。CSS と同じように、JavaScript のコードではコメントを付けることができます。</p>
+
+<pre class="brush: js notranslate">/*
+挟まれているすべてがコメントです。
+*/</pre>
+
+<p>コメントに改行が含まれていない場合、次のように 2 つのスラッシュの後ろに記載する方が簡単です :</p>
+
+<pre class="brush: js notranslate" style="font-size: 14px;">// これはコメントです
+</pre>
+
+<h3 id="Operators" name="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><span class="tlid-translation translation"><span title="">「等しくない」は、基本的に同じ結果を異なる構文で与えます。</span></span>ここでは「<code>myVariable</code> が 3 とは等しくない」ことをテストします。 <code>myVariable</code> は 3 と等しいので、<code>false</code> を返します。</p>
+
+    <p><code><code>let myVariable = 3;</code><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" name="Conditionals">条件文</h3>
+
+<p>条件文は、ある式が true を返すかどうかをテストし、その結果次第でそれぞれのコードを実行するコード構造です。条件文のよくある形は <code>if ... else </code> 文です。例えば以下の通りです。</p>
+
+<pre class="brush: js notranslate">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" name="Functions">関数</h3>
+
+<p>{{Glossary("Function", "関数")}} は、再利用したい機能をパッケージ化する方法です。プロシージャが必要なときは、毎回コード全体を書くのではなく関数名を使って関数を呼び出すことができます。すでにいくつかの関数の仕様を見てきました。例えば以下のようなものです。</p>
+
+<ol>
+ <li>
+  <pre class="brush: js notranslate">let myVariable = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">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 notranslate">function multiply(num1,num2) {
+  let result = num1 * num2;
+  return result;
+}</pre>
+
+<p>上記の関数をコンソールで実行し、いくつかの引数を指定してテストしてみてください。例えば次のようなものです :</p>
+
+<pre class="brush: js notranslate">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", "<code>スコープ</code>")}}と呼ばれています(<a href="/ja/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">変数のスコープのより詳しい説明</a>をお読みください)。</p>
+</div>
+
+<h3 id="Events" name="Events">イベント</h3>
+
+<p>Web サイトを実際にインタラクティブにするには、イベントが必要です。イベントは、ブラウザの中で起きていることを検出し、その応答としてコードを実行するコード構造です。最も分かりやすい例は <a href="/ja/docs/Web/Events/click">click イベント</a>で、マウスで何かをクリックするとブラウザによって発火されるものです。これを実行するには、コンソールに以下のように入力してから、現在の Web ページ上をクリックしてください。</p>
+
+<pre class="brush: js notranslate">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 notranslate">document.querySelector('html').onclick = function() {};</pre>
+
+<p>は以下のものと同等です。</p>
+
+<pre class="brush: js notranslate">let myHTML = document.querySelector('html');
+myHTML.onclick = function() {};</pre>
+
+<p>短くしただけです。</p>
+
+<h2 id="Supercharging_our_example_website" name="Supercharging_our_example_website">Web サイトの例を膨らませる</h2>
+
+<p>ここまで JavaScript の基本を少し見てきましたが、何ができるのかを見るために、例のサイトにいくつかクールな機能を追加してみましょう。</p>
+
+<h3 id="Adding_an_image_changer" name="Adding_an_image_changer">画像の切り替えの追加</h3>
+
+<p>このセクションでは、 DOM API 機能をもっと使用して、サイトに画像を追加しましょう。画像をクリックすると JavaScript を使用して 2 つの画像を切り替えることができます。</p>
+
+<ol>
+ <li>まずサイトに掲載したいと思う別な画像を見つけてください。最初の画像と同じサイズか、できるだけ近いものを使用してください。</li>
+ <li>この画像を <code>images</code> フォルダに保存してください。</li>
+ <li>この画像の名前を 'firefox2.png' (引用符なし) に変更してください。</li>
+ <li><code>main.js</code> ファイルに移動し、次の JavaScript を入力します。(もし "hello world" の JavaScript がまだ残っている場合は、削除してください。)
+  <pre class="brush: js notranslate">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" name="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 notranslate">&lt;button&gt;ユーザを変更&lt;/button&gt;</pre>
+ </li>
+ <li><code>main.js</code> では、次のコードを下記のとおりにファイルの最後に配置します。これは新しいボタンと見出しへの参照を変数に格納します。
+  <pre class="brush: js notranslate">let myButton = document.querySelector('button');
+let myHeading = document.querySelector('h1');</pre>
+ </li>
+ <li>パーソナライズされた挨拶を設定する以下の関数を追加しましょう。まだ何も起こりませんが、すぐに修正します。
+  <pre class="brush: js notranslate">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> はユーザにデータを入力するよう求め、ユーザが <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 notranslate">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 notranslate">myButton.onclick = function() {
+  setUserName();
+}
+</pre>
+ </li>
+</ol>
+
+<p>サイトにアクセスしてみると、ページがユーザ名を尋ね、パーソナライズされたメッセージを表示します。好きなときにボタンを押すと名前を変えることができます。おまけに、名前は <code>localStorage</code> 内に格納されているため、サイトを閉じた後も名前が保持され、次にサイトを開いたときにパーソナライズされたメッセージが保持されます。</p>
+
+<h3 id="A_user_name_of_null">A user name of null?</h3>
+
+<p>この例を実行してユーザー名を入力するダイアログボックスが出たとき、<em>キャンセル</em>ボタンを押してみてください。結果として"Mozilla is cool, null"というタイトルが表示されるでしょう。これはプロンプトをキャンセルしたときに、値が <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code>、つまり値がないことに言及する JavaScript の特殊な値にセットされているためです。</p>
+
+<p>また何も入れずに OK を押してみてください — 結果として"Mozilla is cool,"というタイトルが表示され、これは理由が明白です。</p>
+
+<p>この問題を避けるには、ユーザーが <code>null</code> や空白の名前を入力していないかチェックするよう、<code>setUserName()</code> 関数を書き換えます:</p>
+
+<pre class="brush: js notranslate">function setUserName() {
+  let myName = prompt('Please enter your name.');
+  if(!myName || myName === null) {
+    setUserName();
+  } else {
+    localStorage.setItem('name', myName);
+    myHeading.innerHTML = 'Mozilla is cool, ' + myName;
+  }
+}</pre>
+
+<p>人間の言語では — <code>myName</code> に値がない場合や、<code>null</code>の場合、 最初から <code>setUserName()</code> を実行します。値がない場合 (上記の式が真でない場合)には、<code>localStorage</code> に値をセットして、見出しのテキストにもセットします。</p>
+
+<h2 id="Conclusion" name="Conclusion">まとめ</h2>
+
+<p>最後までこの記事の手順に従った場合は、最終的に次のようなページが表示されているでしょう (<a href="https://mdn.github.io/beginner-html-site-scripted/">こちらで作成した版を表示する</a>こともできます)。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></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>
+
+<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" name="In_this_module">このモジュール</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/ja/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">Web サイトをどんな外見にするか</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/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B">Web サイトの公開</a></li>
+ <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li>
+</ul>