From abbf5910d201761681df167db2523f140ec39de2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 18 Jul 2021 16:56:59 +0900 Subject: Learn/Getting_started_with_the_web/JavaScript_basics を更新 (#1476) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Learn/Getting_started_with_the_web/JavaScript_basics を更新 - 2021/07/10 時点の英語版に同期 - conflicting 版は未翻訳版なので削除 * conflicting/Web/JavaScript/Reference/Operators を削除 正規版に統合されているため、conflicting 版を削除。 併せて、以前削除した別な conflicting 版の履歴を削除。 --- .../javascript_basics/index.html | 222 +++++++++++---------- 1 file changed, 117 insertions(+), 105 deletions(-) (limited to 'files/ja/learn') 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 index b3d1dc4916..808a7a8371 100644 --- 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 @@ -2,12 +2,12 @@ title: JavaScript の基本 slug: Learn/Getting_started_with_the_web/JavaScript_basics tags: + - Beginner + - CodingScripting - JavaScript - Learn - Web - - codescripting - - 'l10n:priority' - - 初心者 + - l10n:priority translation_of: Learn/Getting_started_with_the_web/JavaScript_basics ---
{{LearnSidebar}}
@@ -15,30 +15,30 @@ translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
-

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

+

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

-

そもそも JavaScript とは何か

+

JavaScript とは何か

-

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

+

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

-

JavaScript の用途は多彩です。小さいものでは、カルーセル、画像ギャラリー、レイアウトの変更、ボタンのクリックに対するレスポンスなどから始めることができます。もっと経験を積むと、ゲーム、2D および 3D のアニメーショングラフィック、包括的なデータベース駆動型アプリケーションなどを作成することができます。

+

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

-

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

+

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

-

この記事は JavaScript の簡単な紹介に留めるべきだと思いますので、現段階では、JavaScript 言語のコアと上記の様々なツールの違いを詳しく話して混乱させることは避けるようにします。それらは、この後に続く詳細、JavaScript 学習エリア、およびMDN の他の部分で詳しく学ぶことができます。

+

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

-

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

+

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

-

"Hello world" の例

+

Hello world! の例

-

上記の章は実にエキサイティングに聞こえるかもしれませんが、それもそのはずです — JavaScript は最も活気のある Web 技術の 1 つで、使い始めれば、 Web サイトは力と創造性の新しい次元に入るでしょう。

+

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

しかし、JavaScript を使いこなせるようになるのは HTML や CSS よりも少し難しいです。小さなものから始め、小さく確実な手順で作業を続ける必要があるかもしれません。始めるにあたって、"hello world!" を表示する例 (基本的なプログラミング例の標準) を作りながら、基本的な JavaScript をページに追加する方法を紹介しましょう。

@@ -47,52 +47,54 @@ translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
    -
  1. 最初に、あなたのテストサイトに行って、「scripts」という名前(かぎ括弧は除く)の新しいフォルダを作成してください。それから、作成した scripts フォルダの中で main.js という新しいファイルを作成してください。それを scripts フォルダに保存してください。
    2. -
  2. 次に、 index.html ファイルの </body> 閉じタグの前に新しい行を追加し、以下の新しい要素を追加してください。 - 
    <script src="scripts/main.js"></script>
    +
  3. 最初にテストサイトに行き、 scripts という名前の新しいフォルダーを作成してください。それから、 scripts フォルダーの中に main.js という新しいファイルを作成して保存してください。
    4. +
  4. index.html ファイルの </body> 閉じタグの直前に新しい行で、以下の新しい要素を追加してください。 + 
    <script src="scripts/main.js"></script>
  5. これは CSS の {{htmlelement("link")}} 要素の時の作業と基本的に同じです。これは JavaScript をページに適用するので、(CSS の時と同じく、ページ上の何に対しても) HTML に影響を与えることができます。
  6. main.js ファイルに次のコードを追加してください。 - 
    const myHeading = document.querySelector('h1');
+  
    const myHeading = document.querySelector('h1');
 myHeading.textContent = 'Hello world!';
    7. -
  7. 最後に、 HTML と JavaScript を書いたファイルを保存したことを確認し、ブラウザで index.html を読み込んでください。
    8. +
  8. 最後に、 HTML と JavaScript を書いたファイルを保存したことを確認し、ブラウザーで index.html を読み込んでください。
-

注: {{htmlelement("script")}} 要素を HTML ファイルの末尾付近に置いたのは、ブラウザが HTML をファイルに現れる順番で読み込むからです。もし JavaScript が最初に読み込まれ、その下の HTML に影響を与えると見られる場合、 HTML の準備ができる前に JavaScript が読み込まれ、正しく動作できない場合があります。したがって、 HTML ページの末尾付近に JavaScript を配置することは多くの場合、最良の方法です。

+

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

+ +

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

-

何が起きたか

+

何が起きたのか

-

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

+

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

-

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

+

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

-

注 : 上の例で使用した機能はどちらもドキュメントオブジェクトモデル (DOM) API の一部であり、これを使って文書を操作することができます。

+

注 : 上の例で使用した機能はどちらもドキュメントオブジェクトモデル (DOM) API の一部であり、これを使って文書を操作することができます。

-

言語の短期集中コース

+

言語の短期集中コース

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

-

重要: この記事では、 JavaScript コンソールにサンプルコードを入力して、何が起こるのかを確認してみます。 JavaScript コンソールの詳細については、 ブラウザ開発ツールを探るを参照してください。

+

重要: この記事では、 JavaScript コンソールにサンプルコードを入力して、何が起こるのかを確認してみます。 JavaScript コンソールの詳細については、 ブラウザー開発ツールを探るを参照してください。

-

変数

+

変数

-

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

+

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

-
let myVariable;
+
let myVariable;
-

注 : 行末のセミコロンは文が終わる場所を示します。単一の行で複数の文を区切る場合には絶対に必要です。しかし、個々の文の末尾に置くことが良い習慣だと信じている人もいます。使用する場面と使用しない場合については他のルールもあります。詳しくは Your Guide to Semicolons in JavaScript を参照してください。

+

注: 行末のセミコロンは文が終わる場所を示します。単一の行で複数の文を区切る場合には絶対に必要です。しかし、個々の文の末尾に置くことが良い習慣だと信じている人もいます。使用する場面と使用しない場合については他のルールもあります。詳しくは Your Guide to Semicolons in JavaScript を参照してください。

-

注 : 変数にはほとんど何でも名前を付けることができますが、いくらかの制約があります(変数の命名規則についてはこの記事を参照してください)。自信がない場合は、有効かどうか変数名を調べることができます。

+

注 : 変数にはほとんど何でも名前を付けることができますが、いくらかの制約があります(変数の命名規則についてはこの記事を参照してください)。自信がない場合は、有効かどうか変数名を調べることができます。

@@ -100,24 +102,25 @@ myHeading.textContent = 'Hello world!';
-

注: var と let のより詳しい違いは、var と let の違いを見てください。

+

注: var と let のより詳しい違いは、var と let の違いを見てください。

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

-
myVariable = 'Bob';
+
myVariable = 'Bob';
+

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

-
let myVariable = 'Bob';
+
let myVariable = 'Bob';

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

-
myVariable;
+
myVariable;

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

-
let myVariable = 'Bob';
+
let myVariable = 'Bob';
 myVariable = 'Steve';

 
 
なお、変数は様々なデータ型の値を保持することもできます。

@@ -143,7 +146,7 @@ myVariable = 'Steve';
{{Glossary("Boolean")}} - 真偽値。 true と false は JS では特別なキーワードであり、引用符は必要ない。 + 論理値。 true と false は JS では特別なキーワードであり、引用符は必要ありません。 let myVariable = true; @@ -164,20 +167,20 @@ myVariable = 'Steve';

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

-

コメント

+

コメント

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

-
/*
+
/*
 挟まれているすべてがコメントです。
 */

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

 
-
// これはコメントです
+
// これはコメントです
 

 
-
演算子

+
演算子

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

 
@@ -192,7 +195,7 @@ myVariable = 'Steve';

  
  
   
-   追加/連結
+   加算/連結
    2 つの数字を加えるか、2 つの文字列を結合します。
    +
    6 + 9;

@@ -214,7 +217,7 @@ myVariable = 'Steve';
等価 - 2 つの値と型が互いに等しいかどうかを調べ、true / false (真偽値)の結果を返します。 + 2 つの値と型が互いに等しいかどうかを調べ、true/false (論理値)の結果を返します。 === let myVariable = 3;
myVariable === 4; @@ -229,9 +232,9 @@ myVariable = 'Steve';

let myVariable = 3;
!(myVariable === 3);

-

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

+

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

-

let myVariable = 3;
+

let myVariable = 3;
myVariable !== 3;

@@ -244,194 +247,203 @@ myVariable = 'Steve';

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

-

条件文

+

条件文

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

-
let iceCream = 'チョコレート';
+
let iceCream = 'チョコレート';
 if(iceCream === 'チョコレート') {
   alert('やった、チョコレートアイス大好き！');
 } else {
   alert('あれれ、でもチョコレートは私のお気に入り......');
 }

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

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

 
-
関数

+
関数

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

 
 
    
  
  1. 
-  
    let myVariable = document.querySelector('h1');
    
+  
    let myVariable = document.querySelector('h1');
    
  
    2. 
  
  2. 
-  
    alert('hello!');
    
+  
    alert('hello!');
    
  
    3. 
 

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

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

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

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

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

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

 
-
function multiply(num1,num2) {
+
function multiply(num1,num2) {
   let result = num1 * num2;
   return result;
 }

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

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

 
-
multiply(4,7);
-multiply(20,20);
-multiply(0.5,3);

+
multiply(4, 7);
+multiply(20, 20);
+multiply(0.5, 3);

 
 

-
注 : return 文は result の値を関数内から関数の外に戻すことをブラウザに指示し、それを利用できるようにします。これが必要な理由は、関数内で定義された変数が、その関数内でしか利用できないためです。これは変数の{{Glossary("Scope", "スコープ")}}と呼ばれています(変数のスコープのより詳しい説明をお読みください)。

+
注 : return 文は result の値を関数内から関数の外に戻すことをブラウザーに指示し、それを利用できるようにします。これが必要な理由は、関数内で定義された変数が、その関数内でしか利用できないためです。これは変数の{{Glossary("Scope", "スコープ")}}と呼ばれています(変数のスコープのより詳しい説明をお読みください)。

 

 
-
イベント

+
イベント

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

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

 
-
document.querySelector('html').onclick = function() {
+
document.querySelector('html').onclick = function() {
     alert('痛っ! つつくのはやめて!');
 }

 
-
要素にイベントを割り当てる方法はたくさんあります。ここでは {{htmlelement("html")}} 要素を選択し、onclick ハンドラのプロパティに、クリックイベントで実行したいコードを含む匿名 (つまり名前がない) 関数を代入します。

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

 
 
なお、

 
-
document.querySelector('html').onclick = function() {};

+
document.querySelector('html').onclick = function() {};

 
 
は以下のものと同等です。

 
-
let myHTML = document.querySelector('html');
+
let myHTML = document.querySelector('html');
 myHTML.onclick = function() {};

 
 
短くしただけです。

 
-
Web サイトの例を膨らませる

+
ウェブサイトの例を膨らませる

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

 
-
ここまで JavaScript の基本を少し見てきましたが、何ができるのかを見るために、例のサイトにいくつかクールな機能を追加してみましょう。

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

 
-
画像の切り替えの追加

+
画像の切り替えの追加

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

 
 
    
  
  1. まずサイトに掲載したいと思う別な画像を見つけてください。最初の画像と同じサイズか、できるだけ近いものを使用してください。
    2. 
- 
  2. この画像を images フォルダに保存してください。
    3. 
- 
  3. この画像の名前を 'firefox2.png' (引用符なし) に変更してください。
    4. 
- 
  4. main.js ファイルに移動し、次の JavaScript を入力します。(もし "hello world" の JavaScript がまだ残っている場合は、削除してください。)
-  
    let myImage = document.querySelector('img');
+ 
  5. この画像を images フォルダーに保存してください。
    6. 
+ 
  6. この画像の名前を firefox2.png に変更してください。
    7. 
+ 
  7. main.js ファイルに次の JavaScript を入力してください。
+  
    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');
+      myImage.setAttribute('src','images/firefox2.png');
     } else {
-      myImage.setAttribute ('src','images/firefox-icon.png');
+      myImage.setAttribute('src','images/firefox-icon.png');
     }
 }
    
  
    8. 
- 
  8. index.html をブラウザに読み込みます。画像をクリックすると、もう一方の画像に変わります。
    9. 
+ 
  9. index.html をブラウザーに読み込みます。画像をクリックすると、もう一方の画像に変わります。
    10. 
 

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

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

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

 
-
パーソナライズされた挨拶メッセージの追加

+
パーソナライズされた挨拶メッセージの追加

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

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

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

 
-
サイトにアクセスしてみると、ページがユーザ名を尋ね、パーソナライズされたメッセージを表示します。好きなときにボタンを押すと名前を変えることができます。おまけに、名前は localStorage 内に格納されているため、サイトを閉じた後も名前が保持され、次にサイトを開いたときにパーソナライズされたメッセージが保持されます。

-
 
A user name of null?

 
-
この例を実行してユーザー名を入力するダイアログボックスが出たとき、キャンセルボタンを押してみてください。結果として"Mozilla is cool, null"というタイトルが表示されるでしょう。これはプロンプトをキャンセルしたときに、値が null、つまり値がないことに言及する JavaScript の特殊な値にセットされているためです。

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

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

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

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

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

 
-
function setUserName() {
+
function setUserName() {
   let myName = prompt('Please enter your name.');
-  if(!myName || myName === null) {
+  if(!myName) {
     setUserName();
   } else {
     localStorage.setItem('name', myName);
-    myHeading.innerHTML = 'Mozilla is cool, ' + myName;
+    myHeading.textContent = 'Mozilla is cool, ' + myName;
   }
 }

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

 
-
まとめ

+
まとめ

 
 
最後までこの記事の手順に従った場合は、最終的に次のようなページが表示されているでしょう (こちらで作成した版を表示することもできます)。

 
-

+

 
 
行き詰まったら、自分の作業を Github 上の完成したサンプルコードと比べてみてください。

 
 
私たちは JavaScript に少し触れただけです。楽しく遊んだり、もっと上達したい場合は、JavaScript の学習トピックに進んでください。

 
+
関連情報

+
+

+ 
JavaScript による動的なクライアント側スクリプト

+ 
もっと詳細な JavaScript に飛び込みましょう。

+ 
Learn JavaScript

+ 
ウェブ開発者を目指す方に最適な教材です! インタラクティブな環境で、短いレッスンとインタラクティブなテスト、自動評価によるガイドで、 JavaScript を学ぶことができます。最初の 40 レッスンは無料です。全コースは少額の一括払いでご利用いただけます。

+

+
 
{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

 
-
このモジュール

+
このモジュール

 
 
-- 
cgit v1.2.3-54-g00ecf