diff options
Diffstat (limited to 'files/ja/learn/javascript')
39 files changed, 13903 insertions, 0 deletions
diff --git a/files/ja/learn/javascript/asynchronous/concepts/index.html b/files/ja/learn/javascript/asynchronous/concepts/index.html new file mode 100644 index 0000000000..b2baeaac4e --- /dev/null +++ b/files/ja/learn/javascript/asynchronous/concepts/index.html @@ -0,0 +1,162 @@ +--- +title: 非同期プログラミングの一般的概念 +slug: Learn/JavaScript/Asynchronous/Concepts +tags: + - JavaScript + - Learn + - Promises + - Threads + - asynchronous + - blocking +translation_of: Learn/JavaScript/Asynchronous/Concepts +--- +<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div> + +<p>この記事では、非同期プログラミングに関するいくつかの重要な概念と、その概念がウェブブラウザーと JavaScript でどのように見えるのかをひと通り説明していきます。このモジュールの他の記事に取り組む前に、これらの概念を理解しておく必要があります。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシーがあり、ある程度 JavaScript の基礎を理解していること</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>非同期プログラミングの基本概念と、その概念がウェブブラウザーと JavaScript でどのように表現されるかを理解すること</td> + </tr> + </tbody> +</table> + +<h2 id="Asynchronous" name="Asynchronous">非同期とは？</h2> + +<p>通常は、あるプログラムのコードは書かれた順に、一度にひとつのことだけが起こるように実行されます。もしある関数が別の関数の結果に依存するのであれば、その関数は他の関数の処理が完了して結果を返すまで待たなくてはならず、それまでは、ユーザー視点からはプログラム全体は止まっているのと本質的には同じです。</p> + +<p>例えば、Mac ユーザーは回転する虹色のカーソル（よく「ビーチボール」と呼ばれます）としてこのことを経験することもあるでしょう。このカーソルによってオペレーティングシステムは「現在使用中のプログラムは何かが終わるのを待って停止しており、それが非常に長く掛かっているので何が起こっているのかとご心配をお掛けしているのではないでしょうか」と言っているのです。</p> + +<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p> + +<p>これはいら立つような体験であり、コンピューターの処理能力の良い使い方ではありません――特に、マルチコアプロセッサーが利用できる時代においては。他のタスクを別のプロセッサーコアに処理させて、それが終わった時に知らせることができるのに、座って待っているのは意味がありません。このように合間に別の仕事を終わらせる、ということが<strong>非同期プログラミング</strong>の基本です。非同期にタスクを実行する API は、あなたが使用するプログラミング環境（ウェブ開発であればウェブブラウザー）によって提供されます。</p> + +<h2 id="Blocking_code" name="Blocking_code">ブロッキングコード</h2> + +<p>非同期のテクニックは、特にウェブプログラミングにおいて非常に有用です。ウェブアプリがブラウザー上で高負荷なコードを実行すると、ブラウザーは固まって見えるかもしれません。これを<strong>ブロッキング</strong>といいます。ウェブアプリがプロセッサーの制御を返すまで、ブラウザーはユーザーからの入力を処理して他のタスクを実行し続けるのを妨げられているのです。</p> + +<p>ブロッキングが意味するところを示す例をいくつか見てみましょう。</p> + +<p>この <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> の例（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">デモ参照</a>）では、ボタンをクリックすると時間の掛かる処理（日時を 1000 万回計算し、最後に計算された日時をコンソールに出力）を実行し、DOM に段落を 1 つ追加します。</p> + +<pre class="brush: js notranslate">const btn = document.querySelector('button'); +btn.addEventListener('click', () => { + let myDate; + for(let i = 0; i < 10000000; i++) { + let date = new Date(); + myDate = date + } + + console.log(myDate); + + let pElem = document.createElement('p'); + pElem.textContent = 'This is a newly-added paragraph.'; + document.body.appendChild(pElem); +});</pre> + +<p>この例を実行する際は、JavaScript コンソールを開き、その後にボタンをクリックしてください ― 日時の計算が終わり、コンソールにメッセージが出力されるまで段落が現れないことに気が付くでしょう。コードは順番に実行され、前の処理が終わるまで後の処理は実行されません。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 先ほどの例はまったく非現実的です。現実のウェブアプリでは日時を 1000 万回計算することはないでしょう！ しかしながら、基本的な考え方の理解には役立ちます。</p> +</div> + +<p>2 つ目の例の <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> では（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">デモ参照</a>）、実際のページでも遭遇しうる、もう少し現実的な例をシミュレーションします。ユーザーインターフェイスのレンダリングによってユーザーの操作がブロックされるのです。この例では、ボタンは 2 つあります。</p> + +<ul> + <li>"Fill canvas" ボタンは、クリックすると使用可能な {{htmlelement("canvas")}} を 100 万個の青い円でいっぱいにします。</li> + <li>"Click me for alert" ボタンは、クリックするとアラートメッセージを表示します。</li> +</ul> + +<pre class="brush: js notranslate">function expensiveOperation() { + for(let i = 0; i < 1000000; i++) { + ctx.fillStyle = 'rgba(0,0,255, 0.2)'; + ctx.beginPath(); + ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false); + ctx.fill() + } +} + +fillBtn.addEventListener('click', expensiveOperation); + +alertBtn.addEventListener('click', () => + alert('You clicked me!') +);</pre> + +<p>もし1つ目のボタンを押し、その後素早く2つ目のボタンを押すと、円の描画が終わるまでアラートが表示されないことが分かるでしょう。1つ目の処理が完了するまで 2つ目の処理がブロックされています。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: ええ、この事例は見苦しく、ブロッキングの影響を真似ているものです。しかし、これは現実のアプリケーション開発者が軽減させようと常に戦っている、ありふれた問題です。</p> +</div> + +<p>何故こうなるのでしょうか？ その答えは、一般的に言えば JavaScript は<strong>シングルスレッド</strong>だからです。ここで、<strong>スレッド</strong>の概念を紹介する必要があります。</p> + +<h2 id="Threads" name="Threads">スレッド</h2> + +<p><strong>スレッド</strong>とは、基本的にプログラムがタスクを完了させるのに使用できる、単一のプロセスです。各スレッドは 1 度に 1 つのタスクを実行することしかできません。</p> + +<pre class="notranslate">Task A --> Task B --> Task C</pre> + +<p>各タスクは順次実行されます。すなわち、あるタスクが完了しなければ、その次のタスクは開始されません。</p> + +<p>先述のように、現在では多くのコンピューターは複数のコアを持つため、一度に複数のことをすることができます。マルチスレッドをサポートするプログラミング言語は、複数のコアを使用して同時に複数のタスクを完了させることができます。</p> + +<pre class="notranslate">Thread 1: Task A --> Task B +Thread 2: Task C --> Task D</pre> + +<h3 id="JavaScript_is_single-threaded" name="JavaScript_is_single-threaded">JavaScript はシングルスレッド</h3> + +<p>従来より JavaScript はシングルスレッドです。複数のコアを利用しても、<strong>メインスレッド</strong>と呼ばれる単一のスレッド上でタスクを実行できるだけでしょう。これまでの例は、次のように実行されます。</p> + +<pre class="notranslate">Main thread: Render circles to canvas --> Display alert()</pre> + +<p>少し経ってから、JavaScript はこういった問題に役立つ、いくつかのツールを手に入れました。<a href="/ja/docs/Web/API/Web_Workers_API">Web workers</a> によって worker と呼ばれる別個のスレッドに JavaScript の処理の一部を移すことが可能となり、そのことで複数の JavaScript のコードを同時に実行することができるようになります。一般的に worker は、ユーザーの操作がブロックされないように、高コストな処理をメインスレッドとは別のところで実行するために使用されます。</p> + +<pre class="notranslate"> Main thread: Task A --> Task C +Worker thread: Expensive task B</pre> + +<p>このことを念頭に置いて、再び <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">デモ参照</a>）をブラウザーの JavaScript コンソールを開いた状態で見てみましょう。こちらは先ほどの 1000 万回の日時計算を行う例を別の worker スレッド上で行うよう書き換えたものです。今回はボタンをクリックすると、ブラウザーは日時の計算が完了する前に段落を表示することができます。1 つ目の処理は、もう 2 つ目の処理をブロックしていません。</p> + +<h2 id="Asynchronous_code" name="Asynchronous_code">非同期なコード</h2> + +<p>Web worker はかなり便利ですが、制限もあります。主要なものとして、Web worker は {{Glossary("DOM")}} にアクセスできません —— Worker に直接ユーザーインターフェイスを更新させるようなことはできません。100 万個の青い円を worker 内部で描画させることはできないのです。基本的にはただ計算ができる、ということです。</p> + +<p>2 つ目の問題は、worker によって実行されるコードはブロックしないとは言え、根本的には依然として同期的であるということです。このことは、ある関数が先行する複数の関数の結果に頼っている場合に問題となります。次のスレッドの図について考えてみましょう。</p> + +<pre class="notranslate">Main thread: Task A --> Task B</pre> + +<p>このような場合、例えばタスク A は画像をサーバーから取得するような処理を、タスク B が次にその画像に対してフィルターを適用するような処理をしていると考えてみましょう。もしタスク A を実行し、その直後にタスク B を実行したとすれば、まだ画像が取得できていないためにエラーが発生するでしょう。</p> + +<pre class="notranslate"> Main thread: Task A --> Task B --> |Task D| +Worker thread: Task C -----------> | |</pre> + +<p>このような場合、例えばタスク D はタスク B と タスク C の両方の結果を利用していると考えてみましょう。もし両方の結果が同時に利用可能になることを保証できるのであれば、これで問題ないでしょうが、そのようなことはまれです。もしタスク D の入力のうち 1 つがまだ利用可能となっていない時にタスク D を実行しようとすれば、エラーが投げられるでしょう。</p> + +<p>このような問題を解決するために、ブラウザーを利用して特定の処理を非同期に実行することができます。<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> のような機能を利用することで、ある処理（例：サーバーからの画像の取得）を実行し、その結果が返ってくるまで別の処理の実行を待たせることができるのです。</p> + +<pre class="notranslate">Main thread: Task A Task B + Promise: |__async operation__|</pre> + +<p>この Promise の処理はどこか別の場所で行われるため、非同期処理が実行されている間にメインスレッドがブロックされることはありません。</p> + +<p>次の記事では、どうすれば非同期処理を書けるのかを見ていきましょう。わくわくしますよね？ 読み進めましょう！</p> + +<h2 id="Conclusion" name="Conclusion">結論</h2> + +<p>現代のソフトウェアデザインは、一度に複数のことをプログラムに実行させるために、ますます非同期処理を中心とした議論が行われています。より新しく、より強力な API を利用すればするほど、非同期処理が唯一の解決先であるような事例が見つかっていくでしょう。かつては非同期なコードを書くのは困難なことでした。慣れるにはまだ時間が掛かりますが、以前よりだいぶ楽になりました。このモジュールの残りの部分では、なぜ非同期なコードが重要なのか、そして上で説明した問題を回避するコードをどのようにして設計すればよいのかを掘り下げていきます。</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Concepts">非同期プログラミングの一般的概念</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li> +</ul> diff --git a/files/ja/learn/javascript/asynchronous/index.html b/files/ja/learn/javascript/asynchronous/index.html new file mode 100644 index 0000000000..f3b1c62242 --- /dev/null +++ b/files/ja/learn/javascript/asynchronous/index.html @@ -0,0 +1,51 @@ +--- +title: 非同期 JavaScript +slug: Learn/JavaScript/Asynchronous +tags: + - JavaScript + - Promises + - async + - asynchronous + - await + - setInterval + - setTimeout +translation_of: Learn/JavaScript/Asynchronous +--- +<div>{{LearnSidebar}}</div> + +<p class="summary"><span class="seoSummary">このモジュールでは、{{Glossary("asynchronous")}} {{Glossary("JavaScript")}} に触れ、なぜそれが重要なのか、そして、潜在的なブロッキング処理（例えばサーバからリソースを取得する）に効果的に対処するためにどうやって使うのかを見ていきます。</span></p> + +<h2 id="前提条件">前提条件</h2> + +<p>非同期 JavaScript はとても高度なトピックなので、事前に <a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>のモジュールに取り組んでおくことをおすすめします。</p> + +<p>非同期プログラミングの概念に慣れていない場合は、間違いなくこのモジュールの <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a> から始めるべきです。慣れている場合は、<a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a> まで飛ばしていただいてもかまいません。</p> + +<div class="note"> +<p><strong>注記</strong>： ファイルを作成する手段のないコンピュータ・タブレット・その他のデバイスをお使いの場合、（ほとんどの）コード例は<a href="http://jsbin.com/"> JSBin</a> や<a href="https://thimble.mozilla.org/">Thimble</a> などのオンラインエディタでも試すことができます。</p> +</div> + +<h2 id="ガイド">ガイド</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></dt> + <dd> + <p>この記事では、非同期プログラミングに関するいくつかの重要な概念を一通り確認し、それらがウェブブラウザや JavaScript でどう見えるかを確認します。このモジュールの他の記事に進む前に、それらの概念を理解しておいてください。</p> + </dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></dt> + <dd>この記事では、同期 JavaScript にまつわる問題をざっと振り返り、これから遭遇するであろう、今までとは異なる非同期 JavaScript のテクニックをいくつか見てみます。そして、それらのテクニックがいかにして同期 JavaScript の問題を解決するかを確認します。</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Loops_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></dt> + <dd>ここでは、JavaScriptでコードを非同期〔一定時間が経過した時、もしくは、一定間隔（例えば1秒あたり何回）〕に実行する時に使う伝統的な手法を見てみます。そして、どんな場合に便利なのかを説明し、内在する問題を考察します。</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Handling async operations gracefully with Promises</a></dt> + <dd>Promise は JavaScript の比較的新しい機能で、前の処理が完了するまでそれ以上の処理を先延ばしにしたり、その失敗に対処したりすることを可能にするものです。これは、一連の作業を正しく動作させるのに非常に便利です。この記事では、promise がどのように動作するか、WebAPIのどこで使われているか、そして、どうやって使うかを解説します。</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></dt> + <dd>Promise は構成したり理解したりするのにやや複雑であるため、モダンブラウザは <code>async</code> 関数と <code>await</code> 演算子を実装しています。前者は通常の関数が promise によって暗黙に非同期的に振る舞うことを可能にし、後者は <code>async</code> 関数内で処理が進む前に promise を待つことで、promise の連鎖を簡単にします。この記事では <code>async</code>/<code>await</code> を解説します。</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></dt> + <dd>このモジュールの最後に、別のコーディングテクニックとこれまで議論してきた機能を考察します。そして、推奨事項とよくある落とし穴への注意とともに、どれを・いつ・どこで使うのが適切なのかを検討します。</dd> +</dl> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li><a href="https://eloquentjavascript.net/11_async.html">Asynchronous Programming</a>（Marjin Haverbeke 氏の非常に優れたオンライン書籍 <a href="https://eloquentjavascript.net/">Eloquent JavaScript</a> より）</li> +</ul> diff --git a/files/ja/learn/javascript/building_blocks/build_your_own_function/index.html b/files/ja/learn/javascript/building_blocks/build_your_own_function/index.html new file mode 100644 index 0000000000..e12ce6f478 --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/build_your_own_function/index.html @@ -0,0 +1,262 @@ +--- +title: 独自の関数を作る +slug: Learn/JavaScript/Building_blocks/Build_your_own_function +tags: + - Article + - Beginner + - CodingScripting + - Functions + - Guide + - JavaScript + - Learn + - Tutorial + - build + - invoke + - 'l10n:priority' + - parameters +translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">前の記事で扱った重要な理屈をたくさん使って、この記事では実践的な練習を行ないます。ここではあなたが自力で独自関数を作成するための練習を行なっていきます。同時に、関数を扱う上で役に立つ細々の説明もしていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターの知識、HTML と CSS への理解、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩 </a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a>。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>独自の関数を作成する練習、役に立つ関連事項についてつっこんだ説明。</td> + </tr> + </tbody> +</table> + +<h2 id="Active_learning_Lets_build_a_function" name="Active_learning_Lets_build_a_function">Active learning: 関数を作ってみよう</h2> + +<p>これから作ってみる独自の関数を <code>displayMessage()</code>。これは独自のメッセージボックスをウェブページ上に表示し、ブラウザー組込みの <a href="/ja/docs/Web/API/Window/alert">alert()</a> 関数の特製の代替品として動作します。既に見たものですが、忘れた事にしましょう。以下をブラウザーの JavaScript コンソールから打ち込みます、どのページでも構いません:</p> + +<pre class="brush: js notranslate">alert('This is a message');</pre> + +<p><code>alert</code> 関数は引数を一つ取ります — アラートボックスに表示される文字列です。文字列を色々変えてメッセージを変化させてみて下さい。</p> + +<p><code>alert</code> 関数には制限があります: メッセージを変更することはできますが、色やアイコンなど、それ以外の部分を簡単には変えられません。もっと楽しくできるやつを作りましょう。</p> + +<div class="note"> +<p><strong>注記</strong>: この例題は全てのモダンブラウザー上で問題なく動くはずですが、古いブラウザーではちょっとおかしな見た目になるかもしれません。この課題は Firefox、Opera、Chrome のようなモダンなブラウザー上で行なうのが推奨です。</p> +</div> + +<h2 id="The_basic_function" name="The_basic_function">基本的な関数</h2> + +<p>最初に、基本的な関数を組み立てていきましょう。</p> + +<div class="note"> +<p><strong>注記</strong>: 関数に名前を付ける方針としては、<a href="/ja/docs/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules">変数名に名前をつける方針</a>と同じルールに従うべきです。問題はありません、すぐに見分けがつくからです — 関数ならすぐ後に括弧が付きますが、変数には付きません。</p> +</div> + +<ol> + <li><a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html">function-start.html</a> ファイルにアクセスして、ローカルコピーを作成するところから初めます。HTML は単純です — body にはボタン一つしかありません。特製メッセージボックス用の基本的な CSS スタイルと、JavaScript を追加していく用の空の {{htmlelement("script")}} 要素が含まれています。</li> + <li>次に、<code><script></code> 要素の中に以下を追加して下さい: + <pre class="brush: js notranslate">function displayMessage() { + +}</pre> + キーワード <code>function</code> から始めますが、これは関数を定義するという意味です。この後には、関数につけたい名前、カッ括弧の組、中括弧の組と続きます。関数に渡したい引数は括弧の中に、関数を呼び出したときに走らせたいコードは中括弧の中に書きます。</li> + <li>最後に、以下のコードを中括弧の中に追加します: + <pre class="brush: js notranslate">const html = document.querySelector('html'); + +const panel = document.createElement('div'); +panel.setAttribute('class', 'msgBox'); +html.appendChild(panel); + +const msg = document.createElement('p'); +msg.textContent = 'This is a message box'; +panel.appendChild(msg); + +const closeBtn = document.createElement('button'); +closeBtn.textContent = 'x'; +panel.appendChild(closeBtn); + +closeBtn.onclick = function() { + panel.parentNode.removeChild(panel); +}</pre> + </li> +</ol> + +<p>これは見ていくにはそこそこの量のコードですから、一つ一ついっしょに進んでいく事にしましょう。</p> + +<p>最初の行では {{domxref("document.querySelector()")}} と呼ばれる DOM API 関数を使って {{htmlelement("html")}} 要素を選択し、<code>html</code> という名前の定数に要素への参照を保存したので、これを使っていろいろやっていきます:</p> + +<pre class="brush: js notranslate">const html = document.querySelector('html');</pre> + +<p>次の部分では別の DOM API 関数 {{domxref("document.createElement()")}} を使い、{{htmlelement("div")}} 要素を作成、これへの参照を <code>panel</code> という定数に保存しています。この要素は我々のメッセージボックスの外枠となっていきます。</p> + +<p>次にまた別の DOM API 関数 {{domxref("Element.setAttribute()")}} を使って、我々のパネルの <code>class</code> 属性とその値 <code>msgBox</code> を設定します。これは要素のスタイルを指定しやすくするためです — ページの CSS を見ると、メッセージボックスとその中身に適用するスタイルとして <code>.msgBox</code> クラスセレクターがあるのがわかるでしょう。</p> + +<p>最後に、前に保存した html 変数の DOM 関数 {{domxref("Node.appendChild()")}} を呼んでいますが、この関数は一つの要素を別の要素の子として組み入れる働きをします。panel という<code><div></code> 要素を子として、<code><html></code> 要素の中に追加したいのです。作成した要素は作成したページにぽんと現われたりはしません — どこに置くのかも指定しなければなりません。なのでこのようにする必要があります。</p> + +<pre class="brush: js notranslate">const panel = document.createElement('div'); +panel.setAttribute('class', 'msgBox'); +html.appendChild(panel);</pre> + +<p>次の 2 つのセクションでは既に見た同じ <code>createElement()</code> と <code>appendChild()</code> 関数を使用して、2 つの新しい要素、つまり {{htmlelement("p")}} と {{htmlelement("button")}} を作成し、<code><div></code> パネルの子要素としてページに挿入します。段落の中にメッセージを挿入する {{domxref("Node.textContent")}} プロパティ (要素のテキスト内容を表す) とボタンの中に 'x' を使います。このボタンは、ユーザーがメッセージボックスを閉じるときにクリック/アクティブ化する必要があります。</p> + +<pre class="brush: js notranslate">const msg = document.createElement('p'); +msg.textContent = 'This is a message box'; +panel.appendChild(msg); + +const closeBtn = document.createElement('button'); +closeBtn.textContent = 'x'; +panel.appendChild(closeBtn);</pre> + +<p>最後に、{{domxref("GlobalEventHandlers.onclick")}} イベントハンドラーを使用して、ボタンをクリックするとパネル全体をパネルから削除してメッセージボックスを閉じるようにします。<br> + <br> + 簡単に説明すると、<code>onclick</code> ハンドラーはボタン (または実際にはページ上の任意の要素) で使用できるプロパティで、ボタンをクリックしたときに実行するコードを指定する関数に設定できます。後の<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの記事</a>で、これらについてさらに詳しく学びます。<code>onclick</code> ハンドラーは、ボタンがクリックされたときに実行されるコードを含む無名関数と等しくなります。関数内の行は {{domxref("Node.removeChild()")}} DOM API関数を使用して、HTML要素の特定の子要素 (この場合は <code><div></code> パネル) を削除することを指定します。</p> + +<pre class="brush: js notranslate">closeBtn.onclick = function() { + panel.parentNode.removeChild(panel); +}</pre> + +<p>基本的には、このコードブロック全体が HTML のブロックを生成してページに挿入しています。</p> + +<pre class="brush: html notranslate"><div class="msgBox"> + <p>This is a message box</p> + <button>x</button> +</div></pre> + +<p>作業するコードがたくさんありました。今のところどのように動作しているか正確に覚えていないことをあまり心配しないでください！ ここでは、関数の構造と使用法を中心に説明しますが、この例では何か面白いことを示したかったのです。</p> + +<h2 id="Calling_the_function" name="Calling_the_function">関数の呼び出し</h2> + +<p>これで、<code><script></code> 要素に書かれた関数定義がうまくいきましたが、それは何もしません。</p> + +<ol> + <li>関数の下に次の行を含めて呼び出してみてください: + <pre class="brush: js notranslate">displayMessage();</pre> + この行は関数を呼び出し、すぐに実行させます。コードを保存してブラウザーを再読み込みすると、小さなメッセージボックスがすぐに 1 回だけ表示されます。それを一度呼ぶだけです。</li> + <li> + <p>サンプルページでブラウザーの開発者ツールを開き、JavaScript コンソールに移動してもう一度その行を入力すると、もう一度表示されます。これは楽しいことです - 私たちは今好きな時に呼び出すことができる再利用可能な関数を持っています。</p> + + <p>しかし、ユーザーとシステムのアクションに応じて表示されるようにすることをお勧めします。実際のアプリケーションでは、このようなメッセージボックスは、新しいデータが利用可能であること、エラーが発生したこと、ユーザーがプロファイルを削除しようとしている (「これは本当ですか？」)、またはユーザーが 新しい連絡先や操作が正常に終了しました...などが起こったときに呼び出されるでしょう。</p> + + <p>このデモでは、ユーザーがボタンをクリックするとメッセージボックスが表示されます。</p> + </li> + <li>追加した前の行を削除します。</li> + <li>次に、ボタンを選択し、そのボタンへの参照を定数に格納します。関数定義の上のコードに次の行を追加します: + <pre class="brush: js notranslate">const btn = document.querySelector('button');</pre> + </li> + <li>最後に、前の行の下に次の行を追加します: + <pre class="brush: js notranslate">btn.onclick = displayMessage;</pre> + 関数内の <code>closeBtn.onclick...</code> 行と同様に、ここではボタンがクリックされたことに応答してコードを呼び出します。しかしこの場合、コードを含む無名関数を呼び出す代わりに、関数名を直接呼び出しています。</li> + <li>ページを保存して再表示してみてください。ボタンをクリックするとメッセージボックスが表示されるはずです。</li> +</ol> + +<p>関数名の後ろに括弧が含まれていないのはなぜでしょうか。これは、ボタンがクリックされた後にのみ、関数をすぐに呼びたくないからです。行を次の行に変更しようとすると</p> + +<pre class="brush: js notranslate">btn.onclick = displayMessage();</pre> + +<p>保存して再読み込みすると、ボタンをクリックせずにメッセージボックスが表示されます。このコンテキストの括弧は「関数呼び出し演算子」と呼ばれることがあります。現在のスコープですぐに関数を実行する場合にのみ使用します。同様の点で、匿名関数内のコードは関数スコープ内にあるため、すぐには実行されません。<br> + <br> + 最後の実験を試した場合は、最後の変更を取り消してから実行してください。</p> + +<h2 id="Improving_the_function_with_parameters" name="Improving_the_function_with_parameters">パラメーターを使用して関数を改善する</h2> + +<p>その機能はそれほど便利ではありません — 毎回同じ既定のメッセージを表示したくはないのです。いくつかのパラメーターを追加して機能を改善し、いくつかの異なるオプションで呼び出すことができるようにしましょう。</p> + +<ol> + <li>まず、関数の最初の行を更新します。 + <pre class="brush: js notranslate">function displayMessage() {</pre> + + <div>このようになります:</div> + + <pre class="brush: js notranslate">function displayMessage(msgText, msgType) {</pre> + 関数を呼び出すと、括弧内に 2 つの変数値を指定して、メッセージボックスに表示するメッセージとそのメッセージのタイプを指定できます。</li> + <li>最初のパラメーターを使用するには、関数内の次の行を更新します: + <pre class="brush: js notranslate">msg.textContent = 'This is a message box';</pre> + + <div>このようになります</div> + + <pre class="brush: js notranslate">msg.textContent = msgText;</pre> + </li> + <li>最後に関数呼び出しを更新して、更新されたメッセージテキストを追加する必要があります。次の行を変更します。 + <pre class="brush: js notranslate">btn.onclick = displayMessage;</pre> + + <div>このブロックのようになります:</div> + + <pre class="brush: js notranslate">btn.onclick = function() { + displayMessage('Woo, this is a different message!'); +};</pre> + 私たちが呼び出している関数の括弧内にパラメーターを指定したい場合、直接呼び出すことはできません - 直接のスコープにないため、すぐに呼び出されないように無名関数の中に入れる必要があります。ボタンがクリックされるまで呼び出されません。</li> + <li>再読み込みしてコードをもう一度試してみてください。それでもパラメーター内のメッセージを変えてボックスに表示されるメッセージを変えることができます。</li> +</ol> + +<h3 id="A_more_complex_parameter" name="A_more_complex_parameter">より複雑なパラメーター</h3> + +<p>次のパラメーターに移りましょう。これにはもう少し作業が必要です。<code>msgType</code> パラメーターの設定によって、別のアイコンと異なる背景色が表示されるように設定していきます。</p> + +<ol> + <li>まず始めに、この演習に必要なアイコン (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/icons/warning.png">warning</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/icons/chat.png">chat</a>) を GitHub からダウンロードしてください。HTML ファイルと同じ場所にある <code>icons</code> という新しいフォルダーに保存します + + <div class="note"><strong>メモ</strong>: <a href="https://www.iconfinder.com/">iconfinder.com</a> にある warning と chat のアイコンは <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a> によってデザインされたものです。ありがとう！ (実際のアイコンのページは移動か削除されています。)</div> + </li> + <li>次に、HTML ファイル内の CSS を探します。私たちは、アイコンの道を作るためにいくつかの変更を行います。まず <code>.msgBox</code> の幅を次のように更新します + <pre class="brush: css notranslate">width: 200px;</pre> + <span>このようにします</span> + + <pre class="brush: css notranslate">width: 242px;</pre> + </li> + <li>次に、<code>.msgBox p { ... }</code> ルール内に次の行を追加します + <pre class="brush: css notranslate">padding-left: 82px; +background-position: 25px center; +background-repeat: no-repeat;</pre> + </li> + <li>これでアイコンの表示を処理するために、<code>displayMessage()</code> 関数にコードを追加する必要があります。関数の終了中括弧 (<code>}</code>) のすぐ上に次のブロックを追加します。 + <pre class="brush: js notranslate">if (msgType === 'warning') { + msg.style.backgroundImage = 'url(icons/warning.png)'; + panel.style.backgroundColor = 'red'; +} else if (msgType === 'chat') { + msg.style.backgroundImage = 'url(icons/chat.png)'; + panel.style.backgroundColor = 'aqua'; +} else { + msg.style.paddingLeft = '20px'; +}</pre> + ここで、<code>msgType</code> パラメーターが <code>'warning'</code> に設定されている場合、警告アイコンが表示され、パネルの背景色は赤に設定されます。<code>'chat'</code>に設定されている場合、チャットアイコンが表示され、パネルの背景色が青色に設定されます。<code>msgType</code> パラメーターがまったく設定されていない (または別のものに変更されている) 場合、コードの <code>else { ... }</code> 部分が有効になり、段落には単にデフォルトのパディングが与えられ、背景パネルの色もしくはアイコンのどちらかが未設定の状態となります。これは <code>msgType</code> パラメーターが指定されていない場合、省略可能なパラメーターであることを意味するデフォルトの状態を提供します。</li> + <li>更新された関数をテストしましょう。この <code>displayMessage()</code> 呼び出しを更新して： + <pre class="brush: js notranslate">displayMessage('Woo, this is a different message!');</pre> + <span>これらのうちの 1 つにしましょう。</span> + + <pre class="brush: js notranslate">displayMessage('Your inbox is almost full — delete some mails', 'warning'); +displayMessage('Brian: Hi there, how are you today?','chat');</pre> + 私たちの (今はそうではない) 小さな機能がどのように役立つかがわかります。</li> +</ol> + +<div class="note"> +<p><strong>メモ</strong>: サンプルをうまく動作させることができない場合は、コードを <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">GitHub の完成バージョン</a>と比較して (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">see it running live</a> もみて) チェックしてください。もしくは私たちにヘルプを依頼してください。</p> +</div> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の最後まで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を維持しているか検証するテストを見ることができます— <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions">Test your skills: Functions</a>. を見てください。このテストは次の記事でカバーするスキルが必要ですので、試す前にこれを読んでおくとよいでしょう。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>最後までたどり着きました。おめでとうございます！この記事では、実用的なカスタム関数を構築するプロセス全体を紹介しました。もう少し動けば、実際のプロジェクトに移植することができます。次の記事では、別の重要な関連概念である戻り値を説明して関数をまとめます。</p> + +<ul> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li> +</ul> diff --git a/files/ja/learn/javascript/building_blocks/conditionals/index.html b/files/ja/learn/javascript/building_blocks/conditionals/index.html new file mode 100644 index 0000000000..70d662df26 --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/conditionals/index.html @@ -0,0 +1,782 @@ +--- +title: コードでの意思決定 — 条件文 +slug: Learn/JavaScript/Building_blocks/conditionals +tags: + - Article + - Beginner + - CodingScripting + - Conditionals + - JavaScript + - Learn + - Switch + - conditions + - else + - if + - 'l10n:priority' + - ternary +translation_of: Learn/JavaScript/Building_blocks/conditionals +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">どのプログラミング言語でも、コードは様々な入力に応じた決定を迫られ、その結果として動作を起こします。例えば、ゲームではプレイヤーの残機が 0 になった場合、ゲームオーバーとなります。天気アプリは朝に起動された場合は日の出の画像を表示し、夜に起動された場合は星や月の画像を表示します。この記事では、JavaScript において、条件文と呼ばれるものがどのように動作するかを説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターの知識および HTML と CSS への理解、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript における条件分岐構造をどのように使用するかを理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="You_can_have_it_on_one_condition..!" name="You_can_have_it_on_one_condition..!">すべては条件次第..</h2> + +<p>人類 (と他の動物たち)は 小さいもの (「クッキーを 1 つ食べるべきか、2 つ食べるべきか...。」) から大きいもの (「故郷に残って親父の農場を継ぐべきか、アメリカで宇宙物理学を学ぶべきか...。」) まで、生活に関わるすべての決定を下します。</p> + +<p>JavaScript では、条件文を使ってそのような決定を下すことが可能です。条件文は、選ばなければならない選択肢 (例えば「クッキーを 1 つまたは 2 つ食べる」) からそれを選んだ場合の結果を導き出します (おそらく「1 つクッキーを食べる」を選んだら、「まだちょっとお腹が空いている」という結果となるでしょうし、「2 つクッキーを食べる」を選んだら「お腹いっぱい。だけどクッキーを全部食べてママに怒られる」という結果となってしまうでしょう。)</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13703/cookie-choice-small.png" style="display: block; margin: 0px auto;"></p> + +<h2 id="if_..._else_statements" name="if_..._else_statements">if ... else ステートメント</h2> + +<p>それでは、JavaScript で最もよく使われる条件文から始めましょう。それは <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a></code><a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else"> ステートメント</a>です。</p> + +<h3 id="Basic_if_..._else_syntax" name="Basic_if_..._else_syntax">if ... else の基本的な構文</h3> + +<p><code>if...else</code> の基本的な構文は以下の{{glossary("pseudocode", "擬似コード")}}のようになっています。</p> + +<pre class="notranslate">if (条件式) { + 条件式が true の場合に実行されるコード +} else { + それ以外の場合に実行されるコード +}</pre> + +<p>ここでは...</p> + +<ol> + <li><code>if</code> キーワードの後ろに括弧が並んでいます。</li> + <li>判断に用いる条件式はその括弧の中にあります (たいていの場合は「この値はもう一方より大きい」や、「この値は存在する」などです)。この条件には、前回のモジュールで習った<a href="/ja/Learn/JavaScript/First_steps/Math#Comparison_operators">比較演算子</a>を使用し、<code>true</code> または <code>false</code> を返します。</li> + <li>中にコードが書いてある (実際のコードはどんなものでも構いません) 中括弧のペアは、条件式が <code>true</code> の場合に実行されます。</li> + <li>続いて <code>else</code> キーワードがあります。</li> + <li>さらに他のコードが書いてある (こちらもどんなコードでも構いません) 中括弧のペアは条件式が <code>true</code> ではない場合に実行されます。</li> +</ol> + +<p>このコードは (英語を使う人には) とても読みやすいものになっています。このコードは「もし ( <strong>if</strong> ) 条件式 ( <strong>condition</strong> ) が <code>true</code> を返したら A のコードを実行し、それ以外ならば ( <strong>else</strong> ) B のコードを実行する」と読めます。</p> + +<p><code>else</code> とそれに続く中括弧は必ずしも書く必要がないことを覚えておきましょう。次のコードも全く問題のないコードです。</p> + +<pre class="notranslate">if (条件式) { + 条件式が true の場合に実行されるコード +} + +普通に実行されるコード</pre> + +<p>ここで注意しておかなければならないことがあります。それは 2 つ目のコードブロックは、条件分岐の管理下になく、条件式が <code>true</code> か <code>false</code> かに関係なく、<strong>常に</strong>実行されることです。これはまったく悪いことではないのですが、条件に応じてどちらか一方のみ動かしたいと思っている場合には、気を付けておかないと思った通りの動作をしないでしょう。</p> + +<p>最後の確認点として、<code>if...else</code> ステートメントが中括弧なしで書かれているのを見ることがあります。以下のような省略した書き方です。</p> + +<pre class="notranslate">if (条件式) 条件式が true の場合に実行されるコード +else それ以外の場合に実行されるコード</pre> + +<p>これは正常なコードですが、あまり推奨されません。中括弧でコードブロックを分割して、複数の行とインデントを使って書いたほうが読みやすく、コードがどうなっているかを把握しやすいためです。</p> + +<h3 id="A_real_example" name="A_real_example">実際の例</h3> + +<p>構文をもっとよく理解するため、実際の例を考えてみましょう。例えば両親にお使いを頼まれた子供を想像してください。「欲しがってたおもちゃがあるよね。お使いを頼まれてくれたら、お小遣いを追加であげるよ。」と親が頼みます。JavaScript では以下のようなコードで表現できます。</p> + +<pre class="brush: js notranslate">let shoppingDone = false; + +if (shoppingDone === true) { + let childsAllowance = 10; +} else { + let childsAllowance = 5; +}</pre> + +<p>このコードは常に <code>shoppingDone</code> 変数が <code>false</code> なので、かわいそうな子供は追加のお小遣いを受け取れません。両親が子供がお使いを完了した場合に <code>shoppingDone</code> 変数を <code>true</code> にセットしてあげるかどうかはプログラム次第です (つまり私たち次第です。)</p> + +<div class="note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">GitHub で上記のコードの完全なバージョン</a>が公開されています (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">ライブ実行</a>でも確認できます。)</p> +</div> + +<h3 id="else_if" name="else_if">else if</h3> + +<p>先ほどの例では実行結果は 2 つだけでしたが、もっと選択肢がある場合はどうでしょうか？</p> + +<p><code>else if</code> を使って、追加の選択肢を <code>if...else</code> に繋ぐ方法があります。追加の選択肢は <code>if() { ... }</code> と <code>else { ... }</code> の間に、コードブロックを続けて追加する必要があります。具体的な例として、天気予報のアプリケーションの一部を見てみましょう。</p> + +<pre class="brush: html notranslate"><label for="weather">今日の天気を選択してください: </label> +<select id="weather"> + <option value="">--選択してください--</option> + <option value="sunny">晴れ</option> + <option value="rainy">雨</option> + <option value="snowing">雪</option> + <option value="overcast">曇り</option> +</select> + +<p></p></pre> + +<pre class="brush: js notranslate">const select = document.querySelector('select'); +const para = document.querySelector('p'); + +select.addEventListener('change', setWeather); + +function setWeather() { + const choice = select.value; + + if (choice === 'sunny') { + para.textContent = '今日はとてもいい天気です。短いパンツをはいて、砂浜や公園に出かけ、アイスクリームを食べましょう！'; + } else if (choice === 'rainy') { + para.textContent = '雨が降っています。レインコートと傘を忘れないようにして、できる限り室内で過ごしましょう。'; + } else if (choice === 'snowing') { + para.textContent = '雪が降ってとても寒いです！室内でホットチョコレートを飲むか、雪だるまを作るのがよいでしょう。'; + } else if (choice === 'overcast') { + para.textContent = '雨は降っていませんが、空はとても暗くなっています。万が一に備えレインコートを持ちましょう。'; + } else { + para.textContent = ''; + } +} + +</pre> + +<p>{{ EmbedLiveSample('else_if', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<ol> + <li>HTML に、天気を選ぶことが可能な {{htmlelement("select")}} 要素があり、1 つの段落がありますね。</li> + <li>JavaScript では、{{htmlelement("select")}} と {{htmlelement("p")}} の各要素について、参照を取得して保持し、<code><select></code> 要素にはイベントリスナーを設定しています。もし、要素の値が変わったら <code>setWeather()</code> 関数が動きます。</li> + <li>この関数が実行されると、まずは <code>choice</code> という変数に、<code><select></code> 要素の現在選択されている値を入れます。そして、条件文を使い、<code>choice</code> の値に応じた文字列が段落に設定されます。最初の <code>if() {...}</code> のブロックを除いて、どのように <code>else if() {...}</code> のブロックで判定しているか注目してください。</li> + <li>一番下の <code>else {...}</code> 選択肢は、「最後の手段」となるオプションで、この中のコードは、どの条件にも一致しなかった場合 (<code>true</code> とならなかった場合) に実行されます。今回の場合選択されていない場合に、段落を空にしています。何も選択されていない場合というのは、ユーザーが再度最初に表示されていた「--選択してください--」というオプションを選んだ場合です。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">GitHub で上記のコードの完全なバージョン</a>が公開されています (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">ライブ実行</a>でも確認できます。)</p> +</div> + +<h3 id="A_note_on_comparison_operators" name="A_note_on_comparison_operators">比較演算子に関するメモ</h3> + +<p>比較演算子は条件文の中で使われます。<a href="/ja/Learn/JavaScript/First_steps/Math#Comparison_operators">JavaScript での数学入門 — 数値と演算子について</a>で初めて出てきましたね。演算子には以下のようなものがありました。</p> + +<ul> + <li><code>===</code> と <code>!==</code> は、ある値がもう一方の値と等しいか、もしくは等しくないかを判定します。</li> + <li><code><</code> と <code>></code> は、ある値がもう一方の値より大きいか、より小さいかを判定します。</li> + <li><code><=</code> と <code>>=</code> は、ある値がもう一方の値以上か、以下かを判定します。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: もし記憶があいまいならば、上記のリンク先を見て復習しましょう。</p> +</div> + +<p>真偽 (<code>true</code>/<code>false</code>) の値を判定する場合には少しの配慮が必要であることを付け加えさせてください。おそらく何度か躓くであろう、よくあるパターンです。<code>false</code>、<code>undefined</code>、<code>null</code>、<code>0</code>、<code>NaN</code>、空文字列 (<code>''</code>) 以外の値は条件文で使った場合に <code>true</code> となります。ですから、その値が <code>true</code> であるか判定したい場合や、その値が存在するか (例えば、<code>undefined</code> ではないこと) 判定したい場合は単に変数名を使用するだけです。</p> + +<pre class="brush: js notranslate">let cheese = 'チェダー'; + +if (cheese) { + console.log('やった！チーズトーストを作るチーズがあるよ。'); +} else { + console.log('今日はチーズトーストのチーズがないよ。'); +}</pre> + +<p>先ほどの子供のお使いの例に戻ると、以下のようにも書くことができます。</p> + +<pre class="brush: js notranslate">let shoppingDone = false; + +if (shoppingDone) { // '=== true' を明示的に指定する必要はありません + let childsAllowance = 10; +} else { + let childsAllowance = 5; +}</pre> + +<h3 id="Nesting_if_..._else" name="Nesting_if_..._else">入れ子の if ... else</h3> + +<p><code>if...else</code> ステートメントを入れ子にして、他の <code>if...else</code> ステートメントの中で使用することは全く問題ありません。例えば、天気予報アプリケーションで気温に応じて表示する内容を切り替えたい場合以下のように書くことができます。</p> + +<pre class="brush: js notranslate">if (choice === 'sunny') { + if (temperature < 86) { + para.textContent = '外の気温は ' + temperature + ' 度です — とてもいい天気です。海水浴や、公園に出かけてアイスクリームを食べましょう'; + } else if (temperature >= 86) { + para.textContent = '外の気温は ' + temperature + ' 度です — かなり暑いです！外出する場合にはアイスクリームを持って出かけましょう。'; + } +}</pre> + +<p>内側の <code>if...else</code> ステートメントは、外側の <code>if</code> ステートメントとは完全に独立して作用します。</p> + +<h3 id="Logical_operators_AND_OR_and_NOT" name="Logical_operators_AND_OR_and_NOT">論理演算子: AND と OR と NOT</h3> + +<p>複数の条件を入れ子の <code>if...else</code> ステートメントを書かずに判定したいなら、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators">論理演算子</a>の出番です。条件文の中で使用する場合、AND と OR は以下の作用をもたらすでしょう。</p> + +<ul> + <li><code>&&</code> — AND は 2 つ以上の式を一つに繋げ、それぞれの式を個別に評価して、すべて <code>true</code> になった場合、その式全体が <code>true</code> として返します。</li> + <li><code>||</code> — OR は 2 つ以上の式を 1 つに繋げ、それぞれの式を個別に評価し、最初に <code>true</code> になったところで、その式全体を <code>true</code> として返します。</li> +</ul> + +<p>AND の例を示すため、先ほどのコードを書き直すと以下のようになります。</p> + +<pre class="brush: js notranslate">if (choice === 'sunny' && temperature < 86) { + para.textContent = '外の気温は ' + temperature + ' 度です — とてもいい天気です。海水浴や、公園に出かけてアイスクリームを食べましょう'; +} else if (choice === 'sunny' && temperature >= 86) { + para.textContent = '外の気温は ' + temperature + ' 度です — かなり暑いです！外出する場合にはアイスクリームを持って出かけましょう。'; +}</pre> + +<p>例では、最初のブロックは <code>choice === 'sunny'</code> <em>と</em> <code>temperature < 86</code> のどちらも <code>true</code> となった場合にのみ実行されます。</p> + +<p>今度は OR の例を見てみましょう。</p> + +<pre class="brush: js notranslate">if (iceCreamCarOutside || houseStatus === '火事') { + console.log('すぐに家から出ましょう。'); +} else { + console.log('それでは家にいましょう。'); +}</pre> + +<p>論理演算子の最後は NOT です。<code>!</code> 演算子で表され、式を否定するのに使用します。それでは先ほどの OR と組み合わせてみましょう。</p> + +<pre class="brush: js notranslate">if (!(iceCreamVanOutside || houseStatus === '火事')) { + console.log('それでは家にいましょう。'); +} else { + console.log('すぐに家から出ましょう。'); +}</pre> + +<p>このコード例では、OR ステートメントが <code>true</code> となれば、NOT 演算子がそれを否定します。そのため、式全体は <code>false</code> となります。</p> + +<p>論理ステートメントは思うがままに、いくつでも繋げることが可能です。次の例では両方の OR ステートメントが真を返した場合に AND ステートメントが真となり、<code>if</code> の中のコードが実行されます。</p> + +<pre class="brush: js notranslate">if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'スティーブ')) { + // コードを実行 +}</pre> + +<p>論理 OR 演算子を使用するうえでよくある間違いは、判定しようとしている変数を一度だけ書いて、その後に判定したい値を <code>||</code> (OR) 演算子で区切って指定する誤りです。次のような例です。</p> + +<pre class="example-bad brush: js notranslate">if (x === 5 || 7 || 10 || 20) { + // コードを実行する +}</pre> + +<p>この場合、<code>if(...)</code> の条件式は常に真となります。なぜなら 7 (もしくはその他 0 以外の数値) が常に <code>true</code> と評価されるためです。この条件式は「もし x が 5 であるか 7 が真であるならば (7 は常に真です)」となります。これは求めているものではありませんよね！このコードの誤りを修正するためには、OR 演算子の隣に常に完全な条件を書かなければなりません。</p> + +<pre class="brush: js notranslate">if (x === 5 || x === 7 || x === 10 ||x === 20) { + // コードを実行する +}</pre> + +<h2 id="switch_statements" name="switch_statements">switch ステートメント</h2> + +<p><code>if...else</code> ステートメントは条件の判定を上手くこなしていましたが、欠点がないわけではありません。いくつかの選択肢しかない場合には申し分ないのですが、AND / OR の条件が複雑になるにつれて (例えば、複数の論理演算子を使ったりする場合など)、相当量のコードを書かなければなりません。ある選択肢に応じて値を変数に設定したり、特定の条件に応じて何かを表示したりするとき、選択肢がたくさんあると、<code>if...else</code> ステートメントを書くのは面倒です。</p> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Statements/switch"><code>switch</code> ステートメント</a>はそんなときの味方です。<code>switch</code> ステートメントは一つの式または値を受け取り、それに合致する値が見つかるまで選択肢を探します。そして合致した選択肢に対応するコードを実行します。まずは擬似コードを見て、雰囲気をつかみましょう。</p> + +<pre class="notranslate">switch ( 式 ) { + case 選択肢1: + このコードを実行する + break; + + case 選択肢2: + 代わりにこのコードを実行する + break; + + // 以下に選択肢を好きなだけ並べる + + default: + 既定でこのコードを実行する +}</pre> + +<p>上記のコードには...</p> + +<ol> + <li><code>switch</code> キーワードに続き、一組の括弧があります。</li> + <li>括弧の中には、式または値があります。</li> + <li><code>case</code> キーワードに続き、選択肢となる式または値、それにコロン (<code>:</code>) が並んでいます。</li> + <li>もしその選択肢にマッチすれば、コードが実行されます。</li> + <li><code>break</code> ステートメントとセミコロン (<code>;</code>) があります。もし前の選択肢にマッチして入ればブラウザーはコードの実行をここでやめ、switch ステートメントの後ろにあるコードに移動します。</li> + <li><code>case</code> 節 (上記 3. から 5. ) は好きなだけ書くことができます。</li> + <li>上記 3. から 5.の <code>case</code> 節と全く同じコードパターンで書かれている <code>default</code> キーワードがあります。違いは <code>default</code> の後ろに選択肢が書かれていないことです。また、後ろに続くコードがないので、ここには <code>break</code> ステートメントが必要ありません。もし、選択肢のどれにもマッチするものがない場合に既定のオプションとして実行されます。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 評価する式の値が不明な値にならないのであれば、<code>default</code> 節は書く必要はありません。しかし、式が不明な値となり、それに対処する必要があるのなら、<code>default</code> 節を書くことで対応が可能です。</p> +</div> + +<h3 id="A_switch_example" name="A_switch_example">switch を使用する例</h3> + +<p>それでは実際の例を見てみましょう。先ほどの天気予報アプリを switch ステートメントを使用して書き直してみました。</p> + +<pre class="brush: html notranslate"><label for="weather">今日の天気を選択してください: </label> +<select id="weather"> + <option value="">--選択してください--</option> + <option value="sunny">晴れ</option> + <option value="rainy">雨</option> + <option value="snowing">雪</option> + <option value="overcast">曇り</option> +</select> + +<p></p></pre> + +<pre class="brush: js notranslate">const select = document.querySelector('select'); +const para = document.querySelector('p'); + +select.addEventListener('change', setWeather); + + +function setWeather() { + const choice = select.value; + + switch (choice) { + case 'sunny': + para.textContent = '今日はとてもいい天気です。短いパンツをはいて、砂浜や公園に出かけ、アイスクリームを食べましょう！'; + break; + case 'rainy': + para.textContent = '雨が降っています。レインコートと傘を忘れないようにしましょう。'; + break; + case 'snowing': + para.textContent = '雪が降ってとても寒いです！室内でホットチョコレートを飲むか、雪だるまを作るのがよいでしょう。'; + break; + case 'overcast': + para.textContent = '雨は降っていませんが、空はとても暗くなっています。万が一に備えレインコートを持ちましょう。'; + break; + default: + para.textContent = ''; + } +}</pre> + +<p>{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">このサンプルを GitHub で見る</a>ことができます。(<a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">実行可能なデモ</a>もあります。)</p> +</div> + +<h2 id="Ternary_operator" name="Ternary_operator">三項演算子</h2> + +<p>例題に進む前に、ちょっとした構文をご紹介しましょう。<a href="/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">三項演算子 (もしくは条件演算子)</a> は条件式を判定し、その結果に応じて 2 つの値または式のうち、どちらか一方を返します。これはある状況においてはとても便利です。単純に <code>true</code>/<code>false</code> で判定可能な 2 つの選択肢のうちより片方を選ぶという場合には、<code>if...else</code> ブロックを書くよりも多くのコードを節約できます。この擬似コードは以下のようなものになります。</p> + +<pre class="notranslate">( 条件式 ) ? こちらのコードを実行する : 代わりにこちらのコードを実行する</pre> + +<p>それでは実際に例を見て見ましょう。</p> + +<pre class="brush: js notranslate">let greeting = ( isBirthday ) ? 'スミスさん、誕生日おめでとうございます！良い一日を。' : 'スミスさんおはようございます。';</pre> + +<p>この例では <code>isBirthday</code> という変数があり、この変数が <code>true</code> の場合、お客に誕生日を祝福するメッセージを送ります。そうでなければ、通常の挨拶を送ります。</p> + +<h3 id="Ternary_operator_example" name="Ternary_operator_example">三項演算子を使用する例</h3> + +<p>三項演算子を変数の代入にのみ使用する必要はありません。関数や、複数行に渡るコードを実行する場合にも (それ以外にも好きなように) 使用できます。次の例は三項演算子を使用してサイトにテーマを適用しています。</p> + +<pre class="brush: html notranslate"><label for="theme">テーマを選んでください: </label> +<select id="theme"> + <option value="white">白</option> + <option value="black">黒</option> +</select> + +<h1>私のウェブサイト</h1></pre> + +<pre class="brush: js notranslate">const select = document.querySelector('select'); +const html = document.querySelector('html'); +document.body.style.padding = '10px'; + +function update(bgColor, textColor) { + html.style.backgroundColor = bgColor; + html.style.color = textColor; +} + +select.onchange = function() { + ( select.value === 'black' ) ? update('black','white') : update('white','black'); +} +</pre> + +<p>{{ EmbedLiveSample('Ternary_operator_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>上記の例では、テーマ (黒または白) を選択することができる {{htmlelement('select')}} 要素と、サイトのタイトルが書かれた単純な {{htmlelement('h1')}} 要素があります。さらに <code>update()</code> という関数があり、その関数は引数 (入力値) として 2 つの色を取ります。この関数が呼ばれると、ウェブサイトの背景色は 1 つ目の引数に、文字の色は 2 つの目の引数に設定されます。</p> + +<p>さらに、三項演算子を含む <a href="/ja/docs/Web/API/GlobalEventHandlers/onchange">onchange</a> イベントリスナーがあります。<code>select.value === 'black'</code> という条件式で始まっています。この式が <code>true</code> であるならば、<code>update()</code> 関数を引数に <code>'black'</code>、<code>'white'</code> を指定して実行します (つまり、背景色を黒、文字色を白に設定します)。この式が <code>false</code> であるならば、<code>update()</code> 関数を引数に <code>'white'</code>、<code>'black'</code> を指定して実行します (つまり、背景色を逆にします)。</p> + +<div class="note"> +<p><strong>注</strong>: この例は <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">GitHub でも公開しています</a> (または、<a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">動くデモ</a>もあります。)</p> +</div> + +<h2 id="Active_learning_A_simple_calendar" name="Active_learning_A_simple_calendar">アクティブ学習: 単純なカレンダー</h2> + +<p>この例では、単純なカレンダーアプリケーションの作成を手伝ってもらいます。現在、以下の内容がコードに書かれています。</p> + +<ul> + <li>ユーザーが月を選択できるように {{htmlelement("select")}} 要素があります。</li> + <li><code><select></code> メニューの選択内容が変更された場合に、イベントを補足できるように <code>onchange</code> イベントハンドラーが設定されています。</li> + <li>カレンダーを描画し、{{htmlelement("h1")}} 要素に適切な月を設定する <code>createCalendar()</code> と呼ばれる関数があります。</li> +</ul> + +<p>あなたには、<code>onchange</code> ハンドラーの内部に条件式を書いてもらいます。<code>// 条件式をここに書く</code> というコメントのすぐ下に...</p> + +<ol> + <li>選択されている月を取得します (これは <code>choice</code> 変数に格納されています。この値は <code><select></code> 要素で選択された後の値で、例えば 1 月なら、"1" といった値です。)</li> + <li><code>days</code> という変数に、選択された月の日数を設定します。そのためには、1年の各月の日数を調べる必要があるでしょう。うるう年はこの例題の目的から外れるため、無視してください。</li> +</ol> + +<p>ヒント:</p> + +<ul> + <li>ほとんどの月は日数が同じなので、複数の月を OR 演算子を用いて一つの条件式にまとめるのが良いでしょう。</li> + <li>どの月が最も多い日数なのか考えてください。そして、その日数をデフォルト値として使用しましょう。</li> +</ul> + +<p>もし間違ってしまっても、「リセット」ボタンを押すことでいつでも元に戻せます。詰まってしまったら、「答えを見る」ボタンで答えが見られます。</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> +<div class="output" style="height: 500px;overflow: auto;"> + <label for="month">月を選択してください: </label> + <select id="month"> + <option value="1">1 月</option> + <option value="2">2 月</option> + <option value="3">3 月</option> + <option value="4">4 月</option> + <option value="5">5 月</option> + <option value="6">6 月</option> + <option value="7">7 月</option> + <option value="8">8 月</option> + <option value="9">9 月</option> + <option value="10">10 月</option> + <option value="11">11 月</option> + <option value="12">12 月</option> + </select> + + <h1></h1> + + <ul></ul> +</div> + +<h2>コードエディタ</h2> +<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + +<textarea id="code" class="playable-code" style="height: 400px;width: 95%"> +const select = document.querySelector('select'); +const list = document.querySelector('ul'); +const h1 = document.querySelector('h1'); + +select.onchange = function() { + const choice = select.value; + + // 条件式をここに書く + + createCalendar(days, choice + ' 月'); +} + +function createCalendar(days, choice) { + list.innerHTML = ''; + h1.textContent = choice; + for (let i = 1; i <= days; i++) { + const listItem = document.createElement('li'); + listItem.textContent = i; + list.appendChild(listItem); + } +} + +createCalendar(31,'1 月'); +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div> +</pre> + +<pre class="brush: css notranslate">.output * { + box-sizing: border-box; +} + +.output ul { + padding-left: 0; +} + +.output li { + display: block; + float: left; + width: 25%; + border: 2px solid white; + padding: 5px; + height: 40px; + background-color: #4A2DB6; + color: white; +} + +html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = '答えを見る'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === '答えを見る') { + textarea.value = solutionEntry; + solution.value = '答えを隠す'; + } else { + textarea.value = userEntry; + solution.value = '答えを見る'; + } + updateCode(); +}); + +const jsSolution = 'const select = document.querySelector(\'select\');\nconst list = document.querySelector(\'ul\');\nlet h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n let choice = select.value;\n let days = 31;\n if(choice === \'2\') {\n days = 28;\n } else if(choice === \'4\' || choice === \'6\' || choice === \'9\'|| choice === \'11\') {\n days = 30;\n }\n\n createCalendar(days, choice + \' 月\');\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(let i = 1; i <= days; i++) {\n let listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'1 月\');'; +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// タブキーでテキストエリアから抜けてしまうのを防ぎ、 +// 代わりにカーソル位置にタブ文字を挿入する + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する + +textarea.onkeyup = function(){ + // ユーザーのコードが表示されているときのみ状態を保存し、 + // 答えのコードでユーザーコードが上書きされないようにする + if(solution.value === '答えを見る') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Active_learning_More_color_choices!" name="Active_learning_More_color_choices!">アクティブ学習: もっとたくさんの色から選ぶ！</h2> + +<p>この例では、先ほどの三項演算子の例を switch ステートメントに変換し、単純なウェブサイトに、より多くの選択肢を与えます。{{htmlelement("select")}} 要素を見てください。今回は先ほどの 2 つではなく、5 つの選択肢があります。<code>// ここに SWITCH ステートメントを書く</code> というコメントの真下に switch ステートメントを追加してください。</p> + +<ul> + <li><code>choice</code> 変数を判定する式として使用します。</li> + <li>各ケース (case) で、<code>choice</code> 変数は選択可能な値 ('white'、'black'、'purple'、'yellow'、'psychedelic') のうちのどれかです。</li> + <li>各ケース (case) で、<code>update()</code> 関数が実行されるようにしてください。関数には 2 つの引数を指定します。1 つ目の引数は背景色、2 つ目の色は前景色です。色は文字列なので、忘れずに引用符で囲みましょう。</li> +</ul> + +<p>もし間違ってしまっても、「リセット」ボタンを押すことでいつでも元に戻せます。詰まってしまったら、「答えを見る」ボタンで答えが見られます。</p> + +<div class="hidden"> +<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> +<div class="output" style="height: 300px;"> + <label for="theme">テーマを選んでください: </label> + <select id="theme"> + <option value="white">白</option> + <option value="black">黒</option> + <option value="purple">紫</option> + <option value="yellow">黄</option> + <option value="psychedelic">サイケ</option> + </select> + + <h1>私のウェブサイト</h1> +</div> + +<h2>コードエディタ</h2> +<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + +<textarea id="code" class="playable-code" style="height: 450px;width: 95%"> +const select = document.querySelector('select'); +const html = document.querySelector('.output'); + +select.onchange = function() { + const choice = select.value; + + // ここに SWITCH ステートメントを書く +} + +function update(bgColor, textColor) { + html.style.backgroundColor = bgColor; + html.style.color = textColor; +}</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = '答えを見る'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === '答えを見る') { + textarea.value = solutionEntry; + solution.value = '答えを隠す'; + } else { + textarea.value = userEntry; + solution.value = '答えを見る'; + } + updateCode(); +}); + +const jsSolution = 'const select = document.querySelector(\'select\');\nconst html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n const choice = select.value;\n\n switch(choice) {\n case \'black\':\n update(\'black\',\'white\');\n break;\n case \'white\':\n update(\'white\',\'black\');\n break;\n case \'purple\':\n update(\'purple\',\'white\');\n break;\n case \'yellow\':\n update(\'yellow\',\'darkgray\');\n break;\n case \'psychedelic\':\n update(\'lime\',\'purple\');\n break;\n }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}'; +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// タブキーでテキストエリアから抜けてしまうのを防ぎ、 +// 代わりにカーソル位置にタブ文字を挿入する + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する + +textarea.onkeyup = function(){ + // ユーザーのコードが表示されているときのみ状態を保存し、 + // 答えのコードでユーザーコードが上書きされないようにする + if(solution.value === '答えを見る') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', '100%', 950, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2> + +<p>この記事の最後まで来ましたが、最も大事な情報を覚えていますか？先に進む前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals">Test your skills: Conditionals</a> を見てください。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>これで JavaScript での条件構造について今知っておくべきことはすべてです！簡単な例を通してそのコンセプトが理解できたと思います。もし理解できないことがあれば、何度も記事を読み返しましょう。<a href="/ja/Learn#Contact_us">私たちに連絡を</a>しても構いません。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/Learn/JavaScript/First_steps/Math#Comparison_operators">比較演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Conditional_statements">条件式についての詳細</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else">if...else リファレンス</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">条件 (三項) 演算子リファレンス</a></li> +</ul> + +<p>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li> +</ul> diff --git a/files/ja/learn/javascript/building_blocks/events/index.html b/files/ja/learn/javascript/building_blocks/events/index.html new file mode 100644 index 0000000000..7c40419c10 --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/events/index.html @@ -0,0 +1,597 @@ +--- +title: イベントへの入門 +slug: Learn/JavaScript/Building_blocks/Events +tags: + - Beginner + - CodingScripting + - JavaScript + - イベント + - イベントハンドラー + - ガイド + - 学習 + - 記事 +translation_of: Learn/JavaScript/Building_blocks/Events +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">イベントは、あなたがプログラムを書いているシステムで生じた動作、出来事を指します。システムからあなたへ、イベントとして何かあった事を知らせてくるので、必要であればそれに何らかの反応を返す事ができます。例えば、ユーザーがウェブページ上でボタンを押したとき、ある情報を表示するように反応させたいと思うかもしれません。この記事では、イベントに関する重要な概念を取り上げ、ブラウザーの中でのイベントの振る舞いを見ていきます。ここでは、全てを説明するのではなく、この段階で知っておくべき内容を取り上げます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>コンピューターに関する基本的な知識があること。HTML と CSS について理解していて、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>の記事を理解していること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>イベントの基本的な理論を理解すること。ブラウザーでの振る舞いを理解し、プログラミング環境が変わると、イベントの振る舞いが変わることを理解すること。</td> + </tr> + </tbody> +</table> + +<h2 id="A_series_of_fortunate_events" name="A_series_of_fortunate_events">運命的なイベントの連続</h2> + +<p>先ほど説明しましたが、<strong>イベント</strong>はあなたがプログラムしているシステムの中で生じた動作や出来事です。つまり、あるイベントが起きたときに、システムはある種の信号を発します。さらに、ある種のアクションが自動的に実行されるためのメカニズムも提供します。例えば、空港では、飛行機が離陸するために滑走路がクリアになった時に、信号がパイロットに送られます。その結果、パイロットは飛行機の操縦を開始します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14077/MDN-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p> + +<p>ウェブの場合は、イベントは、ブラウザーのウィンドウの中で発火されます、そしてその中に属する特定の項目に紐付く傾向にあります — これは単一の要素、要素の集合、現在のタブでロードされた HTML 文書、ブラウザー画面全体といったものです。発生するイベントはたくさんの異なる種類があります。例をあげると。</p> + +<ul> + <li>ユーザーがある要素の上をマウスでクリックしたり、ある要素の上にカーソルを持ってくる</li> + <li>ユーザーがキーボードのキーを押す</li> + <li>ユーザーがブラウザー画面をリサイズしたり閉じたりする</li> + <li>ウェブページのロードの完了</li> + <li>フォームの送信</li> + <li>ビデオが再生中、停止中、再生が終わった</li> + <li>エラーの発生</li> +</ul> + +<p>ここや MDN <a href="/ja/docs/Web/Events">Event リファレンス</a>を覗いてみれば、<strong>とてもたくさん</strong>の応答可能なイベントがあるのが判るでしょう。</p> + +<p>それぞれの利用可能なイベントには<strong>イベントハンドラー</strong>があり、これはイベントに発火した時に実行される (通常はユーザー定義の JavaScript 関数) コードのブロックのことです。イベントの発火に対する応答としてコードのブロックが実行されるように定義する事を、<strong>イベントハンドラーを登録する</strong>と言います。イベントハンドラーは時に<strong>イベントリスナー</strong> と呼ばれる事を付記しておきます—我々の目的から見ると言い変えてもほとんど問題ないのですが、厳密に言えば一緒に動作する別のものです。イベントリスナーはイベントの発生を監視し、イベントハンドラーは発生したイベントの応答として動作するコードです。</p> + +<div class="note"> +<p><strong>メモ</strong>: 大事な事ですがウェブのイベントは JavaScript 言語の主要部分の一部ではありません — ブラウザーに組み込まれた JavaScript API の一部として定義されたものです。</p> +</div> + +<h3 id="A_simple_example" name="A_simple_example">簡単な例</h3> + +<p>ここで何を言ってるのか説明するため、簡単な例を見てみましょう。このコースでこれまでに例の多くに使われているイベントやイベントハンドラーを見てきました、しかし、知識を固めるために整理をしましょう。続く例では、押すと背景色がランダムに変化する {{htmlelement("button")}} が一つあります:</p> + +<pre class="brush: html notranslate"><button>Change color</button></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">button { margin: 10px };</pre> +</div> + +<p>JavaScript はこのようになります:</p> + +<pre class="brush: js notranslate">const btn = document.querySelector('button'); + +function random(number) { + return Math.floor(Math.random() * (number+1)); +} + +btn.onclick = function() { + const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +}</pre> + +<p>このコードでは、<code>btn</code> という変数に {{domxref("Document.querySelector()")}} 関数を使って取得したボタンへの参照を格納しています。それとは別にランダムな数値を返す関数も定義しています。コードの 3 つ目の部分はイベントハンドラーです。<code>btn</code> 変数は<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/button"><button></a></code>要素を指していますが、この種のオブジェクトにはたくさん発火し得るイベントがあるので、色々なイベントハンドラーが使えます。<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> イベントハンドラプロパティに、ランダムな RGB色を生成し <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/body"><body></a></code> の <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/background-color">background-color</a></code> を設定するコードを抱えた匿名関数を代入する事で、<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Element/click_event">click</a></code> イベントが発火されるのを待ちかまえます。</p> + +<p>このコードは <code><button></code> 要素でクリックイベントが発火すれば常に実行されます、要はユーザーがクリックしたらいつでも。</p> + +<p>この例の出力は以下のようになります:</p> + +<p>{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Its_not_just_web_pages" name="It's_not_just_web_pages">ただのウェブページではありません</h3> + +<p>ここで言及しておくべき事は、イベントは JavaScript 固有のものではないという事です — ほとんどのプログラミング言語はいくつかのイベントモデルを持ち、その動作する方法はしばしは JavaScript の方式とは異なっています。実際、ウェブページの JavaScript のイベントモデルは他の環境で用いられている JavaScript のイベントモデルと異なっています。</p> + +<p>例えば、<a href="/ja/docs/Learn/Server-side/Express_Nodejs">Node.js</a> は開発者に JavaScript でネットワークとサーバーサイドのアプリケーションを構築することを可能にするとても有名な JavaScript ランタイムです。<a href="https://nodejs.org/docs/latest-v12.x/api/events.html">Node.js event model</a> はイベントを待ち受けるリスナー、イベントを定期的に発生させるエミッターに依拠しています —たいして違ってないように聞こえますが、コードは極めて異なっていて、イベントリスナーを登録する <code>on()</code> や、一度実行したら登録を解除するイベントリスナーを登録するための <code>once() </code> のような関数を使っていきます。<a href="https://nodejs.org/docs/latest-v12.x/api/http.html#http_event_connect">HTTP connect event docs</a> が使い方の良い例を教えてくれます。</p> + +<p>その他の例として、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> と呼ばれる技術を使って、クロスブラウザーアドオン (ブラウザーの機能拡張) を JavaScript で作成できます。イベントモデルは Web イベントモデルと似ていますが、ほんの少し違いがあります (イベントリスナーのプロパティはキャメルケース (例 <code>onmessage</code> でなく <code>onMessage</code>) で命名されていて、<code>addListener</code> 関数で結び付ける必要があります。例として <a href="/ja/Add-ons/WebExtensions/API/runtime/onMessage#Examples"><code>runtime.onMessage</code> page</a> を確認してください。</p> + +<p>学習の今の段階で、そのような他の環境について何か理解する必要はありません。イベントは異なるプログラミング環境では異なることがあるとだけ認識してください。</p> + +<h2 id="Ways_of_using_web_events" name="Ways_of_using_web_events">ウェブイベントの使用方法</h2> + +<p>関連づけたいイベントが発火した時に走らせたいイベントリスナーコードを ウェブページに追加する方法はいろいろあります。このセクションでは様々なメカニズムを見ていき、どれを使うべきなのか議論していきます。</p> + +<h3 id="Event_handler_properties" name="Event_handler_properties">イベントハンドラープロパティ</h3> + +<p>イベントハンドラーコードを代入するためのいろいろなプロパティがあり、そういったものをここまでのコースで最もたくさん見てきました。上記の例に戻りましょう。</p> + +<pre class="brush: js notranslate">const btn = document.querySelector('button'); + +btn.onclick = function() { + const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +}</pre> + +<p><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> プロパティがこの例で使用されているイベントハンドラープロパティです。ボタンで利用可能なプロパティ(例えば <code><a href="/ja/docs/Web/API/Node/textContent">btn.textContent</a></code> や <code><a href="/ja/docs/Web/API/HTMLElement/style">btn.style</a></code>)のうちの 1 プロパティに過ぎませんが、特別な種類のものです(コードを代入すると、そのコードはボタンでイベントが発火した際に実行される)。</p> + +<p>ハンドラープロパティには、名前付き関数の関数名 (<a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a> でみられるような) を設定することもできます。こう書いても動作は同じです:</p> + +<pre class="brush: js notranslate">const btn = document.querySelector('button'); + +function bgChange() { + const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +} + +btn.onclick = bgChange;</pre> + +<p>利用できるイベントハンドラープロパティにはとてもたくさんの種類があります。実験してみましょう。</p> + +<p>まずは、<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a> のローカルコピーを作成し、ブラウザーで開いてくださいこれはこの記事ですでに遊んだ簡単なランダム色のサンプルです。さて、<code>btn.onclick</code> のところを以下の異なる値に変えてみて、結果を順に見てみてください:</p> + +<ul> + <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> と <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — ボタンがフォーカスされフォーカスが外れる(Tab キーをパチパチして、ボタンをフォーカスしたり外したりしてみて)と色が変わります。これらはフォームのフィールドがフォーカスされている時にフィールドに何を入れたらいいのか示したり、フィールドの入力が終った直後に入力として正しくない値が入っている際のエラーメッセージを表示するような場合によく使われます。</li> + <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — ダブルクリックされた場合だけ色が変わります。</li> + <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — キーボードのキーが押された時に色が変わります。<code>keypress</code> は普通のキー入力(ボタンを押して離して)を示しますが、<code>keydown</code> と <code>keyup</code> はキーストロークのうち押すだけ、離すだけの部分それぞれを指します。ボタンそのもののイベントハンドラーに登録しても上手く動かないことに注意してください — <a href="/ja/docs/Web/API/Window">window</a> オブジェクトに登録しなければならず、これはブラウザーのウィンドウ全体を表わしています。</li> + <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> と <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — マウスポインタがボタンの上に来たときとボタンの上から外れた時に色が変わります。</li> +</ul> + +<p>いくつかのイベントはとても汎用的なのでほとんどどこでも使えます(例えば onlick ハンドラはほぼ全ての要素に登録できます)が、いくつかはもっと限定的で、特定の状況でしか使えません(例えば <a href="https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay </a> は{{htmlelement("video")}}のような特定の要素でのみ意味を持ちます)。</p> + +<h3 id="インラインイベントハンドラー_—_使っちゃだめ">インラインイベントハンドラー — 使っちゃだめ</h3> + +<p>あなたのコードでこんな形を見た事があるかもしれません:</p> + +<pre class="brush: html notranslate"><button onclick="bgChange()">Press me</button> +</pre> + +<pre class="brush: js notranslate">function bgChange() { + const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +}</pre> + +<div class="note"> +<p>メモ: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">こちら</a>に GitHub上のサンプルがあります (また、<a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">こちら</a>で実際に動くところを見られます)。</p> +</div> + +<p>Web 上で見かける最初期のイベントハンドラー登録方法には、上の例のような<strong>イベントハンドラーHTML属性</strong>(<strong>インラインイベントハンドラー</strong>とも言う)があります — 属性値がイベント発生時に実行したい JavaScript コードそのものです。上の例では{{htmlelement("script")}}要素の中で定義された関数を起動していますが、直接JavsScript そのものを属性の中に入れる事もできます。例えば:</p> + +<pre class="brush: html notranslate"><button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button></pre> + +<p>多くのイベントハンドラープロパティと等価な HTML属性を見付けるでしょうが、使うべきではありません — こういうのは悪い方法とみなされています。ちょっとした事を手早く片づけたい時、イベントハンドラー属性を使うのが簡単に思えるかもしれませんが、あっという間に手がつけられない、効率の悪いものになってしまいます。</p> + +<p>そもそも、あなたの HTML と JavaScript を混在させると、読みにくくなってしまうため、良いアイデアではありません — あなたの JavaScript は一ヶ所にまとめる方が良いです。別の一つのファイルになっていれば、それを複数の HTML ドキュメントに適用できますから。</p> + +<p>(HTML と JavaScript が)一つのファイルになっているとしても、インラインイベントハンドラーは良いアイデアではありません。ボタン一つならいいですが、ボタンが 100 あったら? ファイルに 100 の属性を追加したならば、あっという間に管理していくのは悪夢と化す事でしょう。JavaScript を使えば、ページにボタンがいくつあろうが、全部のボタンにイベントハンドラーを追加するのは簡単です、こんな具合です:</p> + +<pre class="brush: js notranslate">const buttons = document.querySelectorAll('button'); + +for (let i = 0; i < buttons.length; i++) { + buttons[i].onclick = bgChange; +}</pre> + +<p class="brush: js">ここにある他のオプションは <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/NodeList">NodeList</a></code> オブジェクトの組み込みメソッドの <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/NodeList/forEach">forEach()</a></code> で使えることに注意してください:</p> + +<pre class="brush: js notranslate">buttons.forEach(function(button) { + button.onclick = bgChange; +});</pre> + +<div class="note"> +<p><strong>注</strong>: プログラムロジックをコンテンツから分離しておくと、あなたのサイトはサーチエンジンにとってより好ましいものになります。</p> +</div> + +<h3 id="addEventListener_と_removeEventListener">addEventListener() と removeEventListener()</h3> + +<p>最新のイベント機構は <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a> 仕様で規定されていて、ブラウザーに新しい関数が追加されました — <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>です。この関数はイベントハンドラープロパティと同じ方向性ですが、文法は明確に異なります。ランダム色の例をこんな風に書き換える事ができます:</p> + +<pre class="brush: js notranslate">const btn = document.querySelector('button'); + +function bgChange() { + const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +} + +btn.addEventListener('click', bgChange);</pre> + +<div class="note"> +<p>メモ: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">こちら</a>に GitHub上のサンプルがあります (また、<a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">こちら</a>で実際に動くところが見られます)。</p> +</div> + +<p><code>addEventListener()</code> 関数のカッコの中で、二つの引数を指定しています — ハンドラーを登録したいイベントの名前と、それに反応して実行させたいコードを含んだ関数です。匿名関数を使って、実行したいコードを全部 addEventListener() 関数の引数に書いてしまっても全く問題ありません。こんな具合です:</p> + +<pre class="brush: js notranslate">btn.addEventListener('click', function() { + const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +});</pre> + +<p>この方式は、ここまでで見てきた古い方式に勝る点がいくつかあります。まず第一に、逆を行なう関数 <code><a href="/ja/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>があり、以前に追加したリスナーを削除できます。例えばこうすると、このセクションの最初のコード部で追加したリスナーを削除します:</p> + +<pre class="brush: js notranslate">btn.removeEventListener('click', bgChange);</pre> + +<p>単純で小さなプログラムではたいした事ありませんが、大きくて複雑なプログラムでは、古く使われないイベントハンドラーを除去しておくと効率が良くなります。さらに、これは例えば同じボタンに状況の違いによって異なる動作をさせる事ができるようになります — ただ適切なイベントハンドラーを追加したり削除するだけで良いのです。</p> + +<p>第二に、同じリスナーに複数のハンドラーを登録できます。<br> + 次では二つのハンドラの両方は適用されません:</p> + +<pre class="brush: js notranslate">myElement.onclick = functionA; +myElement.onclick = functionB;</pre> + +<p>二行目で最初に設定した <code>onclick</code> の値が上書きされるからです。<br> + ですがこれなら動きます:</p> + +<pre class="brush: js notranslate">myElement.addEventListener('click', functionA); +myElement.addEventListener('click', functionB);</pre> + +<p>要素がクリックされると、どちらの関数も走ります。</p> + +<p>さらには、この方式ではもっとたくさんのパワフルな機能やオプションが使えます。それらはこの記事の範疇を少しばかり超えているので、知りたければ <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> と <code><a href="/ja/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code> のリファレンスページを見てください</p> + +<h3 id="What_mechanism_should_I_use" name="What_mechanism_should_I_use">どの方式を使えば良い?</h3> + +<p>三つの方式のうち、イベントハンドラーHTML属性は絶対使うべきではありません — 前に書いたように、時代遅れで悪いやり方です。</p> + +<p>他の二つはまあまあどっちでも良いです、少なくとも単純な用途では:</p> + +<ul> + <li>イベントハンドラープロパティは力とオプションに欠けますが、ブラウザー間での互換性が高いです(IE8 ですら動きます)。学習を始めるならここから始めるのが良いかもしれません。</li> + <li>DOM レベル 2 イベント(<code>addEventListener()</code>他)はもっとパワフルですが、もっと複雑でちょっと互換性に欠けます(IE9以降でサポート)。こちらも試していき、可能なところではこちらを使えるようになりましょう。</li> +</ul> + +<p>三番目の方式の最大の利点は、必要なときに removeEventListener() 関数でイベントハンドラーコードを削除できる事、必要なときは要素に同種のリスナーを複数追加できる事です。例えば、ある要素に対して <code>addEventListener('click', function() { ... })</code> を別の関数を第二引数に指定して何回か呼ぶ事ができます。これはイベントハンドラープロパティでは、プロパティは後からセットした値で上書きされてしまうので、できません。e.g.:</p> + +<pre class="brush: js notranslate">element.onclick = function1; +element.onclick = function2; +etc.</pre> + +<div class="note"> +<p><strong>注</strong>: もし仕事で IE8 より古いブラウザーをサポートするよう言われているなら、そのような古代のブラウザーは新しいものとは違ったイベントモデルを使っているため、困難にぶつかるかもしれません。でも怖がらないで。大半の JavaScript ライブラリ(例えば <code>jQuery</code>)には、ブラウザー間の差異をとっぱらえる関数が備わっています。勉強中のあなたがこの点について心配しすぎる必要はありません。</p> +</div> + +<h2 id="Other_event_concepts" name="Other_event_concepts">その他、イベントに関する概念</h2> + +<p>このセクションでは、イベントに関連するより進んだ概念について軽くさらっていきます。今の時点で完全に理解する必要があるほど重要ではありませんが、ときどき見かけることになるであろうコードのパターンがなぜそうなっているのか、理解する助けになるかもしれません。</p> + +<h3 id="Event_objects" name="Event_objects">Event objects</h3> + +<p>ときどきイベントハンドラー関数内で <code>event</code>、evt、単に <code>e</code> などと名付けられた引数を見かけるかもしれません。<br> + これらは<strong>イベントオブジェクト</strong>と呼ばれ、イベントの追加機能や情報を提供する目的でイベントハンドラーに自動的に渡されます。例えば、またランダム色の例をちょっと書き換えてみましょう:</p> + +<pre class="brush: js notranslate">function bgChange(e) { + const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + e.target.style.backgroundColor = rndCol; + console.log(e); +} + +btn.addEventListener('click', bgChange);</pre> + +<div class="note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">こちら</a> に GitHub上のサンプルがあります (また、<a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">こちら</a>で実際に動くところが見れらます)。</p> +</div> + +<p>イベントオブジェクト <strong>e</strong> が関数に含まれていて、関数内で <code>e.target</code> — これはボタンそのもの — の背景色スタイルを設定しているのがわかるでしょう。イベントオブジェクトの <code>target</code> プロパティは、常にイベントが生じた要素への参照となっています。ですからこの例ではページではなくボタンの背景色がランダムに変わります。</p> + +<div class="note"> +<p><strong>注</strong>: イベントオブジェクトには好きな名前を使えます — イベントハンドラー関数のカッコの中に使いたい名前を書くだけです。<code>e</code>/<code>evt</code>/<code>event</code> が開発者の間でとても良く使われていますが、これらが短くて覚えやすいからです。標準に従うのはいつだって良いやり方です。</p> +</div> + +<p>複数の要素に同じイベントハンドラを割り当てて、どれかでイベントがあったときに何かさせたいような場合、<code>e.target</code> はとてつもなく有用なものです。複数の要素に同じイベントハンドラーを割り当てて、どれかでイベントがあったときに何かさせたいような場合、e.target はとてつもなく有用なものです。例えばクリックすると見えなくなるタイルが 16 個あるとします。<code>e.target</code> を使ってそれをただ消せるなら、もっと難解な手段で選びだすのよりも使いすいでしょう。続く例では (完全なソースコードは <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a> を見てください; ここで <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">ライブ実行</a> も見られます)、16 個の {{htmlelement("div")}} 要素を JavaScript で生成します。そしてこれらを全部 {{domxref("document.querySelectorAll()")}}を使って選択し、ループで一つ一つに <code>onclick</code> ハンドラを追加して、それぞれがクリックされた時にランダムな色が表われるようにしています:</p> + +<pre class="brush: js notranslate">const divs = document.querySelectorAll('div'); + +for (let i = 0; i < divs.length; i++) { + divs[i].onclick = function(e) { + e.target.style.backgroundColor = bgChange(); + } +}</pre> + +<p>結果はこうです(クリックして遊んでみてください):</p> + +<div class="hidden"> +<h6 id="Hidden_example" name="Hidden_example">Hidden example</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Useful event target example</title> + <style> + div { + background-color: red; + height: 100px; + width: 25%; + float: left; + } + </style> + </head> + <body> + <script> + for (let i = 1; i <= 16; i++) { + const myDiv = document.createElement('div'); + document.body.appendChild(myDiv); + } + + function random(number) { + return Math.floor(Math.random()*number); + } + + function bgChange() { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + return rndCol; + } + + const divs = document.querySelectorAll('div'); + + for (let i = 0; i < divs.length; i++) { + divs[i].onclick = function(e) { + e.target.style.backgroundColor = bgChange(); + } + } + </script> + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_example', '100%', 400) }}</p> + +<p>あなたが使うであろうイベントハンドラーのほとんどでは、イベントオブジェクトには標準的なプロパティと関数(メソッド)({{domxref("Event")}}を参照してください)だけがあります。もっと上級者向けハンドラーでは、動作に必要な追加データを保持するために特殊なプロパティを付与するものもあります。例えば <a href="/ja/docs/Web/API/MediaRecorder_API">Media Recorder API</a> には <code>dataavailable</code> イベントがあり、オーディオやビデオの録音や再生が終わって何か(保存したり再生したり)する準備ができたところで発火します。これに紐付く <a href="/ja/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> ハンドラーのイベントオブジェクトには録音・録画データを保持する data プロパティがあり、これを使って何かしらを行なえます。</p> + +<h3 id="Preventing_default_behavior" name="Preventing_default_behavior">標準の動作を抑制する</h3> + +<p>ときにはイベントに付随する標準動作を止めたい場合があるでしょう。一番よくあるのは、ウェブのフォーム、例えばカスタマイズした登録フォームです。詳細を入力し終えてサブミットボタンを押した時、普通の動作ではデータがサーバーの指定のページに送られて処理され、ブラウザーは"成功しました"ページ(や他に指定されていない場合、同様なページ)にリダイレクトされたりなんやらします。</p> + +<p>ユーザーが適切なデータを送信しなかった場合に問題が発生します — 開発者としてあなたはサーバーへのデータ送信を抑止し、どこに問題があってデータを適切なものにするにはどうすればいいのか示す、ユーザーへのエラーメッセージを表示したいことでしょう。ブラウザーの中にはフォームデータの自検証機能を備えたものもありますが、多くはないので、それには頼らず自前の検証機能を実装すべきです。簡単な例を見てみましょう。</p> + +<p>まず、あなたにあなたの姓と名を入力させる単純な HTML フォームです。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="fname">First name: </label> + <input id="fname" type="text"> + </div> + <div> + <label for="lname">Last name: </label> + <input id="lname" type="text"> + </div> + <div> + <input id="submit" type="submit"> + </div> +</form> +<p></p></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +} +</pre> +</div> + +<p> さあちょっとした JavaScript です — ここでは <a href="/ja/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> イベントハンドラー(フォームがサブミットされるとサブミットイベントが発火します)の中で、テキストフィールドが空かどうかテストするだけのとても簡単なチェックを実装します。もし空なら、イベントオブジェクトの <code><a href="/ja/docs/Web/API/Event/preventDefault">preventDefault()</a></code> 関数— これでフォームの送信を抑制します — を呼び、それからフォームの下にあるパラグラフに、何が問題なのかユーザーに伝えるためのエラーメッセージを表示します:</p> + +<pre class="brush: js notranslate">const form = document.querySelector('form'); +const fname = document.getElementById('fname'); +const lname = document.getElementById('lname'); +const para = document.querySelector('p'); + +form.onsubmit = function(e) { + if (fname.value === '' || lname.value === '') { + e.preventDefault(); + para.textContent = 'You need to fill in both names!'; + } +}</pre> + +<p>言うまでもなく弱っちいフォームの検証です — 例えばフォームに空白や数字が入っていても止められません — が、例としては十分です。結果はこうなります。</p> + +<p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>メモ</strong>: ソースコード全体については、<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> (及び <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">ライブ実行</a>も) をご覧ください。</p> +</div> + +<h3 id="Event_bubbling_and_capture" name="Event_bubbling_and_capture">イベントのバブリングとキャプチャリング</h3> + +<p>ここで最後に説明していくのは、滅多には遭遇しませんが、理解できていないととても苦痛になるかもしれない事柄です。ある一つの要素で同じイベントに紐付く二つのハンドラが活性化された時に何が起きるのかを説明するのが、イベントのバブリングとキャプチャリングという二種類のメカニズムです。わかりやすくするために次の例を見てください — <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> 例を新しいタブで開いてください (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">ソースコード</a> もまた別のタブに)。ライブでも下で見られます:</p> + +<div class="hidden"> +<h6 id="Hidden_video_example" name="Hidden_video_example">Hidden video example</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Show video box example</title> + <style> + div { + position: absolute; + top: 50%; + transform: translate(-50%,-50%); + width: 480px; + height: 380px; + border-radius: 10px; + background-color: #eee; + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1)); + } + + .hidden { + left: -50%; + } + + .showing { + left: 50%; + } + + div video { + display: block; + width: 400px; + margin: 40px auto; + } + + </style> + </head> + <body> + <button>Display video</button> + + <div class="hidden"> + <video> + <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"> + <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> + </video> + </div> + + <script> + + const btn = document.querySelector('button'); + const videoBox = document.querySelector('div'); + <span style="background-color: #000044; color: #ffffff;">const </span>video = document.querySelector('video'); + + btn.onclick = function() { + displayVideo(); + } + + function displayVideo() { + if(videoBox.getAttribute('class') === 'hidden') { + videoBox.setAttribute('class','showing'); + } + } + + videoBox.addEventListener('click',function() { + videoBox.setAttribute('class','hidden'); + }); + + video.addEventListener('click',function() { + video.play(); + }); + + </script> + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>これは内に {{htmlelement("video")}} 要素を含む {{htmlelement("div")}} を表示したり隠したりするとても簡単な例です。</p> + +<pre class="brush: html notranslate"><button>Display video</button> + +<div class="hidden"> + <video> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> + </video> +</div></pre> + +<p>{{htmlelement("button")}} がクリックされると、<code><div></code> のクラス属性を <code>hidden</code> から <code>showing</code> に変更するので、ビデオが表示されます(例の CSS にこの二つのクラスが含まれており、それぞれはボックスの位置をスクリーンの外、内にします)。</p> + +<pre class="brush: js notranslate">btn.onclick = function() { + videoBox.setAttribute('class', 'showing'); +}</pre> + +<p>では二つばかり <code>onclick</code> イベントハンドラーを追加します — 最初のは <code><div></code> に、二つ目は <code><video></code>にです。ビデオの外側の <code><div></code> 領域がクリックされた時にはボックスがまた隠れるようにし、ビデオそのものがクリックされたらビデオが再生されるようにしたいというわけです。</p> + +<pre class="notranslate">videoBox.onclick = function() { + videoBox.setAttribute('class', 'hidden'); +}; + +video.onclick = function() { + video.play(); +};</pre> + +<p>が、ここで問題が — 今度はビデオをクリックすると再生が始まりますが、それと同時に<div>が隠されるようになってしまいました。ビデオが <code><div></code> の中にあるので(ビデオは div の一部ですから)、ビデオのクリックは上に挙げた両方のイベントハンドラーを実際に動かします。</p> + +<h4 id="Bubbling_and_capturing_explained" name="Bubbling_and_capturing_explained">バブリングとキャプチャリングの説明</h4> + +<p>親要素を持つ要素 (このケースでは {{htmlelement("video")}} です) においてイベントが発火すると、モダンブラウザーは二つの異なる段階に分けて動作します — キャプチャリングする段階とバブリングする段階です。</p> + +<p><strong>キャプチャリング</strong>の段階で行われることは……</p> + +<ul> + <li>要素の最上位の親要素 ({{htmlelement("html")}} に <code>onclick</code> イベントハンドラーがキャプチャリング段階に登録されているか調べ、あればそれを実行します。</li> + <li>次に <code><html></code> 要素の内側の要素に移って同じ事をし、また次の内側の要素にと、実際にクリックされた要素に到達するまで繰り返されます。</li> +</ul> + +<p><strong>バブリング</strong>の段階では、全く逆の事が起きます。</p> + +<ul> + <li>ブラウザーは実際にクリックされた要素の <code>onclick</code> イベントハンドラーがバブリング段階に登録されていれば、それを実行します。</li> + <li>次に直上の親要素に移動して同じ事をし、また次へ、<code><html></code> 要素に到達するまで繰り返します。</li> +</ul> + +<p><a href="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p> + +<p>(大きな図を見るにはクリックしてください)</p> + +<p>モダンブラウザーのデフォルトでは、全てのイベントハンドラーはバブリング段階に登録されます。ですのでこの例の場合では、ビデオをクリックするとクリックイベントは <code><video></code> 要素から外側の <code><html></code> 要素に進んで (バブリングして) いきます。従って:</p> + +<ul> + <li><code>video.onclick...</code> ハンドラーがあるので実行し、最初ビデオが始まります。</li> + <li><code>videoBox.onclick...</code> ハンドラーがあるので実行し、よってビデオも隠されます。</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>記</strong>: 両方のイベントハンドラーが存在する場合バブリングとキャプチャリングでは、キャプチャフェーズが最初に走り、バブリングフェーズが続きます。</p> +</div> + +<h4 id="Fixing_the_problem_with_stopPropagation" name="Fixing_the_problem_with_stopPropagation()">stopPropagation()で問題を解決する</h4> + +<p>困った動作ですが、解決する方法があります! 標準的なイベントオブジェクトには <code><a href="/ja/docs/Web/API/Event/stopPropagation">stopPropagation()</a></code>という関数があって、ハンドラーのイベントオブジェクトで起動されると、このハンドラーは実行されますが、イベントが上位に伝播しないようにするので、これ以上のハンドラーは実行されなくなります。</p> + +<p>よって我々の今の問題は、先のコードブロック、第二のハンドラー関数をこのように変更して解決できます:</p> + +<pre class="brush: js notranslate">video.onclick = function(e) { + e.stopPropagation(); + video.play(); +};</pre> + +<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">show-video-box.html ソースコード</a>のローカルコピーを作成してみて、自分で修正してみるか、修正された結果は <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a> で見ることができます (こちらで<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">ソースコード</a>も見られます)。</p> + +<div class="note"> +<p><strong>メモ</strong>: なんだってキャプチャリングとバブリングなんてあるのか? それはね、むかーしむかしの悪き時代、ブラウザーに今ほど互換性がなかった頃、ネットスケープはキャプチャリングだけを、IE はバブリングだけを使っていたのさ。W3C が動作について標準化と合意を作ろうと決めた時、結局どっちもシステムに入れることにし、モダンブラウザーはそのように実装されたのさ。</p> +</div> + +<div class="note"> +<p><strong>メモ</strong>: 上で述べたように、デフォルトでイベントハンドラーはバブリング段階に登録され、そしてほとんどの場合はこれが妥当です。もし本当にイベントをキャプチャリング段階の方に登録したいのであれば、<code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>を使って、省略可能な第三引数に <code>true</code> を指定すれば実現できます。</p> +</div> + +<h4 id="Event_delegation" name="Event_delegation">イベントの移譲</h4> + +<p>バブリングでは<strong>イベント移譲</strong>という機能も活用できます — イベント移譲という概念は、たくさんある子要素のどれかしらがクリックされた際に何らかのコードを実行したいという場合に、個々の子要素一つ一つにイベントリスナーを設定するのではなく、親要素のイベントリスナーを設定すれば子要素のイベントリスナーからバブリングしてくるという事実に依拠しています。</p> + +<p>良い例としては、一連のリストアイテムです — どれかがクリックされたらメッセージをポップアップさせたいときには、親の <code><ul></code> 要素の <code>click</code> イベントリスナーに設定すれば、イベントはリストアイテムからバブリングしてきます。</p> + +<p>この概念はより深く David Walsh のブログで、たくさんの例とともに解説されています。— <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a> を見てください</p> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の最後に来ましたが、最も大事な情報を覚えていますか? 次に移動する前に、さらなるテストでこの情報を保持しているか検証できます — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events">Test your skills: Events</a> を見てください。</p> + +<h2 id="Conclusion" name="Conclusion">結論</h2> + +<p>ウェブイベントについて、今の学習初期段階で知るべき事は全部わかったはずです。上で述べたように、実のところイベントは JavaScript のコアには属しません — それらはブラウザーの Web API に属するものです。</p> + +<p>また重要な事は、JavaScript の使われ方によって異なるイベントモデルがありうる事も理解しておいてください — Web API とブラウザーの WebExtension や Node.js (サーバーサイド JavaScript) のような領域とでは。今あなたがそれらの領域について理解しなくてよいと思っていますが、ウェブ開発の事を学んでいくのにイベントの基礎を理解するのが役立つのは確かです。</p> + +<p>理解できない事があれば、気楽にまた記事を読み返したり、<a href="/ja/Learn#Contact_us">私達</a> に質問してください</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> (キャプチャとバブリングの議論) — Peter-Paul Koch による非常に詳細な作品。</li> + <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> (イベントオブジェクトに関する議論) — Peter-Paul Koch によるもう 1 つの非常に詳細な作品。</li> + <li><a href="/ja/docs/Web/Events">イベントリファレンス</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li> +</ul> diff --git a/files/ja/learn/javascript/building_blocks/functions/index.html b/files/ja/learn/javascript/building_blocks/functions/index.html new file mode 100644 index 0000000000..636278ee2e --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/functions/index.html @@ -0,0 +1,407 @@ +--- +title: 関数 — 再利用可能なコードブロック +slug: Learn/JavaScript/Building_blocks/Functions +tags: + - API + - Article + - Beginner + - Browser + - CodingScripting + - Custom + - Functions + - Guide + - JavaScript + - Learn + - Method + - anonymous + - invoke + - 'l10n:priority' + - parameters +translation_of: Learn/JavaScript/Building_blocks/Functions +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">コーディングにおいて、不可欠なコンセプトが<strong>関数</strong>です。関数を使用することで、特定のタスクをこなすコードを定義し、保持しておいて、いつでも簡単なコマンドで呼び出すことを可能にしてくれます。同じコードを何度も打たなければならないよりとっても簡単です。この記事では関数の書き方や、関数を実行する方法、定義の仕方、スコープ、引数といった関数に関する基礎を学びます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターの知識、HTML と CSS への理解、<a href="/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript の関数についての基礎を理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="Where_do_I_find_functions" name="Where_do_I_find_functions">関数はどこにありますか？</h2> + +<p>JavaScript の中で、関数はあらゆるところに見つかるでしょう。実際、これまでのところすべての場面で関数を使用してきました。これについてはあまり触れてきませんでした。しかし、今こそ明確に関数について話し始め、本当に構文を探索する時期です。</p> + +<p>一対のかっこ — <code>()</code> — の機能である JavaScript の構造を使用するほとんどの場合、そして <a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for ループ</a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while と do ... while ループ</a>、または <a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if..else 文</a>のような一般的な組み込みの言語構造を使用<strong>していない</strong>場合、あなたは関数を使用していることになります。</p> + +<h2 id="Built-in_browser_functions" name="Built-in_browser_functions">ブラウザー組み込み関数</h2> + +<p>このコースではブラウザーに組込まれた関数をたくさん使ってきました。毎回テキスト文字列を操作したときには、こんな風に:</p> + +<pre class="brush: js notranslate">let myText = 'I am a string'; +let newString = myText.replace('string', 'sausage'); +console.log(newString); +// the replace() string function takes a string, +// replaces one substring with another, and returns +// a new string with the replacement made</pre> + +<p>あるいは毎回配列を操作したときには:</p> + +<pre class="brush: js notranslate">let myArray = ['I', 'love', 'chocolate', 'frogs']; +let madeAString = myArray.join(' '); +console.log(madeAString); +// the join() function takes an array, joins +// all the array items together into a single +// string, and returns this new string</pre> + +<p>また毎回乱数を作成したときには:</p> + +<pre class="brush: js notranslate">let myNumber = Math.random(); +// the random() function generates a random +// number between 0 and 1, and returns that +// number</pre> + +<p>...関数を使っていたのです!</p> + +<div class="note"> +<p><strong>メモ</strong>: これらの機能に慣れるために、必要なときにはこういった行をあなたのブラウザーの JavaScript コンソールにいつでも入力してみてください。</p> +</div> + +<p>JavaScript言語にはたくさんの組込み関数があるので、いろいろあるあなたのやりたい事を、全部をあなた自身で書かなくてもすみます。実は、あなたが呼び出して起動(走らせたり実行する事の別の言い方)するコードのいくつかは、JavaScript では書けない、ブラウザー組込み関数です — こういった関数の多くは背後のブラウザーのコードを呼び出していて、これらは JavaScript のようなウェブ言語ではなく、大半が C++のような低レベルのシステム言語で書かれています。</p> + +<p>ブラウザー関数のいくつかは JavaScript言語の核に含まれない事を心に留めておいてください — いくつかはブラウザー API の一部として定義されていて、もっと多くの機能を提供すべくデフォルトの言語の上で構築されています(詳しくは<a href="/Learn/JavaScript/First_steps/What_is_JavaScript#So_what_can_it_really_do">私たちのコースのこの以前のセクション</a>を見てください)。ブラウザー API のもっと詳しい使い方については、後の方のモジュールで見ていく事になるでしょう。</p> + +<h2 id="Functions_versus_methods" name="Functions_versus_methods">関数とメソッド</h2> + +<p>オブジェクトの<strong>メソッド</strong>の一部を、プログラマーは<strong>関数</strong>として呼び出します。構成された JavaScript オブジェクト内部の働きについては、まだ知る必要はありません — この後のモジュールで、オブジェクト内部の働きや自分でオブジェクトを作る方法について教える段階になってから覚えれば大丈夫です。今のところは、ウェブのあちこちにある関連したリソースを見ていると、メソッドと関数が混在している事があるとわかってもらいたいだけです。</p> + +<p>これまで利用してきた組込み関数は両方です: 関数でありメソッドでもあります。組み込みオブジェクトとそのメソッドと同様に、組み込み関数の一覧を<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects">こちらで</a>確認できます。</p> + +<p>このコースのここまででもたくさんのカスタム関数を見てきました — ブラウザーの内部でではなくあなたのコードの中で定義された関数です。独自の名前の直後にカッコがついてるものを見かけたら、それはカスタム関数を使っているという事です。<a href="/docs/Learn/JavaScript/Building_blocks/Looping_code">繰返しの記事</a>で出てきた <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> の例(<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">ソースコード</a>はこちら)では、独自に作った <code>draw()</code> 関数が含まれていました。こんなやつです:</p> + +<pre class="brush: js notranslate">function draw() { + ctx.clearRect(0,0,WIDTH,HEIGHT); + for (let i = 0; i < 100; i++) { + ctx.beginPath(); + ctx.fillStyle = 'rgba(255,0,0,0.5)'; + ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); + ctx.fill(); + } +}</pre> + +<p>この関数は、{{htmlelement("canvas")}} 要素の内にランダムな円を 100描きます。同じ事をやりたい時には、いつでもこんな具合に関数を起動するだけです</p> + +<pre class="brush: js notranslate">draw();</pre> + +<p>繰り返しをする毎に何度も同じコードを書き上げるのではなく。関数にはあなたが書きたいどんなコードでも含められます — 関数の中から他の関数を呼ぶことだってできます。例に挙げた上の関数では、<code>random()</code>関数を 3 回呼んでいて、random関数は以下のコードで定義されています:</p> + +<pre class="brush: js notranslate">function random(number) { + return Math.floor(Math.random()*number); +}</pre> + +<p>ブラウザー組込みの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> は 0 から 1 までの間の 10進数の乱数を作成するだけなので、私たちにはこの関数が必要でした。私たちは 0 から指定した数にわたる乱数が欲しかったのです。</p> + +<h2 id="Invoking_functions" name="Invoking_functions">関数の呼び出し</h2> + +<p>もうよくご存知でしょう、でも念のため … 定義した後で実際に関数を使うには、関数を走らせ — あるいは起動し — なければなりません。これはコードのどこかに関数の名前、直後にカッコの組を書けばできます。</p> + +<pre class="brush: js notranslate">function myFunction() { + alert('hello'); +} + +myFunction(); +// calls the function once</pre> + +<h2 id="Anonymous_functions" name="Anonymous_functions">匿名関数</h2> + +<p>ちょっと違う形式で定義されて起動される関数を見かける事があるでしょう。ここまでは関数をこのように作ってきました:</p> + +<pre class="brush: js notranslate">function myFunction() { + alert('hello'); +}</pre> + +<p>でも名前のない関数を作る事もできます:</p> + +<pre class="brush: js notranslate">function() { + alert('hello'); +}</pre> + +<p>これは<strong>匿名関数</strong>と呼ばれます — 名前がないんです! それだけでは何もしません。匿名関数はよくイベントハンドラで使われていて、例えば以下では関連づけられたボタンがクリックされるたび、関数の中のコードが走ります:</p> + +<pre class="brush: js notranslate">const myButton = document.querySelector('button'); + +myButton.onclick = function() { + alert('hello'); +}</pre> + +<p>上の例では、ページの中に選択してクリックするための{{htmlelement("button")}}要素が存在しなければならないでしょう。あなたはこのような例をここまでのコースで見てきましたし、ここから先の記事でもっと学習し、使い方を見ていく事になります。</p> + +<p>匿名関数を変数の値として代入する事もできます:</p> + +<pre class="brush: js notranslate">const myGreeting = function() { + alert('hello'); +}</pre> + +<p>この関数は次のように起動できます:</p> + +<pre class="brush: js notranslate">myGreeting(); +</pre> + +<p>関数に名前をつけたような効果があります。また関数を複数の変数の値として代入する事もできます:</p> + +<pre class="brush: js notranslate">let anotherGreeting = myGreeting;</pre> + +<p>結果、この関数はどちらの方法でも起動できます</p> + +<pre class="brush: js notranslate">myGreeting(); +anotherGreeting();</pre> + +<p>ですがこれは混乱するだけなので、やらないように! 関数を作成するときはこの形式でやった方が良いです:</p> + +<pre class="brush: js notranslate">function myGreeting() { + alert('hello'); +}</pre> + +<p>匿名関数は主にイベント発火 — ボタンがクリックされたとか — のレスポンスとして、一連のコードを走らせるだけのような場合に、イベントハンドラとして使われます。くりかえしですが、こんな具合です:</p> + +<pre class="brush: js notranslate">myButton.onclick = function() { + alert('hello'); + // I can put as much code + // inside here as I want +}</pre> + +<h2 id="Function_parameters" name="Function_parameters">関数の引数</h2> + +<p>関数には実行する時に<strong>引数</strong>が必要なものがあります — 関数のカッコとカッコの間に書かなければならない値で、関数が正しい仕事をするのに必要とされます。</p> + +<div class="note"> +<p><strong>メモ</strong>: 引数は、パラメーター、プロパティ、アトリビュート（属性）などと呼ばれる場合もあります。</p> +</div> + +<p>例えばブラウザー組込み関数 <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> は引数を必要としません。呼ばれるといつも 0 から 1 までの乱数を返します:</p> + +<pre class="brush: js notranslate">let myNumber = Math.random();</pre> + +<p>ですがブラウザー組込みの文字列関数 <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> は二つの引数が必要です — 主文字列から探すべき部分文字列と、部分文字列を置換する文字列です:</p> + +<pre class="brush: js notranslate">let myText = 'I am a string'; +let newString = myText.replace('string', 'sausage');</pre> + +<div class="note"> +<p><strong>メモ</strong>: 複数の引数を指定するときは、カンマで区切って書きます</p> +</div> + +<p>引数には省略可能 — 書かなくても良い — なものもある事に触れておくべきでしょう。省略された場合、関数はだいたいデフォルトに規定された動作を行ないます。例えば、配列の <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> 関数のパラメータは省略可能です:</p> + +<pre class="brush: js notranslate">let myArray = ['I', 'love', 'chocolate', 'frogs']; +let madeAString = myArray.join(' '); +// returns 'I love chocolate frogs' +let madeAString = myArray.join(); +// returns 'I,love,chocolate,frogs'</pre> + +<p>もし結合/区切り文字を指定する引数が省略された場合、デフォルトとしてカンマが使われます。</p> + +<h2 id="Function_scope_and_conflicts" name="Function_scope_and_conflicts">関数のスコープと競合</h2> + +<p>{{glossary("スコープ")}}という言葉について説明しておきましょう — 関数を扱う際にはとても大切な概念です。関数を作成するとき、関数の中で定義されている変数や関数は、内部でそれぞれ独自の<strong>スコープ</strong>というものを持ちます。これはそれぞれが独自の小部屋に閉じ込められていて、別の関数の内部から、あるいはこの関数の外部のコードから触れられくなる事を意味しています。</p> + +<p>あなたのすべての関数の外側、一番の外側を、<strong>グローバルスコープ</strong>と呼びます。グローバルスコープで定義された値はすべて、コードのどこからでもアクセスできます。</p> + +<p>JavaScript がこう作られているのにはいくつも理由があります — が、主な理由はセキュリティと組織化のためです。時には変数にコードのどこからでもアクセスされないようにしたい場合もあるでしょう — どこかから呼び込んだ外部スクリプトが、あなたのコードをおかしくして問題を起す場合があるかもしれません。別の場所でたまたま同じ名前の変数を使っていて、衝突していたために。これは悪意をもってわざとやっている場合や、単なる偶然の場合もあります。</p> + +<p>そうですね、例えばある HTML ファイルが二つの外部 JavaScript ファイルを呼び出しているとして、そのどちらも同じ名前の変数と関数を定義しているとします:</p> + +<pre class="brush: html notranslate"><!-- Excerpt from my HTML --> +<script src="first.js"></script> +<script src="second.js"></script> +<script> + greeting(); +</script></pre> + +<pre class="brush: js notranslate">// first.js +let name = 'Chris'; +function greeting() { + alert('Hello ' + name + ': welcome to our company.'); +}</pre> + +<pre class="brush: js notranslate">// second.js +let name = 'Zaptec'; +function greeting() { + alert('Our company is called ' + name + '.'); +}</pre> + +<p>あなたが呼び出したいのはどっちも <code>greeting()</code>関数ですが、あなたには <code>first.js</code> ファイルの <code>greeting()</code> 関数しかアクセスできません(2 つ目は無視されます)。加えて、<code>second.js</code> ファイルで <code>let</code> キーワードで <code>name</code> 変数に 2度目の定義をしようとするとエラーになります。</p> + +<div class="note"> +<p><strong>注</strong>: この例を <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">GitHub でライブ実行</a> できます(<a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">ソースコード</a>はこちら).</p> +</div> + +<p>あなたのコードの部品を関数の中に隔離するとこのような問題を避けられるので、これが一番良いやりかたと考えられています。</p> + +<p>これは動物園みたいなものです。ライオン、シマウマ、トラ、ペンギンはそれぞれの檻の中にいて、それぞれの檻の中のものにしか触れられません — 関数のスコープと同じ事です。もし彼等が他の檻の中に侵入できたら問題が起きることでしょう。良くて、知らない住人に囲まれて気まずい思いをする — 寒くて水だらけのペンギンの檻に入ったライオンやトラは酷い気分になるでしょう。最悪の場合、ライオンやトラはペンギンを食べてみようとするかも!</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p> + +<p>動物園の管理人はグローバルスコープみたいなものです — 管理人はすべての檻の鍵を持っていて、エサを補充し、動物にうんざりし、などなど。</p> + +<h3 id="Active_learning_Playing_with_scope" name="Active_learning_Playing_with_scope">アクティブラーニング: スコープで遊んでみよう</h3> + +<p>スコープを示すための実際の例を見てみましょう。</p> + +<ol> + <li>まず <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a> の例のローカルコピーを作成します。これには <code>a()</code> と <code>b()</code> という 2 つの関数と、<code>x</code>、<code>y</code>、<code>z</code> の 3 つの変数が含まれます。これらの変数のうち 2 つは関数内で定義され、もう 1 つはグローバルスコープ内で定義されます。また <code>output()</code> という 3番目の関数も含まれています。この関数は単一のパラメータを取り、ページの段落に出力します</li> + <li>ブラウザーとテキストエディターでサンプルを開きます</li> + <li>ブラウザーの開発者ツールで JavaScript コンソールを開きます。JavaScript コンソールで、次のコマンドを入力します。 + <pre class="brush: js notranslate">output(x);</pre> + 変数x の出力値が画面に表示されるはずです。</li> + <li>コンソールに次のように入力してみてください + <pre class="brush: js notranslate">output(y); +output(z);</pre> + どちらも、"<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>"の一行のエラーが返されるはずです。なぜでしょうか？ 関数スコープのため、つまり <code>y</code> と <code>z</code> は <code>a()</code> と <code>b()</code> 関数の中でロックされているので、global スコープから呼び出されたときには <code>output()</code> はそれらにアクセスできません。</li> + <li>しかし、別の関数の中から呼び出されたときはどうでしょうか？ <code>a()</code> と <code>b()</code> を次のように編集してみてください： + <pre class="brush: js notranslate">function a() { + let y = 2; + output(y); +} + +function b() { + let z = 3; + output(z); +}</pre> + コードを保存してブラウザーに再ロードしてから、JavaScript コンソールから <code>a()</code> と <code>b()</code> 関数を呼び出してみてください。 + + <pre class="brush: js notranslate">a(); +b();</pre> + ページに <code>y</code> と <code>z</code> の値の出力が表示されます。<code>output()</code> 関数が他の関数の中、つまり表示される変数が定義されているのと同じスコープでそれぞれ呼び出されているので、これはうまくいきます。<code>output()</code> 自体はグローバルスコープで定義されているので、どこからでも利用できます。</li> + <li>今度は次のようにコードを更新してみてください： + <pre class="brush: js notranslate">function a() { + let y = 2; + output(x); +} + +function b() { + let z = 3; + output(x); +}</pre> + 保存してもう一度読み込み、JavaScript コンソールでもう一度試してみてください：</li> + <li> + <pre class="brush: js notranslate">a(); +b();</pre> + <code>a()</code> と <code>b()</code> の両方の呼び出しは <code>x</code> の値、つまり 1 が出力されます。これは <code>x</code> がグローバル変数であり、すべてのコード内どこでも利用可能であるため、<code>output()</code> の呼び出しが <code>x</code> と同じスコープではなくてもうまく動きます。</li> + <li>最後に、次のようにコードを更新してみてください： + <pre class="brush: js notranslate">function a() { + let y = 2; + output(z); +} + +function b() { + let z = 3; + output(y); +}</pre> + 保存してもう一度読み込み、JavaScript コンソールでもう一度試してみてください：</li> + <li> + <pre class="brush: js notranslate">a(); +b();</pre> + 今度は <code>a()</code> と <code>b()</code> の両方の呼び出しで、迷惑な "<a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: <em>variable name</em> is not defined</a>" エラーが返されます — これは <code>output()</code> 呼び出しと、出力しようとしている変数が同じ関数のスコープにない、つまりこれらの関数呼び出しからは変数が参照できない状態だからです。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 同じスコープルールはループ (<code>for() { ... }</code> など) と条件ブロック (<code>if() { ... }</code>など) には適用されません。それらは非常によく似ていますが、同じものではありません。混乱しないように注意してください。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> というエラーは、あなたが遭遇する最も一般的なエラーの 1 つです。このエラーが発生し、問題の変数が定義されていると確信できる場合は、変数のスコープを確認してください。</p> +</div> + +<ul> +</ul> + +<h3 id="Functions_inside_functions" name="Functions_inside_functions">関数の中の関数</h3> + +<p>別の関数内であっても、どこからでも関数を呼び出すことができます。これは、コードをきれいにする方法としてよく使われます。大きな複雑な関数がある場合は、いくつかのサブ関数に分解すれば分かります。</p> + +<pre class="brush: js notranslate">function myBigFunction() { + let myValue; + + subFunction1(); + subFunction2(); + subFunction3(); +} + +function subFunction1() { + console.log(myValue); +} + +function subFunction2() { + console.log(myValue); +} + +function subFunction3() { + console.log(myValue); +} +</pre> + +<p>関数内で使用されている値が適切にスコープ内にあることを確認してください。上記の例では <code>ReferenceError: myValue is not defined</code> というエラーが発生します。<code>myValue</code>変数は関数呼び出しと同じスコープで定義されていますが、関数定義内では定義されていないためです。従って実際のコードは関数が呼び出されたときに実行されます。これを動くようにするには、次のように関数に値を渡す必要があります。</p> + +<pre class="brush: js notranslate">function myBigFunction() { + let myValue = 1; + + subFunction1(myValue); + subFunction2(myValue); + subFunction3(myValue); +} + +function subFunction1(value) { + console.log(value); +} + +function subFunction2(value) { + console.log(value); +} + +function subFunction3(value) { + console.log(value); +}</pre> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の最後に来ましたが、最も大事な情報を覚えていますか？次に移る前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions">Test your skills: Functions</a> を見てください。このテストは次の 2 つの記事でカバーしているスキルを求めていますので、テストの前にそちらを読むほうが良いかもしれません。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>この記事では関数の背後にある基本的な概念を探り、次に実用的な方法を習得し、独自のカスタム関数を構築する手順を紹介しました。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Guide/Functions">関数の詳細ガイド</a> — ここに含まれていないいくつかの高度な機能について説明します。</li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Functions">関数</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters">デフォルト引数</a>, <a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a> — 高度な概念リファレンス</li> +</ul> + +<ul> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li> +</ul> diff --git a/files/ja/learn/javascript/building_blocks/image_gallery/index.html b/files/ja/learn/javascript/building_blocks/image_gallery/index.html new file mode 100644 index 0000000000..2c8dc3c470 --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/image_gallery/index.html @@ -0,0 +1,142 @@ +--- +title: イメージギャラリー +slug: Learn/JavaScript/Building_blocks/Image_gallery +tags: + - Assessment + - Beginner + - CodingScripting + - Conditionals + - Event Handler + - JavaScript + - Learn + - Loops + - events +translation_of: Learn/JavaScript/Building_blocks/Image_gallery +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">JavaScript の基本的な構成要素を見てきたところで、これからたくさんのウェブサイトで見かける項目、JavaScript で動作するイメージギャラリーをつくってみることで、あなたが得た繰り返し、関数、条件とイベントの知識を試してみましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>この評価を行う前に、このモジュールにある記事すべてを実施していること。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>JavaScript の繰り返し、関数、条件とイベントが理解できていることを確認する。</td> + </tr> + </tbody> +</table> + +<h2 id="Starting_point" name="Starting_point">出発点</h2> + +<p>この評価を始めるために、サンプルが入っているサイトから <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true">ZIP ファイル</a> を取得して、コンピュータのどこかに展開しておきます。</p> + +<div class="note"> +<p><strong>注</strong>: 別の方法として, この評価を行うために <a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> のようなサイトを使うことができます。これらのオンラインエディターに HTML、CSS、JavaScript を貼り付けることができます。利用するオンラインエディターが JavaScript/CSS パネルに分かれていなければ、 HTML ページの中の <code><script></code>/<code><style></code> 要素にそれらを貼り付けてください 。</p> +</div> + +<h2 id="Project_brief" name="Project_brief">プロジェクト概要</h2> + +<p>HTML、CSS と画像および数行の JavaScript のコードが提供されています。必要な JavaScript を書いて、これを動くプログラムにする必要があります。HTML のボディは次のようになっています:</p> + +<pre class="brush: html notranslate"><h1>Image gallery example</h1> + +<div class="full-img"> + <img class="displayed-img" src="images/pic1.jpg"> + <div class="overlay"></div> + <button class="dark">Darken</button> +</div> + +<div class="thumb-bar"> + +</div></pre> + +<p>例ではこのように見えます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13787/gallery.png" style="display: block; margin: 0 auto;"></p> + +<ul> +</ul> + +<p>例にある CSS ファイルで最も興味深い部分:</p> + +<ul> + <li><code>full-img <div></code> の内側に 3 つの要素が絶対位置指定されています ー <code><img></code> にはフルサイズの画像が表示されています。その上に <code><img></code> と同じサイズになるようにサイズ調整された空の<code><div></code> が置かれています (これは半透明の背景色で画像を暗くする効果に使われます)。そして <code><button></code> は暗くする効果をコントロールするために使われます。</li> + <li><code>thumb-bar <div></code> (いわゆるサムネイル画像) 内の画像は幅を 20% に設定し、左側に浮かせて一行に並べています。</li> +</ul> + +<p>JavaScriptに必要なもの:</p> + +<ul> + <li>すべての画像をループさせる際、<code>thumb-bar <div></code> の中にその画像を埋め込む <code><img></code> 要素を挿入します。</li> + <li><code>onclick</code> ハンドラーを <code>thumb-bar <div></code> の中の <code><img></code> それぞれにつけます。それをクリックしたときにその画像が <code>displayed-img <img></code> 要素に表示されるようにします。</li> + <li><code>onclick</code> ハンドラーを <code><button></code> につけて、クリックされたらフルサイズ画像を暗くするようにします。再度クリックすると暗くする効果を外します。</li> +</ul> + +<p>もっとアイデアを加えると、<a href="http://mdn.github.io/learning-area/javascript/building-blocks/gallery/">最終的な例</a> のようになります (ソースコードをのぞかないように！)</p> + +<h2 id="Steps_to_complete" name="Steps_to_complete">完成へのステップ</h2> + +<p>次のセクションですべきことを説明します。</p> + +<h3 id="Looping_through_the_images" name="Looping_through_the_images">画像をループさせる</h3> + +<p>すでに <code>thumbBar</code> という変数に <code>thumb-bar <div></code> の参照を格納するようにしています。新しい <code><img></code> 要素を作って、その <code>src</code> 属性にプレースホルダーとして値 <code>xxx</code> をセットしてください。そして、新しい <code><img></code> 要素を <code>thumbBar</code> に追加してください。</p> + +<p>必要なこと:</p> + +<ol> + <li>"Looping through images" コメントの下のセクションのコードを全 5 画像をループする繰り返し処理のなかに置いて下さい — 各画像を表現する5つの数についてループするだけです。</li> + <li>各ループの反復で、プレースホルダー <code>xxx</code> の値を画像のパスに等しい文字列で置き換えてください。それぞれの場合で <code>src</code> 属性の値をこの値に設定します。いずれの場合も画像は画像ディレクトリーにあり、<code>pic1.jpg</code>、<code>pic2.jpg</code> というようなファイル名になっています。</li> +</ol> + +<h3 id="onclick_ハンドラーをそれぞれのサムネール画像に追加する">onclick ハンドラーをそれぞれのサムネール画像に追加する</h3> + +<p>各ループの反復で、現在の <code>newImage</code> に <code>onclick</code> ハンドラーを追加する必要があります — このハンドラは現在の画像の <code>src</code> 属性の値を見つけます。<code>displayed-img <img></code> の <code>src</code> 属性の値をパラメータとして渡されたものの <code>src</code> 値へ設定します。</p> + +<p>替わりに、サムネイルバーへ一つのイベントリスナーを追加することも出来ます。</p> + +<h3 id="Adding_an_onclick_handler_to_each_thumbnail_image" name="Adding_an_onclick_handler_to_each_thumbnail_image">暗くする/明るくするボタンを処理するハンドラーを書く</h3> + +<p>暗くする/明るくする <code><button></code> が残っています。<code>btn</code> という変数に <code><button></code> への参照を格納するコードはすでにご紹介しています。それらに <code>onclick</code> ハンドラーに追加する必要があります:</p> + +<ol> + <li><code><button></code> にセットされている現在のクラス名をチェックしますーこれもまた、<code>getAttribute()</code> を使えば取得できます。</li> + <li>クラス名が <code>"dark"</code> なら、<code><button></code> のクラスを (<code><a href="/ja/docs/Web/API/Element/setAttribute">setAttribute()</a></code> を使って) <code>"light"</code> に変更します。テキストも "Lighten" にします。そして、オーバーレイ<code> <div></code> の {{cssxref("background-color")}} を <code> "rgba(0,0,0,0.5)"</code> にします。</li> + <li>クラス名が<code> "dark"</code> でなければ、<code><button></code> のクラスを <code>"dark"</code> に変更します。テキストを "Darken" に戻します。そしてオーバーレイ <code><div></code> の {{cssxref("background-color")}} を <code>"rgba(0,0,0,0)"</code> にします。</li> +</ol> + +<p>次のコードは上記の 2 と 3 で示された変更を行う基本的なものです。</p> + +<pre class="brush: js notranslate">btn.setAttribute('class', xxx); +btn.textContent = xxx; +overlay.style.backgroundColor = xxx;</pre> + +<h2 id="Hints_and_tips" name="Hints_and_tips">ヒントとコツ</h2> + +<ul> + <li>HTML と CSS は全く編集する必要はありません。</li> +</ul> + +<h2 id="Assessment" name="Assessment">課題</h2> + +<p>組織されたコースの一部としてこの評価を行う場合、採点のため先生/メンターにあなたの成果を提出してください。もし、自習なら、<a href="https://discourse.mozilla.org/t/image-gallery-assessment/24687">このエクササイズに関するディスカッションのスレッド</a> や <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャネルで尋ねれば、採点ガイドが簡単に得られるでしょう。まずエクササイズに挑戦してください。ーごまかしても何も得られません！</p> + +<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li> +</ul> diff --git a/files/ja/learn/javascript/building_blocks/index.html b/files/ja/learn/javascript/building_blocks/index.html new file mode 100644 index 0000000000..74ec4ff45f --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/index.html @@ -0,0 +1,56 @@ +--- +title: JavaScript の構成要素 +slug: Learn/JavaScript/Building_blocks +tags: + - Article + - Assesment + - Beginner + - CodingScripting + - Conditionals + - Functions + - Guide + - JavaScript + - Landing + - Loops + - Module + - events + - 'l10n:priority' +translation_of: Learn/JavaScript/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary"><span id="result_box" lang="ja"><span>このモジュールでは、条件付きステートメント、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。コースの中で既にこれらを目にしているのですが、説明を省いてきました。ここではすべて明示的に説明を行います。</span></span></p> + +<h2 id="Prerequisites" name="Prerequisites">前提条件</h2> + +<p>このモジュールを始める前に、<a href="/docs/Learn/HTML/Introduction_to_HTML">HTML</a> や <a href="/docs/Learn/CSS/Introduction_to_CSS">CSS </a>の基本に慣れておくべきです。また前のモジュールの <a href="/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a> も終了させておくべきです。</p> + +<div class="note"> +<p><strong>注記 </strong>: もしあなたが作業しているコンピュータ・タブレットやその他のデバイスで自分でファイルを作れない場合は、<a href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> といったようなオンラインコーディングプログラムで (ほとんどの場合) 試すことができます。</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<dl> + <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コード内で決定を下す — 条件</a></dt> + <dd><span id="result_box" lang="ja"><span>どんなプログラミング言語でも、コードは異なる入力に応じて決定を下し、それに応じてアクションを実行する必要があります。</span></span>例えば、ゲームではもしプレイヤーのライフが 0 だった場合、ゲームオーバーになります。お天気アプリでは、朝に見た場合には朝日の画像を表示し、夜に見た場合には星と月を表示します。<span id="result_box" lang="ja"><span>この記事では、条件の構造が JavaScript でどのように機能するかを説明します。</span></span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></dt> + <dd><span id="result_box" lang="ja"><span>場合によっては、一度にタスクを</span></span><span lang="ja"><span>複数回実行しなければならないことがあります。</span> 例えば<span>名前のリスト全体を調べる場合です。</span><span>プログラミング時に、ループはこのような処理を非常にうまく実行します。</span><span>ここでは JavaScript のループ構造を見ていきます。</span></span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可なコードブロック</a></dt> + <dd><span id="result_box" lang="ja"><span>コーディングのもう一つの重要な概念は<strong>関数</strong>です。</span> <span><strong>関数</strong>を使用すると、定義されたブロック内に単一のタスクを実行するコードを格納し、同じコードを複数回入力するのではなく、単一の短いコマンドを使用して必要となる時にコードを呼び出すことができます。</span><span>この記事では、基本的な構文、関数、スコープ、パラメータを呼び出す方法と定義する方法など、関数の背後にある基本的な概念について説明します。</span></span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を構築する</a></dt> + <dd><span id="result_box" lang="ja"><span>前の記事で扱った必須の理論の多くを用いて、この記事では実用的な体験を提供しています。</span><span>ここでは、独自のカスタム関数を構築するための練習をします。</span> <span>また進むにつれ、関数を扱うためのさらに便利な詳細についても説明します。</span></span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></dt> + <dd><span id="result_box" lang="ja"><span>関数について知っておくべき最後の必須コンセプトは戻り値</span></span><span lang="ja"><span>です。一部の関数は完了後に意味のある値を返しませんが、他の関数は返します。</span><span>値が何であるか、コードでそれらを使用する方法、独自のカスタム関数で有用な値を返す方法を理解することが重要です。</span></span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントへの入門</a></dt> + <dd><span id="result_box" lang="ja"><span>イベントとは、プログラミング中のシステムで発生するアクションまたは事象</span></span><span lang="ja"><span>のことで、システムによって通知され、必要に応じて何らかの方法で応答できるようにするものです。</span>例えば<span>、ユーザが Web ページ上のボタンをクリックすると、情報ボックスを表示することでそのアクションに応答することができます。</span><span>この最後の記事では、イベントを取り巻くいくつかの重要な概念について説明し、それらがブラウザでどのように機能するかを見ていきます。</span></span></dd> +</dl> + +<h2 id="Assessments" name="Assessments">評価</h2> + +<p><span class="short_text" id="result_box" lang="ja"><span>以下の評価は、上のガイドで取り上げた JavaScript の基礎についての理解をテストします。</span></span></p> + +<dl> + <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></dt> + <dd><span id="result_box" lang="ja"><span>JavaScript の基本的な構成要素を見てきましたので、JavaScript で動く画像ギャラリーという、</span></span><span lang="ja"><span>多くの Web サイトで見ることができるかなり一般的なアイテムを構築することで、ループ、関数、条件文、イベントに関する知識をテストします</span></span>。</dd> +</dl> diff --git a/files/ja/learn/javascript/building_blocks/looping_code/index.html b/files/ja/learn/javascript/building_blocks/looping_code/index.html new file mode 100644 index 0000000000..dd5e724fca --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/looping_code/index.html @@ -0,0 +1,933 @@ +--- +title: ループコード +slug: Learn/JavaScript/Building_blocks/Looping_code +tags: + - Article + - Beginner + - CodingScripting + - DO + - Guide + - JavaScript + - Learn + - Loop + - break + - continue + - for + - 'l10n:priority' + - while +translation_of: Learn/JavaScript/Building_blocks/Looping_code +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">プログラミング言語は、繰り返し実行するタスクを素早く終わらせるのがとても得意です。基本的な計算処理から、同じような作業がたくさんあるのならどんな状況でもこなします。今度は JavaScript でそういった目的を果たすために使用するループ構造を見てみましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターの知識および HTML と CSS への理解、<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript でループの使い方を理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="Keep_me_in_the_loop" name="Keep_me_in_the_loop">ループの中にとどまる</h2> + +<p>ループ、ループ、ループ。<a href="https://en.wikipedia.org/wiki/Froot_Loops">朝食用シリアル</a>や、<a href="https://en.wikipedia.org/wiki/Vertical_loop">ジェットコースター</a>、<a href="https://en.wikipedia.org/wiki/Loop_(music)">音楽</a>でもおなじみですが、プログラミングにおいても、とても重要な概念です。プログラミングにおけるループとは同じことを何度も何度も繰り返すことで、<strong>反復</strong>や<strong>繰り返し</strong>とも言われます。</p> + +<p>それでは、農家のケースについて考えてみましょう。彼は家族を養うため十分な食料があるか確認しようとしています。それを実現するため、以下のようなループを使用するでしょう。</p> + +<p><br> + <img alt="" src="https://mdn.mozillademos.org/files/13755/loop_js-02-farm.png" style="display: block; margin: 0px auto;"></p> + +<p>ループにはたいてい以下のような機能があります。</p> + +<ul> + <li><strong>カウンター:</strong> ループの開始地点で、初期化される値です。(上記の絵の、"I have no food" [食料がない] の部分です)。</li> + <li><strong>条件:</strong> ループの実行を継続するか終了するかを決める true/false の判定です。たいていはカウンターがある値に達した場合に終了します。上記の絵の、"Do I have enough food?" [十分な食料があるか？] の部分です。例えば、家族に食べさせる 10 個の食料が必要である、というようなことです。</li> + <li><strong>イテレーター:</strong> これは一般的には条件が <code>true</code>. では無くなるまで、カウンターの値をループごとに少量ずつ増加させます。上記の絵には明示的には描いていませんが、農家が 1 時間に 2 つの食料を集めることができると考えるとします。この場合、1 時間ごとに 2 つずつ食料が増えていき、農家は十分な食料が集まったかを確認することができます。もし食料が 10 個になったら (条件が true では無くなったため、ループが終了するポイント)、集めるのをやめて家に帰ることができるでしょう。</li> +</ul> + +<p>{{glossary("pseudocode", "疑似コード")}}では、以下のようになるでしょう。</p> + +<pre class="notranslate">loop(food = 0; foodNeeded = 10) { + if (food >= foodNeeded) { + exit loop; + // 十分な食料が集まりました。家に帰りましょう + } else { + food += 2; // 1 時間経って 2 つの食料を集めました + // ループはさらに続きます + } +}</pre> + +<p>最初に、必要な食料が 10 に設定され、農家が現在持っている食料は 0 に設定されます。ループの繰り返しごとに、農家の持っている食料が必要な食料の数に等しいかを調べています。もしそうであれば、ループを抜けられます。そうでなければ、農家は 1 時間ごとに 2 つの食料を集めるのを繰り返します。</p> + +<h3 id="Why_bother" name="Why_bother">どうしてこんなことをするの？</h3> + +<p>これで、恐らくループの背後にあるコンセプトが理解できたことでしょう。けれど、「それが JavaScript のコードを書くのにどう役立つの？」と思っているかもしれませんね。先ほど<strong>ループは同じことを繰り返すこと</strong>だと言いいましたが、それは<strong>素早く繰り返し同じ作業を完了させる</strong>のに最適なことなのです。</p> + +<p>たいてい、コードはループの連続する反復のたびごとにわずかに異なるものになります。つまり、似ているけれどわずかに異なる多数のタスク全体を完了出来るのです。もしたくさんの異なる計算をしなければならないとしたら、同じことを何度も何度もするのではなく、それぞれ異なることをしたいですよね。</p> + +<p>ループがどれだけ素晴らしいものかを説明する例を見てみましょう。100 個のランダムな円を {{htmlelement("canvas")}} 要素に描きたいとします (<em>更新</em>ボタンを押して、例を何度となく実行し、結果が異なることを見てみましょう。)</p> + +<div class="hidden"> +<h6 id="Hidden_code" name="Hidden_code">Hidden code</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>キャンバスに描くランダムな円</title> + <style> + html { + width: 100%; + height: inherit; + background: #ddd; + } + + canvas { + display: block; + } + + body { + margin: 0; + } + + button { + position: absolute; + top: 5px; + left: 5px; + } + </style> + </head> + <body> + + <button>更新</button> + + <canvas></canvas> + + + <script> + const btn = document.querySelector('button'); + const canvas = document.querySelector('canvas'); + const ctx = canvas.getContext('2d'); + + let WIDTH = document.documentElement.clientWidth; + let HEIGHT = document.documentElement.clientHeight; + + canvas.width = WIDTH; + canvas.height = HEIGHT; + + function random(number) { + return Math.floor(Math.random()*number); + } + + function draw() { + ctx.clearRect(0,0,WIDTH,HEIGHT); + for (let i = 0; i < 100; i++) { + ctx.beginPath(); + ctx.fillStyle = 'rgba(255,0,0,0.5)'; + ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); + ctx.fill(); + } + } + + btn.addEventListener('click',draw); + + </script> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>今はコードをすべて理解する必要はありません。ですが、コードの一部で 100 個の円を実際に描いている箇所を見てみましょう。</p> + +<pre class="brush: js notranslate">for (let i = 0; i < 100; i++) { + ctx.beginPath(); + ctx.fillStyle = 'rgba(255,0,0,0.5)'; + ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); + ctx.fill(); +}</pre> + +<ul> + <li><code>random(x)</code> はコードの前半で定義され、<code>0</code> から <code>x-1</code> までの整数を返します</li> + <li><code>WIDTH</code> と <code>HEIGHT</code> は、内側のブラウザーウィンドウの幅と高さです。</li> +</ul> + +<p>基本的な考えがわかりましたか？このコードをループを使用して 100 回実行しますが、毎回ページ内のランダムな場所に円を描いています。必要なコードは 100 個の円を描くときも、1000 個でも 10,000 個でも同じです。1 か所だけ変更すればいいのです。</p> + +<p>ここでループを使用しないとすれば、次のコードを描きたい数だけ繰り返し書かなければなりません。</p> + +<pre class="brush: js notranslate">ctx.beginPath(); +ctx.fillStyle = 'rgba(255,0,0,0.5)'; +ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); +ctx.fill();</pre> + +<p>これはとてもつまらなく、素早くメンテナンスするのが難しいコードです。ループが一番良いです。</p> + +<h2 id="The_standard_for_loop" name="The_standard_for_loop">標準的な for ループ</h2> + +<p>ここからは、具体的なループの構造を見ていきましょう。最初は、特によく使うことになるであろう <a href="/ja/docs/Web/JavaScript/Reference/Statements/for">for</a> ループについてです。構文は以下の通りです。</p> + +<pre class="notranslate">for (初期化処理; 条件; 最後の式) { + // 実行するコード +}</pre> + +<p>ここでは...</p> + +<ol> + <li><code>for</code> キーワードに続き括弧があります。</li> + <li>括弧の中にはセミコロンで区切られて以下の項目があります。 + <ol> + <li><strong>初期化処理</strong>: これはたいていの場合、繰り返し回数分増やしていく変数の初期化処理となります。この変数を<strong>カウンター変数</strong>と呼ぶことがあります。</li> + <li><strong>条件</strong>: 既に取り上げた通り、これはループが繰り返しをやめるべき条件を定義します。ほとんどの場合は比較演算子を伴って、終了条件を満たしているかを判定します。</li> + <li><strong>最後の式</strong>: これはループの 1 回が終了する度に評価される (または実行される) コードです。大体、カウンター変数を増やし(または減らし)、条件が <code>true</code> では無くなるポイントに近づけていきます。</li> + </ol> + </li> + <li>そして中括弧があり、中括弧の中のコードブロックが各ループの繰り返しで実行されます。</li> +</ol> + +<p>それでは実際の例を見て、これらを明確に分かるようにしてみましょう。</p> + +<pre class="brush: js notranslate">const cats = ['ビル', 'ジェフ', 'ピート', 'ビッグルズ', 'ジャスミン']; +let info = '私の猫の名前は、'; +const para = document.querySelector('p'); + +for (let i = 0; i < cats.length; i++) { + info += cats[i] + '、'; +} + +para.textContent = info;</pre> + +<p>これで次の結果が得られます。</p> + +<div class="hidden"> +<h6 id="Hidden_code_2" name="Hidden_code_2">Hidden code 2</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>for ループの例</title> + <style> + + </style> + </head> + <body> + + <p></p> + + + <script> + const cats = ['ビル', 'ジェフ', 'ピート', 'ビッグルズ', 'ジャスミン']; + let info = '私の猫の名前は、'; + const para = document.querySelector('p'); + + for (let i = 0; i < cats.length; i++) { + info += cats[i] + '、'; + } + + para.textContent = info; + + </script> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">このコードは GitHub でも</a>見られます (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html">動くデモも</a>ありますよ)。</p> +</div> + +<p>これは配列のすべての要素に対して、繰り返し何かを実行するループの使用例です。JavaScript ではとてもよく見られるパターンです。</p> + +<ol> + <li><code>i</code> をカウンター変数(イニシャライザーやイテレーター変数ともいう)として、<code>0</code> から開始します (<code>let i = 0</code>)。</li> + <li><code>i</code> が <code>cats</code> 配列の長さより小さくなくなるまで実行すると、ループには指定されています。これは重要です、条件にはループが継続するための条件が示されています。今回は、<code>i < cats.length</code> が真となるため、ループは継続します。</li> + <li>ループの内側では、現在繰り返し対象となる項目 (<code>cats[i]</code> は <code>cats[i に入っているそのときの値]</code> となります) を <code>info</code> 変数に対してカンマとスペースとともに結合しています。つまり... + <ol> + <li>初回の実行時には、<code>i = 0</code> なので <code>cats[0] + ', '</code> ("ビル、") が <code>info</code> に対して結合されます。</li> + <li>2 回目の実行時には、<code>i = 1</code> なので <code>cats[1] + ', '</code> ("ジェフ、") が <code>info</code> に対して結合されます。</li> + <li>このように、ループ内の処理が実行されるたび、1 が <code>i</code> に加算され (<code>i++</code>)、次の処理が開始されます。</li> + </ol> + </li> + <li><code>i</code> が <code>cats.length</code> の値 (ここでは 5) と等しくなったときにループは終了し、ブラウザーはループの後に続くコードを実行します。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 条件を <code>i <= cats.length</code> ではなく、<code>i < cats.length</code> としているのは、コンピューターが数値を 1 からではなく、0 から数えるためです。コードでも <code>i</code> を <code>0</code> から始め、<code>i = 4</code> (配列内の要素の最後のインデックス) となるまで加算していきます。配列内の要素が 5 つなので <code>cats.length</code> は 5 となりますが、<code>i = 5</code> とすると、(配列に 5 のインデックスの要素がないので) <code>undefined</code> となってしまいます。なので、<code>cats.length</code> と同じ値まで (<code>i <=</code>) ではなく、<code>i</code> の最大値を 1 減らして <code>cats.length</code> より小さくなる (<code>i <</code>) まで加算しています。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: 条件の指定でよくある間違いは「以下」(<code><=</code>) ではなく、「等しい」(<code>===</code>) を使ってしまうことです。もし、<code>i = 5</code> となるまでループを実行したければ、終了条件は <code>i <= cats.length</code> と指定しなければなりません。<code>i === cats.length</code> と指定した場合、ループは 1 度も実行されずに終了してしまいます。なぜなら、ループの最初では <code>i</code> が <code>5</code> ではないため、そこで終わってしまうからです。</p> +</div> + +<p>残る小さな問題は、出力された文が完全ではないことです。</p> + +<blockquote> +<p>私の猫の名前は、ビル、ジェフ、ピート、ビッグルズ、ジャスミン、</p> +</blockquote> + +<p>ループの最後の結合処理を変更して文の最後が「、」で終わらないようにしたいと思います。まったく問題ありません。ループの中に条件ブロックを挿入して、これに対処しましょう。</p> + +<pre class="brush: js notranslate">for (let i = 0; i < cats.length; i++) { + if (i === cats.length - 1) { + info += cats[i] + 'です。'; + } else { + info += cats[i] + '、'; + } +}</pre> + +<div class="note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">このコードは GitHub でも</a>見られます (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">動いているデモも</a>あります)。</p> +</div> + +<div class="warning"> +<p><strong>重要</strong>: for ループ (他のループも同様) では、カウンター変数を増加、もしくは場合により減少させて、最終的に条件が true では無くなるポイントに達するようにする必要があります。もしそうで無い場合、ループは永遠に回り続け、ブラウザーが強制的に停止するか、クラッシュしてしまうでしょう。これは<strong>無限ループ</strong>といいます。</p> +</div> + +<h2 id="Exiting_loops_with_break" name="Exiting_loops_with_break">break でループを終了する</h2> + +<p>すべての繰り返し処理が終了する前にループを終了したいとき、<a href="/ja/docs/Web/JavaScript/Reference/Statements/break">break</a> 文を使用して終了させることができます。前回の記事、<a href="/ja/Learn/JavaScript/Building_blocks/conditionals#switch_statements">switch 文</a>で、入力した値が switch 文の case にマッチしたとき、switch 文を抜け、それ以降のコードを実行するために <code>break</code> 文を使用しました。 </p> + +<p>これはループでも同様で、<code>break</code> 文を使用することで即時にループを抜けて、ブラウザーに続きのコードを実行させることができます。</p> + +<p>それでは、連絡先 (電話番号を持っている) の配列の中から特定の連絡先を検索してみましょう。まずは HTML です。検索するテキスト入力用の {{htmlelement("input")}} 要素と、検索内容を送信 (submit) する {{htmlelement("button")}} 要素、検索結果を表示する {{htmlelement("p")}} 要素を備えます。</p> + +<pre class="brush: html notranslate"><label for="search">連絡先の名前: </label> +<input id="search" type="text"> +<button>検索</button> + +<p></p></pre> + +<p>現在の JavaScript について：</p> + +<pre class="brush: js notranslate">const contacts = ['クリス:2232322', 'サラ:3453456', 'ビル:7654322', 'メアリー:9998769', 'ダイアン:9384975']; +const para = document.querySelector('p'); +const input = document.querySelector('input'); +const btn = document.querySelector('button'); + +btn.addEventListener('click', function() { + let searchName = input.value.toLowerCase(); + input.value = ''; + input.focus(); + for (let i = 0; i < contacts.length; i++) { + let splitContact = contacts[i].split(':'); + if (splitContact[0].toLowerCase() === searchName) { + para.textContent = splitContact[0] + ' の電話番号は ' + splitContact[1] + ' です。'; + break; + } else { + para.textContent = '連絡先が見つかりません。'; + } + } +});</pre> + +<div class="hidden"> +<h6 id="Hidden_code_3" name="Hidden_code_3">Hidden code 3</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>連絡先検索の例</title> + <style> + + </style> + </head> + <body> + + <label for="search">連絡先の名前: </label> + <input id="search" type="text"> + <button>検索</button> + + <p></p> + + + <script> + const contacts = ['クリス:2232322', 'サラ:3453456', 'ビル:7654322', 'メアリー:9998769', 'ダイアン:9384975']; + const para = document.querySelector('p'); + const input = document.querySelector('input'); + const btn = document.querySelector('button'); + + btn.addEventListener('click', function() { + let searchName = input.value; + input.value = ''; + input.focus(); + for (let i = 0; i < contacts.length; i++) { + let splitContact = contacts[i].split(':'); + if (splitContact[0] === searchName) { + para.textContent = splitContact[0] + ' の電話番号は ' + splitContact[1] + ' です。'; + break; + } else { + para.textContent = '連絡先が見つかりません。'; + } + } + }); + </script> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<ol> + <li>コードの先頭で、いくつか変数を宣言しています。その中に、連絡先の情報を持った配列があり、各要素は名前と電話番号をコロンで区切った文字列となっています。</li> + <li>次に、ボタン (<code>btn</code>) にイベントリスナーを設定しています。ボタンが押されたときに検索結果が戻ってくるようになっています。</li> + <li>テキスト入力欄に入力された値を <code>searchName</code> という変数に格納してから、次の検索に備え、入力欄をクリアし、フォーカスを設定しています。検索に大文字小文字を気にしないよう、文字列に <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase">toLowerCase()</a></code> を実行しているのに注意してください。</li> + <li>ここからが本題の for ループです。 + <ol> + <li>カウンター変数を <code>0</code> から始め、<code>contacts.length</code> より小さくなくなるまで、ループの繰り返しの度に <code>i</code> を 1 増やしていきます。</li> + <li>ループの内側では、まず現在の連絡先 (<code>contacts[i]</code>) をコロンの文字で分割し、<code>splitContact</code> という配列に格納します。</li> + <li>それから、条件文を用いて、<code>splitContact[0]</code> (連絡先の名前) が入力された <code>searchName</code> にまた <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase">toLowerCase()</a></code> を使って小文字化したものと等しいかを判定します。もし等しければ、連絡先の電話番号を段落 ({{htmlelement("p")}} 要素) に表示し、<code>break</code> を使用してループを終了しています。</li> + </ol> + </li> + <li> <code>(contacts.length-1)</code> 回目の繰り返しの後に、もし連絡先の名前が入力された検索語に一致しなければ、段落に「連絡先が見つかりません。」という文字列を表示し、条件が true では無くなるまでループを継続します。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">すべてのソースは GitHub</a> で見ることができます (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">動いているデモ</a>もあります)。</p> +</div> + +<h2 id="Skipping_iterations_with_continue" name="Skipping_iterations_with_continue">continue で繰り返しをスキップする</h2> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Statements/continue">continue</a> 文は <code>break</code> と同じような動作をします。けれど、ループを完全に抜けてしまうのではなく、次の繰り返しまで飛ばします。それでは、今度は入力として数値を受け取り、その数以下で整数の平方である値のみを返すという例を見てみましょう。</p> + +<p>HTML は基本的に先ほどの例と同様で、1 つのテキストボックスと出力用の段落があります。JavaScript もループ自体を除けばほぼ同じですので、違う部分のみを示します。</p> + +<pre class="brush: js notranslate">let num = input.value; + +for (let i = 1; i <= num; i++) { + let sqRoot = Math.sqrt(i); + if (Math.floor(sqRoot) !== sqRoot) { + continue; + } + + para.textContent += i + ' '; +}</pre> + +<p>出力結果はこちらです。</p> + +<div class="hidden"> +<h6 id="Hidden_code_4" name="Hidden_code_4">Hidden code 4</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>整数の平方根の生成</title> + <style> + + </style> + </head> + <body> + + <label for="number">数値を入力してください: </label> + <input id="number" type="text"> + <button>整数の平方根を生成</button> + + <p>出力結果: </p> + + + <script> + const para = document.querySelector('p'); + const input = document.querySelector('input'); + const btn = document.querySelector('button'); + + btn.addEventListener('click', function() { + para.textContent = 'Output: '; + let num = input.value; + input.value = ''; + input.focus(); + for (let i = 1; i <= num; i++) { + let sqRoot = Math.sqrt(i); + if (Math.floor(sqRoot) !== sqRoot) { + continue; + } + + para.textContent += i + ' '; + } + }); + </script> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<ol> + <li>今回の入力内容は数値 (<code>num</code>) です。<code>for</code> ループには、カウンターの初期値として、(今回は 0 ではなく) 1 が与えられ、終了する条件としてカウンターが入力値 (<code>num</code>) より大きくなった場合と指定されており、イテレーターとして、カウンターに 1 ずつ加算するよう指定されています。</li> + <li>ループ内部では、各値の平方根を <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt(i)</a> を使用して求め、求めた平方根を切り捨てた値が、切り捨てる前の平方根と等しいかどうかを調べています (切り捨てには <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a> に任意の数値を渡します)。</li> + <li>もし、平方根と切り捨てた数値が等しくないのなら (<code>!==</code>)、平方根は整数ではないことを示しています。整数以外には興味がありませんので、<code>continue</code> 文を用いて、その数値をどこにも保持することなく、次のループの繰り返しまでスキップします。</li> + <li>もし、その平方根が整数値であるならば、if ブロックは飛ばされるので、<code>continue</code> 文は実行されません。代わりに、現在の <code>i</code> の値を段落の内容の後ろにスペースと一緒に結合します。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">すべてのソースは GitHub</a> でも見ることができます (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">動いているデモ</a>もあります)。</p> +</div> + +<h2 id="while_and_do_..._while" name="while_and_do_..._while">while と do ... while</h2> + +<p><code>for</code> は JavaScript で利用可能な唯一のループのタイプではありません。実際には多くのものがありますが、これらのすべてを理解する必要はありませんが、仕事の同じ機能をわずかに異なる方法で認識できるように、他のものの構造を見ておく価値があります。<br> + <br> + まず、while ループを見てみましょう。このループの構文は次のようになります。</p> + +<pre class="notranslate">初期化処理 +while (条件) { + // 実行するコード + + 最後の式 +}</pre> + +<p>これは for ループとよく似ていますが、初期化条件はループの前に設定され、最後の式は実行するコードの後のループ内に含まれます。これら二つの項目は丸括弧の中に含まれません。条件は、<code>for</code> ではなく <code>while</code> キーワードが前に付いた括弧内に含まれています。<br> + <br> + for ループにもある３つの項目が、for ループとおなじ順序で定義されています。これは理にかなっています。条件が true では無くなるポイントに達したかどうかを確認する前に初期化処理を定義する必要があります ; ループ内のコードが実行された後（1回の繰り返しの完了）、最期の式が実行されます。これは、条件がまだ true である場合にのみ発生します。<br> + <br> + 猫のリストの例をもう一度見てみましょう。ただし、while ループを使うように書き直してみましょう：</p> + +<pre class="brush: js notranslate">let i = 0; + +while (i < cats.length) { + if (i === cats.length - 1) { + info += 'and ' + cats[i] + '.'; + } else { + info += cats[i] + ', '; + } + + i++; +}</pre> + +<div class="note"> +<p><strong>注</strong>: これは期待どおりに動作します。<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">GitHub でライブ実行</a>してみてください（<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">完全なソースコード</a>を見ることもできます）。</p> +</div> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Statements/do...while">do ... while</a> ループは非常によく似ていますが、while構造にはバリエーションがあります。</p> + +<pre class="notranslate">初期化処理 +do { + // 実行するコード + + 最後の式 +} while (条件)</pre> + +<p>この場合、初期化処理は、ループが始まる前に、再び最初に来ています。キーワードは、実行するコードと最期の式を含む中括弧の直前にあります。</p> + +<p>ここでの違いは、条件がほかの全ての後にあり、括弧で囲まれ、その前に <code>while</code> キーワードが付いていることです。<code>do...while</code> ループでは、中括弧内のコードは、チェックが再度実行されるかどうかを確認する前に常に 1 回実行されます (while と for の場合、チェックが最初に来るため、コードは実行されない可能性があります) 。<br> + <br> + <code>do...while</code> ループを使用するように、猫のリストの例をもう一度書き直してみましょう：</p> + +<pre class="brush: js notranslate">let i = 0; + +do { + if (i === cats.length - 1) { + info += 'and ' + cats[i] + '.'; + } else { + info += cats[i] + ', '; + } + + i++; +} while (i < cats.length);</pre> + +<div class="note"> +<p><strong>注</strong>: 再度、これは期待どおりに動作します。<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">GitHub でライブ実行</a>してみてください（<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">完全なソースコード</a>を見ることもできます）。</p> +</div> + +<div class="warning"> +<p><strong>重要</strong>: while と do ... while では、すべてのループと同様に、カウンター変数を増加、もしくは場合により減少させて、最終的に条件が false となるようにする必要があります。そうしなければループは永遠に進み、ブラウザーはそれ強制的に停止させるか、クラッシュします。これは<strong>無限ループ</strong>と呼ばれます。</p> +</div> + +<h2 id="Active_learning_Launch_countdown!" name="Active_learning_Launch_countdown!">アクティブラーニング: カウントダウンを開始します!</h2> + +<p>この練習では、出力ボックスへの簡単な起動カウントダウンを 10 から Blast off まで印字してください。具体的には、</p> + +<ul> + <li>10 から 0 までのループ。イニシャライザを提供します — <code>let i = 10;</code>.</li> + <li>各繰り返しに対して、新しい段落を作成し、それを出力<div>に追加します。これは、<code>const output = document.querySelector('.output');</code>を使用して選択したものです。コメントでは、ループ内のどこかで使用する必要がある 3 つのコード行を提供しました + <ul> + <li><code>const para = document.createElement('p');</code> — 新しいパラグラフを作成します</li> + <li><code>output.appendChild(para);</code> — 出力の <code><div></code>にパラグラフを追加します。</li> + <li><code>para.textContent =</code> — パラグラフ内のテキストを、イコールの後の右辺においたものにする。</li> + </ul> + </li> + <li>反復回数が異なると、その反復の段落に異なるテキストを入れる必要があります（条件文と複数の <code>para.textContent =</code> 行が必要です）。 + <ul> + <li>数字が 10 の場合、パラグラフに "Countdown 10" と出力する。</li> + <li>数字が 0 の場合、パラグラフに "Blast off!" と出力する。</li> + <li>その他の数字では、パラグラフにその数字を出力する。</li> + </ul> + </li> + <li>イテレーターを含めることを忘れないでください！ですが、この例では各反復の後にカウント(アップではなく)ダウンするため、<code>i++</code> は要らないでしょう — 減少方向にどうやって反復しますか？</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: あなたがループ(例えば (while(i>=0))からタイピングを始めると、ブラウザが固まってしまうかもしれません。終了条件をまだ入力していないからです。注意して下さい。この問題に対処するにはコメントの中にコードを書き始めて、完了してからコメントを削除することです。</p> +</div> + +<p>間違えた場合は、「リセット」ボタンを使用してこの例をいつでもリセットできます。あなたが本当に立ち往生したら、"ソリューションを表示"を押して解決策を見てください。</p> + +<div class="hidden"> +<h6 id="Active_learning" name="Active_learning">Active learning</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> +<div class="output" style="height: 410px;overflow: auto;"> + +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> +<textarea id="code" class="playable-code" style="height: 300px;width: 95%"> +let output = document.querySelector('.output'); +output.innerHTML = ''; + +// let i = 10; + +// const para = document.createElement('p'); +// para.textContent = ; +// output.appendChild(para); +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +let jsSolution = 'const output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i >= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}'; +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Active_learning_Filling_in_a_guest_list" name="Active_learning_Filling_in_a_guest_list">アクティブラーニング: ゲストリストに記入する</h2> + +<p>この演習では、配列に格納された名前のリストを取得して、それらをゲストリストに入れることが必要です。しかし、これはそれほど簡単ではありません — 彼らは貪欲で失礼で、常にすべての食べ物を食べるので、私たちはフィルとローラを入れさせたくありません！ 私たちは 2 つのリストを持っています。1 つは承認するゲストのためのもの、もう 1 つは拒否するゲストのためのものです。<br> + <br> + 具体的には、</p> + +<ul> + <li>0 から <code>people</code> 配列の長さまで反復するループを作成します。<code>let i = 0;</code> の初期化処理で始める必要がありますが、どのような条件が必要ですか？</li> + <li>各ループ反復中に、条件文を使用して現在の配列項目が "Phil" または "Lola" に等しいかチェックします。 + <ul> + <li>そうである場合は、<code>refused</code> パラグラフの <code>textContent</code> の最後に配列項目を連結し、その後にカンマとスペースを続けます</li> + <li>そうでない場合は、配列項目を、<code>admitted</code> パラグラフの <code>textContent</code> の末尾に連結し、その後にカンマとスペースを続けます</li> + </ul> + </li> +</ul> + +<p>私たちはすでにあなたに次のものを提供しました：</p> + +<ul> + <li><code>let i = 0;</code> — イニシャライザー</li> + <li><code>refused.textContent +=</code> — <code>refused.textContent</code> の後に文字を連結する開始行</li> + <li><code>admitted.textContent +=</code> — <code>admitted.textContent</code> の後に文字を連結する開始行</li> +</ul> + +<p>特別ボーナス問題 — 上のタスクを正常に完了すると、カンマで区切られた 2 つの名前リストが残されますが、それらは整頓されません。それぞれの末尾にカンマがあります。それぞれの場合に最後のカンマを切り取り、末尾にピリオドを追加した行をどのように書くかという問題を解決出来ますか？ヘルプのため<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a>の記事を見てみてください。<br> + <br> + 間違えた場合は、「リセット」ボタンを使用してこの例をいつでもリセットできます。あなたが本当に立ち往生したら、"ソリューションを表示"を押して解決策を見てください。</p> + +<div class="hidden"> +<h6 id="Active_learning_2" name="Active_learning_2">Active learning 2</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> +<div class="output" style="height: 100px;overflow: auto;"> + <p class="admitted">Admit: </p> + <p class="refused">Refuse: </p> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> +<textarea id="code" class="playable-code" style="height: 400px;width: 95%"> +const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce']; + +const admitted = document.querySelector('.admitted'); +const refused = document.querySelector('.refused'); +admitted.textContent = 'Admit: '; +refused.textContent = 'Refuse: ' + +// let i = 0; + +// refused.textContent += ; +// admitted.textContent += ; + +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const jsSolution = 'const people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nconst admitted = document.querySelector(\'.admitted\');\nconst refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nlet i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';'; +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const tcaretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Which_loop_type_should_you_use" name="Which_loop_type_should_you_use">どのタイプのループを使用しますか？</h2> + +<p>基本的な用途では for、while、do ... while ループはほぼ互換性があります。それらはすべて同じ問題を解決するために使用することができます。どちらを使用するかは、あなたの個人的な好みに大きく左右されます。これは、どれが最も覚えやすいか、最も直感的かということです。それらをもう一度見てみましょう。</p> + +<p>まずは <code>for</code>:</p> + +<pre class="notranslate">for (初期化処理; 条件; 最後の式) { + // 実行するコード +}</pre> + +<p><code>while</code>:</p> + +<pre class="notranslate">初期化処理 +while (条件) { + // 実行するコード + + 最後の式 +}</pre> + +<p>そして最後は <code>do...while</code>:</p> + +<pre class="notranslate">初期化処理 +do { + // 実行するコード + + 最後の式 +} while (条件)</pre> + +<p>少なくとも最初は <code>for</code> から始めることをお勧めします。すべてを覚えておくことが簡単だからです。初期化処理、条件、最後の式をすべて括弧内にきちんと入れなければならないので、それらがどこにあるかや見落としていないことの確認が簡単です。</p> + +<div class="note"> +<p><strong>注</strong>: 高度な/特殊な状況やこの記事の範囲を超えて有用な、他のループタイプ/機能もあります。ループ学習をさらに進めたい場合は、高度な<a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Loops_and_iteration">ループと反復処理ガイド</a>をお読みください。</p> +</div> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を維持しているか検証するテストを見ることができます — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Loops">Test your skills: Loops</a> を見てください。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>この記事では、背後にある基本的な概念と、JavaScript でコードをループする際に使用できるさまざまなオプションについて説明しました。今はループが反復コードを処理するための良い仕組みである理由がはっきり分かり、自身の例で使用できることを誇らしく思うでしょう。<br> + <br> + あなたが理解できなかったことがあれば、記事をもう一度読んだり、ヘルプを求めて<a href="/ja/docs/Learn#Contact_us">私たちに連絡</a>してください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Guide/Loops_and_iteration">ループと反復処理</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Statements/for">for文のリファレンス</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Statements/while">while</a> と <a href="/ja/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> リファレンス</li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Statements/break">break</a> と <a href="/ja/docs/Web/JavaScript/Reference/Statements/continue">continue</a> リファレンス</li> + <li> + <p class="entry-title"><a href="https://www.impressivewebs.com/javascript-for-loop/">What’s the Best Way to Write a JavaScript For Loop?</a> — 高度なループのベストプラクティス</p> + </li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li> +</ul> diff --git a/files/ja/learn/javascript/building_blocks/return_values/index.html b/files/ja/learn/javascript/building_blocks/return_values/index.html new file mode 100644 index 0000000000..e9a13429b5 --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/return_values/index.html @@ -0,0 +1,201 @@ +--- +title: 関数の戻り値 +slug: Learn/JavaScript/Building_blocks/Return_values +tags: + - リターン + - リターン値 + - 戻り値 + - 返り値 + - 返却値 + - 関数 +translation_of: Learn/JavaScript/Building_blocks/Return_values +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary"><span class="seoSummary">このコースでの関数の学習を終えるために、最後に議論しておくべき関数についての大事なコンセプトがあります。それは戻り値です。関数によっては意味のある値を返さないものもありますが、値を返すものも当然あります。それらの値が何であるか、あなたのコードの中でどのように利用するのか、またどのように関数に意味のある値を返させるのかについて理解することは重要です。これらについてすべてを以下で紹介します。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、基本的な HTML と CSS の知識、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript初級レベルの知識</a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数の知識</a></td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>関数の戻り値とその使い方を理解すること</td> + </tr> + </tbody> +</table> + +<h2 id="What_are_return_values" name="What_are_return_values">戻り値とは？</h2> + +<p><strong>戻り値</strong>は、その名が示すとおり関数の実行が完了した時に返される値です。戻り値についてそこまで意識してこなかったかもしれませんが、これまでに何度も戻り値を見てきているはずです。</p> + +<p>以下の見覚えのある例を見てみましょう (このシリーズの<a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Built-in_browser_functions">過去の記事</a>より) 。</p> + +<pre class="brush: js notranslate">let myText = 'I am a string'; +let newString = myText.replace('string', 'sausage'); +console.log(newString); +// 文字列の replace() 関数は文字列を受け取り、 +// 一方の部分文字列をもう一方の部分文字列に置き換え、 +// 置き換えられた新しい文字列を返します。 +</pre> + +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a></code> 関数が <code>myText</code> という文字列の上で実行され、2 つの引数が渡されています:</p> + +<ol> + <li>置換される部分文字列 ('string')。</li> + <li>置換する部分文字列 ('sausage')。</li> +</ol> + +<p>この関数が完了 (実行が終了) した時に、関数は置換された新しい文字列を値として返します。上記のコードでは、この戻り値を <code>newString</code> 変数に代入しています。</p> + +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a></code> 関数についての MDN のリファレンスページには、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value">戻り値</a> というセクションがあります。関数によって返される値が何か知り把握することはとても大事です。従って、可能な限りこちらも見るようにしてください。</p> + +<p>関数によっては何も値を返しません (この場合、リファレンスページでは戻り値を <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/void">void</a></code> または <code><a href="/ja/docs/Glossary/undefined">undefined</a></code> として記載しています)。たとえば、前の記事で作った <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50">displayMessage()</a> 関数では、関数が実行されたときに特定の値は返されていません。ただスクリーンのどこかにボックスの表示を作っているだけです。</p> + +<p>一般的に、戻り値は関数がある種の計算をしている途中の段階で使用されます。 関数で計算する必要があるいくつかの値を含む最終結果を取得したいとします。関数は値を計算した後、結果を返すことができるため、変数に格納できます。この変数は、計算の次の段階で使用できます。</p> + +<h3 id="Using_return_values_in_your_own_functions" name="Using_return_values_in_your_own_functions">オリジナル関数での戻り値の使い方</h3> + +<p>カスタム関数から値を返すために、必要なことは、<a href="/ja/docs/Web/JavaScript/Reference/Statements/return">return</a> というキーワードを使うことです。直近の <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> の例でこれを見たでしょう。<code>draw()</code> 関数は 100 のランダムな円を HTML 内に表示します。<br> + {{htmlelement("canvas")}}:</p> + +<pre class="brush: js notranslate">function draw() { + ctx.clearRect(0, 0, WIDTH, HEIGHT); + for (let i = 0; i < 100; i++) { + ctx.beginPath(); + ctx.fillStyle = 'rgba(255,0,0,0.5)'; + ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); + ctx.fill(); + } +} +</pre> + +<p>ループの繰り返しの中で、現在の円の <em>x 座標</em>、<em>y 座標</em>、<em>半径</em>それぞれのランダムな値を生成するために <code>random()</code> 関数に対して3 回の呼び出しが行われます。<code>random()</code> 関数はひとつの引数 (整数) を受け取り、<code>0</code> からその受け取った数値までの乱数を返します。以下のようになります。</p> + +<pre class="brush: js notranslate">function random(number) { + return Math.floor(Math.random() * number); +} +</pre> + +<p>次のように書くことも可能です。</p> + +<pre class="brush: js notranslate">function random(number) { + const result = Math.floor(Math.random() * number); + return result; +} +</pre> + +<p>しかし最初のものの方がよりコンパクトで、効率よく書けています。</p> + +<p>関数が呼び出されるたびに、<code>Math.floor(Math.random() * number)</code> の計算の結果が返されます。この戻り値は、関数が呼び出された場所に現れて、コードが続行されます。</p> + +<p>したがって、以下を実行すると:</p> + +<pre class="brush: js notranslate">ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); +</pre> + +<p>この時、3 つの <code>random()</code> がそれぞれ <code>500</code>、<code>200</code>、<code>35</code> と値を返した場合、このコードは実際には次のように実行されたことになります。</p> + +<pre class="brush: js notranslate">ctx.arc(500, 200, 35, 0, 2 * Math.PI); +</pre> + +<p>コード上の関数の呼び出しがまず行われ、その戻り値が関数の呼び出しの代わりとなり、その後にコードそのものが実行されます。</p> + +<h2 id="Active_learning_our_own_return_value_function" name="Active_learning_our_own_return_value_function">実践: 戻り値を返す関数を作る</h2> + +<p>戻り値を返すオリジナルな関数を書いてみましょう。</p> + +<ol> + <li>まず最初に GitHub から <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html">function-library.html</a> ファイルをローカル環境にコピーします。このファイルはシンプルな HTML のページで、文字列入力用の {{htmlelement("input")}} フィールドとパラグラフ（段落）要素を含んでいます。また、{{htmlelement("script")}} 要素があり、この中でページ内の HTML 要素の参照を 2 つの変数で保持させています。このページに対して、テキストボックスに数値を入力したら、入力した数値と関連のある異なる数値を下のパラグラフ要素に表示させるようにしていきます。</li> + <li>いくつかの関数を <code><script></code> 要素に追加していきましょう。既に記述されている 2 行の <a href="/ja/docs/Web/JavaScript">JavaScript</a> のコードの下に、以下の関数定義を追加します。 + <pre class="brush: js notranslate">function squared(num) { + return num * num; +} + +function cubed(num) { + return num * num * num; +} + +function factorial(num) { + if (num < 0) return undefined; + if (num == 0) return 1; + let x = num - 1; + while (x > 1) { + num *= x; + x--; + } + return num; +}</pre> + <code>squared()</code> 関数と <code>cubed()</code> 関数は大変わかりやすいでしょう。引数として渡された値の 2 乗や 3 乗を返しています。<code>factorial()</code> 関数は渡された数の<a href="https://ja.wikipedia.org/wiki/%E9%9A%8E%E4%B9%97">階乗</a>を返しています。</li> + <li>次に input に入力された数値を出力する処理を追加していきます。イベントハンドラーを既存の関数の下に記述しましょう。 + <pre class="brush: js notranslate">input.onchange = function() { + const num = input.value; + if (isNaN(num)) { + para.textContent = 'You need to enter a number!'; + } else { + para.textContent = num + ' squared is ' + squared(num) + '. ' + + num + ' cubed is ' + cubed(num) + '. ' + + num + ' factorial is ' + factorial(num) + '.'; + } +}</pre> + + <p>ここでは <code>onchange</code> イベントハンドラーを作っています。これは文字列入力での <code>change</code> イベントが発火した時に実行されます。つまり新しい値が <code>input</code> に入力され、送信された時です (たとえば値を入力し、<kbd>Tab</kbd> か <kbd>Return</kbd> を押して入力からフォーカスを外す時)。この無名関数が実行されると、<code>input</code> に入力された値が <code>num</code> 定数に代入されます。<br> + <br> + 次に、条件付きテストを行うようにします。もし入力された値が数値でなければ、パラグラフ要素にエラーメッセージを出力します。テストでは、式 <code>isNaN(num)</code> が true を返すかどうか見るようにします。一般的に値が数値でないかをテストする際には <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a></code> 関数を使います。この関数では、渡された値が数値でなければ <code>true</code> を返し、数値であれば <code>false</code> を返します。<br> + <br> + もしテストが <code>false</code> を返した場合、<code>num</code> の値は数値です。したがって、数値の 2 乗、3 乗、階乗の値を示す文が、パラグラフ要素内に出力されます。その出力する文章内で必要とする値を計算するために <code>squared()</code> 関数、<code>cubed()</code> 関数、<code>factorial()</code> 関数を呼んでいます。</p> + </li> + <li> + <p>コードを保存して、それをブラウザーで表示してみましょう。</p> + </li> +</ol> + +<div class="note"> +<p><strong>注意</strong>: もしサンプルがうまく動作しない場合は、<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">GitHub 上の完成版</a>と比較などしてみてください（<a href="https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">実際に動かして確認もできます</a>）。またはお問い合わせください。</p> +</div> + +<h2 id="あなたの番です!">あなたの番です!</h2> + +<p>この時点で、独自の関数をいくつか書き出してライブラリに追加してみましょう。数値の平方根や立方根はどうですか？また、特定の半径を持つ円の円周はどうでしょうか？</p> + +<p>関数に関する追加のヒント:</p> + +<ul> + <li>関数の中に<em>エラーハンドリング</em>を書く別の例を見てみましょう。一般に、必要な引数が検証されていること、および省略可能な引数に何らかのデフォルト値が渡されていることをチェックすることは良い考え方です。このようにしてプログラムがエラーを投げることを減らせます。</li> + <li><em>関数のライブラリ</em>を作るアイデアについて考えてみてください。プログラミングのキャリアを積んでいくと、何度も同じ類のことを繰り返し行うことになるでしょう。このようなことに対処するために、自分独自のユーティリティ関数のライブラリを作成することは良いアイデアです。新しいコードにコピーしたり、必要に応じて HTML ページにそれを適用したりすることができます。</li> +</ul> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の最後まで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を維持しているか検証するテストを見ることができます— <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions">Test your skills: Functions</a> を見てください。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>以上、関数は楽しく、非常に便利で、構文や機能についてまだまだ話すことはたくさんありますが、それらはかなり理解しやすいものです。</p> + +<p>もし何か理解できなかったことがありましたら、何度もこの記事を読み込むか、または<a href="/ja/docs/Learn#Contact_us">お問い合わせ</a>ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions">関数</a> — より高度な関数に関連した情報を網羅した詳細なガイド。</li> + <li><a href="https://www.impressivewebs.com/callback-functions-javascript/">Callback functions in JavaScript</a> — 一般的なJavaScriptのパターンは、ある関数を別の関数に<em>引数として</em>渡すことです。それは受け取った関数の中で呼び出されます。これについては、このコースの範疇を少し超えていますが、すぐにでも勉強する価値はあります。</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li> +</ul> diff --git a/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.html new file mode 100644 index 0000000000..da7b36abbf --- /dev/null +++ b/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.html @@ -0,0 +1,796 @@ +--- +title: クライアント側ストレージ +slug: Learn/JavaScript/Client-side_web_APIs/Client-side_storage +tags: + - API + - Article + - Beginner + - CodingScripting + - Guide + - IndexedDB + - JavaScript + - Learn + - Storage + - Web Storage + - ウェブストレージ + - ガイド + - 保存 + - 初心者 + - 学習 +translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage +--- +<p>{{LearnSidebar}}</p> + +<div>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">モダン・ウェブブラウザーは、ユーザーの許可のもとにウェブサイトがユーザーのコンピューター上にデータを保存して必要なときにそのデータを取得するための、いくつもの方法をサポートしています。このことにより、長期記憶のためにデータを存続させること、オフライン利用のためにサイトまたは文書を保存すること、サイトについてのユーザー独自の設定を保持すること、などなどが可能になります。本記事では、これらがどのようにして機能するのかについてのごく基本的な点を説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>JavaScript の基本 (<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>、 <a href="/ja/docs/Learn/JavaScript/Objects">JavaScript オブジェクト入門</a> を参照)、<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">ウェブ APIの紹介</a></td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>アプリケーション・データを保存するためのクライアント側のストレージ API の使い方を学ぶこと</td> + </tr> + </tbody> +</table> + +<h2 id="Client-side_storage" name="Client-side_storage">クライアント側での保存って?</h2> + +<p>MDN 学習エリアの他の箇所で、<a href="/ja/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites">静的なサイト</a> と <a href="/ja/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites">動的なサイト</a> の違いについて述べました。ほとんどの主要なモダン・ウェブサイトは動的です。つまり、ある種のデータベース (サーバー側のストレージ) を使ってデータをサーバー上に記憶し、必要なデータを取得するために<a href="/ja/docs/Learn/Server-side">サーバー側</a> のコードを実行し、そのデータを静的なページ雛型に挿入し、結果として出来上がった HTML をクライアントに提供して、それがユーザーのブラウザーによって表示されるようにします。</p> + +<p>クライアント側での保存は類似の原理に基づいて機能しますが、これにはいくつかの異なる使い道があります。クライアント側での保存は、クライアント上に (つまりユーザーのマシン上に) データを保存して必要なときにそのデータを取得できるようにしてくれる、いくつかの JavaScript API から構成されています。クライアント側での保存には、たとえば以下のように多くの異なる用途があります。</p> + +<ul> + <li>サイトの環境設定を個人に合わせる (たとえば、カスタム・ウィジェット、カラースキーム、またはフォントサイズについて、ユーザーが選択したものを表示する、など)</li> + <li>以前のサイト上の行動を存続させる (たとえば、前回のセッションからの買い物かごの中身を記憶しておく、ユーザーが以前ログインしたかどうかを憶えておく、など)</li> + <li>サイトをより速く (かつ、潜在的にはより費用をかけずに) ダウンロードできるように、または、ネットワーク接続なしでサイトが利用可能となるように、データと資産をローカルに保存する</li> + <li>ウェブ・アプリケーションが生成した文書を、オフラインで利用するために、ローカルに保存する</li> +</ul> + +<p>クライアント側での保存とサーバ側での保存は、しばしば共に使われます。たとえば、複数の音楽ファイル (おそらくウェブゲームまたは音楽プレーヤー・アプリに使われる) をダウンロードし、それらの音楽ファイルをクライアント側のデータベース内に保存し、必要に応じて再生する、といったことが可能でしょう。ユーザーは、それらの音楽ファイルをただ一度ダウンロードするだけで済むでしょう。その後の訪問では、音楽ファイルは、ダウンロードされる代わりにデータベースから取得されるでしょう。</p> + +<div class="note"> +<p><strong>注</strong>: クライアント側のストレージ API を使って保存できるデータの量には、上限があります (もしかすると、個別の API ごとの上限と、累積的な上限の双方があるかもしれません)。正確な上限は、ブラウザーごとに異なりますし、もしかすると、ユーザーの設定によることもあるかもしれません。より詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">ブラウザーのストレージ制限と削除基準</a> を参照。</p> +</div> + +<h3 id="Old_school_Cookies" name="Old_school_Cookies">旧式な方法: クッキー</h3> + +<p>クライアント側での保存という考え方には、長い歴史があります。ウェブの初期から、ウェブサイト上でのユーザー体験を個別化するための情報を記憶するべく、サイトは <a href="/ja/docs/Web/HTTP/Cookies">クッキー</a> を使ってきました。そうしたクッキーは、ウェブ上で一般的に使われるクライアント側での保存の、最初期の形式です。</p> + +<p>最近では、クライアント側のデータを保存するためのより簡単な仕組みが利用できるため、この記事ではクッキーの使用方法については説明しません。ただし、これはクッキーが現代のウェブで完全に役に立たないことを意味するわけではありません。クッキーは、ユーザーの個別化や状態に関連するデータを保存するために今でも一般的に使用されています。たとえば、セッション ID やアクセストークンです。クッキーの詳細については、<a href="/ja/docs/Web/HTTP/Cookies">HTTP cookies</a> の記事を参照してください。</p> + +<h3 id="New_school_Web_Storage_and_IndexedDB" name="New_school_Web_Storage_and_IndexedDB">新方式派: ウェブストレージと IndexedDB</h3> + +<p>前述の「簡単な」機能には次のものがあります:</p> + +<ul> + <li><a href="/ja/docs/Web/API/Web_Storage_API">Web Storage API</a> は、名前とそれに対応する値とからなる小規模なデータ項目を保存したり取り出したりするための、とても簡潔な構文を提供しています。これは、ユーザーの名前、ユーザーがログインしているかどうか、画面の背景にどの色を使うべきか、といったような、何らかの単純なデータを記憶するだけでよい場合に有用です。</li> + <li><a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a> は、複雑なデータを保存するための完全なデータベース・システムをブラウザーに提供しています。これは、顧客レコードの完全な集合から、音声ファイルまたは動画ファイルのような複雑なデータ型にいたるまでの、種々の物事に対して使えます。</li> +</ul> + +<p>以下ではこれらの API について学ぶことになります。</p> + +<h3 id="The_future_Cache_API" name="The_future_Cache_API">将来: キャッシュ API</h3> + +<p>いくつかのモダン・ブラウザーは、新しい {{domxref("Cache")}} API をサポートしています。この API は、特定の要求に対する HTTP 応答を記憶しておくために設計されています。 また、ネットワーク接続なしに後でサイトを利用できるように、ウェブサイト資産をオフラインに記憶しておく、といったようなことをするうえで非常に有用です。キャッシュは通常、<a href="/ja/docs/Web/API/Service_Worker_API">サービスワーカー API</a> と組み合わせて利用します。もっとも、必ずそうしなくてはならないというわけではありません。</p> + +<p>キャッシュとサービスワーカーの利用は先進的な話題であり、この記事ではそれほど詳しくは扱いません。とは言うものの、後述の {{anch("Offline asset storage")}} の節では、簡単な例をお見せします。</p> + +<h2 id="Storing_simple_data_—_web_storage" name="Storing_simple_data_—_web_storage">単純なデータを保存する——ウェブストレージ</h2> + +<p><a href="/ja/docs/Web/API/Web_Storage_API">Web Storage API</a> は大変使いやすいものです。(文字列や数などに限定された) データからなる単純な名前／値のペアを保存し、必要なときにその値を取り出します。</p> + +<h3 id="Basic_syntax" name="Basic_syntax">基本的構文</h3> + +<p>以下に方法を示しましょう。</p> + +<ol> + <li> + <p>まず、GitHub 上の <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/index.html">ウェブストレージの空白テンプレート</a> へ行ってください (新規タブで開いてください)。</p> + </li> + <li> + <p>ブラウザーのデベロッパー・ツールの JavaScript コンソールを開いてください。</p> + </li> + <li> + <p>ウェブストレージ・データのすべては、ブラウザー内部の二つのオブジェクト的な構造体の中に含まれます。つまり、{{domxref("Window.sessionStorage", "sessionStorage")}} と {{domxref("Window.localStorage", "localStorage")}} の中です。前者は、ブラウザーが開いている限り、データを存続させます (ブラウザーを閉じるとデータは失われます)。後者は、ブラウザーを閉じて、それから再びブラウザーを開いた後でさえも、データを存続させます。一般的には後者の方がより有用なので、本記事では後者を使います。</p> + + <p>{{domxref("Storage.setItem()")}} メソッドによって、ストレージ内にデータ項目を保存できます。このメソッドは二つの引数をとります。すなわち、その項目の名前と、その値です。JavaScript コンソールに以下のように打ち込んでみてください (もしお望みなら、値は御自分のお名前に変更してくださいね!)</p> + + <pre class="brush: js notranslate">localStorage.setItem('name','Chris');</pre> + </li> + <li> + <p>{{domxref("Storage.getItem()")}} メソッドは一つの引数をとります。つまり、取り出したいデータ項目の名前です。そして、このメソッドは、その項目の値を返します。今度は JavaScript コンソールに以下の行を打ち込んでください。</p> + + <pre class="brush: js notranslate">let myName = localStorage.getItem('name'); +myName</pre> + + <p>2 行目を入力すると、<code>myName</code> という変数が今や <code>name</code> というデータ項目の値を保有していることが分かるはずです。</p> + </li> + <li> + <p>{{domxref("Storage.removeItem()")}} メソッドは一つの引数をとります。つまり、削除したいデータ項目の名前です。このメソッドは、ウェブストレージからその項目を削除します。JavaScript コンソールに以下の行を打ち込んでください。</p> + + <pre class="brush: js notranslate">localStorage.removeItem('name'); +let myName = localStorage.getItem('name'); +myName</pre> + + <p>3 行目は、今度は <code>null</code> を返すはずです。というのも、もはや <code>name</code> という項目はウェブストレージ内に存在しないからです。</p> + </li> +</ol> + +<h3 id="The_data_persists!" name="The_data_persists!">データが存続する!</h3> + +<p>ウェブストレージの一つの重要な特徴は、ページ・ロードをまたいで (さらに、<code>localStorage</code> の場合には、ブラウザーを終了させてさえも) データが存続する、という点です。この特徴が機能しているところを見てみましょう。</p> + +<ol> + <li> + <p>もう一度、ウェブストレージの空白テンプレートを開いてください。ただし今回は、本チュートリアルを開いたのとは別のブラウザーで開いてください! こうすることで、取り扱いがしやすくなるでしょう。</p> + </li> + <li> + <p>以下の行をブラウザーの JavaScript コンソールに打ち込んでください。</p> + + <pre class="brush: js notranslate">localStorage.setItem('name','Chris'); +let myName = localStorage.getItem('name'); +myName</pre> + + <p><code>name</code> という項目が返されるのが分かるはずです。</p> + </li> + <li> + <p>さてここでブラウザーを終了させてから再び起動して開いてください。</p> + </li> + <li> + <p>再び、以下の行を入力してください。</p> + + <pre class="brush: js notranslate">let myName = localStorage.getItem('name'); +myName</pre> + + <p>ブラウザーを終了させてから再び開いたというのに、それでも依然として値が利用可能である、ということが分かるはずです。</p> + </li> +</ol> + +<h3 id="Separate_storage_for_each_domain" name="Separate_storage_for_each_domain">ドメインごとに別々のストレージ</h3> + +<p>ドメインごとに (ブラウザーにロードされた別々のウェブ・アドレスごとに)、別々のデータストアがあります。二つのウェブサイト (たとえば google.com と amazon.com) をロードして、一方のウェブサイトで項目を保存してみると、その項目は他方のウェブサイトでは利用できない、と分かるでしょう。</p> + +<p>これには意義があります。もしウェブサイト同士がお互いのデータを見ることが可能であったら起こるであろうセキュリティ問題を想像できますよね!</p> + +<h3 id="A_more_involved_example" name="A_more_involved_example">さらに込み入った例</h3> + +<p>どのようにウェブストレージを使えるのかについてお教えするために、簡単で基礎的な事例を書くことによって、(ドメインごとのストレージという) この新たに得た知識を応用してみましょう。この事例では、名前を入力できるようにします。その入力の後、個人に合わせた挨拶を表示するべく、ページが更新されます。この状態は、ページ／ブラウザーのリロードをまたいでも存続するでしょう。なぜなら、名前がウェブストレージに記憶されているからです。</p> + +<p>この例の HTML を <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> で入手できます。これは、ヘッダーとコンテンツとフッターを備えた簡素なウェブサイトと、名前を入力するためのフォームとを含みます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15735/web-storage-demo.png" style="display: block; margin: 0 auto;"></p> + +<p>この例を組み上げましょう。すると、これがどのように機能するのか理解できるでしょう。</p> + +<ol> + <li> + <p>まず、御自分のコンピュータ上の新規ディレクトリに、<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> というファイルのローカルコピーを作ってください。</p> + </li> + <li> + <p>次に、<code>index.js</code> と呼ばれる JavaScript ファイルを、HTML がどのように参照しているのかに注意してください (40 行目を参照)。これ (<code>index.js</code>) を作成して、そこに JavaScript コードを書き込む必要があります。HTML ファイルと同じディレクトリに <code>index.js</code> というファイルを作成してください。</p> + </li> + <li> + <p>この例で操作する必要のある HTML 項目 (features) のすべてに対する参照を作るところから取り掛かりましょう。それらの参照のすべてを定数として作ります。なぜなら、これらの参照は、アプリのライフサイクル内で変化する必要がないからです。以下の行を JavaScript ファイルに追加してください。</p> + + <pre class="brush: js notranslate">// 必要な定数を作ります。 +const rememberDiv = document.querySelector('.remember'); +const forgetDiv = document.querySelector('.forget'); +const form = document.querySelector('form'); +const nameInput = document.querySelector('#entername'); +const submitBtn = document.querySelector('#submitname'); +const forgetBtn = document.querySelector('#forgetname'); + +const h1 = document.querySelector('h1'); +const personalGreeting = document.querySelector('.personal-greeting');</pre> + </li> + <li> + <p>次に、送信ボタンが押されたときにフォームが実際にこのフォーム自体を送信することをやめさせるための、小規模なイベント・リスナーを含める必要があります。というのも、こうした送信は所望の振る舞いではないからです。以下に示すスニペットを、前のコードに追加してください。</p> + + <pre class="brush: js notranslate">// ボタンが押されたときにフォームが送信することをやめさせます。 +form.addEventListener('submit', function(e) { + e.preventDefault(); +});</pre> + </li> + <li> + <p>さてここで、イベント・リスナーを追加せねばなりません。そのイベント・リスナーのハンドラー関数は、"Say hello" ボタンがクリックされたときに実行されます。それぞれの断片が何を行うのかはコメントで詳しく説明してありますが、本質的にここでは、ユーザーがテキスト入力ボックスに入力した名前をとってきて、<code>setItem()</code> を用いてその名前をウェブストレージに保存し、その後、実際のウェブサイト上のテキストの更新を扱う <code>nameDisplayCheck()</code> と呼ばれる関数を実行しています。これをコードの末尾に加えてください。</p> + + <pre class="brush: js notranslate">// 'Say hello' ボタンがクリックされたら関数を実行します。 +submitBtn.addEventListener('click', function() { + // 入力された名前をウェブストレージに保存します。 + localStorage.setItem('name', nameInput.value); + // 個人に合わせた挨拶を表示するとともにフォーム表示を更新する + // 措置をとるべく、nameDisplayCheck() を実行します。 + nameDisplayCheck(); +});</pre> + </li> + <li> + <p> この時点で、"Forget" ボタンがクリックされたときに関数を実行するためのイベント・ハンドラーも必要です。"Forget" ボタンは、"Say hello" ボタンがクリックされた後にのみ表示されます (二つのフォーム状態が行ったり来たり切り替わります)。この関数では、<code>removeItem()</code> を用いてウェブストレージから <code>name</code> という項目を削除し、その後、表示を更新するために <code>nameDisplayCheck()</code> を再び実行します。これを末尾に付け加えてください。</p> + + <pre class="brush: js notranslate">// 'Forget' ボタンがクリックされたら関数を実行します。 +forgetBtn.addEventListener('click', function() { + // 保存してある名前をウェブストレージから削除します。 + localStorage.removeItem('name'); + // 再び一般的な挨拶を表示するとともにフォーム表示を更新する + // 措置をとるべく、nameDisplayCheck() を実行します。 + nameDisplayCheck(); +});</pre> + </li> + <li> + <p>さて今や <code>nameDisplayCheck()</code> という関数そのものを定義すべきときです。ここでは、<code>localStorage.getItem('name')</code> を条件テストとして用いることにより、<code>name</code> という項目がウェブストレージに保存済みかどうかを調べます。もし保存済みなら、この呼び出しは <code>true</code> と評価されるでしょう。もし保存済みでなければ、<code>false</code> になるでしょう。もし <code>true</code> なら、個人に合わせた挨拶を表示し、フォームの "forget" の部分を表示し、フォームの "Say hello" の部分を隠します。もし <code>false</code> なら、一般的な挨拶を表示し、逆のことをします (フォームの "forget" の部分を隠し、フォームの "Say hello" の部分を表示します)。またもや末尾に以下のコードを追加してください。</p> + + <pre class="brush: js notranslate">// nameDisplayCheck() という関数を定義します。 +function nameDisplayCheck() { + // 'name' というデータ項目がウェブストレージに保存されているかどうかを調べます。 + if(localStorage.getItem('name')) { + // もし保存されていたら、個人に合わせた挨拶を表示します。 + let name = localStorage.getItem('name'); + h1.textContent = 'Welcome, ' + name; + personalGreeting.textContent = 'Welcome to our website, ' + name + '! We hope you have fun while you are here.'; + // フォームのうち 'remember' の部分を隠し、'forget' の部分を表示します。 + forgetDiv.style.display = 'block'; + rememberDiv.style.display = 'none'; + } else { + // もし保存されていなければ、一般的な挨拶を表示します。 + h1.textContent = 'Welcome to our website '; + personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.'; + // フォームのうち 'forget' の部分を隠し、'remember' の部分を表示します。 + forgetDiv.style.display = 'none'; + rememberDiv.style.display = 'block'; + } +}</pre> + </li> + <li> + <p>最後に、ページがロードされるたびに <code>nameDisplayCheck()</code> という関数を実行せねばなりません。もしそうしなければ、個人に合わせた挨拶は、ページのリロードをまたがってまでは持続しなくなってしまうでしょう。以下のものをコードの末尾に追加してください。</p> + + <pre class="brush: js notranslate">document.body.onload = nameDisplayCheck;</pre> + </li> +</ol> + +<p>例が完成しました。よくできましたね! 現時点で残っているのは、コードを保存して HTML ページをブラウザーでテストすることだけです。<a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html">ライブ実行される完成版をここで</a> 見られます。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">ウェブストレージ API の使用</a> のところには、探究するにはほんの少しだけ更に複雑な別の例もあります。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: 完成版のソースのうち <code><script src="index.js" defer></script></code> という行では、<code>defer</code> 属性により、ページをロードし終わるまでは {{htmlelement("script")}} 要素の中身を実行しないように指定しています。</p> +</div> + +<h2 id="Storing_complex_data_—_IndexedDB" name="Storing_complex_data_—_IndexedDB">複雑なデータを保存する—— IndexedDB</h2> + +<p><a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a> (ときには IDB と省略します) は、ブラウザーで利用可能であり、複雑で関係性のあるデータを保存できる、完全なデータベース・システムです。そしてそのデータの型は、文字列または数値のような単純な値に限定されません。動画や静止画像、そして、その他のものもほとんどすべて、IndexedDB インスタンスに保存できます。</p> + +<p>しかし、これは高くつきます。IndexedDB の使用は、ウェブストレージ API の使用よりも遥かに複雑なのです。本節では、IndexedDB ができることのうち本当に表面的なところに触れるだけですが、始めるのに十分なだけのことは、お伝えしましょう。</p> + +<h3 id="Working_through_a_note_storage_example" name="Working_through_a_note_storage_example">メモ書きの保存の事例を通して作業します</h3> + +<p>ここでは、メモ書きをブラウザーに保存して好きなときにそれを見たり消したりできるようにする事例を、見ていただきましょう。その際、その例は御自分で組み立てていただきますが、進行に合わせて、IDB の最も根本的な部分について御説明します。</p> + +<p>当該アプリは、以下のような見かけをしています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15744/idb-demo.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>メモ書きの各々には題名と何らかの本文があり、題名と本文のそれぞれは別々に編集できます。以下で見てゆく JavaScript コードには、何が起きているのかを理解する手助けとなる詳しいコメントがあります。</p> + +<h3 id="Getting_started" name="Getting_started">始めますよ</h3> + +<ol> + <li>まず、<code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.html">index.html</a></code> と <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/style.css">style.css</a></code> と <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index-start.js">index-start.js</a></code> というファイルのローカルコピーを、ローカルマシンの新規ディレクトリ内に作成してください。</li> + <li>ファイルを見てください。HTML がかなり簡潔なのがお分かりでしょう。これは、ヘッダーとフッターのあるウェブサイトです。また、メモ書きを表示する場所と、データベースに新たなメモ書きを入力するためのフォームとを含む、本文コンテンツ領域もあります。 CSS は、何が起きているのかをより明瞭にするための、ある種の簡素なスタイルづけを提供しています。JavaScript ファイルは、宣言された五つの定数を含んでいます。つまり、 内部にメモ書きを表示することになる {{htmlelement("ul")}} 要素への参照と、題名および本文の {{htmlelement("input")}} 要素への参照と、{{htmlelement("form")}} 自体への参照と、{{htmlelement("button")}} への参照とを含んでいます。</li> + <li>JavaScript ファイルの名前を <code>index.js</code> に変更してください。コードをそこに追加し始める準備がこれで整いました。</li> +</ol> + +<h3 id="Database_initial_set_up" name="Database_initial_set_up">データベースの初期設定</h3> + +<p>では、実際にデータベースを設定するために最初にすべきことを見てみましょう。</p> + +<ol> + <li> + <p>定数の宣言の下に、以下の行を追加してください。</p> + + <pre class="brush: js notranslate">// 開いたデータベースを記憶しておくためのデータベース・オブジェクトのインスタンスを作成します。 +let db;</pre> + + <p>ここでは、<code>db</code> と呼ばれる変数を宣言しています。これは後に、データベースを表すオブジェクトを記憶するのに使われます。この変数を何箇所かで使うつもりなので、物事を容易にするために、ここでこの変数を大域的に宣言しておきました。</p> + </li> + <li> + <p>次に、以下のものをコードの末尾に加えてください。</p> + + <pre class="brush: js notranslate">window.onload = function() { + +};</pre> + + <p>続きのコードはすべて、この <code>window.onload</code> イベント・ハンドラー関数——ウィンドウの {{event("load")}} イベントが発火したときに呼ばれます——の中に書いてゆきます。アプリが完全にロード動作を終えるよりも前には IndexedDB 機能を使おうとはしないよう保証するために、そうしています (もしそう保証しなかったら、失敗する可能性があります)。</p> + </li> + <li> + <p><code>window.onload</code> ハンドラーの中に、以下のものを追加してください。</p> + + <pre class="brush: js notranslate">// データベースを開きます。データベースは、まだ存在していない場合には +// 新規作成されます (後述の onupgradeneeded を参照)。 +let request = window.indexedDB.open('notes', 1);</pre> + + <p>この行では、<code>notes</code> と呼ばれるデータベースのバージョン <code>1</code> を開く <code>request</code> (要求) を作成します。もしそのデータベースがまだ存在しなければ、後述のコードによって新規作成されます。IndexedDB の全体を通じて、この要求パターンが非常に高頻度で使われることが、いずれお分かりになるでしょう。データベース操作には時間がかかります。その結果を待つ間、ブラウザーをハングさせることはお望みでないでしょうから、データベース操作は {{Glossary("asynchronous")}} (非同期) となっています。このことが意味するのは、結果は直ちに生じるのではなく、将来のいずれかの時点で生じるだろうということ、および、結果が出たときには通知されるということです。</p> + + <p>こういったことを IndexedDB で扱うために、要求オブジェクト (何とでも好きなように呼んで構いませんが、何を目的としたものなのかが明白になるので、<code>request</code> (要求) と呼んでおきました) を作成します。それから、要求が完了する、失敗する、などの際にコードを実行するために、いくつかのイベント・ハンドラーを使います。この点については、使用されているところを後で見ることになります。</p> + + <div class="note"> + <p><strong>注</strong>: バージョン番号は重要です。(たとえばテーブル構造を変更することによって) データベースをアップグレードしたい場合には、上げたバージョン番号や、<code>onupgradeneeded</code> ハンドラー (下記参照) の内部で指定される別のスキーマなどを使って、コードを再度実行せねばなりません。この簡単なチュートリアルでは、データベースのアップグレードは扱いません。</p> + </div> + </li> + <li> + <p>さて今度は、前に追加した分のすぐ下に、以下のイベント・ハンドラーを追加してください。今度もまた、<code>window.onload</code> ハンドラーの中への追加です。</p> + + <pre class="brush: js notranslate">// onerror ハンドラーは、データベースがうまく開けなかったことを意味します。 +request.onerror = function() { + console.log('Database failed to open'); +}; + +// onsuccess ハンドラーは、データベースがうまく開けたことを意味します。 +request.onsuccess = function() { + console.log('Database opened successfully'); + + // 開いたデータベース・オブジェクトを、db という変数に記憶します。この変数は、以下でたくさん使われます。 + db = request.result; + + // IDB 内の既存のメモ書きを表示するために、displayData() 関数を実行します。 + displayData(); +};</pre> + + <p>要求は失敗した、と伝えつつシステムが戻ってくる場合には、{{domxref("IDBRequest.onerror", "request.onerror")}} というハンドラーが実行されます。これによって、(要求が失敗したという) この問題に対処できるようになります。この簡単な例では、単に JavaScript コンソールにメッセージを印字します。</p> + + <p>他方、{{domxref("IDBRequest.onsuccess", "request.onsuccess")}} ハンドラーは、要求が成功裡に戻ってくる場合、つまりデータベースをうまく開けた場合に、実行されます。この場合、開いたデータベースを表すオブジェクトが、{{domxref("IDBRequest.result", "request.result")}} というプロパティで利用可能となります。それにより、データベースを操作できるようになります。後で使うために、と事前に作っておいた <code>db</code> という変数に、このオブジェクトを保存します。また、<code>displayData()</code> と呼ばれるカスタム関数も実行します。この関数は、データベース内のデータを {{HTMLElement("ul")}} 内部に表示します。すでにデータベース内にあるメモ書きが、ページがロードされ次第すぐに表示されるように、ここでこの関数を実行しています。この関数を定義する様子は、後で見ることにしましょう。</p> + </li> + <li> + <p>本節の最後では、データベースを設定するためには多分もっとも重要なイベント・ハンドラーを追加しましょう。つまり、{{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupgradeneeded")}} です。このハンドラーは、データベースがまだ設定されていなかった場合、あるいは、保存済みの既存のデータベースよりも上のバージョン番号でデータベースが開かれた場合 (アップグレードを行う場合) に、実行されます。前のハンドラーの下に、以下のコードを追加してください。</p> + + <pre class="brush: js notranslate">// これがまだ実行されていない場合に、データベースのテーブルを設定します。 +request.onupgradeneeded = function(e) { + // 開いたデータベースに対する参照を求めます。 + let db = e.target.result; + + // 自動的にインクリメントするキーを含んでおり、メモ書きを中に保存するための + // (基本的に一つのテーブルに類似した) objectStore を、作成します。 + let objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement:true }); + + // objectStore が含むことになるデータ項目を定義します。 + objectStore.createIndex('title', 'title', { unique: false }); + objectStore.createIndex('body', 'body', { unique: false }); + + console.log('Database setup complete'); +};</pre> + + <p>ここは、データベースのスキーマ (構造) ——すなわち、データベースが含む列 (ないしフィールド) の集合——を定義している箇所です。ここではまず、<code>e.target.result</code> (イベント・ターゲットの <code>result</code> というプロパティ) から、既存のデータベースへの参照を求めていますが、これ (<code>e.target</code> というイベント・ターゲット) は、<code>request</code> というオブジェクトです。この行は、<code>onsuccess</code> ハンドラーの中の <code>db = request.result;</code> という行と等価です。しかし、それとは別に、ここでこのようにする必要があります。なぜなら、<code>onupgradeneeded</code> ハンドラーは、(もし必要な場合には) <code>onsuccess</code> ハンドラーよりも前に実行されることになる——つまり、もしここでこのようにしておかなければ、<code>db</code> の値を利用できない——からです。</p> + + <p>それから、{{domxref("IDBDatabase.createObjectStore()")}} を用いて、開いたデータベースの内部に新たなオブジェクト・ストアを作成します。これは、従来のデータベース・システムにおける一つのテーブルと等価です。このオブジェクト・ストアには <code>notes</code> という名前をつけました。また、<code>id</code> と呼ばれる <code>autoIncrement</code> キーのフィールドも指定しました。新規レコードの各々において、このフィールドには、インクリメントされた値が自動的に与えられ、開発者は、このフィールドを明示的に設定する必要がありません。キーであるがゆえに、<code>id</code> フィールドは、たとえばレコードを削除または表示する際に、レコードを一意に識別するのに使われることでしょう。</p> + + <p>{{domxref("IDBObjectStore.createIndex()")}} メソッドを用いて、別の二つのインデックス (フィールド) も作成します。すなわち、<code>title</code> (それぞれのメモ書きの題名を含むことになります) と、<code>body</code> (そのメモ書きの本文を含むことになります) を作成します。</p> + </li> +</ol> + +<p>以上のようにこの簡素なデータベース・スキーマを設定したので、データベースにレコードを追加し始めれば、それぞれのレコードは、以下の行のようなオブジェクトとして表現されることでしょう。</p> + +<pre class="brush: js notranslate">{ + title: "Buy milk", + body: "Need both cows milk and soy.", + id: 8 +}</pre> + +<h3 id="Adding_data_to_the_database" name="Adding_data_to_the_database">データをデータベースに追加します</h3> + +<p>それでは、どのようにしたらデータベースにレコードを追加できるか、その方法を見てみましょう。これは、ページ上のフォームを使って行われます。</p> + +<p>前のイベント・ハンドラーの下に (ただし、やはり <code>window.onload</code> ハンドラーの内部に)、 以下の行を追加してください。以下の行では、フォームが送信された際に (送信 {{htmlelement("button")}} が押され、成功したフォーム送信、という結果に至ったときに)、<code>addData()</code> と呼ばれる関数を実行する、<code>onsubmit</code> ハンドラーを設定しています。</p> + +<pre class="brush: js notranslate">// フォームが送信されたときに addData() 関数が実行されるように、onsubmit ハンドラーを作成します。 +form.onsubmit = addData;</pre> + +<p>では、<code>addData()</code> 関数を定義しましょう。上記の行の下に、以下のものを追加してください。</p> + +<pre class="brush: js notranslate">// addData() 関数を定義します。 +function addData(e) { + // デフォルト動作を防止します。従来通りの方法でフォームを送信したくはないからです。 + e.preventDefault(); + + // フォーム・フィールドに入力された値を求めます。そして、それらの値を、データベースへ挿入すべく準備してあるオブジェクトに保存します。 + let newItem = { title: titleInput.value, body: bodyInput.value }; + + // 読み書きのデータベース・トランザクションを開いて、データの追加に備えます。 + let transaction = db.transaction(['notes'], 'readwrite'); + + // データベースに追加済みのオブジェクト・ストアを呼び出します。 + let objectStore = transaction.objectStore('notes'); + + // newItem というオブジェクトをオブジェクト・ストアに追加するための要求を作ります。 + let request = objectStore.add(newItem); + request.onsuccess = function() { + // フォームをクリアして、次のエントリーの追加に備えます。 + titleInput.value = ''; + bodyInput.value = ''; + }; + + // すべてが済んだら、完了するトランザクションの成功を報告します。 + transaction.oncomplete = function() { + console.log('Transaction completed: database modification finished.'); + + // displayData() を再度実行することによって、データの表示を更新して、新たに追加した項目を表示します。 + displayData(); + }; + + transaction.onerror = function() { + console.log('Transaction not opened due to error'); + }; +}</pre> + +<p>これは割と複雑ですね。噛み砕くと、以下の通りです。</p> + +<ul> + <li>フォームが実際に従来通りの方法で送信してしまうこと (これはページ・リフレッシュを引き起こし、体験をそこなうでしょう) を防ぐために、イベント・オブジェクトに対して {{domxref("Event.preventDefault()")}} を実行します。</li> + <li>データベースに入力すべきレコードを表すオブジェクトを作成します。その際、そのオブジェクトには、フォーム入力からの値を埋め込みます。<code>id</code> の値を明示的に含める必要がないことに注意してください。以前説明したとおり、これは自動的に埋め込まれます。</li> + <li>{{domxref("IDBDatabase.transaction()")}} メソッドを用いて、<code>notes</code> というオブジェクト・ストアに対する<code>readwrite</code> (読み書き) トランザクションを開きます。このトランザクション・オブジェクトのおかげでオブジェクト・ストアにアクセスできるようになり、オブジェクト・ストアに対して何か——たとえば新規レコードの追加など——を行えるようになります。</li> + <li>{{domxref("IDBTransaction.objectStore()")}}メソッドを用いてオブジェクト・ストアにアクセスし、その結果を <code>objectStore</code> という変数に保存します。</li> + <li> {{domxref("IDBObjectStore.add()")}} を用いて、データベースに新規レコードを追加します。これは、以前見たのと同様の方法で、要求オブジェクトを作り出します。</li> + <li>ライフサイクル内での重大な時点 (クリティカル・ポイント) においてコードを実行するために、<code>request</code> (要求) と <code>transaction</code> (トランザクション) に対する一群のイベント・ハンドラーを追加します。要求が成功したら、次のメモ書きの入力に備えてフォーム入力をクリアします。トランザクションが完了したら、ページ上のメモ書きの表示を更新するために、<code>displayData()</code> 関数を再び実行します。</li> +</ul> + +<h3 id="Displaying_the_data" name="Displaying_the_data">データを表示します</h3> + +<p>すでにコード内で <code>displayData()</code> を二度も参照したからには、多分これを定義すべきでしょうね。以下のものをコードに (今までの関数定義の下に) 追加してください。</p> + +<pre class="brush: js notranslate">// displayData() 関数を定義します。 +function displayData() { + // ここでは、表示を更新するたびにリスト要素の中身を空にします。 + // もしこのようにしなかったら、新たなメモ書きを追加するたびに複製を列挙する羽目になるでしょう。 + while (list.firstChild) { + list.removeChild(list.firstChild); + } + + // オブジェクト・ストアを開き、それから、カーソルを取得します。 + // カーソルは、ストア内の異なるデータ項目のすべてにわたって反復処理を行うものです。 + let objectStore = db.transaction('notes').objectStore('notes'); + objectStore.openCursor().onsuccess = function(e) { + // カーソルへの参照を求めます。 + let cursor = e.target.result; + + // 反復処理を行うべき別のデータ項目がまだあれば、このコードを実行し続けます。 + if(cursor) { + // 各データ項目を表示する際にそのデータ項目を中に入れるための、リスト項目と h3 と p とを作成します。 + // HTML 断片を組み立てて、それをリスト内の最後に追加します。 + const listItem = document.createElement('li'); + const h3 = document.createElement('h3'); + const para = document.createElement('p'); + + listItem.appendChild(h3); + listItem.appendChild(para); + list.appendChild(listItem); + + // h3 および para の内部に、カーソルからのデータを入れます。 + h3.textContent = cursor.value.title; + para.textContent = cursor.value.body; + + // listItem の属性内部に、このデータ項目の ID を保存します。こうすると、 + // listItem がどの項目に対応しているのかがわかります。これは、後で項目を削除したくなったときに有用です。 + listItem.setAttribute('data-note-id', cursor.value.id); + + // ボタンを作成し、それを各 listItem の内部に設置します。 + const deleteBtn = document.createElement('button'); + listItem.appendChild(deleteBtn); + deleteBtn.textContent = 'Delete'; + + // ボタンがクリックされたら deleteItem() 関数が実行されるように、 + // イベント・ハンドラーを設定します。 + deleteBtn.onclick = deleteItem; + + // カーソルにおける次の項目へと反復処理を進めます。 + cursor.continue(); + } else { + // またもや、リスト項目が空であれば、'No notes stored' (メモ書きは何も保存されていません) というメッセージを表示します。 + if(!list.firstChild) { + const listItem = document.createElement('li'); + listItem.textContent = 'No notes stored.'; + list.appendChild(listItem); + } + // 反復処理をすべきカーソル項目がこれ以上ない場合、そのように示します。 + console.log('Notes all displayed'); + } + }; +}</pre> + +<p>再びになりますが、これを噛み砕いてみましょう。</p> + +<ul> + <li>まず、更新した中身を埋め込む前に、{{htmlelement("ul")}} 要素の中身を空っぽにします。これを行わないと、遂には、更新のたびに追加された複製された中身からなる巨大なリストができあがってしまいます。</li> + <li>次に、{{domxref("IDBDatabase.transaction()")}} と {{domxref("IDBTransaction.objectStore()")}} を用いて、<code>addData()</code> で行ったのと同様にして (ただしここではこれらを繋いで 1 行にまとめている点が異なりますが)、<code>notes</code> というオブジェクト・ストアへの参照を求めます。</li> + <li>次の段階は、{{domxref("IDBObjectStore.openCursor()")}} メソッドを使って、カーソルに対する要求を開くことです。カーソルとは、オブジェクト・ストア内の全レコードにわたって反復処理を行うのに使える構造体です。コードをより簡潔にするために、この行の最後に <code>onsuccess</code> ハンドラーを繋げています。カーソルが成功裡に返されると、このハンドラーが実行されます。</li> + <li><code>let cursor = e.target.result</code> を用いて、カーソル自体 ({{domxref("IDBCursor")}} オブジェクト) に対する参照を求めています。</li> + <li>次に、カーソルがデータストアのレコードを含むか否かを調べます (<code>if(cursor){ ... }</code>)。もし含むなら、DOM 断片を作成し、その断片にレコードのデータを埋め込み、ページ内に (<code><ul></code> 要素の内部に) その断片を挿入します。また、クリックされたら <code>deleteItem()</code> 関数を実行することによって当該メモ書きを削除するような削除ボタンも含めておきます。この関数は、次の節で見ることにします。</li> + <li><code>if</code> ブロックの最後では、{{domxref("IDBCursor.continue()")}} メソッドを用いてカーソルをデータストア内の次のレコードへと進め、<code>if</code> ブロックの中身を再び実行します。反復処理をすべき別のレコードがある場合には、こうすることにより、その別のレコードがページに挿入されることになり、その後また <code>continue()</code> が実行され、以下同様に続きます。</li> + <li>反復処理をすべき対象のレコードがもうない場合、<code>cursor</code> は <code>undefined</code> を返すことになります。よって、<code>if</code> ブロックの代わりに <code>else</code> ブロックが実行されることになります。このブロックでは、<code><ul></code> に何らかのメモ書きが挿入されたかどうかを調べます。もし何も挿入されていなければ、何もメモ書きが保存されていなかった旨を述べるメッセージを挿入します。</li> +</ul> + +<h3 id="Deleting_a_note" name="Deleting_a_note">メモ書きを削除します</h3> + +<p>上述のとおり、メモ書きの削除ボタンが押されると、そのメモ書きは削除されます。これは、<code>deleteItem()</code> 関数により達成されます。この関数は以下のようなものです。</p> + +<pre class="brush: js notranslate">// deleteItem() 関数を定義します。 +function deleteItem(e) { + // 削除したいタスクの名前 (訳注: ID の間違い?) を取り出します。 + // それを IDB で使おうとする前に、数値に変換する必要があります。 + // IDB のキーの値には、型による区別があるのです。 + let noteId = Number(e.target.parentNode.getAttribute('data-note-id')); + + // データベース・トランザクションを開き、当該タスクを削除します。その際、上記で取得した ID を用いて、当該タスクを見つけます。 + let transaction = db.transaction(['notes'], 'readwrite'); + let objectStore = transaction.objectStore('notes'); + let request = objectStore.delete(noteId); + + // データ項目を削除したことを報告します。 + transaction.oncomplete = function() { + // ボタンの親——リスト項目——を削除します。 + // すると、それはもはや表示されなくなります。 + e.target.parentNode.parentNode.removeChild(e.target.parentNode); + console.log('Note ' + noteId + ' deleted.'); + + // 再びになりますが、リスト項目が空の場合は、'No notes stored' (メモ書きは何も保存されていません) というメッセージを表示します。 + if(!list.firstChild) { + let listItem = document.createElement('li'); + listItem.textContent = 'No notes stored.'; + list.appendChild(listItem); + } + }; +}</pre> + +<ul> + <li>これの最初の部分は説明を要します。 <code>Number(e.target.parentNode.getAttribute('data-note-id'))</code> を用いて、削除すべきレコードの ID を取り出します。レコードの ID は、最初にその <code><li></code> が表示された際にその <code><li></code> の <code>data-note-id</code> という属性に保存されている、ということを思い出してください。しかし、その属性は、 <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number">Number()</a> というグローバル・ビルトイン・オブジェクトを通じて渡す必要があります。なぜなら、属性は今のところ文字列であり、こうしなければデータベースに認識されないからです。</li> + <li>それから、以前に見たのと同じパターンを使って、オブジェクト・ストアへの参照を求めます。そして、{{domxref("IDBObjectStore.delete()")}} メソッドを用いて、データベースから当該レコードを削除します。その際、データベースには ID を渡します。</li> + <li>データベース・トランザクションが完了したら、当該メモ書きの <code><li></code> を DOM から削除します。そして再び、<code><ul></code> が現時点で空かどうかを調べ、適宜注記を挿入します。</li> +</ul> + +<p>さあ、これで全部終わりです! あなたの例は今やちゃんと動くはずですよ。</p> + +<p>もし問題があれば、気軽に <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/notes/">ライブ例と突き合わせてみてください</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.js">ソースコード</a> も参照してください)。</p> + +<h3 id="Storing_complex_data_via_IndexedDB" name="Storing_complex_data_via_IndexedDB">IndexedDB を通じて複雑なデータを保存します</h3> + +<p>上述のとおり、IndexedDB は、単純なテキスト文字列以上のものを保存するのに使えます。望むものはほとんど何でも——動画や静止画像のブロブ (blob) のような、複雑なオブジェクトまで含めて——保存できるのです。しかも、他のどの型のデータと比べても、達成するのがずっと困難だという訳でもないのです。</p> + +<p>やり方を実演するために、<a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/indexeddb/video-store">IndexedDB 動画ストア</a> と呼ばれる別の例を書きました (<a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/video-store/">ここでライブで動いているところも</a> 参照してください)。この例を最初に実行すると、すべての動画をネットワークからダウンロードして IndexedDB データベースに保存し、それから、{{htmlelement("video")}} 要素内部の UI の中に動画を表示します。二度目に実行すると、動画を表示する前に、データベース内の動画を見つけ出し、(ネットワークからダウンロードする) 代わりにそこから動画を取ってきます。こうすることにより、後続のロードは高速化され、帯域幅をあまり食わなくなります。</p> + +<p>この例のもっとも興味深い部分を見て回りましょう。すべては見ないことにします。というのも、多くの部分は前の例に類似しており、コードにはちゃんとコメントがつけてありますから。</p> + +<ol> + <li> + <p>この単純な例のために、取得すべき動画の名前をオブジェクトの配列の形で保存しておきました。</p> + + <pre class="brush: js notranslate">const videos = [ + { 'name' : 'crystal' }, + { 'name' : 'elf' }, + { 'name' : 'frog' }, + { 'name' : 'monster' }, + { 'name' : 'pig' }, + { 'name' : 'rabbit' } +];</pre> + </li> + <li> + <p>まずはじめに、データベースを成功裡に開くことができたら、<code>init()</code> 関数を実行します。これは、異なる動画の名前をループしてゆきますが、その際、それぞれの名前で識別されるレコードを <code>videos</code> というデータベースからロードしようと試みます。</p> + + <p>各々の動画がデータベース内で見つかったら (これは、<code>request.result</code> が <code>true</code> と評価されるかどうかを調べることにより、容易に確認できます。もしレコードが存在しなければ、<code>undefined</code> となります)、その動画ファイル (ブロブとして保存されています) および動画の名前が、UI に配置するために、すぐに <code>displayVideo()</code> 関数へと渡されます。もし動画がデータベース内で見つからなければ、動画の名前が <code>fetchVideoFromNetwork()</code> 関数に渡されます。それが何のためか、見当がついていることでしょうが……そう、その動画をネットワークから取ってくるためです。</p> + + <pre class="brush: js notranslate">function init() { + // 動画の名前を一つずつループしてゆきます。 + for(let i = 0; i < videos.length; i++) { + // トランザクションを開き、オブジェクト・ストアを取得し、名前によって各動画を get() します。 + let objectStore = db.transaction('videos').objectStore('videos'); + let request = objectStore.get(videos[i].name); + request.onsuccess = function() { + // もし結果がデータベース内に存在したら (存在しなければ undefined)、 + if(request.result) { + // displayVideo() を用いて、動画を IDB から取り出して表示します。 + console.log('taking videos from IDB'); + displayVideo(request.result.mp4, request.result.webm, request.result.name); + } else { + // 動画をネットワークから取ってきます。 + fetchVideoFromNetwork(videos[i]); + } + }; + } +}</pre> + </li> + <li> + <p>以下のスニペットは、<code>fetchVideoFromNetwork()</code> の内部から取ったものです。ここでは、二つの別々の {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}} 要求を用いて、MP4 版の動画と WebM 版の動画を取ってきます。それから、{{domxref("blob()", "Body.blob()")}} メソッドを用いて、それぞれの応答の本体をブロブとして抽出します。このブロブは、保存して後で表示することの可能な、動画のオブジェクト表現を与えてくれます。</p> + + <p>しかし、ここで問題があります。これらの二つの要求はどちらも非同期的なのですが、双方のプロミスが成立 (fulfill) した場合にだけ動画を表示もしくは保存しようと試みたいのです。幸い、そうした問題を扱うビルトイン・メソッドがあります。すなわち {{jsxref("Promise.all()")}} です。これは一つの引数——成立したかどうかを調べたい個々のプロミスすべてに対する参照を配列に入れたもの——をとり、これ自体がプロミスに基づいています。</p> + + <p>それらのプロミスすべてが成立したら、成立した個々の値すべてを含む配列をともなって、<code>all()</code> プロミスも成立します。<code>all()</code> のブロック内部では、以前 UI に動画を表示するために行ったのと同様にして <code>displayVideo()</code> 関数を呼び出していること、そして、それらの動画をデータベース内に保存するために <code>storeVideo()</code> 関数も呼び出していることが、お分かりでしょう。</p> + + <pre class="brush: js notranslate">let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response => + response.blob() +); +let webmBlob = fetch('videos/' + video.name + '.webm').then(response => + response.blob() +); + +// 双方のプロミスが成立したときのみ、次のコードを実行します。 +Promise.all([mp4Blob, webmBlob]).then(function(values) { + // ネットワークから取ってきた動画を、displayVideo() により表示します。 + displayVideo(values[0], values[1], video.name); + // storeVideo() を用いて、その動画を IDB に保存します。 + storeVideo(values[0], values[1], video.name); +});</pre> + </li> + <li> + <p>まず <code>storeVideo()</code> を見ましょう。これは、データベースにデータを追加するための上記の例で見たパターンに、とてもよく似ています。つまり、<code>readwrite</code> (読み書き) トランザクションを開き、<code>videos</code> に対するオブジェクト・ストア参照を求め、データベースに追加すべきレコードを表すオブジェクトを作成し、それから、{{domxref("IDBObjectStore.add()")}} を用いてそのオブジェクトを単純に追加しています。</p> + + <pre class="brush: js notranslate">function storeVideo(mp4Blob, webmBlob, name) { + // トランザクションを開き、オブジェクト・ストアを求めます。IDB に書き込めるようにするために、これは読み書きトランザクションにしておきます。 + let objectStore = db.transaction(['videos'], 'readwrite').objectStore('videos'); + // IDB に追加するレコードを作成します。 + let record = { + mp4 : mp4Blob, + webm : webmBlob, + name : name + } + + // add() を使ってレコードを IDB に追加します。 + let request = objectStore.add(record); + + ... + +};</pre> + </li> + <li> + <p>最後に、<code>displayVideo()</code> があります。これは、UI に動画を挿入するのに必要な DOM 要素を作成してから、それらの DOM 要素をページに追加します。これの一番面白い部分は、以下に示した箇所です。<code><video></code> 要素内に動画ブロブを実際に表示するには、{{domxref("URL.createObjectURL()")}} メソッドを使って、オブジェクト URL (メモリに記憶されている動画ブロブを指し示す内部 URL) を作成せねばならないのです。それが済んだら、オブジェクト URL を {{htmlelement("source")}} 要素の <code>src</code> 属性の値として設定できて、物事がうまく機能します。</p> + + <pre class="brush: js notranslate">function displayVideo(mp4Blob, webmBlob, title) { + // ブロブからオブジェクト URL を作成します。 + let mp4URL = URL.createObjectURL(mp4Blob); + let webmURL = URL.createObjectURL(webmBlob); + + ... + + const video = document.createElement('video'); + video.controls = true; + const source1 = document.createElement('source'); + source1.src = mp4URL; + source1.type = 'video/mp4'; + const source2 = document.createElement('source'); + source2.src = webmURL; + source2.type = 'video/webm'; + + ... +}</pre> + </li> +</ol> + +<h2 id="Offline_asset_storage" name="Offline_asset_storage">オフラインでの資産の保存</h2> + +<p>上記の例は、IndexedDB データベース内に大規模な資産を保存するアプリの作り方を既に示しており、こうすることで、それらの大規模な資産を二度以上ダウンロードする必要性をなくしています。これは既にユーザー体験にとっての多大なる進歩ではありますが、まだ一つ欠けていることがあります。すなわち、依然として、主たる HTML と CSS と JavaScript のファイルを、サイトにアクセスするたびにダウンロードせねばならないのです。これが意味することは、ネットワーク接続がない場合にはサイトが動作しないということです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15759/ff-offline.png" style="border-style: solid; border-width: 1px; display: block; height: 307px; margin: 0px auto; width: 765px;"></p> + +<p>ここは、 <a href="/ja/docs/Web/API/Service_Worker_API">サービスワーカー</a> およびそれと緊密に関連した <a href="/ja/docs/Web/API/Cache">キャッシュ API</a> の出番です。</p> + +<p>サービスワーカーとは、ただ単に置いてあって、特定のオリジン (ウェブサイト、または、あるドメインにあるウェブサイトの一部) に対して、そこにブラウザでアクセスした際に登録される、JavaScript ファイルのことです。登録されれば、サービスワーカーは、当該オリジンで利用可能なページを制御できます。サービスワーカーは、ロードされたページとネットワークとの間に位置して、当該オリジン宛のネットワーク要求を横取りすることにより、こうした制御を行います。</p> + +<p>サービスワーカーが要求を横取りすると、その要求に対して望むことは何でも行えますが (<a href="/ja/docs/Web/API/Service_Worker_API#Other_use_case_ideas">使用例の案</a> を参照)、典型例では、ネットワーク応答をオフラインに保存しており、その後、要求に応じて、ネットワークからの応答の代わりに、保存してあるそれらの応答を提供しています。これによって事実上、ウェブサイトを完全にオフラインで機能させることが可能になります。</p> + +<p>キャッシュ API は、クライアント側での保存のもう一つの仕組みですが、これにはちょっとした相違点があります。キャッシュ API は HTTP 応答を保存するように設計されているのです。そのため、サービスワーカーと一緒に使うと、とてもうまく機能します。</p> + +<div class="note"> +<p><strong>注</strong>: サービスワーカーとキャッシュは、現在、ほとんどのモダン・ブラウザーでサポートされています。執筆時点では、Safari はまだ実装するのに忙しかったのですが、もうすぐサポートされるはずです。</p> +</div> + +<h3 id="A_service_worker_example" name="A_service_worker_example">サービスワーカーの例</h3> + +<p>これがどのような感じなのかについて少しばかりお教えするために、例を見ましょう。前節で見た動画ストアの例の、別のバージョンを作っておきました。このバージョンは、サービスワーカーを介してキャッシュ API で HTML と CSS と JavaScript も保存する点を除いて、同等に機能しますが、この点のおかげで、この例がオフラインで実行できるようになるのです!</p> + +<p><a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">サービスワーカーを用いた IndexedDB 動画ストアがライブで実行中のところ</a> をご覧ください。また、<a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/cache-sw/video-store-offline">ソースコードも参照してください</a>。</p> + +<h4 id="Registering_the_service_worker" name="Registering_the_service_worker">サービスワーカーを登録します</h4> + +<p>注意すべき第一の点は、主たる JavaScript ファイル中に追加のコードが少々ある点です (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js">index.js</a> を参照)。まず、{{domxref("Navigator")}} オブジェクトにおいて <code>serviceWorker</code> メンバーが利用可能かどうかを調べる機能検出検査を行います。もしこれが true を返したら、サービスワーカーの少なくとも基本部分がサポートされていることが分かります。ここの内部では、{{domxref("ServiceWorkerContainer.register()")}} メソッドを用いて、<code>sw.js</code> ファイルに含まれるサービスワーカーを、このファイルのあるオリジンに対して登録します。すると、同一ディレクトリまたは下位ディレクトリにあるページを制御できるようになります。このメソッドのプロミスが成立すると、サービスワーカーは登録されたものと見なされます。</p> + +<pre class="brush: js notranslate"> // サイトがオフラインで動くようにする処理を制御するために、サービスワーカーを登録します。 + + if('serviceWorker' in navigator) { + navigator.serviceWorker + .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js') + .then(function() { console.log('Service Worker Registered'); }); + }</pre> + +<div class="note"> +<p><strong>注</strong>: <code>sw.js</code> ファイルに至るまでの、与えられたパスは、サイト・オリジンに対して相対的なのであり、上記コードを含む JavaScript ファイルに対して相対的なのではありません。サービスワーカーは <code>https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js</code> にあります。オリジンは <code>https://mdn.github.io</code> です。よって、与えられるパスは、<code>/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js</code> でなくてはなりません。もしこの例を御自分のサーバーにホストしたいとお思いでしたら、それに合わせて、ここを変更せねばなりません。これはやや混乱を招くところですが、セキュリティ上の理由から、この方法で動作する必要があるのです。</p> +</div> + +<h4 id="Installing_the_service_worker" name="Installing_the_service_worker">サービスワーカーをインストールします</h4> + +<p>サービスワーカーの制御下にあるいずれかのページが次にアクセスされた際には (たとえば、この例がリロードされたときには)、サービスワーカーがそのページに対してインストールされます。それが意味することは、サービスワーカーがそのページを制御し始めるだろう、ということです。これが起きると、サービスワーカーに対して <code>install</code> イベントを発火させます。サービスワーカー自体の内部には、当該インストールに応じるコードを書くことができます。</p> + +<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js">sw.js</a> ファイル (サービスワーカー) 内の例を見てみましょう。<code>self</code> に対して <code>install</code> リスナーが登録されるのがお分かりでしょう。この <code>self</code> というキーワードは、サービスワーカー・ファイルの内部からサービスワーカーのグローバル・スコープを参照する手段です。</p> + +<p><code>install</code> ハンドラーの内部では、{{domxref("ExtendableEvent.waitUntil()")}}メソッド——イベント・オブジェクト上で使えます——を用いて、当メソッドの内部のプロミスが成功して成立するまではブラウザーはサービスワーカーのインストールを完了させるべきではない、と知らせます。</p> + +<p>ここは、キャッシュ API が動作しているのが見られる箇所です。応答を保存できる新規キャッシュ・オブジェクト (IndexedDB オブジェクト・ストアと似ています) を開くために、{{domxref("CacheStorage.open()")}} メソッドを使います。このプロミスは、<code>video-store</code> というキャッシュを表現する {{domxref("Cache")}} オブジェクトをともなって成立します。その後、一連の資源を取ってきて、その応答をキャッシュに追加するために、{{domxref("Cache.addAll()")}} メソッドを使います。</p> + +<pre class="brush: js notranslate">self.addEventListener('install', function(e) { + e.waitUntil( + caches.open('video-store').then(function(cache) { + return cache.addAll([ + '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/', + '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html', + '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js', + '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css' + ]); + }) + ); +});</pre> + +<p>さて、これで終わりです。インストールが済みました。</p> + +<h4 id="Responding_to_further_requests" name="Responding_to_further_requests">さらなる要求に応答します</h4> + +<p>HTML ページに対してサービスワーカーが登録されてインストールされ、関連する資産がすべてキャッシュに追加されれば、ほぼ開始準備が整っています。すべきことは、あと一つだけです。つまり、さらなるネットワーク要求に応答するための何らかのコードを書くことです。</p> + +<p><code>sw.js</code> における第二のちょっとしたコードがしていることは、こうです。すなわち、サービスワーカーのグローバル・スコープにもう一つのリスナーを追加し、これにより、<code>fetch</code> イベントが生じたときにハンドラー関数を実行します。このイベントは、サービスワーカーの登録先のディレクトリ内の資産に対してブラウザーが要求を出す際には、いつでも生じます。</p> + +<p>ハンドラーの内部では、要求された資産の URL をまず記録します。それから、{{domxref("FetchEvent.respondWith()")}} メソッドを使って、その要求に対するカスタム応答を提供します。</p> + +<p>このブロックの内部では、{{domxref("CacheStorage.match()")}} を用いて、マッチング要求 (URL にマッチします) がいずれかのキャッシュの中に見つかるかどうかを調べます。このプロミスは、マッチが見つからなければ (訳注: 正しくは「見つかれば」?) そのマッチする応答をともなって成立し、マッチが見つからなければ <code>undefined</code> となります。</p> + +<p>もしマッチが見つかれば、単純にそれをカスタム応答として返します。もしマッチが見つからなければ、代わりに、ネットワークから応答を <a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a> して、それを返します。</p> + +<pre class="brush: js notranslate">self.addEventListener('fetch', function(e) { + console.log(e.request.url); + e.respondWith( + caches.match(e.request).then(function(response) { + return response || fetch(e.request); + }) + ); +});</pre> + +<p>これで私たちの単純なサービスワーカーは終わりです。サービスワーカーを使ってできる、もっと多くのことがありますが、より詳しくは、<a href="https://serviceworke.rs/">service worker cookbook</a> を参照してください。また、<a href="https://developers.google.com/web/fundamentals/codelabs/offline/">ウェブアプリへの Service Worker とオフラインの追加</a> という記事について、著者の Paul Kinlan さんに感謝します。あの記事のおかげで、この単純な例の着想を得られました。</p> + +<h4 id="Testing_the_example_offline" name="Testing_the_example_offline">この例をオフラインで試します</h4> + +<p><a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">サービスワーカー の例</a> を試すには、それが確実にインストールされるように、二、三度ロードする必要があるでしょう。それが済んだら、以下のことができます。</p> + +<ul> + <li>ネットワーク接続ケーブルを抜いてみましょう。あるいは、Wi-Fi を切ってみましょう。</li> + <li>Firefox を使っているなら、[ファイル] > [オフライン作業] を選択してください。</li> + <li>Chrome を使っているなら、[デベロッパーツール] へ進み、 [<em>Application] > [Service Workers]</em> を選び、それから、[<em>Offline] </em>のチェックボックスをチェックしてください。</li> +</ul> + +<p>この例のページをもう一度リフレッシュすれば、当該ページが依然として、まさに申し分なくロードされているところを見ることになるはずです。あらゆるものがオフラインに保存されています。すなわち、ページ資産はキャッシュに保存されており、動画は IndexedDB データベースに保存されています。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>これで終わりです。クライアント側での保存の技術についてのこの概要を、皆さんが有用だと思ってくださったのであれば良いな、と望んでいます。</p> + +<h2 id="See_also" name="See_also">あわせて参照</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Web_Storage_API">Web storage API</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a></li> + <li><a href="/ja/docs/Web/HTTP/Cookies">Cookies</a></li> + <li><a href="/ja/docs/Web/API/Service_Worker_API">Service worker API</a></li> +</ul> + +<p>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<div> +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">ドキュメントの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">グラフィックの描画</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側ストレージ</a></li> +</ul> +</div> diff --git a/files/ja/learn/javascript/client-side_web_apis/drawing_graphics/index.html b/files/ja/learn/javascript/client-side_web_apis/drawing_graphics/index.html new file mode 100644 index 0000000000..86c19aa6bb --- /dev/null +++ b/files/ja/learn/javascript/client-side_web_apis/drawing_graphics/index.html @@ -0,0 +1,879 @@ +--- +title: グラフィックの描画 +slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics +tags: + - API + - Article + - Beginner + - Canvas + - CodingScripting + - Graphics + - JavaScript + - Learn + - WebGL +translation_of: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">ブラウザーには Scalable Vector Graphics (<a href="/ja/docs/Web/SVG">SVG</a>) 言語から、HTML {{htmlelement("canvas")}} 要素へ描画するための API (<a href="/ja/docs/Web/API/Canvas_API">The Canvas API</a> と <a href="/ja/docs/Web/API/WebGL_API">WebGL</a> を参照) まで、非常に強力なグラフィックプログラミングツールが含まれています。<br> + この記事では、canvas の概要とさらに詳細を学ぶためのリソースについて説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>JavaScript basics (see <a href="/ja/docs/Learn/JavaScript/First_steps">first steps</a>, <a href="/ja/docs/Learn/JavaScript/Building_blocks">building blocks</a>, <a href="/ja/docs/Learn/JavaScript/Objects">JavaScript objects</a>), the <a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">basics of Client-side APIs</a></td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>JavaScript を使用して <code><canvas></code> 要素に描画するための基本を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="Graphics_on_the_Web" name="Graphics_on_the_Web">Webでのグラフィック</h2> + +<p>As we talked about in our HTML <a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a> module, the Web was originally just text, which was very boring, so images were introduced — first via the {{htmlelement("img")}} element and later via CSS properties such as {{cssxref("background-image")}}, and <a href="/ja/docs/Web/SVG">SVG</a>.</p> + +<p>This however was still not enough. While you could use <a href="/ja/docs/Learn/CSS">CSS</a> and <a href="/ja/docs/Learn/JavaScript">JavaScript</a> to animate (and otherwise manipulate) SVG vector images — as they are represented by markup — there was still no way to do the same for bitmap images, and the tools available were rather limited. The Web still had no way to effectively create animations, games, 3D scenes, and other requirements commonly handled by lower level languages such as C++ or Java.</p> + +<p>The situation started to improve when browsers began to support the {{htmlelement("canvas")}} element and associated <a href="/ja/docs/Web/API/Canvas_API">Canvas API</a> — Apple invented it in around 2004, and other browsers followed by implementing it in the years that followed. As you'll see below, canvas provides many useful tools for creating 2D animations, games, data visualizations, and other types of app, especially when combined with some of the other APIs the web platform provides.</p> + +<p>The below example shows a simple 2D canvas-based bouncing balls animation that we originally met in our <a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">Introducing JavaScript objects</a> module:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/oojs/bouncing-balls/index-finished.html", '100%', 500)}}</p> + +<p>Around 2006–2007, Mozilla started work on an experimental 3D canvas implementation. This became <a href="/ja/docs/Web/API/WebGL_API">WebGL</a>, which gained traction among browser vendors, and was standardized around 2009–2010. WebGL allows you to create real 3D graphics inside your web browser; the below example shows a simple rotating WebGL cube:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}</p> + +<p>This article will focus mainly on 2D canvas, as raw WebGL code is very complex. We will however show how to use a WebGL library to create a 3D scene more easily, and you can find a tutorial covering raw WebGL elsewhere — see <a href="/ja/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">Getting started with WebGL</a>.</p> + +<div class="note"> +<p><strong>注</strong>: Basic canvas functionality is supported well across browsers, with the exception of IE 8 and below for 2D canvas, and IE 11 and below for WebGL.</p> +</div> + +<h2 id="Active_learning_Getting_started_with_a_<canvas>" name="Active_learning_Getting_started_with_a_<canvas>">アクティブラーニング: <canvas>を始めよう</h2> + +<p>If you want to create a 2D <em>or</em> 3D scene on a web page, you need to start with an HTML {{htmlelement("canvas")}} element. This element is used to define the area on the page into which the image will be drawn. This is as simple as including the element on the page:</p> + +<pre class="brush: html notranslate"><canvas width="320" height="240"></canvas></pre> + +<p>This will create a canvas on the page with a size of 320 by 240 pixels.</p> + +<p>Inside the canvas tags, you can put some fallback content, which is shown if the user's browser doesn't support canvas.</p> + +<pre class="brush: html notranslate"><canvas width="320" height="240"> + <p>Your browser doesn't support canvas. Boo hoo!</p> +</canvas></pre> + +<p>Of course, the above message is really unhelpful! In a real example you'd want to relate the fallback content to the canvas content. 例えば、if you were rendering a constantly updating graph of stock prices, the fallback content could be a static image of the latest stock graph, with alt text saying what the prices are in text.</p> + +<h3 id="Creating_and_sizing_our_canvas" name="Creating_and_sizing_our_canvas">canvasの作成とサイズ変更</h3> + +<p>Let's start by creating our own canvas that we draw future experiments on to.</p> + +<ol> + <li> + <p>First make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/0_canvas_start.html">0_canvas_start.html</a> file, and open it in your text editor.</p> + </li> + <li> + <p>Add the following code into it, just below the opening {{htmlelement("body")}} tag:</p> + + <pre class="brush: html notranslate"><canvas class="myCanvas"> + <p>Add suitable fallback here.</p> +</canvas></pre> + + <p>We have added a <code>class</code> to the <code><canvas></code> element so it will be easier to select if we have multiple canvases on the page, but we have removed the <code>width</code> and <code>height</code> attributes for now (you could add them back in if you wanted, but we will set them using JavaScript in a below section). Canvases with no explicit width and height default to 300 pixels wide by 150 pixels high.</p> + </li> + <li> + <p>Now add the following lines of JavaScript inside the {{htmlelement("script")}} element:</p> + + <pre class="brush: js notranslate">const canvas = document.querySelector('.myCanvas'); +const width = canvas.width = window.innerWidth; +const height = canvas.height = window.innerHeight;</pre> + + <p>Here we have stored a reference to the canvas in the <code>canvas</code> constant. In the second line we set both a new constant <code>width</code> and the canvas' <code>width</code> property equal to {{domxref("Window.innerWidth")}} (which gives us the viewport width). In the third line we set both a new constant <code>height</code> and the canvas' <code>height</code> property equal to {{domxref("Window.innerHeight")}} (which gives us the viewport height). So now we have a canvas that fills the entire width and height of the browser window!</p> + + <p>You'll also see that we are chaining assignments together with multiple equals signs — this is allowed in JavaScript, and it is a good technique if you want to make multiple variables all equal to the same value. We wanted to make the canvas width and height easily accessible in the width/height variables, as they are useful values to have available for later (例えば、if you want to draw something exactly halfway across the width of the canvas).</p> + </li> + <li> + <p>If you save and load your example in a browser now, you'll see nothing, which is fine, but you'll also see scrollbars — this is a problem for us, which happens because the {{htmlelement("body")}} element has a {{cssxref("margin")}} that, added to our full-window-size canvas, results in a document that's wider than the window. To get rid of the scrollbars, we need to remove the {{cssxref("margin")}} and also set {{cssxref("overflow")}} to <code>hidden</code>. Add the following into the {{htmlelement("head")}} of your document:</p> + + <pre class="brush: html notranslate"><style> + body { + margin: 0; + overflow: hidden; + } +</style></pre> + + <p>The scrollbars should now be gone.</p> + </li> +</ol> + +<div class="note"> +<p><strong>注</strong>: You should generally set the size of the image using HTML attributes or DOM properties, as explained above. You could use CSS, but the trouble then is that the sizing is done after the canvas has rendered, and just like any other image (the rendered canvas is just an image), the image could become pixellated/distorted.</p> +</div> + +<h3 id="Getting_the_canvas_context_and_final_setup" name="Getting_the_canvas_context_and_final_setup">canvasコンテキストと最終セットアップを取得する</h3> + +<p>We need to do one final thing before we can consider our canvas template finished. To draw onto the canvas we need to get a special reference to the drawing area called a context. This is done using the {{domxref("HTMLCanvasElement.getContext()")}} method, which for basic usage takes a single string as a parameter representing the type of context you want to retrieve.</p> + +<p>In this case we want a 2d canvas, so add the following JavaScript line below the others inside the <code><script></code> element:</p> + +<pre class="brush: js notranslate">const ctx = canvas.getContext('2d');</pre> + +<div class="note"> +<p><strong>注</strong>: other context values you could choose include <code>webgl</code> for WebGL, <code>webgl2</code> for WebGL 2, etc., but we won't need those in this article.</p> +</div> + +<p>So that's it — our canvas is now primed and ready for drawing on! The <code>ctx</code> variable now contains a {{domxref("CanvasRenderingContext2D")}} object, and all drawing operations on the canvas will involve manipulating this object.</p> + +<p>Let's do one last thing before we move on. We'll color the canvas background black to give you a first taste of the canvas API. Add the following lines at the bottom of your JavaScript:</p> + +<pre class="brush: js notranslate">ctx.fillStyle = 'rgb(0, 0, 0)'; +ctx.fillRect(0, 0, width, height);</pre> + +<p>Here we are setting a fill color using the canvas' {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} property (this takes <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">color values</a> just like CSS properties do), then drawing a rectangle that covers the entire area of the canvas with the{{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} method (the first two parameters are the coordinates of the rectangle's top left hand corner; the last two are the width and height you want the rectangle drawn at — we told you those <code>width</code> and <code>height</code> variables would be useful)!</p> + +<p>OK, our template is done and it's time to move on.</p> + +<h2 id="2D_canvas_basics" name="2D_canvas_basics">2D canvas の基本</h2> + +<p>As we said above, all drawing operations are done by manipulating a {{domxref("CanvasRenderingContext2D")}} object (in our case, <code>ctx</code>). Many operations need to be given coordinates to pinpoint exactly where to draw something — the top left of the canvas is point (0, 0), the horizontal (x) axis runs from left to right, and the vertical (y) axis runs from top to bottom.</p> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="display: block; height: 220px; margin: 0px auto; width: 220px;"></p> + +<p>Drawing shapes tends to be done using the rectangle shape primitive, or by tracing a line along a certain path and then filling in the shape. Below we'll show how to do both.</p> + +<h3 id="Simple_rectangles" name="Simple_rectangles">簡単な矩形</h3> + +<p>Let's start with some simple rectangles.</p> + +<ol> + <li> + <p>First of all, take a copy of your newly coded canvas template (or make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a> if you didn't follow the above steps).</p> + </li> + <li> + <p>Next, add the following lines to the bottom of your JavaScript:</p> + + <pre class="brush: js notranslate">ctx.fillStyle = 'rgb(255, 0, 0)'; +ctx.fillRect(50, 50, 100, 150);</pre> + + <p>If you save and refresh, you should see a red rectangle has appeared on your canvas. Its top left corner is 50 pixels away from the top and left of the canvas edge (as defined by the first two parameters), and it is 100 pixels wide and 150 pixels tall (as defined by the third and fourth parameters).</p> + </li> + <li> + <p>Let's add another rectangle into the mix — a green one this time. Add the following at the bottom of your JavaScript:</p> + + <pre class="brush: js notranslate">ctx.fillStyle = 'rgb(0, 255, 0)'; +ctx.fillRect(75, 75, 100, 100);</pre> + + <p>Save and refresh, and you'll see your new rectangle. This raises an important point: graphics operations like drawing rectangles, lines, and so forth are performed in the order in which they occur. Think of it like painting a wall, where each coat of paint overlaps and may even hide what's underneath. You can't do anything to change this, so you have to think carefully about the order in which you draw the graphics.</p> + </li> + <li> + <p>Note that you can draw semi-transparent graphics by specifying a semi-transparent color, 例えば、by using <code>rgba()</code>. The <code>a</code> value defines what's called the "alpha channel, " or the amount of transparency the color has. The higher its value, the more it will obscure whatever's behind it. Add the following to your code:</p> + + <pre class="brush: js notranslate">ctx.fillStyle = 'rgba(255, 0, 255, 0.75)'; +ctx.fillRect(25, 100, 175, 50);</pre> + </li> + <li> + <p>Now try drawing some more rectangles of your own; have fun!</p> + </li> +</ol> + +<h3 id="Strokes_and_line_widths" name="Strokes_and_line_widths">ストロークと線の幅</h3> + +<p>So far we've looked at drawing filled rectangles, but you can also draw rectangles that are just outlines (called <strong>strokes</strong> in graphic design). To set the color you want for your stroke, you use the {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}} property; drawing a stroke rectangle is done using {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect")}}.</p> + +<ol> + <li> + <p>Add the following to the previous example, again below the previous JavaScript lines:</p> + + <pre class="brush: js notranslate">ctx.strokeStyle = 'rgb(255, 255, 255)'; +ctx.strokeRect(25, 25, 175, 200);</pre> + </li> + <li> + <p>The default width of strokes is 1 pixel; you can adjust the {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}} property value to change this (it takes a number representing the number of pixels wide the stroke is). Add the following line in between the previous two lines:</p> + + <pre class="brush: js notranslate">ctx.lineWidth = 5;</pre> + </li> +</ol> + +<p>Now you should see that your white outline has become much thicker! That's it for now. At this point your example should look like this:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}}</p> + +<div class="note"> +<p><strong>注</strong>: The finished code is available on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html">2_canvas_rectangles.html</a>.</p> +</div> + +<h3 id="Drawing_paths" name="Drawing_paths">パスの描画</h3> + +<p>If you want to draw anything more complex than a rectangle, you need to draw a path. Basically, this involves writing code to specify exactly what path the pen should move along on your canvas to trace the shape you want to draw. Canvas includes functions for drawing straight lines, circles, Bézier curves, and more.</p> + +<p>Let's start the section off by making a fresh copy of our canvas template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>), in which to draw the new example.</p> + +<p>We'll be using some common methods and properties across all of the below sections:</p> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} — start drawing a path at the point where the pen currently is on the canvas. On a new canvas, the pen starts out at (0, 0).</li> + <li>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} — move the pen to a different point on the canvas, without recording or tracing the line; the pen simply "jumps" to the new position.</li> + <li>{{domxref("CanvasRenderingContext2D.fill", "fill()")}} — draw a filled shape by filling in the path you've traced so far.</li> + <li>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} — draw an outline shape by drawing a stroke along the path you've drawn so far.</li> + <li>You can also use features like <code>lineWidth</code> and <code>fillStyle</code>/<code>strokeStyle</code> with paths as well as rectangles.</li> +</ul> + +<p>A typical, simple path-drawing operation would look something like so:</p> + +<pre class="brush: js notranslate">ctx.fillStyle = 'rgb(255, 0, 0)'; +ctx.beginPath(); +ctx.moveTo(50, 50); +// draw your path +ctx.fill();</pre> + +<h4 id="Drawing_lines" name="Drawing_lines">線を描く</h4> + +<p>Let's draw an equilateral triangle on the canvas.</p> + +<ol> + <li> + <p>First of all, add the following helper function to the bottom of your code. This converts degree values to radians, which is useful because whenever you need to provide an angle value in JavaScript, it will nearly always be in radians, but humans usually think in degrees.</p> + + <pre class="brush: js notranslate">function degToRad(degrees) { + return degrees * Math.PI / 180; +};</pre> + </li> + <li> + <p>Next, start off your path by adding the following below your previous addition; here we set a color for our triangle, start drawing a path, and then move the pen to (50, 50) without drawing anything. That's where we'll start drawing our triangle.</p> + + <pre class="brush: js notranslate">ctx.fillStyle = 'rgb(255, 0, 0)'; +ctx.beginPath(); +ctx.moveTo(50, 50);</pre> + </li> + <li> + <p>Now add the following lines at the bottom of your script:</p> + + <pre class="brush: js notranslate">ctx.lineTo(150, 50); +let triHeight = 50 * Math.tan(degToRad(60)); +ctx.lineTo(100, 50+triHeight); +ctx.lineTo(50, 50); +ctx.fill();</pre> + + <p>Let's run through this in order:</p> + + <p>First we draw a line across to (150, 50) — our path now goes 100 pixels to the right along the x axis.</p> + + <p>Second, we work out the height of our equalateral triangle, using a bit of simple trigonometry. Basically, we are drawing the triangle pointing downwards. The angles in an equalateral triangle are always 60 degrees; to work out the height we can split it down the middle into two right-angled triangles, which will each have angles of 90 degrees, 60 degrees, and 30 degrees. In terms of the sides:</p> + + <ul> + <li>The longest side is called the <strong>hypotenuse</strong></li> + <li>The side next to the 60 degree angle is called the <strong>adjacent</strong> — which we know is 50 pixels, as it is half of the line we just drew.</li> + <li>The side opposite the 60 degree angle is called the <strong>opposite</strong>, which is the height of the triangle we want to calculate.</li> + </ul> + + <p><img alt="" src="https://mdn.mozillademos.org/files/14829/trigonometry.png" style="display: block; margin: 0 auto;"></p> + + <p>One of the basic trigonometric formulae states that the length of the adjacent multiplied by the tangent of the angle is equal to the opposite, hence we come up with <code>50 * Math.tan(degToRad(60))</code>. We use our <code>degToRad()</code> function to convert 60 degrees to radians, as {{jsxref("Math.tan()")}} expects an input value in radians.</p> + </li> + <li> + <p>With the height calculated, we draw another line to <code>(100, 50 + triHeight)</code>. The X coordinate is simple; it must be halfway between the previous two X values we set. The Y value on the other hand must be 50 plus the triangle height, as we know the top of the triangle is 50 pixels from the top of the canvas.</p> + </li> + <li> + <p>The next line draws a line back to the starting point of the triangle.</p> + </li> + <li> + <p>Last of all, we run <code>ctx.fill()</code> to end the path and fill in the shape.</p> + </li> +</ol> + +<h4 id="Drawing_circles" name="Drawing_circles">円を描く</h4> + +<p>Now let's look at how to draw a circle in canvas. This is accomplished using the {{domxref("CanvasRenderingContext2D.arc", "arc()")}} method, which draws all or part of a circle at a specified point.</p> + +<ol> + <li> + <p>Let's add an arc to our canvas — add the following to the bottom of your code:</p> + + <pre class="brush: js notranslate">ctx.fillStyle = 'rgb(0, 0, 255)'; +ctx.beginPath(); +ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false); +ctx.fill();</pre> + + <p><code>arc()</code> takes six parameters. The first two specify the position of the arc's center (X and Y, respectively). The third is the circle's radius, the fourth and fifth are the start and end angles at which to draw the circle (so specifying 0 and 360 degrees gives us a full circle), and the sixth parameter defines whether the circle should be drawn counterclockwise (anticlockwise) or clockwise (<code>false</code> is clockwise).</p> + + <div class="note"> + <p><strong>注</strong>: 0 degrees is horizontally to the right.</p> + </div> + </li> + <li> + <p>Let's try adding another arc:</p> + + <pre class="brush: js notranslate">ctx.fillStyle = 'yellow'; +ctx.beginPath(); +ctx.arc(200, 106, 50, degToRad(-45), degToRad(45), true); +ctx.lineTo(200, 106); +ctx.fill();</pre> + + <p>The pattern here is very similar, but with two differences:</p> + + <ul> + <li>We have set the last parameter of <code>arc()</code> to <code>true</code>, meaning that the arc is drawn counterclockwise, which means that even though the arc is specified as starting at -45 degrees and ending at 45 degrees, we draw the arc around the 270 degrees not inside this portion. If you were to change <code>true</code> to <code>false</code> and then re-run the code, only the 90 degree slice of the circle would be drawn.</li> + <li>Before calling <code>fill()</code>, we draw a line to the center of the circle. This means that we get the rather nice Pac-Man-style cutout rendered. If you removed this line (try it!) then re-ran the code, you'd get just an edge of the circle chopped off between the start and end point of the arc. This illustrates another important point of the canvas — if you try to fill an incomplete path (i.e. one that is not closed), the browser fills in a straight line between the start and end point and then fills it in.</li> + </ul> + </li> +</ol> + +<p>That's it for now; your final example should look like this:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}}</p> + +<div class="note"> +<p><strong>注</strong>: The finished code is available on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html">3_canvas_paths.html</a>.</p> +</div> + +<div class="note"> +<p><strong>注</strong>: To find out more about advanced path drawing features such as Bézier curves, check out our <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">Drawing shapes with canvas</a> tutorial.</p> +</div> + +<h3 id="Text" name="Text">テキスト</h3> + +<p>Canvas also has features for drawing text. Let's explore these briefly. Start by making another fresh copy of our canvas template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>) in which to draw the new example.</p> + +<p>Text is drawn using two methods:</p> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.fillText", "fillText()")}} — draws filled text.</li> + <li>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText()")}} — draws outline (stroke) text.</li> +</ul> + +<p>Both of these take three properties in their basic usage: the text string to draw and the X and Y coordinates of the point to start drawing the text at. This works out as the <strong>bottom left</strong> corner of the <strong>text box</strong> (literally, the box surrounding the text you draw), which might confuse you as other drawing operations tend to start from the top left corner — bear this in mind.</p> + +<p>There are also a number of properties to help control text rendering such as {{domxref("CanvasRenderingContext2D.font", "font")}}, which lets you specify font family, size, etc. It takes as its value the same syntax as the CSS {{cssxref("font")}} property.</p> + +<p>Try adding the following block to the bottom of your JavaScript:</p> + +<pre class="brush: js notranslate">ctx.strokeStyle = 'white'; +ctx.lineWidth = 1; +ctx.font = '36px arial'; +ctx.strokeText('Canvas text', 50, 50); + +ctx.fillStyle = 'red'; +ctx.font = '48px georgia'; +ctx.fillText('Canvas text', 50, 150);</pre> + +<p>Here we draw two lines of text, one outline and the other stroke. The final example should look like so:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}}</p> + +<div class="note"> +<p><strong>注</strong>: The finished code is available on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html">4_canvas_text.html</a>.</p> +</div> + +<p>Have a play and see what you can come up with! You can find more information on the options available for canvas text at <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_text">Drawing text</a>.</p> + +<h3 id="Drawing_images_onto_canvas" name="Drawing_images_onto_canvas">canvasに画像を描画する</h3> + +<p>It is possible to render external images onto your canvas. These can be simple images, frames from videos, or the content of other canvases. For the moment we'll just look at the case of using some simple images on our canvas.</p> + +<ol> + <li> + <p>As before, make another fresh copy of our canvas template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>) in which to draw the new example. In this case you'll also need to save a copy of our sample image — <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/firefox.png">firefox.png</a> — in the same directory.</p> + + <p>Images are drawn onto canvas using the {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} method. The simplest version takes three parameters — a reference to the image you want to render, and the X and Y coordinates of the image's top left corner.</p> + </li> + <li> + <p>Let's start by getting an image source to embed in our canvas. Add the following lines to the bottom of your JavaScript:</p> + + <pre class="brush: js notranslate">let image = new Image(); +image.src = 'firefox.png';</pre> + + <p>Here we create a new {{domxref("HTMLImageElement")}} object using the {{domxref("HTMLImageElement.Image()", "Image()")}} constructor. The returned object is the same type as that which is returned when you grab a reference to an existing {{htmlelement("img")}} element). We then set its {{htmlattrxref("src", "img")}} attribute to equal our Firefox logo image. At this point, the browser starts loading the image.</p> + </li> + <li> + <p>We could now try to embed the image using <code>drawImage()</code>, but we need to make sure the image file has been loaded first, otherwise the code will fail. We can achieve this using the <code>onload</code> event handler, which will only be invoked when the image has finished loading. Add the following block below the previous one:</p> + + <pre class="brush: js notranslate">image.onload = function() { + ctx.drawImage(image, 50, 50); +}</pre> + + <p>If you load your example in the browser now, you should see the image embeded in the canvas.</p> + </li> + <li> + <p>But there's more! What if we want to display only a part of the image, or to resize it? We can do both with the more complex version of <code>drawImage()</code>. Update your <code>ctx.drawImage()</code> line like so:</p> + + <pre class="brush: js notranslate">ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);</pre> + + <ul> + <li>The first parameter is the image reference, as before.</li> + <li>Parameters 2 and 3 define the coordinates of the top left corner of the area you want to cut out of the loaded image, relative to the top-left corner of the image itself. Nothing to the left of the first parameter or above the second will be drawn.</li> + <li>Parameters 4 and 5 define the width and height of the area we want to cut out from the original image we loaded.</li> + <li>Parameters 6 and 7 define the coordinates at which you want to draw the top-left corner of the cut-out portion of the image, relative to the top-left corner of the canvas.</li> + <li>Parameters 8 and 9 define the width and height to draw the cut-out area of the image. In this case, we have specified the same dimensions as the original slice, but you could resize it by specifying different values.</li> + </ul> + </li> +</ol> + +<p>The final example should look like so:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}}</p> + +<div class="note"> +<p><strong>注</strong>: The finished code is available on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html">5_canvas_images.html</a>.</p> +</div> + +<h2 id="Loops_and_animations" name="Loops_and_animations">ループとアニメーション</h2> + +<p>We have so far covered some very basic uses of 2D canvas, but really you won't experience the full power of canvas unless you update or animate it in some way. After all, canvas does provide scriptable images! If you aren't going to change anything, then you might as well just use static images and save yourself all the work.</p> + +<h3 id="Creating_a_loop" name="Creating_a_loop">ループの作成</h3> + +<p>Playing with loops in canvas is rather fun — you can run canvas commands inside a <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/for">for</a></code> (or other type of) loop just like any other JavaScript code.</p> + +<p>Let's build a simple example.</p> + +<ol> + <li> + <p>Make another fresh copy of our canvas template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>) and open it in your code editor.</p> + </li> + <li> + <p>Add the following line to the bottom of your JavaScript. This contains a new method, {{domxref("CanvasRenderingContext2D.translate", "translate()")}}, which moves the origin point of the canvas:</p> + + <pre class="brush: js notranslate">ctx.translate(width/2, height/2);</pre> + + <p>This causes the coordinate origin (0, 0) to be moved to the center of the canvas, rather than being at the top left corner. This is very useful in many situations, like this one, where we want our design to be drawn relative to the center of the canvas.</p> + </li> + <li> + <p>Now add the following code to the bottom of the JavaScript:</p> + + <pre class="brush: js notranslate">function degToRad(degrees) { + return degrees * Math.PI / 180; +}; + +function rand(min, max) { + return Math.floor(Math.random() * (max-min+1)) + (min); +} + +let length = 250; +let moveOffset = 20; + +for(var i = 0; i < length; i++) { + +}</pre> + + <p>Here we are implementing the same <code>degToRad()</code> function we saw in the triangle example above, a <code>rand()</code> function that returns a random number between given lower and upper bounds, <code>length</code> and <code>moveOffset</code> variables (which we'll find out more about later), and an empty <code>for</code> loop.</p> + </li> + <li> + <p>The idea here is that we'll draw something on the canvas inside the <code>for</code> loop, and iterate on it each time so we can create something interesting. Add the following code inside your <code>for</code> loop:</p> + + <pre class="brush: js notranslate">ctx.fillStyle = 'rgba(' + (255-length) + ', 0, ' + (255-length) + ', 0.9)'; +ctx.beginPath(); +ctx.moveTo(moveOffset, moveOffset); +ctx.lineTo(moveOffset+length, moveOffset); +let triHeight = length/2 * Math.tan(degToRad(60)); +ctx.lineTo(moveOffset+(length/2), moveOffset+triHeight); +ctx.lineTo(moveOffset, moveOffset); +ctx.fill(); + +length--; +moveOffset += 0.7; +ctx.rotate(degToRad(5));</pre> + + <p>So on each iteration, we:</p> + + <ul> + <li>Set the <code>fillStyle</code> to be a shade of slightly transparent purple, which changes each time based on the value of <code>length</code>. As you'll see later the length gets smaller each time the loop runs, so the effect here is that the color gets brighter with each successive triangle drawn.</li> + <li>Begin the path.</li> + <li>Move the pen to a coordinate of <code>(moveOffset, moveOffset)</code>; This variable defines how far we want to move each time we draw a new triangle.</li> + <li>Draw a line to a coordinate of <code>(moveOffset+length, moveOffset)</code>. This draws a line of length <code>length</code> parallel to the X axis.</li> + <li>Calculate the triangle's height, as before.</li> + <li>Draw a line to the downward-pointing corner of the triangle, then draw a line back to the start of the triangle.</li> + <li>Call <code>fill()</code> to fill in the triangle.</li> + <li>Update the variables that describe the sequence of triangles, so we can be ready to draw the next one. We decrease the <code>length</code> value by 1, so the triangles get smaller each time; increase <code>moveOffset</code> by a small amount so each successive triangle is slightly further away, and use another new function, {{domxref("CanvasRenderingContext2D.rotate", "rotate()")}}, which allows us to rotate the entire canvas! We rotate it by 5 degrees before drawing the next triangle.</li> + </ul> + </li> +</ol> + +<p>That's it! The final example should look like so:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html", '100%', 550)}}</p> + +<p>At this point, we'd like to encourage you to play with the example and make it your own! 例えば、:</p> + +<ul> + <li>Draw rectangles or arcs instead of triangles, or even embed images.</li> + <li>Play with the <code>length</code> and <code>moveOffset</code> values.</li> + <li>Introduce some random numbers using that <code>rand()</code> function we included above but didn't use.</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: The finished code is available on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html">6_canvas_for_loop.html</a>.</p> +</div> + +<h3 id="Animations" name="Animations">アニメーション</h3> + +<p>The loop example we built above was fun, but really you need a constant loop that keeps going and going for any serious canvas applications (such as games and real time visualizations). If you think of your canvas as being like a movie, you really want the display to update on each frame to show the updated view, with an ideal refresh rate of 60 frames per second so that movement appears nice and smooth to the human eye.</p> + +<p>There are a few JavaScript functions that will allow you to run functions repeatedly, several times a second, the best one for our purposes here being {{domxref("window.requestAnimationFrame()")}}. It takes one parameter — the name of the function you want to run for each frame. The next time the browser is ready to update the screen, your function will get called. If that function draws the new update to your animation, then calls <code>requestAnimationFrame()</code> again just before the end of the function, the animation loop will continue to run. The loop ends when you stop calling <code>requestAnimationFrame()</code> or if you call {{domxref("window.cancelAnimationFrame()")}} after calling <code>requestAnimationFrame()</code> but before the frame is called.</p> + +<div class="note"> +<p><strong>注:</strong> It's good practice to call <code>cancelAnimationFrame()</code> from your main code when you're done using the animation, to ensure that no updates are still waiting to be run.</p> +</div> + +<p>The browser works out complex details such as making the animation run at a consistent speed, and not wasting resources animating things that can't be seen.</p> + +<p>To see how it works, let's quickly look again at our Bouncing Balls example (<a href="https://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html">see it live</a>, and also see <a href="https://github.com/mdn/learning-area/tree/master/javascript/oojs/bouncing-balls">the source code</a>). The code for the loop that keeps everything moving looks like this:</p> + +<pre class="brush: js notranslate">function loop() { + ctx.fillStyle = 'rgba(0, 0, 0, 0.25)'; + ctx.fillRect(0, 0, width, height); + + for(let i = 0; i < balls.length; i++) { + balls[i].draw(); + balls[i].update(); + balls[i].collisionDetect(); + } + + requestAnimationFrame(loop); +} + +loop();</pre> + +<p>We run the <code>loop()</code> function once at the bottom of the code to start the cycle, drawing the first animation frame; the <code>loop()</code> function then takes charge of calling <code>requestAnimationFrame(loop)</code> to run the next frame of the animation, again and again.</p> + +<p>Note that on each frame we are completely clearing the canvas and redrawing everything. For every ball present we draw it, update its position, and check to see if it is colliding with any other balls. Once you've drawn a graphic to a canvas, there's no way to manipulate that graphic individually like you can with DOM elements. You can't move each ball around on the canvas, because once it's drawn, it's part of the canvas, and is not an individual accessible element or object. Instead, you have to erase and redraw, either by erasing the entire frame and redrawing everything, or by having code that knows exactly what parts need to be erased and only erases and redraws the minimum area of the canvas necessary.</p> + +<p>Optimizing animation of graphics is an entire specialty of programming, with lots of clever techniques available. Those are beyond what we need for our example, though!</p> + +<p>In general, the process of doing a canvas animation involves the following steps:</p> + +<ol> + <li>Clear the canvas contents (e.g. with {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} or {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}).</li> + <li>Save state (if necessary) using {{domxref("CanvasRenderingContext2D.save", "save()")}} — this is needed when you want to save settings you've updated on the canvas before continuing, which is useful for more advanced applications.</li> + <li>Draw the graphics you are animating.</li> + <li>Restore the settings you saved in step 2, using {{domxref("CanvasRenderingContext2D.restore", "restore()")}}</li> + <li>Call <code>requestAnimationFrame()</code> to schedule drawing of the next frame of the animation.</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: We won't cover <code>save()</code> and <code>restore()</code> here, but they are explained nicely in our <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Transformations">Transformations</a> tutorial (and the ones that follow it).</p> +</div> + +<h3 id="A_simple_character_animation" name="A_simple_character_animation">簡単なキャラクターのアニメーション</h3> + +<p>Now let's create our own simple animation — we'll get a character from a certain rather awesome retro computer game to walk across the screen.</p> + +<ol> + <li> + <p>Make another fresh copy of our canvas template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>) and open it in your code editor. Make a copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/walk-right.png">walk-right.png</a> in the same directory.</p> + </li> + <li> + <p>At the bottom of the JavaScript, add the following line to once again make the coordinate origin sit in the middle of the canvas:</p> + + <pre class="brush: js notranslate">ctx.translate(width/2, height/2);</pre> + </li> + <li> + <p>Now let's create a new {{domxref("HTMLImageElement")}} object, set its {{htmlattrxref("src", "img")}} to the image we want to load, and add an <code>onload</code> event handler that will cause the <code>draw()</code> function to fire when the image is loaded:</p> + + <pre class="brush: js notranslate">let image = new Image(); +image.src = 'walk-right.png'; +image.onload = draw;</pre> + </li> + <li> + <p>Now we'll add some variables to keep track of the position the sprite is to be drawn on the screen, and the sprite number we want to display.</p> + + <pre class="brush: js notranslate">let sprite = 0; +let posX = 0;</pre> + + <p>Let's explain the spritesheet image (which we have respectfully borrowed from Mike Thomas' <a href="http://atomicrobotdesign.com/blog/htmlcss/create-a-sprite-sheet-walk-cycle-using-using-css-animation/" rel="bookmark" title="Permanent Link to Create a sprite sheet walk cycle using using CSS animation">Create a sprite sheet walk cycle using using CSS animation</a>). The image looks like this:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/14847/walk-right.png" style="display: block; height: 148px; margin: 0px auto; width: 612px;"></p> + + <p>It contains six sprites that make up the whole walking sequence — each one is 102 pixels wide and 148 pixels high. To display each sprite cleanly we will have to use <code>drawImage()</code> to chop out a single sprite image from the spritesheet and display only that part, like we did above with the Firefox logo. The X coordinate of the slice will have to be a multiple of 102, and the Y coordinate will always be 0. The slice size will always be 102 by 148 pixels.</p> + </li> + <li> + <p>Now let's insert an empty <code>draw()</code> function at the bottom of the code, ready for filling up with some code:</p> + + <pre class="brush: js notranslate">function draw() { + +};</pre> + </li> + <li> + <p>the rest of the code in this section goes inside <code>draw()</code>. First, add the following line, which clears the canvas to prepare for drawing each frame. Notice that we have to specify the top-left corner of the rectangle as <code>-(width/2), -(height/2)</code> because we specified the origin position as <code>width/2, height/2</code> earlier on.</p> + + <pre class="brush: js notranslate">ctx.fillRect(-(width/2), -(height/2), width, height);</pre> + </li> + <li> + <p>Next, we'll draw our image using drawImage — the 9-parameter version. Add the following:</p> + + <pre class="brush: js notranslate">ctx.drawImage(image, (sprite*102), 0, 102, 148, 0+posX, -74, 102, 148);</pre> + + <p>As you can see:</p> + + <ul> + <li>We specify <code>image</code> as the image to embed.</li> + <li>Parameters 2 and 3 specify the top-left corner of the slice to cut out of the source image, with the X value as <code>sprite</code> multiplied by 102 (where <code>sprite</code> is the sprite number between 0 and 5) and the Y value always 0.</li> + <li>Parameters 4 and 5 specify the size of the slice to cut out — 102 pixels by 148 pixels.</li> + <li>Parameters 6 and 7 specify the top-left corner of the box into which to draw the slice on the canvas — the X position is 0 + <code>posX</code>, meaning that we can alter the drawing position by altering the <code>posX</code> value.</li> + <li>Parameters 8 and 9 specify the size of the image on the canvas. We just want to keep its original size, so we specify 102 and 148 as the width and height.</li> + </ul> + </li> + <li> + <p>Now we'll alter the <code>sprite</code> value after each draw — well, after some of them anyway. Add the following block to the bottom of the <code>draw()</code> function:</p> + + <pre class="brush: js notranslate"> if (posX % 13 === 0) { + if (sprite === 5) { + sprite = 0; + } else { + sprite++; + } + }</pre> + + <p>We are wrapping the whole block in <code> if (posX % 13 === 0) { ... }</code>. We use the modulo (<code>%</code>) operator (also known as the <a href="/ja/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_()">remainder operator</a>) to check whether the <code>posX</code> value can be exactly divided by 13 with no remainder. If so, we move on to the next sprite by incrementing <code>sprite</code> (wrapping to 0 after we're done with sprite #5). This effectively means that we are only updating the sprite on every 13th frame, or roughly about 5 frames a second (<code>requestAnimationFrame()</code> calls us at up to 60 frames per second if possible). We are deliberately slowing down the frame rate because we only have six sprites to work with, and if we display one every 60th of a second, our character will move way too fast!</p> + + <p>Inside the outer block we use an <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a></code> statement to check whether the <code>sprite</code> value is at 5 (the last sprite, given that the sprite numbers run from 0 to 5). If we are showing the last sprite already, we reset <code>sprite</code> back to 0; if not we just increment it by 1.</p> + </li> + <li> + <p>Next we need to work out how to change the <code>posX</code> value on each frame — add the following code block just below your last one. </p> + + <pre class="brush: js notranslate"> if(posX > width/2) { + newStartPos = -((width/2) + 102); + posX = Math.ceil(newStartPos); + console.log(posX); + } else { + posX += 2; + }</pre> + + <p>We are using another <code>if ... else</code> statement to see if the value of <code>posX</code> has become greater than <code>width/2</code>, which means our character has walked off the right edge of the screen. If so, we calculate a position that would put the character just to the left of the left side of the screen.</p> + + <p>If our character hasn't yet walked off the edge of the screen, we simply increment <code>posX</code> by 2. This will make him move a little bit to the right the next time we draw him.</p> + </li> + <li> + <p>Finally, we need to make the animation loop by calling {{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}} at the bottom of the <code>draw()</code> function:</p> + + <pre class="brush: js notranslate">window.requestAnimationFrame(draw);</pre> + </li> +</ol> + +<p>That's it! The final example should look like so:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p> + +<div class="note"> +<p><strong>注</strong>: The finished code is available on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html">7_canvas_walking_animation.html</a>.</p> +</div> + +<h3 id="A_simple_drawing_application" name="A_simple_drawing_application">簡単なドローアプリ</h3> + +<p>As a final animation example, we'd like to show you a very simple drawing application, to illustrate how the animation loop can be combined with user input (like mouse movement, in this case). We won't get you to walk through and build this one; we'll just explore the most interesting parts of the code.</p> + +<p>The example can be found on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html">8_canvas_drawing_app.html</a>, and you can play with it live below:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html", '100%', 600)}}</p> + +<p>Let's look at the most interesting parts. First of all, we keep track of the mouse's X and Y coordinates and whether it is being clicked or not with three variables: <code>curX</code>, <code>curY</code>, and <code>pressed</code>. When the mouse moves, we fire a function set as the <code>onmousemove</code> event handler, which captures the current X and Y values. We also use <code>onmousedown</code> and <code>onmouseup</code> event handlers to change the value of <code>pressed</code> to <code>true</code> when the mouse button is pressed, and back to <code>false</code> again when it is released.</p> + +<pre class="brush: js notranslate">let curX; +let curY; +let pressed = false; + +document.onmousemove = function(e) { + curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); + curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); +} + +canvas.onmousedown = function() { + pressed = true; +}; + +canvas.onmouseup = function() { + pressed = false; +}</pre> + +<p>When the "Clear canvas" button is pressed, we run a simple function that clears the whole canvas back to black, the same way we've seen before:</p> + +<pre class="brush: js notranslate">clearBtn.onclick = function() { + ctx.fillStyle = 'rgb(0, 0, 0)'; + ctx.fillRect(0, 0, width, height); +}</pre> + +<p>The drawing loop is pretty simple this time around — if pressed is <code>true</code>, we draw a circle with a fill style equal to the value in the color picker, and a radius equal to the value set in the range input. We have to draw the circle 85 pixels above where we measured it from, because the vertical measurement is taken from the top of the viewport, but we are drawing the circle relative to the top of the canvas, which starts below the 85 pixel-high toolbar. If we drew it with just <code>curY</code> as the y coordinate, it would appear 85 pixels lower than the mouse position.</p> + +<pre class="brush: js notranslate">function draw() { + if(pressed) { + ctx.fillStyle = colorPicker.value; + ctx.beginPath(); + ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false); + ctx.fill(); + } + + requestAnimationFrame(draw); +} + +draw();</pre> + +<div class="note"> +<p><strong>注</strong>: The {{htmlelement("input")}} <code>range</code> and <code>color</code> types are supported fairly well across browsers, with the exception of Internet Explorer versions less than 10; also Safari doesn't yet support <code>color</code>. If your browser doesn't support these inputs, they will fall back to simple text fields and you'll just have to enter valid color/number values yourself.</p> +</div> + +<h2 id="WebGL" name="WebGL">WebGL</h2> + +<p>It's now time to leave 2D behind, and take a quick look at 3D canvas. 3D canvas content is specified using the <a href="/ja/docs/Web/API/WebGL_API">WebGL API</a>, which is a completely separate API from the 2D canvas API, even though they both render onto {{htmlelement("canvas")}} elements.</p> + +<p>WebGL is based on <a href="/ja/docs/Glossary/OpenGL">OpenGL</a> (Open Graphics Library), and allows you to communicate directly with the computer's <a href="/ja/docs/Glossary/GPU">GPU</a>. As such, writing raw WebGL is closer to low level languages such as C++ than regular JavaScript; it is quite complex but incredibly powerful.</p> + +<h3 id="Using_a_library" name="Using_a_library">ライブラリーの使用</h3> + +<p>Because of its complexity, most people write 3D graphics code using a third party JavaScript library such as <a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js</a>, <a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">PlayCanvas</a>, or <a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Babylon.js</a>. Most of these work in a similar way, providing functionality to create primitive and custom shapes, position viewing cameras and lighting, covering surfaces with textures, and more. They handle the WebGL for you, letting you work on a higher level.</p> + +<p>Yes, using one of these means learning another new API (a third party one, in this case), but they are a lot simpler than coding raw WebGL.</p> + +<h3 id="Recreating_our_cube" name="Recreating_our_cube">立方体を作成する</h3> + +<p>Let's look at a simple example of how to create something with a WebGL library. We'll choose <a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js</a>, as it is one of the most popular ones. In this tutorial we'll create the 3D spinning cube we saw earlier.</p> + +<ol> + <li> + <p>To start with, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/threejs-cube/index.html">index.html</a> in a new folder, then save a copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/threejs-cube/metal003.png">metal003.png</a> in the same folder. This is the image we'll use as a surface texture for the cube later on.</p> + </li> + <li> + <p>Next, create a new file called <code>main.js</code>, again in the same folder as before.</p> + </li> + <li> + <p>If you open <code>index.html</code> in your code editor, you'll see that it has two {{htmlelement("script")}} elements — the first one attaching <code>three.min.js</code> to the page, and the second one attaching our <code>main.js</code> file to the page. You need to <a href="https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.min.js">download the three.min.js library</a> and save it in the same directory as before.</p> + </li> + <li> + <p>Now we've got <code>three.js</code> attached to our page, we can start to write JavaScript that makes use of it into <code>main.js</code>. Let's start by creating a new scene — add the following into your main.js file:</p> + + <pre class="brush: js notranslate">const scene = new THREE.Scene();</pre> + + <p>The <code><a href="https://threejs.org/docs/index.html#Reference/Scenes/Scene">Scene()</a></code> constructor creates a new scene, which represents the whole 3D world we are trying to display.</p> + </li> + <li> + <p>Next, we need a <strong>camera</strong> so we can see the scene. In 3D imagery terms, the camera represents a viewer's position in the world. To create a camera, add the following lines next:</p> + + <pre class="brush: js notranslate">const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); +camera.position.z = 5; +</pre> + + <p>The <code><a href="https://threejs.org/docs/index.html#Reference/Cameras/PerspectiveCamera">PerspectiveCamera()</a></code> constructor takes four arguments:</p> + + <ul> + <li>The field of view: How wide the area in front of the camera is that should be visible onscreen, in degrees.</li> + <li>The aspect ratio: Usually, this is the ratio of the scene's width divided by the scene's height. Using another value will distort the scene (which might be what you want, but usually isn't).</li> + <li>The near plane: How close to the camera objects can be before we stop rendering them to the screen. Think about how when you move your fingertip closer and closer to the space between your eyes, eventually you can't see it anymore.</li> + <li>The far plane: How far away things are from the camera before they are no longer rendered.</li> + </ul> + + <p>We also set the camera's position to be 5 distance units out of the Z axis, which, like in CSS, is out of the screen towards you, the viewer.</p> + </li> + <li> + <p>The third vital ingredient is a renderer. This is an object that renders a given scene, as viewed through a given camera. We'll create one for now using the <code><a href="https://threejs.org/docs/index.html#Reference/Renderers/WebGLRenderer">WebGLRenderer()</a></code> constructor, but we'll not use it till later. Add the following lines next:</p> + + <pre class="brush: js notranslate">const renderer = new THREE.WebGLRenderer(); +renderer.setSize(window.innerWidth, window.innerHeight); +document.body.appendChild(renderer.domElement);</pre> + + <p>The first line creates a new renderer, the second line sets the size at which the renderer will draw the camera's view, and the third line appends the {{htmlelement("canvas")}} element created by the renderer to the document's {{htmlelement("body")}}. Now anything the renderer draws will be displayed in our window.</p> + </li> + <li> + <p>Next, we want to create the cube we'll display on the canvas. Add the following chunk of code at the bottom of your JavaScript:</p> + + <pre class="brush: js notranslate">let cube; + +let loader = new THREE.TextureLoader(); + +loader.load( 'metal003.png', function (texture) { + texture.wrapS = THREE.RepeatWrapping; + texture.wrapT = THREE.RepeatWrapping; + texture.repeat.set(2, 2); + + let geometry = new THREE.BoxGeometry(2.4, 2.4, 2.4); + let material = new THREE.MeshLambertMaterial( { map: texture, shading: THREE.FlatShading } ); + cube = new THREE.Mesh(geometry, material); + scene.add(cube); + + draw(); +});</pre> + + <p>There's a bit more to take in here, so let's go through it in stages:</p> + + <ul> + <li>We first create a <code>cube</code> global variable so we can access our cube from anywhere in the code.</li> + <li>Next, we create a new <code><a href="https://threejs.org/docs/index.html#Reference/Loaders/TextureLoader">TextureLoader</a></code> object, then call <code>load()</code> on it. <code>load()</code> takes two parameters in this case (although it can take more): the texture we want to load (our PNG), and a function that will run when the texture has loaded.</li> + <li>Inside this function we use properties of the <code><a href="https://threejs.org/docs/index.html#Reference/Textures/Texture">texture</a></code> object to specify that we want a 2 x 2 repeat of the image wrapped around all sides of the cube. Next, we create a new <code><a href="https://threejs.org/docs/index.html#Reference/Geometries/BoxGeometry">BoxGeometry</a></code> object and a new <code><a href="https://threejs.org/docs/index.html#Reference/Materials/MeshLambertMaterial">MeshLambertMaterial</a></code> object, and bring them together in a <code><a href="https://threejs.org/docs/index.html#Reference/Objects/Mesh">Mesh</a></code> to create our cube. An object typically requires a geometry (what shape it is) and a material (what its surface looks like).</li> + <li>Last of all, we add our cube to the scene, then call our <code>draw()</code> function to start off the animation.</li> + </ul> + </li> + <li> + <p>Before we get to defining <code>draw()</code>, we'll add a couple of lights to the scene, to liven things up a bit; add the following blocks next:</p> + + <pre class="brush: js notranslate">let light = new THREE.AmbientLight('rgb(255, 255, 255)'); // soft white light +scene.add(light); + +let spotLight = new THREE.SpotLight('rgb(255, 255, 255)'); +spotLight.position.set( 100, 1000, 1000 ); +spotLight.castShadow = true; +scene.add(spotLight);</pre> + + <p>An <code><a href="https://threejs.org/docs/index.html#Reference/Lights/AmbientLight">AmbientLight</a></code> object is a kind of soft light that lightens the whole scene a bit, like the sun when you are outside. The <code><a href="https://threejs.org/docs/index.html#Reference/Lights/SpotLight">SpotLight</a></code> object, on the other hand, is a directional beam of light, more like a flashlight/torch (or a spotlight, in fact).</p> + </li> + <li> + <p>Last of all, let's add our <code>draw()</code> function to the bottom of the code:</p> + + <pre class="brush: js notranslate">function draw() { + cube.rotation.x += 0.01; + cube.rotation.y += 0.01; + renderer.render(scene, camera); + + requestAnimationFrame(draw); +}</pre> + + <p>This is fairly intuitive; on each frame, we rotate our cube slightly on its X and Y axes, then render the scene as viewed by our camera, then finally call <code>requestAnimationFrame()</code> to schedule drawing our next frame.</p> + </li> +</ol> + +<p>Let's have another quick look at what the finished product should look like:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}</p> + +<p>You can <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/drawing-graphics/threejs-cube">find the finished code on GitHub</a>.</p> + +<div class="note"> +<p><strong>注</strong>: In our GitHub repo you can also find another interesting 3D cube example — <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/drawing-graphics/threejs-video-cube">Three.js Video Cube</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/drawing-graphics/threejs-video-cube/">see it live also</a>). This uses {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} to take a video stream from a computer web cam and project it onto the side of the cube as a texture!</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>At this point, you should have a useful idea of the basics of graphics programming using Canvas and WebGL and what you can do with these APIs, as well as a good idea of where to go for further information. Have fun!</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<p>Here we have covered only the real basics of canvas — there is so much more to learn! The below articles will take you further.</p> + +<ul> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> — A very detailed tutorial series explaining what you should know about 2D canvas in much more detail than was covered here. Essential reading.</li> + <li><a href="/ja/docs/Web/API/WebGL_API/Tutorial">WebGL tutorial</a> — A series that teaches the basics of raw WebGL programming.</li> + <li><a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a> — basic Three.js tutorial. We also have equivalent guides for <a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">PlayCanvas</a> or <a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Babylon.js</a>.</li> + <li><a href="/ja/docs/Games">Game development</a> — the landing page for web games development on MDN. There are some really useful tutorials and techniques available here related to 2D and 3D canvas — see the Techniques and Tutorials menu options.</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<ul> + <li><a href="https://github.com/mdn/violent-theremin">Violent theramin</a> — Uses the Web Audio API to generate sound, and canvas to generate a pretty visualization to go along with it.</li> + <li><a href="https://github.com/mdn/voice-change-o-matic">Voice change-o-matic</a> — Uses a canvas to visualize real-time audio data from the Web Audio API.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></li> +</ul> diff --git a/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.html b/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.html new file mode 100644 index 0000000000..44f7c8b035 --- /dev/null +++ b/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.html @@ -0,0 +1,389 @@ +--- +title: サーバからのデータ取得 +slug: Learn/JavaScript/Client-side_web_APIs/Fetching_data +tags: + - API + - Article + - Beginner + - CodingScripting + - Fetch + - JSON + - JavaScript + - Learn + - Promises + - Server + - XHR + - XML + - XMLHttpRequest + - data + - request +translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">モダンな Web サイトやアプリケーションでしょっちゅう必要になる仕事は、サーバから個々のデータを取ってきて、新しいページ全体を読んでくることなしに、ページの一部を書き換える事です。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました。この記事ではそのコンセプトを解説し、これを可能にした技術 XMLHttpRequest や Fetch API について見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>JavaScript の基本 (<a href="/ja/docs/Learn/JavaScript/First_steps">最初のステップ</a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks">ビルディングブロック</a>、<a href="/ja/docs/Learn/JavaScript/Objects">JavaScript オブジェクト</a>を参照)、<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">クライアントサイド API の基本</a></td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>サーバからデータを取得し、それを使用して Web ページのコンテンツを更新する方法を習得する。</td> + </tr> + </tbody> +</table> + +<h2 id="これの問題は何か">これの問題は何か?</h2> + +<p>もともと Web のページ読み込みは単純でした — Web サイトのデータをサーバにリクエストすると、何も問題がなければ、ページを構成するいろいろなものがダウンロードされてあなたのコンピュータに表示されていました。</p> + +<p><img alt="A basic representation of a web site architecture" src="https://mdn.mozillademos.org/files/6475/web-site-architechture@2x.png" style="display: block; height: 134px; margin: 0px auto; width: 484px;"></p> + +<p>このモデルの問題は、どこかページの一部を書き換えたい場合、例えば新しい商品の一群を表示したり新しいページを読み込ませたりをする毎に、ページ全体を読み直さなければならない事です。これはとても無駄が多くてユーザ体験が悪化します、とりわけページが大きくて複雑になってくるにつれて。</p> + +<h3 id="Ajax_の登場">Ajax の登場</h3> + +<p>上述の問題を解決すべく、Web ページから細かいデータ (<a href="/docs/Web/HTML">HTML</a>、{{glossary("XML")}}、<a href="/docs/Learn/JavaScript/Objects/JSON">JSON</a> やプレーンテキストのような) をリクエストし、それを必要な時だけ表示するという技術の誕生へと繋がりました。</p> + +<p>これは {{domxref("XMLHttpRequest")}} や、最近では <a href="/docs/Web/API/Fetch_API">Fetch API</a> の利用によって実現されます。これらの技術は、Web ページがサーバにある特定のリソースを直接 <a href="/docs/Web/HTTP">HTTP</a> リクエストし、必要があれば結果のデータを表示する前に整形する事を可能にしました。</p> + +<div class="note"> +<p><strong>注記</strong>: これらのテクニック一般はかつて Ajax (Asynchronous JavaScript and XML)と呼ばれていましたが、これは {{domxref("XMLHttpRequest")}} を使って XML データを要求するものが多かったためです。今日ではそういうものばかりではありませんが (<code>XMLHttpRequest</code> や Fetch を使って JSON を要求する場合の方が多いでしょう)、結果としては同じであり、"Ajax" という用語はしばしば今でもこのテクニックを説明するのに使われます。</p> +</div> + +<p><img alt="A simple modern architecture for web sites" src="https://mdn.mozillademos.org/files/6477/moderne-web-site-architechture@2x.png" style="display: block; height: 235px; margin: 0px auto; width: 559px;"></p> + +<p>Ajax モデルには、ブラウザにページ全体をリロードされるのではなく、もっと賢くデータをリクエストするために Web API をプロキシとして使うという事も含まれます。これの重要性を考えてみて下さい:</p> + +<ol> + <li>お気に入りの情報に富んだサイト、アマゾンとか YouTube とか CNN とかに行って読み込みます。</li> + <li>さて新しい商品だか何だかを検索します。メインのコンテンツは変わるでしょうが、周りに表示されている情報、ヘッダーやフッター、ナビゲーションメニューなど、大半はそのままでしょう。</li> +</ol> + +<p>これはとても良いことで、それは:</p> + +<ul> + <li>ページの更新がずっと素早く、切り替わるのを待つ必要もないので、サイトがずっと早くて反応の良いものに感じられます。</li> + <li>更新毎にダウンロードされるデータが少ないので、帯域の無駄が少なくなります。ブロードバンドに接続されたデスクトップではさして問題ではないかもしれませんが、モバイルデバイスからや、どこでも高速インターネット接続が使えるわけではない開発途上国ではとても重要な問題です。</li> +</ul> + +<p>さらなる高速化のために、サイトの中には必要なものやデータを最初にリクエストされた時にユーザのコンピュータに保存してしまい、以降の訪問では保存ずみのものを、サーバから最新版のダウンロードさせる事なく使用するものもあります。コンテンツはそれが更新された時だけサーバから再読み込みされます。</p> + +<p><img alt="A basic web app data flow architecture" src="https://mdn.mozillademos.org/files/6479/web-app-architecture@2x.png" style="display: block; height: 383px; margin: 0px auto; width: 562px;"></p> + +<h2 id="基本的な_Ajax_リクエスト">基本的な Ajax リクエスト</h2> + +<p>{{domxref("XMLHttpRequest")}} と <a href="/docs/Web/API/Fetch_API">Fetch</a> それぞれを使って、そのようなリクエストをどうやるのか見ていきましょう。それらの例では、いくつかの異なるテキストファイルから取り出したデータをリクエストし、コンテンツ領域に埋め込みます。</p> + +<p>この一連のファイルは疑似データベースとして働きます。実際のアプリケーションでは、PHP や Python、Node のようなサーバサイド言語を使ってデータベースから取り出したデータをリクエストする場合が多いでしょう。ですがここでは簡単にしておき、クライアント側のパートに集中します。</p> + +<h3 id="XMLHttpRequest">XMLHttpRequest</h3> + +<p><code>XMLHttpRequest</code> (よく XHR と略記されます) は今となってはかなり古い技術です — Microsoft によって1990年代に発明され、非常に長い間ブラウザを超えて標準化されてきました。</p> + +<ol> + <li> + <p>この例題を始めるにあたり、<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/ajax-start.html">ajax-start.html</a> と4つのテキストファイル — <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt">verse1.txt</a>、<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt">verse2.txt</a>、<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt">verse3.txt</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt">verse4.txt</a> — のローカルコピーを、あなたのコンピュータの新しいディレクトリに作って下さい。この例題では、ドロップダウンメニューから選択されたら、詩 (ご存知の詩かも) のこれら異なる節を XHR を使って読み込みます。</p> + </li> + <li> + <p>{{htmlelement("script")}} 要素のすぐ内側に、下のコードを書き足して下さい。これは {{htmlelement("select")}} と {{htmlelement("pre")}} 要素への参照を定数に保存し、{{domxref("GlobalEventHandlers.onchange","onchange")}} イベントハンドラ関数を定義していて、これは select の値が変わったら、その値が呼び出される関数 <code>updateDisplay()</code> の引数となるようにします。</p> + + <pre class="brush: js notranslate">const verseChoose = document.querySelector('select'); +const poemDisplay = document.querySelector('pre'); + +verseChoose.onchange = function() { + const verse = verseChoose.value; + updateDisplay(verse); +};</pre> + </li> + <li> + <p><code>updateDisplay()</code> 関数を定義しましょう。まずはさっきのコードブロックの下に以下を書き足します — これは関数のからっぽのガワです。 注: ステップ 4 から 9 はすべて、この関数<em>内で</em>実施します。</p> + + <pre class="brush: js notranslate">function updateDisplay(verse) { + +}</pre> + </li> + <li> + <p>関数を、後から必要になる読み込みたいテキストファイルを指す相対 URL を作るところからはじめます。{{htmlelement("select")}} 要素の値は常に、選択されている {{htmlelement("option")}} の内側テキスト、例えば"Verse 1"とか、に一致します (value 属性で異なる値を設定していなければ)。これに相当するテキストファイルは "verse1.txt" で HTML と同じディレクトリにあるので、ファイル名だけで十分です。</p> + + <p>ただ、Web サーバはたいてい大文字小文字を区別しますし、今回のファイル名にスペースは含まれていません。"Verse 1" を "verse1.txt" に変換するためには、V を小文字にして、スペースを取り除き、.txt を末尾に追加しなければなりません。これは{{jsxref("String.replace", "replace()")}} に {{jsxref("String.toLowerCase", "toLowerCase()")}}、あと単なる <a href="/ja/docs/Learn/JavaScript/First_steps/Strings#Concatenating_strings">文字列の結合</a> で実現できます。以下のコードをあなたの <code>updateDisplay()</code> 関数の内側に追加して下さい:</p> + + <pre class="brush: js notranslate">verse = verse.replace(" ", ""); +verse = verse.toLowerCase(); +let url = verse + '.txt';</pre> + </li> + <li> + <p>XHR リクエストを作り始めるため、リクエストオブジェクトを {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}} コンストラクタを使って作成しなければなりません。このオブジェクトには好きな名前を付けられますが、単純にするため <code>request</code> を使います。<code>updateDisplay()</code> 関数の内側で、先の行の下に以下を追加します:</p> + + <pre class="brush: js notranslate">let request = new XMLHttpRequest();</pre> + </li> + <li> + <p>次に {{domxref("XMLHttpRequest.open","open()")}} メソッドを使ってどの <a href="/ja/docs/Web/HTTP/Methods">HTTP リクエストメソッド</a> を使ってリソースをネットワークから取得するか、URL はどこかを指定しなければなりません。ここでは単に <code><a href="/ja/docs/Web/HTTP/Methods/GET">GET</a></code> メソッドを使い、URL には <code>url</code> 変数の値をセットします。先の行の下に以下を追加します:</p> + + <pre class="brush: js notranslate">request.open('GET', url);</pre> + </li> + <li> + <p>次はレスポンスにどのような形式にしたいか指定 — これはリクエストの {{domxref("XMLHttpRequest.responseType", "responseType")}} プロパティで指定します — <code>text</code> にします。厳密に言えばこの場合は必須の指定ではありません — XHR はデフォルトで text を返します — が、いつの日か他のデータ形式を指定したくなる場合にそなえて、この設定をする習慣をつけておくと良いと思います。次を追加して下さい:</p> + + <pre class="brush: js notranslate">request.responseType = 'text';</pre> + </li> + <li> + <p>ネットワークからリソースを取得する処理は非同期{{glossary("asynchronous")}} 処理なので、戻りを使って何かをする前に、あなたは処理が完了(リソースがネットワークから返ってくる)するのを待たなければならず、さもないとエラーが投げられます。XHR では {{domxref("XMLHttpRequest.onload", "onload")}} イベントハンドラを使ってこの問題をさばけます — これは {{event("load")}} イベントが発火(レスポンスが返ってきた)した時に実行されます。このイベントが起きた後は、レスポンスデータは XHR リクエストオブジェクトの <code>response</code> プロパティとして取得できます。</p> + + <p>さっき追加した行の後に以下を追加して下さい。<code>onload</code> イベントハンドラの中で、<code>poemDisplay</code> ({{htmlelement("pre")}}要素) の <code><a href="/ja/docs/Web/API/Node/textContent">textContent</a></code> プロパティに {{domxref("XMLHttpRequest.response", "request.response")}} プロパティの値を設定しているのがお判りでしょう。</p> + + <pre class="brush: js notranslate">request.onload = function() { + poemDisplay.textContent = request.response; +};</pre> + </li> + <li> + <p>以上は全部、XHR リクエストの設定です — 実は私たちがやれと指示するまで動作はしません。やれと指示するには、{{domxref("XMLHttpRequest.send","send()")}} メソッドを使います。さっき追加した行の後に以下を追加して、関数を完成させます。この行は、<code>updateDisplay()</code> 関数の閉じ中括弧のすぐ上に置く必要があります。</p> + + <pre class="brush: js notranslate">request.send();</pre> + </li> + <li> + <p>今の時点でのこの例題にある問題の一つは、最初に読み込まれた時点ではなにも詩が表示されないことです。これを直すには、あなたのコードの一番下 (<code></script></code> 閉じタグのすぐ上) に以下の二行を追加し、デフォルトで1番の詩を読み込みませ、{{htmlelement("select")}} 要素に適切な値を指させます:</p> + + <pre class="brush: js notranslate">updateDisplay('Verse 1'); +verseChoose.value = 'Verse 1';</pre> + </li> +</ol> + +<h3 id="サーバからあなたの例題を送らせる">サーバからあなたの例題を送らせる</h3> + +<p>今時のブラウザ (Chrome も含まれます) は、ローカルファイルとして例題を実行しても XHR リクエストを行ないません。これはセキュリティの制限によるものです (Web のセキュリティにより詳しくは <a href="/docs/Learn/Server-side/First_steps/Website_security">Webサイトのセキュリティ</a>を読んで下さい)。</p> + +<p>これをどうにかするため、例題をローカルの Web サーバを使って実行しなければなりません。どうやるのかは、 <a href="/docs/Learn/Common_questions/set_up_a_local_testing_server">テスト用のローカルサーバを設定するにはどうすればいい?</a> を読んで下さい。</p> + +<h3 id="Fetch">Fetch</h3> + +<p>Fetch API は、基本的には XHR の今風の代替品です — 最近になってブラウザに組込まれたもので、非同期 HTTP リクエストを JavaScript で、開発者や他の Fetch の上に組まれた API から簡単に行なえるようにするためのものです。</p> + +<p>先の例を Fetch を使うように書き換えてみましょう!</p> + +<ol> + <li> + <p>さっき完成させた例題のディレクトリのコピーを作ります(前の例題を完成させていないなら、新しいディレクトリを作成して、そこに <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html">xhr-basic.html</a> と4つのテキストファイル — (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt">verse1.txt</a>、<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt">verse2.txt</a>、<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt">verse3.txt</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt">verse4.txt</a>) のコピーを作って下さい。</p> + </li> + <li> + <p><code>updateDisplay()</code> 関数の中から、XHR のコードを探し出します:</p> + + <pre class="brush: js notranslate">let request = new XMLHttpRequest(); +request.open('GET', url); +request.responseType = 'text'; + +request.onload = function() { + poemDisplay.textContent = request.response; +}; + +request.send();</pre> + </li> + <li> + <p>XHR のコードを次のように置き換えます:</p> + + <pre class="brush: js notranslate">fetch(url).then(function(response) { + response.text().then(function(text) { + poemDisplay.textContent = text; + }); +});</pre> + </li> + <li> + <p>例題をブラウザに読み込むと(Web サーバから読んで下さい)、XHR 版と同様に動作するするはずです。今時のブラウザを使っていれば。</p> + </li> +</ol> + +<h4 id="Fetch_のコードでは何が起きている">Fetch のコードでは何が起きている?</h4> + +<p>まず最初に、{{domxref("WorkerOrWindowGlobalScope.fetch()","fetch()")}} メソッドが呼ばれ、取得したいリソースの URL が渡されています。これは XHR の {{domxref("XMLHttpRequest.open","request.open()")}} の今時な同等品で、さらに言えば <code>.send()</code> に相当するものは必要ありません。</p> + +<p>その後に、{{jsxref("Promise.then",".then()")}} メソッドが <code>fetch()</code> の後に連鎖されているのがわかるでしょう — このメソッドは {{jsxref("Promise","Promises")}} の一部で、非同期処理を行なうための今風な JavaScript に備わる機能です。<code>fetch()</code> はプロミスを返し、これはサーバから送られたレスポンスによって解決されます — <code>.then()</code> を使ってプロミスが解決された後にある種後始末のコードを走らせるようにし、そのコードとは内側で定義した関数にあたります。これは XHR 版の <code>onload</code> イベントハンドラに相当します。</p> + +<p>この関数には、<code>fetch()</code> のプロミスが解決された際に、自動的にサーバからのレスポンスが引数として渡されます。関数の中で、レスポンスをつかまえてその {{domxref("Body.text","text()")}} メソッド、これは基本的にレスポンスを生のテキストで返すもの、を走らせます。これは XHR 版の <code>request.responseType = 'text'</code> 部分と等価です。</p> + +<p><code>text()</code> もプロミスを返しているのがおわかりでしょう、ですのでそれに別の <code>.then()</code> を連鎖させ、その中で <code>text()</code> のプロミスが解決する生テキストを受けとるよう、関数を定義します。</p> + +<p>内側のプロミスの関数の中で、XHR 版でやったのとほとんど同じ事をやっています — {{htmlelement("pre")}} 要素のテキストコンテントにテキスト値を設定しています。</p> + +<h3 id="Aside_on_promises">Aside on promises</h3> + +<p>プロミスは初めて見るとちょっと混乱させられますが、今はひとまずそんなに心配しなくて大丈夫です。ちょっとすれば慣れます、とくに今風の JavaScript APIを学んでいけば — 新しい部分の大半がこのプロミスに強く依存しています。</p> + +<p>上の例のプロミスの構造を見直してみましょう、もうちょっと意味が通じてくるかもしれません:</p> + +<pre class="brush: js notranslate">fetch(url).then(function(response) { + response.text().then(function(text) { + poemDisplay.textContent = text; + }); +});</pre> + +<p>最初の行で言っているのは、「urlにあるリソースを取ってこい(fetch)」(<code>fetch(url)</code>)で、「それから(then)プロミスが解決したら指定した関数を実行しろ」(<code>.then(function() { ... })</code>)です。「解決」とは、「この先どこかの時点で、指定された処理の実行を終える」事を意味します。この場合だと指定された処理とは、指定のURLからリソースを取ってきて(HTTPリクエストを使って)、そのレスポンスを私たちがどうにかできるように返せ、です。</p> + +<p>実際のところ、<code>then()</code>に渡される関数は、すぐには実行されないコードの塊です — すぐにではなく、未来のどこかの時点でレスポンスが返って来た時に実行されます。頭に入れておいて下さい、プロミスは変数に保存する事もできて、変数に {{jsxref("Promise.then",".then()")}} を連鎖する事ができます。次のコードがやっているのも同じ事です:</p> + +<pre class="brush: js notranslate">let myFetch = fetch(url); + +myFetch.then(function(response) { + response.text().then(function(text) { + poemDisplay.textContent = text; + }); +});</pre> + +<p><code>fetch()</code> メソッドは HTTP レスポンスによって解決されるプロミスを返し、その後ろに連鎖された <code>.then()</code> の中にどのような関数を定義しても、それには引数としてレスポンスが自動で渡されます。引数にどんな名前を付けるのもご自由です — 下の例もちゃんと動きます:</p> + +<pre class="brush: js notranslate">fetch(url).then(function(dogBiscuits) { + dogBiscuits.text().then(function(text) { + poemDisplay.textContent = text; + }); +});</pre> + +<p>ですがパラメータにはその中身がわかる名前を付けた方がいいですよね!</p> + +<p>今度は関数だけに着目しましょう:</p> + +<pre class="brush: js notranslate">function(response) { + response.text().then(function(text) { + poemDisplay.textContent = text; + }); +}</pre> + +<p>レスポンスオブジェクトには {{domxref("Body.text","text()")}} メソッドがあって、これはレスポンスボディにある生データを受けて、プレインテキスト(これが私たちの必要とする形式です)、に変換します。このメソッドもプロミス(これは結果となるテキスト文字列で解決します)を返すので、ここでまた別の {{jsxref("Promise.then",".then()")}} を使い、この内部で、テキスト文字列を使って私たちがやりたい事を行うための別の関数を定義します。私たちがやるのは、ただ詩用の {{htmlelement("pre")}} 要素の <code><a href="/docs/Web/API/Node/textContent">textContent</a></code> プロパティをテキスト文字列と同じに設定だけなので、これはとても単純です。</p> + +<p>これも覚えておく価値があります、それぞれのブロックの結果を次のブロックに渡していくように、直接複数のプロミスブロック(<code>.then()</code>ブロック以外の種類もあります)を次から次へと連鎖する事ができます、あたかも鎖を下にたどっていくように。このおかげで、プロミスはとても強力なのです。</p> + +<p>次のブロックはもとの例題と同じ事をしますが、違うやり方で書かれています:</p> + +<pre class="brush: js notranslate">fetch(url).then(function(response) { + return response.text() +}).then(function(text) { + poemDisplay.textContent = text; +});</pre> + +<p>多くの開発者はこの書き方の方が好きです、なぜなら平らで、間違いなく長大なプロミス連鎖も読みやすいからです — それぞれのプロミスが、前のやつの内側に来る(これは扱いづらくなる場合があります)のではなく、前のやつから順々に続いています。違うのは <code><a href="/docs/Learn/JavaScript/Building_blocks/Return_values">return</a></code> 文を response.text() の前に書いて、それが出した結果を次の鎖に渡すようにしなければならないところだけです。</p> + +<h3 id="どっちの機構を使うべき">どっちの機構を使うべき?</h3> + +<p>これは本当に、あなたがどんなプロジェクトを進めているかによります。XHR は長いこと存在しているので、様々なブラウザで非常によくサポートされています。一方 Fetch とプロミスは Web プラットフォームに最近追加されたものなので、ブラウザ界では結構サポートされているんですが、IE はサポートしていません。</p> + +<p>古いブラウザをサポートする必要があるのならば、XHR の方が良いでしょう。ですがあなたがもっと先進的なプロジェクトで働いて、古いブラウザの事でさして悩まないなら、Fetch が良い選択になるでしょう。</p> + +<p>本当はどっちも学ぶべきです — Fetch は IE が消えていくにつれ(IE は、Microsoft の新しい Edge ブラウザのおかげで開発が終了しています)どんどん一般的になっていくでしょうが、もうしばらくは XHR が必要でしょう。</p> + +<h2 id="もっとややこしい例題">もっとややこしい例題</h2> + +<p>この記事のまとめとして、Fetch のより興味深い使い方を示す、ちょっとばかり難しい例題を見ていきましょう。例題用に缶詰屋というサイトを作成しました — これは缶詰だけを売る仮想のお店です。これの <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/">GitHubでのライブ実行</a> と <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/fetching-data/can-store">ソースコード</a> が見られます。</p> + +<p><img alt="A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column." src="https://mdn.mozillademos.org/files/14779/can-store.png" style="display: block; margin: 0 auto;"></p> + +<p>デフォルトではサイトには全ての商品が表示されますが、左側のカラムにあるフォームコントロールからカテゴリから、検索語から、あるいはその両方によってフィルタリングをかけられます。</p> + +<p>商品をカテゴリや検索語によってフィルタリングする処理をし、UIでデータが正しく表示されるように文字列を操作するためなどに、けっこうな量の複雑なコードがあります。この記事のなかでそれら全てについて解説しませんが、ソースコードのコメントに詳しいことがたくさん書いてあります(<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js">can-script.js</a>を見て下さい)。</p> + +<p>ですが、Fetch のコードについては説明していきます。</p> + +<p>Fetch を使うブロックの最初は、JavaScript の初めの方にあります:</p> + +<pre class="brush: js notranslate">fetch('products.json').then(function(response) { + return response.json(); +}).then(function(json) { + let products = json; + initialize(products); +}).catch(function(err) { + console.log('Fetch problem: ' + err.message); +});</pre> + +<p><code>fetch()</code> 関数はプロミスを返します。これが成功裏に完了すると、一つ目の <code>.then()</code> ブロックの中にある関数は、ネットワークから返された <code>response</code> を受け取ります。</p> + +<p>この関数の中で、{{domxref("Body.text","text()")}} ではなくて {{domxref("Body.json","json()")}} を実行しています。プレインテキストではなく、構造化された JSON データとしてレスポンスを返してほしいからです。</p> + +<p>次に、別の <code>.then()</code> を最初の <code>.then()</code> の後に連鎖させています。これに、<code>response.json()</code> プロミスから返された <code>json</code> を含む成功時の関数を渡しています。この <code>json</code> を <code>products</code> 変数の値として代入してから、<code>initialize(products)</code> を実行します。すべての商品をユーザーインターフェイスに表示する処理が開始されます。</p> + +<p>エラーを処理するために、連鎖の最後に <code>.catch()</code> ブロックを連鎖させています。これは、何らかの理由でプロミスが失敗した場合に実行されます。その中には、引数として渡される関数、<code>error</code> オブジェクトが含まれています。この <code>error</code> オブジェクトを使用して、発生したエラーがどういうものかを伝えられます。ここでは単純な <code>console.log()</code> を使用して伝えています。</p> + +<p>ただし、完全な Web サイトでは、ユーザの画面にメッセージを表示し、状況を改善する選択肢を提供することで、このエラーをより適切に処理するでしょう。とは言え、ここでは単純な <code>console.log()</code> 意外は必要ありません。</p> + +<p>あなたは自分でも失敗した場合のテストができます:</p> + +<ol> + <li>例題のファイルのローカルコピーを作成して下さい(<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true">缶詰屋の ZIPファイル</a>をダウンロードして展開して下さい)。</li> + <li>コードを Web サーバから読んで走らせるようにします(方法は前に {{anch("Serving your example from a server")}}で解説しました)。</li> + <li>fetch するファイルのパスを、'produc.json' のようなものに変更します(誤ったファイル名にして下さい)。</li> + <li>ここでインデックスファイルをブラウザに読み込んで( <code>localhost:8000</code> から)、あなたのブラウザの開発者コンソールを見ます。次の行のようなメッセージが表示されるはずです「Network request for produc.json failed with response 404: File not found」。</li> +</ol> + +<p>二つ目の Fetch ブロックは <code>fetchBlob()</code> 関数の中にあります:</p> + +<pre class="brush: js notranslate">fetch(url).then(function(response) { + return response.blob(); +}).then(function(blob) { + // Convert the blob to an object URL — this is basically a temporary internal URL + // that points to an object stored inside the browser + let objectURL = URL.createObjectURL(blob); + // invoke showProduct + showProduct(objectURL, product); +});</pre> + +<p>これも前のとおおよそ同じように動作しますが、{{domxref("Body.json","json()")}} ではなくて {{domxref("Body.blob","blob()")}} を使っているところが違います — 今回の場合は画像ファイルを返したいので、これ用に使うデータ形式は <a href="/ja/docs/Web/API/Blob">Blob</a> — これは "<u>B</u>inary <u>L</u>arge <u>Ob</u>ject" の略で、たいていは巨大なファイルのようなオブジェクト、画像や動画のようなものを示すのに使われます。</p> + +<p>blob を成功裏に受信したら、{{domxref("URL.createObjectURL()", "createObjectURL()")}}を使ってそこからオブジェクトURLを取り出します。これはそのブラウザの中でのみ有効なオブジェクトを示す一時的な URL を返します。あまり読み易いものではありませんが、缶詰屋アプリを開いて画像を Ctrlクリックもしくは右クリックして、メニューから「画像を表示」を選択する(これはあなたが使っているブラウザによって異なる場合があります)と見ることができます。オブジェクトURLはブラウザのアドレスバーに表示され、こんな感じになるでしょう:</p> + +<pre class="notranslate">blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4</pre> + +<h3 id="課題_XHR_版の缶詰屋">課題: XHR 版の缶詰屋</h3> + +<p>ちょっとした練習として、アプリの Fetch 版を XHR を使うように書き換えて下さい。<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true">ZIPファイル </a>のコピーを作って、上手く JavaScript を書き換えてみて下さい。</p> + +<p>ちょっとしたヒントです:</p> + +<ul> + <li>{{domxref("XMLHttpRequest")}} のリファレンス記事が役に立つでしょう。</li> + <li>基本的には、初めの方の <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html">XHR-basic.html</a> の例で見たのと同じようなパターンを使う必要があります。</li> + <li>ただし、Fetch 版の缶詰屋でお見せしたのと同様なエラー処理を追加する必要があります: + <ul> + <li><code>load</code> イベントが発火した後は、プロミスの <code>then()</code> の中ではなく、<code>request.response</code> の中にレスポンスはあります。</li> + <li>XHR において、Fetch の <code>response.ok</code> に相当する一番良いやり方は、{{domxref("XMLHttpRequest.status","request.status")}} が 200 であるか、{{domxref("XMLHttpRequest.readyState","request.readyState")}} が 4 である事をチェックする事です。</li> + <li>ステータスとステータスメッセージを取得するためのプロパティは一緒ですが、これは <code>response</code> オブジェクトの中ではなく <code>request</code>(XHR)オブジェクトの中にあります。</li> + </ul> + </li> +</ul> + +<div class="note"> +<p><strong>注記</strong>: 上手くいかないときは、我々のGitHubにある完成版のコード (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store-xhr/can-script.js">ソースコードはこちらから</a>、<a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store-xhr/">ライブ実行版</a>もどうぞ) と比べてみて下さい。</p> +</div> + +<h2 id="まとめ">まとめ</h2> + +<p>私たちのサーバからのデータ取得に関する記事は以上です。ここまでくれば、どう XHR と Fetch を使って進めていけばいいのか理解できたことでしょう。</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<p>この記事には様々なほんのさわりしか説明していない事項がたくさんあります。これらの事項についてもっと詳しくは、以下の記事を見て下さい:</p> + +<ul> + <li><a href="/ja/docs/Web/Guide/AJAX/Getting_Started">Ajax — 始めましょう</a></li> + <li><a href="/ja/docs/Web/API/Fetch_API/Using_Fetch">Fetch を使う</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></li> + <li><a href="/ja/docs/Web/HTTP/Overview">HTTP の概要</a></li> + <li><a href="/ja/docs/Learn/Server-side">サーバサイド Web サイトプログラミング</a></li> +</ul> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<h2 id="このモジュール">このモジュール</h2> + +<div> +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">ドキュメントの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">グラフィックの描画</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側ストレージ</a></li> +</ul> +</div> diff --git a/files/ja/learn/javascript/client-side_web_apis/index.html b/files/ja/learn/javascript/client-side_web_apis/index.html new file mode 100644 index 0000000000..0675ea4da0 --- /dev/null +++ b/files/ja/learn/javascript/client-side_web_apis/index.html @@ -0,0 +1,51 @@ +--- +title: クライアントサイド Web API +slug: Learn/JavaScript/Client-side_web_APIs +tags: + - API + - CodingScripting + - DOM + - JavaScript + - Landing + - WebAPI + - グラフィック + - データ + - メディア + - モジュール + - 初心者向け + - 学習 + - 記事 +translation_of: Learn/JavaScript/Client-side_web_APIs +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Web サイトやアプリケーション用にクライアント側のJavaScriptを書いていると、すぐに<strong>アプリケーションプログラミングインターフェース </strong>(<u>A</u>pprication <u>P</u>rogramming <u>I</u>nterfaces、<strong>API</strong>) にでくわします。API とはブラウザやサイトが動作している OS の様々な面を操作したり、他の Web サイト、サービスから取得したデータを操作するためのプログラムされた機能です。このモジュールでは API とは何か、開発作業の中でよく見かける最もよく利用される API のいくつかについて、どのように使うかを説明していきます。</p> + +<h2 id="前提条件">前提条件</h2> + +<p>このモジュールをよく理解するためには、ここまでの一連のJavaScriptに関するモジュール (<a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a> と <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>) の学習をすませているべきです。これらのモジュールでは大抵簡単な API を使っていますが、その助けなしにクライアント側の JavaScript を書き上げるのは難しいからです。このチュートリアルの中では、JavaScript 言語のコア部分については十分理解しているものとして、よく使われる Web API についてもう少し詳しく探っていきます。</p> + +<p><a href="/en-US/docs/Learn/HTML">HTML</a> と <a href="/en-US/docs/Learn/CSS">CSS</a> に関する基礎知識も役に立つでしょう。</p> + +<div class="note"> +<p><strong>注記</strong>: もし自分のファイルを作成できないようなデバイス上で作業しているなら、大半のコード例を <a href="http://jsbin.com/">JSBin</a> や <a href="https://thimble.mozilla.org/">Thimble</a> のようなオンラインプログラム作成・実行環境で試してみることもできます。</p> +</div> + +<h2 id="ガイド">ガイド</h2> + +<dl> + <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></dt> + <dd>まずはAPIを高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスのAPIが何なのか、どんな使い方があるのかも見ていきます。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">文章の操作</a></dt> + <dd>Webページやアプリを書く場合に、最も多く必要になるのはWeb文書をどうかして操作する事でしょう。これは普通ドキュメントオブジェクトモデル(<u>D</u>ocument <u>O</u>bject <u>M</u>odel、DOM)、これはHTMLとスタイルに関する情報を{{domxref("Document")}}オブジェクトを使いまくって操作するための一連のAPIです、を用いて行ないます。この記事では、DOMの使い方を詳しく見ながら、面白い方法であなたの環境を変える事ができる興味深い他のAPIもいくつか見ていきます。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></dt> + <dd>また別に、モダンなWebサイトやアプリケーションでしょっちゅう必要になるのは、サーバから個々のデータを取ってきて、新しいページ全体を読んでくることなしに、ページの一部を書き換える事です。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました。この記事ではそのコンセプトを解説し、これを可能にした技術{{domxref("XMLHttpRequest")}}と<a href="/ja/docs/Web/API/Fetch_API">Fetch API</a>について見ていきます。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></dt> + <dd>これまでに説明したAPIはブラウザに組込まれていますが、全てのAPIが組込まれているのではありません。グーグルマップやTwitter、Facebook、ペイパルなど、多くの巨大なWebサイトやサービスが、開発者に対して彼らのデータを利用したり(例:あなたのブログにtwitterのタイムラインを表示させる)、サービスを利用したり(例:あなたのサイトに独自のグーグルマップを表示したり、あなたのサービス利用者にFacebookでログインできたり)するためのAPIを提供しています。この記事ではブラウザAPIとサードパーティAPIの違いを見ていき、典型的な後者の使い方をお見せします。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">絵を描く</a></dt> + <dd>ブラウザにはグラフィックを描くためのとても強力なツールがいくつか組込まれています。<a href="/docs/Web/SVG">SVG</a>(Scalable Vector Graphics)言語から、HTMLの{{htmlelement("canvas")}}キャンバス要素に描画するためのAPIまで (<a href="/docs/Web/API/Canvas_API">キャンバスAPI</a> や <a href="/docs/Web/API/WebGL_API">WebGL</a>を参照)。 この記事ではキャンバスAPIへの導入を説明し、もっと深く学習していくためのリソースをご紹介します。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></dt> + <dd>HTML5には文書にリッチなメディアを埋め込むための要素が備わっています — {{htmlelement("video")}} と {{htmlelement("audio")}} — それぞれに再生やシークなどの操作するための独自APIを備えています。この記事では独自の再生操作パネルを作成するような、よくある仕事をどうやればいいのかお見せします。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側でのデータ保存</a></dt> + <dd>モダンなブラウザには、Webサイトに関するデータを保存し必要なときに取り出すための様々に異なる技術が実装されており、これを使ってデータを長期間保存したり、サイトをオフラインに保存したりなどなどができます。この記事ではこれらがいかに動作するのか、その基本の基本について説明します。</dd> +</dl> diff --git a/files/ja/learn/javascript/client-side_web_apis/introduction/index.html b/files/ja/learn/javascript/client-side_web_apis/introduction/index.html new file mode 100644 index 0000000000..521cd6d234 --- /dev/null +++ b/files/ja/learn/javascript/client-side_web_apis/introduction/index.html @@ -0,0 +1,317 @@ +--- +title: Web API の紹介 +slug: Learn/JavaScript/Client-side_web_APIs/Introduction +tags: + - 3rd party + - API + - Article + - Beginner + - Browser + - CodingScripting + - Learn + - Object + - WebAPI + - client-side +translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">まずはAPIを高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスのAPIは何なのか、どのような使い方があるのかも見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピュータの知識および利用能力、<a href="/en-US/docs/Learn/HTML">HTML</a> と <a href="/en-US/docs/Learn/CSS">CSS</a> の基本的な理解、JavaScript の基本 (<a href="/docs/Learn/JavaScript/First_steps">第一歩</a>、<a href="/docs/Learn/JavaScript/Building_blocks">構成要素</a>, <a href="/docs/Learn/JavaScript/Objects">JavaScriptオブジェクト</a>).</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>API に何ができて、あなたのコードでどう使えばいいのか知ること。</td> + </tr> + </tbody> +</table> + +<h2 id="API_って何">API って何?</h2> + +<p>Application Programming Interfaces (APIs) は、開発者が複雑な機能をより簡単に作成できるよう、プログラミング言語から提供される構造です。複雑なコードを抽象化し、それにかわる簡潔な構文を提供します。</p> + +<p>実世界の例として、あなたの家、アパートや他の住処にある電気のコンセントについて考えて下さい。あなたの家で機器を使いたい時には、電源コードのプラグをコンセントに差し込めば事足ります。電源に直接結線したりしないでしょう — そんなのは非効率ですし、あなたが電気工事士でなければ、やってみるには難しいし危険です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14317/plug-socket.png" style="display: block; height: 472px; margin: 0px auto; width: 700px;"></p> + +<p><em>画像提供: <a href="https://www.flickr.com/photos/easy-pics/9518184890/in/photostream/lightbox/">超タコ足コンセント</a> by <a href="https://www.flickr.com/photos/easy-pics/">The Clear Communication People</a>, Flickr より</em></p> + +<p>それと同じことで、そうですね、例えば3次元グラフィックのプログラムを JavaScript や Python のような高レベル言語で書かれた API を使ってやる方が、C や C++ のような低レベル言語から直接コンピュータの GPU やグラフィック機能を叩いてやるよりも、ずっと簡単です。</p> + +<div class="note"> +<p><strong>注記</strong>: API という語についてもっと詳しいことは <a href="/ja/docs/Glossary/API">APIの用語解説</a> を参照して下さい。</p> +</div> + +<h3 id="クライアントサイド_JavaScript_での_API">クライアントサイド JavaScript での API</h3> + +<p>クライアントサイド API では、実際非常にたくさんのAPIが使えます — それらは JavaScript 言語本体の一部ではなく、あなたにスーパーパワーを与えるべく JavaScript 言語のコアの上に築かれた代物です。それらはおおよそ二つのカテゴリに分けられます:</p> + +<ul> + <li><strong>ブラウザ API</strong> は Web ブラウザに組込まれていて、ブラウザやコンピュータの環境の情報を取得し、これを使って役に立つややこしい事を行えるようにするものです。 例えば <a href="/en-US/docs/Web/API/Geolocation/Using_geolocation">Geolocation API</a> は位置情報を取得するための簡単な JavaScript 構造を提供するので、例えばグーグルマップにあなたの居場所を表示するような事ができます。裏で実際にはブラウザは低レベル (例えば C++) の複雑なコードをいくつか使ってデバイスの GPS 機器 (あるいは位置情報を得られる他のなんだか) と通信し、位置情報を取得し、コードから利用できるようにブラウザ環境に情報を戻しています。ですがここでもこの複雑な事柄は API で抽象化され隠蔽されます。</li> + <li><strong>サードパーティ API</strong> はデフォルトではブラウザに組込まれておらず、普通はコードと情報を Web のどこから読み込まねばなりません。例えば <a href="https://dev.twitter.com/overview/documentation">Twitter API</a> を使えばあなたの Web サイトにあなたの最新のツイートを表示するような事が可能になります。Twitter API は、Twitter サービスに特定の情報を要求したりするのに使える特別な構造のかたまりを提供します。</li> +</ul> + + + + + +<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p> + + + +<h3 id="JavaScript_と_API_とその他_JavaScript_ツールの関係">JavaScript と API とその他 JavaScript ツールの関係</h3> + +<p>ここまででクライアントサイド API とは何か、JavaScript 言語とどう関係しているのかお話しました。もっとはっきりさせるために一度おさらいして、ついでに他の JavaScript ツールがどう関係してくるのかもお話しましょう:</p> + +<ul> + <li>JavaScript — ブラウザに組込まれた高レベルスクリプト言語で、Web ページやアプリに機能を実装するのに使えます。<a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Node</a> のようなブラウザ以外の他のプログラミング環境でも使えるのは覚えておいて下さい。</li> + <li>ブラウザ API — ブラウザに組込みの JavaScript 言語の上にある構造で、何かの機能をもっと簡単に実装できるようにします。</li> + <li>サードパーティ API — サードパーティのプラットフォーム (Twitter や Facebook) 上に作られた構造で、それらのプラットフォームの機能を Web ページで利用できるようにします (例えばあなたの最新のツイートをあなたの Web ページに表示する)。</li> + <li>JavaScript ライブラリ — 多くは、<a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Custom_functions">独自の関数</a> を含んだ一つか複数の JavaScript ファイルで、Web ページにくっつけることでスピードアップしたり共通の機能を書いたりできるものです。例えば、jQuery、Mootools や React がなどが含まれます。</li> + <li>JavaScript フレームワーク — ライブラリの一階層上にあたり、JavaScript フレームワーク (例えば Angular や Ember) は HTML や CSS に JavaScript、インストールして一から Web アプリケーションを作成するのに使えるその他もろもろの技術がパッケージ化されている場合が多いです。ライブラリとフレームワークの大きな相違点は、「制御の逆転 (Inversion of Control)」にあります。ライブラリのメソッドを呼ぶ時には、開発者がコントロールしています。フレームワークでは、コントロールが逆転します: フレームワークから開発者のコードが呼ばれるのです。</li> +</ul> + +<h2 id="API_で何ができる">API で何ができる?</h2> + +<p>モダンなブラウザではすごい数の API を利用できるので、コードからとてもいろいろな事ができます。 <a href="/ja/docs/Web/API">MDN API 索引</a>を見てみればわかると思います。</p> + +<h3 id="一般的なブラウザ_API">一般的なブラウザ API</h3> + +<p>特に、あなたが使うであろう最も一般的なブラウザ API のカテゴリ (このモジュールでとても詳しい所まで網羅していきます) は:</p> + +<ul> + <li>ブラウザで読み込んだ<strong>文書を操作するための API</strong>。一番目にする例は <a href="/ja/docs/Web/API/Document_Object_Model">DOM (Document Object Model) API</a> で、 HTML と CSS を操作できます — HTML を作成したり削除したり書き換えたり、動的に新しいスタイルをページに適用したり、などなど。例えばページにポップアップウィンドウが表われたり、何か新しい中身が表示されたりする時、DOM が使われています。この種の API については<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">ドキュメントの操作</a>でもっといろいろ見られます。</li> + <li><strong>サーバからデータ取得をする API</strong> で Web ページの一部を書き換える事はとてもよく行なわれます。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました — 在庫一覧や新しいお話一覧を書き換えたい時に、サーバからページ全体をリロードする事なしにさくっとできたら、サイトやアプリはずっと反応よく素早く感じられます。これを可能にした API には <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest is an API that provides client functionality for transferring data between a client and a server. It provides an easy way to retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just a part of the page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> と <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a> が含まれています。<strong>Ajax</strong> という言葉を聞いた事があるかもしれませんが、これがこのテクニックの呼び名です。これらの API について <a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a>でもっといろいろ見られます。</li> + <li><strong>グラフィックスを描画したり操作する API</strong> は多くのブラウザがサポートしています — 最も知られているものには<a href="/docs/Web/API/Canvas_API"> Canvas</a> と <a href="/docs/Web/API/WebGL_API">WebGL</a> があり、HTML の{{htmlelement("canvas")}} 要素上にあるピクセルデータを書き換えて2次元や3次元のシーンを作成するのに使えます。例えばキャンバスAPIを使って長方形や円のような形を描いたり、キャンバスに画像を読み込んだり、セピアやグレイスケールといったフィルターを適用したり、あるいは WebGL を使ってライティングやテクスチャを使った3Dシーンを作成したりできます。これらの API はよくアニメーションループを作成するAPI({{domxref("window.requestAnimationFrame()")}} など)や他のものと組み合わせて使われ、アニメやゲームのようなものの表示を定期的に書き換えるようにします。</li> + <li><strong><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">動画と音声の API</a></strong> {{domxref("HTMLMediaElement")}}や <a href="/docs/Web/API/Web_Audio_API">Web Audio API</a> や <a href="/docs/Web/API/WebRTC_API">WebRTC</a> のような API を使うと、 マルチメディアを使ってとても面白い事ができます。音声や動画再生のための独自のコントロールUIの作成、字幕やサブタイトルのような音声トラックをビデオと一緒に表示したり、Web カメラの画像を取り込んで操作し、上述のキャンバスに表示したり Web カンファレンスに参加している他の誰かのコンピュータ上に表示したり、音声トラックにイフェクト(ゲイン、ディストーション、音場効果など)をかけたりできます。</li> + <li><strong>デバイス API</strong> は基本的に Web アプリで使えるような形で、今時のハードウェアデバイスのデータを操作したり取得する API です。デバイスの位置データにアクセスして地図上にあなたの居場所を書くような位置情報 API についてはすでにお話しました。他の例にはシステム通知を使って Web アプリに役に立つアップデートがあるのを知らせたり(<a href="/docs/Web/API/Notifications_API">Notifications API</a> を参照)、ハードウェアを振動させたり(<a href="/docs/Web/API/Vibration_API">Vibration API</a> を参照)などがあります。</li> + <li><strong>クライアント側でのデータ保持 API </strong>は今多くのブラウザに普及しつつあります。— クライアント側にデータを保存できると、ページを移動しても状態を保存したり、たとえデバイスがオフラインでも動作するようなアプリを作成したいような場合、とても役に立ちます。いくつもの選択肢があり、例えば <a href="/docs/Web/API/Web_Storage_API">Web Storage API</a> を使ったキーバリューストアや、 <a href="/docs/Web/API/IndexedDB_API">IndexedDB API</a> を使ったもっと複雑なテーブル型データ保存などです。</li> +</ul> + +<h3 id="一般的なサードパーティAPI">一般的なサードパーティAPI</h3> + +<p>サードパーティ API はバラエティーに富んでいます。あなたが遅かれ早かれ使うようになりそうな、世間でよく使われているものには以下のようなものがあります:</p> + +<ul> + <li><a href="https://dev.twitter.com/overview/documentation">Twitter API</a>、あなたの最新のツイートをあなたの Web サイトに表示したりするような事に使えます。</li> + <li><a href="https://developer.mapquest.com/">Mapquest</a> や <a href="https://developers.google.com/maps/">Google Maps API</a> のような地図の API は、あなたのWebページ上に地図を使ったあらゆる事を可能にします。</li> + <li><a href="https://developers.facebook.com/docs/">Facebook APIスイート</a>によって Facebook エコシステムの様々な部品を使ってあなたのアプリを強化できます。例えばアプリへのログインを Facebook のログインで行なったり、アプリ内での支払い、ターゲット広告を出したりなどです。</li> + <li><a href="https://core.telegram.org/api">Telegram APIs</a> を使用すると、ボットのサポートに加えて、Telegram チャネルのコンテンツを Web サイトに埋め込むことができます。</li> + <li><a href="https://developers.google.com/youtube/">YouTube API</a>を使ってあなたのサイトに YouTube のビデオを埋め込んだり、YouTube を検索したり、プレイリストを作成したりなどなどできます。</li> + <li><a href="https://developers.pinterest.com/">Pinterest API</a> は、Pinterest のボードとピンを管理して Web サイトに含めるためのツールを提供します。</li> + <li><a href="https://www.twilio.com/">Twilio API</a>はあなたのアプリで音声・ビデオ電話の機能を作成したり、SMS/MMSを送信したりなどするためのフレームワークを提供します。</li> + <li><a href="https://docs.joinmastodon.org/api/">Mastodon API</a> を使用すると、Mastodon ソーシャルネットワークの機能をプログラムで操作できます。</li> +</ul> + +<div class="note"> +<p><strong>注記</strong>: サードパーティAPIについては <a href="http://www.programmableweb.com/category/all/apis">Programmable Web API directory</a>でもっと多くの情報を見られます。</p> +</div> + +<h2 id="APIはどのように動作する">APIはどのように動作する?</h2> + +<p>異なるJavaScript APIはそれぞれに違う方法で動作しますが、普通は、共通した機能とどのように動くべきかの類似したテーマを持ちます。</p> + +<h3 id="オブジェクトに基づいています">オブジェクトに基づいています</h3> + +<p>あなたのコードは一つ以上の <a href="/docs/Learn/JavaScript/Objects">JavaScript オブジェクト</a>を通じて API とやりとりし、オブジェクトは API が使用するデータ (オブジェクトのプロパティとして持つ) や API が提供する機能(オブジェクトメソッドとして持つ) の容れ物として使われます。</p> + +<div class="note"> +<p><strong>注記</strong>: もしまだオブジェクトがどのように動作するかについて理解があやふやなら、先に進む前に <a href="/docs/Learn/JavaScript/Objects">JavaScript オブジェクト</a> モジュールを読みなおし、練習するのをおすすめします。</p> +</div> + +<p>Let's return to the example of the Web Audio API — this is a fairly complex API, which consists of a number of objects. The most obvious ones are:</p> + +<ul> + <li>{{domxref("AudioContext")}}, which represents an <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Audio_graphs">audio graph</a> that can be used to manipulate audio playing inside the browser, and has a number of methods and properties available to manipulate that audio.</li> + <li>{{domxref("MediaElementAudioSourceNode")}}, which represents an {{htmlelement("audio")}} element containing sound you want to play and manipulate inside the audio context.</li> + <li>{{domxref("AudioDestinationNode")}}, which represents the destination of the audio, i.e. the device on your computer that will actually output it — usually your speakers or headphones.</li> +</ul> + +<p>So how do these objects interact? If you look at our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/web-audio/index.html">simple web audio example</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/introduction/web-audio/">see it live also</a>), you'll first see the following HTML:</p> + +<pre class="brush: html notranslate"><audio src="outfoxing.mp3"></audio> + +<button class="paused">Play</button> +<br> +<input type="range" min="0" max="1" step="0.01" value="1" class="volume"></pre> + +<p>We, first of all, include an <code><audio></code> element with which we embed an MP3 into the page. We don't include any default browser controls. Next, we include a {{htmlelement("button")}} that we'll use to play and stop the music, and an {{htmlelement("input")}} element of type range, which we'll use to adjust the volume of the track while it's playing.</p> + +<p>Next, let's look at the JavaScript for this example.</p> + +<p>We start by creating an <code>AudioContext</code> instance inside which to manipulate our track:</p> + +<pre class="brush: js notranslate">const AudioContext = window.AudioContext || window.webkitAudioContext; +const audioCtx = new AudioContext();</pre> + +<p>Next, we create constants that store references to our <code><audio></code>, <code><button></code>, and <code><input></code> elements, and use the {{domxref("AudioContext.createMediaElementSource()")}} method to create a <code>MediaElementAudioSourceNode</code> representing the source of our audio — the <code><audio></code> element will be played from:</p> + +<pre class="brush: js notranslate">const audioElement = document.querySelector('audio'); +const playBtn = document.querySelector('button'); +const volumeSlider = document.querySelector('.volume'); + +const audioSource = audioCtx.createMediaElementSource(audioElement);</pre> + +<p>Next up we include a couple of event handlers that serve to toggle between play and pause when the button is pressed and reset the display back to the beginning when the song has finished playing:</p> + +<pre class="brush: js notranslate">// play/pause audio +playBtn.addEventListener('click', function() { + // check if context is in suspended state (autoplay policy) + if (audioCtx.state === 'suspended') { + audioCtx.resume(); + } + + // if track is stopped, play it + if (this.getAttribute('class') === 'paused') { + audioElement.play(); + this.setAttribute('class', 'playing'); + this.textContent = 'Pause' + // if track is playing, stop it +} else if (this.getAttribute('class') === 'playing') { + audioElement.pause(); + this.setAttribute('class', 'paused'); + this.textContent = 'Play'; + } +}); + +// if track ends +audioElement.addEventListener('ended', function() { + playBtn.setAttribute('class', 'paused'); + playBtn.textContent = 'Play'; +});</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Some of you may notice that the <code>play()</code> and <code>pause()</code> methods being used to play and pause the track are not part of the Web Audio API; they are part of the {{domxref("HTMLMediaElement")}} API, which is different but closely-related.</p> +</div> + +<p>Next, we create a {{domxref("GainNode")}} object using the {{domxref("AudioContext.createGain()")}} method, which can be used to adjust the volume of audio fed through it, and create another event handler that changes the value of the audio graph's gain (volume) whenever the slider value is changed:</p> + +<pre class="brush: js notranslate">const gainNode = audioCtx.createGain(); + +volumeSlider.addEventListener('input', function() { + gainNode.gain.value = this.value; +});</pre> + +<p>The final thing to do to get this to work is to connect the different nodes in the audio graph up, which is done using the {{domxref("AudioNode.connect()")}} method available on every node type:</p> + +<pre class="brush: js notranslate">audioSource.connect(gainNode).connect(audioCtx.destination);</pre> + +<p>The audio starts in the source, which is then connected to the gain node so the audio's volume can be adjusted. The gain node is then connected to the destination node so the sound can be played on your computer (the {{domxref("AudioContext.destination")}} property represents whatever is the default {{domxref("AudioDestinationNode")}} available on your computer's hardware, e.g. your speakers).</p> + +<h3 id="認識できる入口があります">認識できる入口があります</h3> + +<p>APIを使うときは、その API の入口がどこなのかしっかり確認するべきです。Web Audio APIではとても単純でした — それは {{domxref("AudioContext")}} オブジェクトであり、あらゆる音声操作を行うために使用する必要があります。</p> + +<p>Document Object Model (DOM) API でも単純な入口があります — これの機能は{{domxref("Document")}} もしくは何らかの方法で影響を与えたい いHTML 要素のインスタンスにぶらさがっている場合が多く、例えば:</p> + +<pre class="brush: js notranslate">const em = document.createElement('em'); // create a new em element +const para = document.querySelector('p'); // reference an existing p element +em.textContent = 'Hello there!'; // give em some text content +para.appendChild(em); // embed em inside para</pre> + +<p><a href="/docs/Web/API/Canvas_API">Canvas API</a> は、諸々を操作するために使用するコンテキストオブジェクトの取得にも依存していますが、この場合は、音声コンテキストではなく描画コンテキストです。そのコンテキストオブジェクトは、描画をしたい {{htmlelement("canvas")}} 要素への参照を取得して、 これの{{domxref("HTMLCanvasElement.getContext()")}} メソッドを呼ぶと作成されます:</p> + +<pre class="brush: js notranslate">const canvas = document.querySelector('canvas'); +const ctx = canvas.getContext('2d');</pre> + +<p>キャンバスを使って何かやろうとする場合は何でも、コンテキストオブジェクト (これは{{domxref("CanvasRenderingContext2D")}} のインスタンスです) のプロパティやメソッドを呼んで行ないます。例えば:</p> + +<pre class="brush: js notranslate">Ball.prototype.draw = function() { + ctx.beginPath(); + ctx.fillStyle = this.color; + ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); + ctx.fill(); +};</pre> + +<div class="note"> +<p><strong>注記</strong>: この実例を<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html">弾むボールのデモ</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html">ライブ実行</a> も見てね)で見られます。</p> +</div> + +<h3 id="状態の変化を捉えるのにイベントを使います">状態の変化を捉えるのにイベントを使います</h3> + +<p>すでに学習コース中でイベントについてはお話しています、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a> — この記事でクライアント側 Web イベントとは何か、コードの中でどのように使えるのか詳しく見てきました。もしまだクライアント側 WebAPI の仕組みがよくわからいなら、この先に進む前に記事を読み直しておく方が良いでしょう。</p> + +<p>イベントを持たないWebAPIもありますが、ほとんどの WebAPI はいくつか持っています。イベントが発火した際に関数を実行できるイベントハンドラーのプロパティについては、リファレンス記事の独立した"イベントハンドラー"セクションとしておおよそ列挙されています。</p> + +<p class="simple-translate-result" style="color: rgb(0, 0, 0);">上記の Web Audio API の例では、すでにいくつかのイベントハンドラーが使用されています。</p> + +<p>別の例として、<code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> オブジェクトのインスタンス (一つ一つがサーバから何らかの新しいリソースを取得しようとするHTTPリクエストを表わします) にはとてもたくさんのイベントが付随しており、たとえば <code>load</code> イベントは発火したリソースに対する正常なレスポンスが返ってきて、それが使えるようになった時点で発火します。</p> + +<p>次のコードはこれをどう使うのか示す簡単な例です:</p> + +<pre class="brush: js notranslate">let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; +let request = new XMLHttpRequest(); +request.open('GET', requestURL); +request.responseType = 'json'; +request.send(); + +request.onload = function() { + const superHeroes = request.response; + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + +<div class="note"> +<p><strong>注記</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html">ajax.html</a> でこの例の動作を見られます(<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html">ライブ実行版</a>もどうぞ)。</p> +</div> + +<p>最初の 5 行で取得したいリソースを指定し、<code>XMLHttpRequest()</code> コンストラクタを使って新しいリクエストオブジェクトを生成し、指定のリソースを取得するために <code>GET</code> リクエストを作り、レスポンスを JSON 形式として吐き出すよう指定、そしてリクエストを送信します。</p> + +<p><code>onload</code> ハンドラー関数で私たちがレスポンスに対して何を行なうかを指定します。load イベントが発火した後には、レスポンスが正常に得られて利用できるようになっている (エラーは起きていない) とわかっていますので、JSON であるレスポンスを <code>superHeroes</code> 変数に保存し、以降の処理のために 2 つの異なる関数に引き渡しています。</p> + +<h3 id="必要なところには追加のセキュリティ機構があります">必要なところには追加のセキュリティ機構があります</h3> + +<p>WebAPI 機能は JavaScript や他の Web 技術と同等のセキュリティ上の配慮が必要です (例えば <a href="/docs/Web/Security/Same-origin_policy">same-origin ポリシー</a>) が、追加のセキュリティ機構が必要な場合もあります。例として今時の WebAPI の中に はHTTPS で配信されるページ上でしか動かないものがあり、これは機密とすべきデータをやりとりする可能性があるためです (<a href="/docs/Web/API/Service_Worker_API">ServiceWorkers</a> や <a href="/docs/Web/API/Push_API">Push</a> など)。</p> + +<p>さらには、ある種のWebAPIへの呼び出しがあなたのコードにあると、ユーザに対してそれの許可を要求します。例えば、<a href="/docs/Web/API/Notifications_API">Notifications API (通知 API)</a> はポップアップのダイアログボックスを用いて許可を要求します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14315/notification-permission.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>Web Audio および {{domxref("HTMLMediaElement")}} API には、<a href="/docs/Web/API/Web_Audio_API/Best_practices#Autoplay_policy">自動再生 (autoplay) ポリシー</a> と呼ばれるセキュリティ機構が適用されます。これは、基本的に、ページの読み込み時に音声を自動的に再生できないことを意味します。ユーザーに次のことを許可する必要があります。ボタンのようなコントロールを介して音声再生を開始します。これは、音声の自動再生は通常非常に煩わしいものであり、ユーザーにそれを課すべきではないためです。</p> + +<div class="blockIndicator note"> +<p><strong>注記</strong>: ブラウザーの厳格さによっては、このようなセキュリティ機構により、例がローカルで機能しなくなる場合があります。つまり、ローカルの例のファイルをウェブサーバーから実行するのではなく、ブラウザーに読み込んだ場合です。執筆時点では、Web Audio API の例はローカルでは Google Chrome で動作しません。動作する前に、GitHub にアップロードする必要がありました。</p> +</div> + +<h2 id="まとめ">まとめ</h2> + +<p>ここまで来れば、API とは何か、どう動くのか、あなたのJavaScript コードからどんな事ができるのかよくわかったと思います。何か API を使って楽しいことをやりたくってしょうがなくなってることと思いますので、さあ始めましょう! 次から、<u>D</u>ocument <u>O</u>bject <u>M</u>odel (DOM) を使った文書の操作を見ていきます。</p> + +<p>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">ドキュメントの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></li> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">グラフィックの描画</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側ストレージ</a></li> +</ul> + +<div id="simple-translate"> +<div> +<div class="simple-translate-button isShow" style="height: 22px; width: 22px; top: 11122px; left: 566px;"></div> + +<div class="simple-translate-panel " style="width: 300px; height: 200px; top: 0px; left: 0px; font-size: 13px; background-color: rgb(255, 255, 255);"> +<div class="simple-translate-result-wrapper" style="overflow: hidden;"> +<div class="simple-translate-move"></div> + +<div class="simple-translate-result-contents"> +<p class="simple-translate-result" style="color: rgb(0, 0, 0);"></p> + +<p class="simple-translate-candidate" style="color: rgb(115, 115, 115);"></p> +</div> +</div> +</div> +</div> +</div> diff --git a/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.html new file mode 100644 index 0000000000..b0c69f9d62 --- /dev/null +++ b/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,349 @@ +--- +title: ドキュメントの操作 +slug: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +tags: + - API + - Article + - Beginner + - CodingScripting + - DOM + - Document + - Document Object Model + - JavaScript + - Learn + - Navigator + - WebAPI + - Window +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">ウェブページやアプリを書く場合に、最も多く必要になるのはウェブ文書をどうかして操作する事でしょう。これは普通ドキュメントオブジェクトモデル (Document Object Model、DOM) によって為され、DOM は HTML とスタイルに関する情報を {{domxref("Document")}} オブジェクトを多用して操作する一連の API です。この記事では、DOM の使い方を詳しく見ながら、面白い方法であなたの環境を変える事ができる興味深い他の API もいくつか見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピュータに関する知識と理解、HTML と CSS、JavaScript—JavaScript のオブジェクトについても—基本を理解していること</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>DOM API の核と、DOM と共によく利用される API、ドキュメントの操作について詳しくなること</td> + </tr> + </tbody> +</table> + +<h2 id="ウェブブラウザーの重要なパーツ">ウェブブラウザーの重要なパーツ</h2> + +<p>ウェブブラウザーはとてもたくさんの動いている部品からなるソフトウェアの複雑な集合体で、部品の多くはウェブ開発者の JavaScript からでは制御したり操作することはできません。こんな制約はよろしくないと思う方もいるかもしれませんが、ブラウザが保護されているのには十分な理由があって、これは主にセキュリティ関係のためです。もしあるウェブサイトがあなたが保存しているパスワードやその他の秘密情報にアクセスできて、あなたのふりをして他のサイトにログインできたらどうですか?</p> + +<p>制限はあっても、ウェブ API は、ウェブページ上でいろいろ素敵な事をできるように、たくさんの機能を提供してくれます。あなたのコードからよく参照するであろう目に見える代物はほんのわずかです — 下の図を見て下さい、この図はウェブページの表示に直接関与しているブラウザーの主要なパーツを表わしています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14557/document-window-navigator.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>ウィンドウはウェブページが読み込まれる部分の回りのブラウザーの枠です。これは JavaScript では {{domxref("Window")}} オブジェクトで表わされます。このオブジェクトに備わるメソッドを使って、ウィンドウの大きさを調べたり ({{domxref("Window.innerWidth")}} と {{domxref("Window.innerHeight")}} を参照)、ウィンドウに読み込まれる文書を操作したり、その文書に関係するデータをクライアント側(例えばローカルデータベースや他のデータ保存機構)で保存したり、現在のウィンドウに対して<a href="/docs/Learn/JavaScript/Building_blocks/Events#A_series_of_fortunate_events">イベントハンドラー</a> を追加したり、などできます。</li> + <li>ナビゲータはブラウザーの状態やウェブで使われているようなブラウザーの身元(つまりユーザーエージェント)を表わします。JavaScript では {{domxref("Navigator")}} オブジェクトで表わされます。このオブジェクトを使って、位置情報、ユーザが好む言語、ユーザのウェブカムからの録画データ、などを取得できます。</li> + <li>ドキュメント(ブラウザーでは DOM として表現されます)はウィンドウに実際に読み込まれているページのことで、JavaScript では {{domxref("Document")}} オブジェクトで表わされます。このオブジェクトを使って文書を構成する HTML と CSS 上の情報を調べたり操作したりできて、例えば DOM の中のある要素に対する参照を得たり、その中身のテキストを変更したり、新しいスタイルを適用したり、新しい要素を作成して現在の要素の子に追加したり、一緒くたに削除したりできます。</li> +</ul> + +<p>この記事では主にドキュメントの操作に着目しますが、それ以外の役に立つこともちょっとお見せしていきます。</p> + +<h2 id="ドキュメントオブジェクトモデル">ドキュメントオブジェクトモデル</h2> + +<p>あなたのブラウザーの一つ一つのタブに今読み込まれているドキュメントは、ドキュメントオブジェクトモデルとして表現されます。これは HTML の構造に対してプログラム言語から簡単にアクセスできるようにブラウザーが作成する、"木構造"による表現です — 例えば、ページをレンダリングする際にはブラウザー自体がスタイルや他の情報を適切な要素に適用するために DOM を使い、ページのレンダリングが終わった後にはあなたのような開発者が JavaScript を使って DOM を操作できます。</p> + +<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> にちょっとした例を作成しました(<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html">ライブ実行</a>もどうぞ)。ブラウザーから開いてみてください — これはとても簡素なページで、{{htmlelement("section")}} 要素の中に画像が一つと、一つのリンクを含む一つのパラグラフがあります。HTML のソースはこんな感じです:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Simple DOM example</title> + </head> + <body> + <section> + <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> + <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p> + </section> + </body> +</html></pre> + +<p>一方これの DOM はこんな具合になります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14559/dom-screenshot.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p><strong>注記</strong>: この DOM ツリーの図は Ian Hickson の <a href="https://software.hixie.ch/utilities/js/live-dom-viewer/">Live DOM viewer</a> を使って作成しました。</p> +</div> + +<p>これを見ると、それぞれのドキュメント内の要素とちょっとばかりのテキストそれぞれが、ツリーの中でそれ自身のエントリーがあるのがわかるでしょう — これら一つ一つを<strong>ノード</strong>と呼びます。またノードの種類を示す語や、ノードそれぞれの関係によりツリーでの位置があるのがわかるでしょう:</p> + +<ul> + <li><strong>エレメント(要素)ノード</strong>: DOM の中での HTML 要素です。</li> + <li><strong>ルート(根)ノード</strong>: 木の頂点のノードで、HTML の場合であれば常に <code>HTML</code> ノードになります。(SVG や独自の XML といった他のマークアップ言語の方言では異なるルート要素の場合があります)</li> + <li><strong>子ノード</strong>: 他のノードに<em>直結して</em>含まれるノードです。上の例だと、例えば <code>IMG</code> は <code>SECTION</code> の子ノードとなります。</li> + <li><strong>子孫ノード</strong>: 他のノードに<em>どのような形であれ</em>含まれるノードです。上の例だと、例えば <code>IMG</code> は <code>SECTION</code> の子ノードであり、子孫ノードでもあります。<code>IMG</code> は <code>BODY</code> の二段階内側にあるので <code>BODY</code> の子ノードではありませんが、<code>BODY</code> の子孫ノードではあります。</li> + <li><strong>親ノード</strong>: その中に他のノードを持つノードです。例えば上の例だと <code>BODY</code> は <code>SECTION</code> ノードの親ノードになります。</li> + <li><strong>兄弟ノード</strong>: DOM ツリーの同じ階層にあるノードです。上の例だと <code>IMG</code> と <code>P</code> は兄弟ノードになります。</li> + <li><strong>テキストノード</strong>: テキスト文字列を含むノードです。</li> +</ul> + +<p>これからコードを見ていくとこういう語が頻出するので、DOM を使い始める前に、これらの用語をしっかり覚えておくと良いでしょう。CSS の勉強をしているときも、これらの語をみかけることでしょう(子孫セレクター、子セレクターとか)。</p> + +<h2 id="実践学習_基本的なDOM操作">実践学習: 基本的なDOM操作</h2> + +<p>DOM 操作の学習スタートは、実践的な例から始めましょう。</p> + +<ol> + <li><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dinosaur.png">image</a> のローカルコピーを一緒に作成して下さい。</li> + <li><code><script></script></code> 要素を、閉じ<code></body></code>タグのすぐ上に追加して下さい。</li> + <li>DOM の中の要素を操作するため、まず DOM を選びだしてこれへの参照を変数に保存する必要があります。script 要素の中に、次の行を追加して下さい: + <pre class="brush: js notranslate">const link = document.querySelector('a');</pre> + </li> + <li>要素への参照を変数に保存したので、これが備えているプロパティとメソッドを使って DOM の操作を始められます (利用できるプロパティとメソッドは、たとえば {{htmlelement("a")}} 要素であれば {{domxref("HTMLAnchorElement")}} インターフェース、さらにその汎化した親のインターフェース {{domxref("HTMLElement")}} や {{domxref("Node")}} — これは DOM の全てノードが相当します — で定義されています)。まずは、リンクの中のテキストを、{{domxref("Node.textContent")}} プロパティを更新する事で変更してみましょう。上で書いた行の下に、次の行を追加して下さい: + <pre class="brush: js notranslate">link.textContent = 'Mozilla Developer Network';</pre> + </li> + <li>クリックされたときに変な場所に行かないよう、リンクが指す先の URL も変えておくべきでしょう。また下に、以下の行を追加して下さい: + <pre class="brush: js notranslate">link.href = 'https://developer.mozilla.org';</pre> + </li> +</ol> + +<div> +<p>JavaScript あるあるですが、要素を選んで変数に保存する方法にはいろんなやり方があることを頭に入れておいて下さい。{{domxref("Document.querySelector()")}} を使うのが推奨される今風のやり方ですが、これは CSS セレクタと同じ方法で要素を選別できるからです。上記の <code>querySelector()</code> 呼び出しでは文書に現われる最初の {{htmlelement("a")}} がマッチします。もし複数の要素を選択し処理したいのであれば {{domxref("Document.querySelectorAll()")}} を使うことができて、これはセレクタとマッチする全ての要素にマッチし、それらへの参照を {{domxref("NodeList")}} と呼ばれる<a href="/docs/Learn/JavaScript/First_steps/Arrays">配列</a>のようなオブジェクトに保存します。</p> + +<p>要素への参照を得るための、次のような古いやり方もあります:</p> + +<ul> + <li>{{domxref("Document.getElementById()")}} は要素を指定の <code>id</code> 属性値を使って選択します。<code><p id="myId">My paragraph</p></code> こんなのです。 関数の引数に ID を渡します。 <code>const elementRef = document.getElementById('myId')</code> こんな具合です。</li> + <li>{{domxref("Document.getElementsByTagName()")}} これは指定した種類の全ての要素を配列のようなオブジェクトとして返します、例えば全部の <code><p></code>、全部の <code><a></code>など。 要素の種別は関数の引数として渡します。<code>const elementRefArray = document.getElementsByTagName('p')</code> こんな具合です。</li> +</ul> + +<p>上の二つは <code>querySelector()</code> のような今風のメソッドよりも古いブラウザーで動作しますが、あまり便利ではありません。これ以外にどんなやり方があるかは、あなた自身で探してみて下さい!</p> +</div> + +<h3 id="新しいノードの作成と配置">新しいノードの作成と配置</h3> + +<p>ここまでで、どんな事ができるのかちょっと見えてきたと思いますが、さらに進んで新しい要素を作る方法を見ていきましょう。</p> + +<ol> + <li>今の例題に戻って、{{htmlelement("section")}} 要素を掴むところから始めましょう — すでに書いてあるスクリプトの下に次のコードを追加して下さい(この先の他の行についても、同じようにやって下さい): + <pre class="brush: js notranslate">const sect = document.querySelector('section');</pre> + </li> + <li>{{domxref("Document.createElement()")}} を使って新しいパラグラフを作り、前やったのと同じ方法でテキストを入れてやりましょう: + <pre class="brush: js notranslate">const para = document.createElement('p'); +para.textContent = 'We hope you enjoyed the ride.';</pre> + </li> + <li>この新しいパラグラフを section の最後に {{domxref("Node.appendChild()")}} を使って追加できます: + <pre class="brush: js notranslate">sect.appendChild(para);</pre> + </li> + <li>このパートの締めとして、文章がうまいことまとまるように、リンクを含んでいるパラグラフに対してテキストノードを追加しましょう。まずテキストノードを {{domxref("Document.createTextNode()")}} を使って作成します: + <pre class="brush: js notranslate">const text = document.createTextNode(' — the premier source for web development knowledge.');</pre> + </li> + <li>リンクを含んだパラグラフへの参照を取り出して、そこにテキストノードを追加します: + <pre class="brush: js notranslate">const linkPara = document.querySelector('p'); +linkPara.appendChild(text);</pre> + </li> +</ol> + +<p>以上が DOM にノードを追加するために必要な事のほぼ全てです — 動的なインターフェースを作成する際(あとでそういう例題をいくつか見ていきます)これらのメソッドをめっちゃ使う事になるでしょう。</p> + +<h3 id="要素を移動したり削除したり">要素を移動したり削除したり</h3> + +<p>ノードを移動したり、DOM から削除したくなる場合があると思います。勿論できます。</p> + +<p>リンクを含むパラグラフを section の最後に移動したい場合は、こうするだけです:</p> + +<pre class="brush: js notranslate">sect.appendChild(linkPara);</pre> + +<p>これでパラグラフは section の一番下に移動します。コピーが作成されるだけじゃないのかとお思いかもしれませんが、この場合は違います — <code>linkPara</code> はパラグラフへの参照の唯一のコピーです。もしコピーをした上で同じように追加をしたいのであれば、 {{domxref("Node.cloneNode()")}} をかわりに使う必要があります。</p> + +<p>削除したいノードとその親ノードへの参照を得ていれば、ノードを削除するのも非常に簡単です。今の例題であれば、以下のように {{domxref("Node.removeChild()")}} を使うだけです:</p> + +<pre class="notranslate">sect.removeChild(linkPara);</pre> + +<p>よくあるケースですが、削除したいノードそのものへの参照しかない場合に、{{domxref("ChildNode.remove()")}} が使えます:</p> + +<pre class="brush: js notranslate">linkPara.remove();</pre> + +<p>このメソッドは、古いブラウザではサポートされていません。 ノードにそれ自体を削除するように指示するメソッドはないので、次のようにしなければなりません。</p> + +<pre class="brush: js notranslate">linkPara.parentNode.removeChild(linkPara);</pre> + +<p>上の行をあなたのコードに追加してやってみて下さい。</p> + +<h3 id="スタイルを操作する">スタイルを操作する</h3> + +<p>いろんなやり方で CSS スタイルを JavaScript から操作することができます。</p> + +<p>まず、ドキュメントに付随する全部のスタイルシートのリストは {{domxref("Document.stylesheets")}} を使って得られ、これは {{domxref("CSSStyleSheet")}} オブジェクトを含む配列のようなオブジェクトを返します。そうしたらお望みのままにスタイルを追加したり削除したりできます。ですがこのやり方について詳しくはやりません。なぜならスタイルをいじるにはちょっとばかり古風で難しいやり方だからです。もっと簡単なやり方があります。</p> + +<p>まずは、動的にスタイルを指定したい要素に、インラインスタイルを直接追加するやり方です。これには {{domxref("HTMLElement.style")}} プロパティを使い、このプロパティはドキュメント中の各素要のインラインスタイル情報を保持しています。このオブジェクトのプロパティを更新すれば要素のスタイルを直接変更できます。</p> + +<ol> + <li>例として、作成中の例題に以下の行を追加してみて下さい: + <pre class="brush: js notranslate">para.style.color = 'white'; +para.style.backgroundColor = 'black'; +para.style.padding = '10px'; +para.style.width = '250px'; +para.style.textAlign = 'center';</pre> + </li> + <li>ページをリロードすると指定のパラグラフにスタイルが適用されているはずです。ブラウザーの <a href="/docs/Tools/Page_Inspector">Page Inspector や DOM inspector</a> からパラグラフを見ると、言うまでもなく上の行がドキュメントのインラインスタイルに追加されているはずです: + <pre class="brush: html notranslate"><p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p></pre> + </li> +</ol> + +<div class="note"> +<p><strong>注記</strong>: CSS ではハイフン記法になっているものを、JavaScript プロパティ版の CSS スタイルはどんな風に小文字のキャメルケースで書いている(<code>background-color</code> と <code>backgroundColor</code> とか)か見ておいて下さい。まぜこぜにしないよう注意して下さい、さもないと動きませんよ。</p> +</div> + +<p>ドキュメントのスタイルを動的にいじる際によく使われる別のやり方をこれから見ていきましょう。</p> + +<ol> + <li>さっき JavaScript に追加した 5 行を削除します。</li> + <li>HTML の {{htmlelement("head")}} の中に、以下を追加します: + <pre class="notranslate"><style> +.highlight { + color: white; + background-color: black; + padding: 10px; + width: 250px; + text-align: center; +} +</style></pre> + </li> + <li>さて、多くの HTML 操作においてとても役に立つメソッドをお見せします — {{domxref("Element.setAttribute()")}} — これはに二つの引数、要素に設定したい属性名と、属性に設定したい値、を与えます。この場合だと、我々のパラグラフにクラス名、highlight をセットします: + <pre class="brush: js notranslate">para.setAttribute('class', 'highlight');</pre> + </li> + <li>ページをリロードしても何も変わりません — パラグラフには CSS が今も適用されていますが、今回はクラスを指定して CSS ルールが選んでいて、インライン CSS スタイルによるものではありません。</li> +</ol> + +<p>どうやるかはあなた次第です。それぞれに利点と欠点があります。最初のやり方は少ない設定ですみ、簡単な場合には向いていますが、二つ目のやり方はずっときれいです (よくないやり方とされる、CSS と JavaScript の混在やインラインスタイルの使用がありません)。もっと大規模で複雑なアプリを作り始めたら、多分二つ目のやり方をよく使うようになると思いますが、結局はホントにあなた次第です。</p> + +<p>ここまで、実はそれほど役に立つことをやってません! 静的なコンテンツの作成に JavaScript を使う利点はありません — JavaScript など使わず、普通に HTML に書けば良いんです。HTML よりややこしいですし、コンテンツを JavaScript で作成するのは他にも問題があります (検索エンジンで読めない、とか)。</p> + +<p>次の二つのセクションでは、DOM API のもっと実践的な使い方を見ていきます。</p> + +<div class="note"> +<p><strong>注記</strong>: 私たちによる <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example-manipulated.html">dom-example.htm l完成版</a> のデモが GitHub にあります (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html">ライブ実行もどうぞー</a>)。</p> +</div> + +<h2 id="実践学習_ウィンドウオブジェクトから使える情報を取り出す">実践学習: ウィンドウオブジェクトから使える情報を取り出す</h2> + +<p>ここまででは文書を操作するための {{domxref("Node")}} と {{domxref("Document")}} の機能ばかり見てきましたが、他のソースからデータを取ってきてあなたの UI で使ったって勿論かまわないわけです。あなたはデータが正しい形式である事を確認するだけです。これは JavaScript が弱い型付け言語であるために、他の多く言語の場合よりも簡単です — 例えば画面に表示しようとしたとき、数値は自動的に文字列に変換されます。</p> + +<p>ここの例題ではよくある問題を解決していきます — あなたのアプリを表示しているウィンドウがどんな大きさであれ、それを同じ大きさになるようにすることです。これはゲームのような、表示する画面領域をできるだけ大きくしたいような場合に、しばしば役に立ちます。</p> + +<p>まずは <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example.html">window-resize-example.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/bgtile.png">bgtile.png</a> ファイルのローカルコピーを作成して下さい。読み込んで見てみて下さい — 背景に画像がタイル表示された、{{htmlelement("div")}} 要素が画面に小さく表示されているでしょう。この領域が、私たちのアプリの UI 領域だとしていきます。</p> + +<ol> + <li>まず最初に、div への参照を取得し、ビューポート (ドキュメントが表示されている内側のウィンドウです) の幅と高さを取得して、これらを変数に保存します。便利なことに幅と高さの値は {{domxref("Window.innerWidth")}} と {{domxref("Window.innerHeight")}} プロパティにあります。以下の行を、もう書いてある {{htmlelement("script")}} の中に書き足します: + <pre class="brush: js notranslate">const div = document.querySelector('div'); +let winWidth = window.innerWidth; +let winHeight = window.innerHeight;</pre> + </li> + <li>次は、動的に div の幅と高さをビューポートのものと同じにします。次の二行を、さっき追加した部分の後に書き足して下さい: + <pre class="brush: js notranslate">div.style.width = winWidth + 'px'; +div.style.height = winHeight + 'px';</pre> + </li> + <li>保存してブラウザーで読み直してみて下さい — どんな大きさの画面を使っているのであれ、div がビューポートと同じ大きさになったはずです。ウィンドウが大きくなるようにリサイズしてみても、div の大きさは変わらないはずです — 一度しか大きさを設定していないからです。</li> + <li>ウィンドウがリサイズされた時に div もリサイズされるよう、イベントを使ってみるのはどうでしょう? {{domxref("Window")}} オブジェクトにはリサイズされた時に呼ばれるイベントがあって、ウィンドウがリサイズされる毎発火します — この機能を {{domxref("Window.onresize")}} イベントハンドラーから使って、リサイズされる毎私たちのコードが再実行されるようにしてみましょう。あなたのコードの最後に以下を書き足して下さい: + <pre class="brush: js notranslate">window.onresize = function() { + winWidth = window.innerWidth; + winHeight = window.innerHeight; + div.style.width = winWidth + 'px'; + div.style.height = winHeight + 'px'; +}</pre> + </li> +</ol> + +<div class="note"> +<p><strong>注記</strong>: もし行き詰まったら、私たちによる <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example-finished.html">完成版ウィンドウリサイズ例題</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/window-resize-example-finished.html">ライブ実行版もあるよ</a>) を見て下さい。</p> +</div> + +<h2 id="実践学習_動的な買い物リスト">実践学習: 動的な買い物リスト</h2> + +<p>この記事の締めとして、あなたにちょっとした難題を出したいと思います — 単純な買い物リストの例を作ってもらいます。フォーム入力(input)とボタンからリストに動的に商品を追加できるようにします。input に商品を入力してボタンを押したら:</p> + +<ul> + <li>商品がリストに表示されなければならない。</li> + <li>それぞれの商品にはボタンが付いていて、それを押すとその商品をリストから消せなければならない。</li> + <li>次の商品をすぐに入力できるよう、input の中身は消されてフォーカスされていなければならない。</li> +</ul> + +<p>完成版のデモはこんな感じになるでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14563/shopping-list.png" style="border-style: solid; border-width: 1px; display: block; height: 225px; margin: 0px auto; width: 369px;"></p> + +<p>この課題を完了させるには、以下のステップに従い、上で説明した通りに買い物リストが動くようにして下さい。</p> + +<ol> + <li>まず私たちが用意した <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list.html">shopping-list.html</a> 初期ファイルをダウンロードしてローカルコピーをどこかに作成します。最小限の CSS、ラベルのついたリスト、inputとボタン、空のリストと {{htmlelement("script")}} 要素が書いてあるはずです。この先書き足していくものは全部 script の中に書きます。</li> + <li>({{htmlelement("ul")}}) と {{htmlelement("input")}} と {{htmlelement("button")}} 要素への参照を保持する3つの変数を作成します。</li> + <li>ボタンがクリックされた時の応答として走らせる <a href="/docs/Learn/JavaScript/Building_blocks/Functions">関数</a> を作成します。</li> + <li>関数本体は、input 要素の現在の <a href="/docs/Web/API/HTMLInputElement#Properties">値</a>を変数に保存するところから始めます。</li> + <li>次に、input 要素の値に空文字列(<code>''</code>)を代入して、input 要素を空にします。</li> + <li>3つの要素を作成します — リスト項目({{htmlelement('li')}}) と {{htmlelement('span')}} と {{htmlelement('button')}} で、これらを変数に保存します。</li> + <li>span と button をリスト項目 li の子に追加します。</li> + <li>spanのテキストコンテントに、先程保存した input 要素の値を代入し、ボタンのテキストコンテントを「削除」にします。</li> + <li>できたリスト項目をリストの子に追加します。</li> + <li>削除ボタンにイベントハンドラーを追加して、クリックされたらボタンが含まれているリスト項目全体を削除するようにします。</li> + <li>最後に、<code><a href="/docs/Web/API/HTMLElement/focus">focus()</a></code>メソッドを使って input 要素にフォーカスし、次の買い物リスト商品をすぐに入力できるようにします。</li> +</ol> + +<div class="note"> +<p><strong>注記</strong>: 本当にどうしようもなく詰まったら、私たちの <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list-finished.html">完成版買い物リスト</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html">ライブ実行版もあるよ</a>)を見て下さい。</p> +</div> + +<h2 id="まとめ">まとめ</h2> + +<p>私たちのドキュメントと DOM 操作に関する学習はこれで終わりです。ここまでくれば、ドキュメントの制御やユーザのウェブ体験に関するブラウザーの重要な部品は何か、理解できたと思います。一番大事な DOM とは何か、役に立つ機能を作るのにこれをどう使えば良いのか理解できたと思います。</p> + +<h2 id="参考文献">参考文献</h2> + +<p>ドキュメントをいじるのに役立つ機能はたくさんあります。私たちのリファレンスも見て、いろいろ発見して下さい:</p> + +<ul> + <li>{{domxref("Document")}}</li> + <li>{{domxref("Window")}}</li> + <li>{{domxref("Node")}}</li> + <li>{{domxref("HTMLElement")}}, {{domxref("HTMLInputElement")}}, {{domxref("HTMLImageElement")}}, etc.</li> +</ul> + +<p>(私共の <a href="https://developer.mozilla.org/docs/Web/API">Web API index</a> から、MDNにあるウェブAPIに関する全ドキュメント一覧も見て下さい!)</p> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<div> +<h2 id="このモジュール内の文書">このモジュール内の文書</h2> + +<ul> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">ウェブAPIの紹介</a></li> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">ドキュメントの操作</a></li> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></li> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティAPI</a></li> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">絵を描く</a></li> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声のAPI</a></li> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側でのデータ保持</a></li> +</ul> +</div> + +<div id="simple-translate"> +<div> +<div class="simple-translate-button isShow" style="height: 22px; width: 22px; top: 12775px; left: 144px;"></div> + +<div class="simple-translate-panel " style="width: 300px; height: 200px; top: 0px; left: 0px; font-size: 13px; background-color: rgb(255, 255, 255);"> +<div class="simple-translate-result-wrapper" style="overflow: hidden;"> +<div class="simple-translate-move"></div> + +<div class="simple-translate-result-contents"> +<p class="simple-translate-result" style="color: rgb(0, 0, 0);"></p> + +<p class="simple-translate-candidate" style="color: rgb(115, 115, 115);"></p> +</div> +</div> +</div> +</div> +</div> diff --git a/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html b/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html new file mode 100644 index 0000000000..b44a2b17bf --- /dev/null +++ b/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html @@ -0,0 +1,442 @@ +--- +title: サードパーティ API +slug: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs +tags: + - 3rd party + - API + - Beginner + - CodingScripting + - Google Maps + - Learn + - NYTimes + - Third party + - youtube +translation_of: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">これまで説明してきた API はブラウザーに組み込まれていましたが、すべての API がそうというわけではありません。Google Maps・Twitter・Facebook・PayPal などの大規模なサイトやサービスの多くは開発者がそれらのデータ (ブログに Twitter のストリームを表示するなど) やサービス (ユーザーのログインに Facebook ログインを利用するなど) を利用できるように API を提供しています。この記事ではブラウザー API とサードパーティ API の違いを見て、後者の典型的な使い方について説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>JavaScript の基礎 (<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>, <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>, <a href="/ja/docs/Learn/JavaScript/Objects">JavaScript オブジェクト入門</a> をご覧ください),<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs">クライアントサイド API の基礎</a></td> + </tr> + <tr> + <th scope="row">到達目標:</th> + <td>サードパーティ API の仕組み、それらを利用してウェブサイトを強化する方法を学習する</td> + </tr> + </tbody> +</table> + +<h2 id="サードパーティAPIとは">サードパーティAPIとは?</h2> + +<p>サードパーティ API は、サードパーティ (通常は Facebook、Twitter、Google などの企業) が提供する API で、JavaScript を介して機能にアクセスしてサイトで使用することができます。最もわかりやすい例の 1 つとして、マッピング API を使用してページにカスタムマップを表示することがあります。</p> + +<p><a href="https://mdn.github.io/learning-area/javascript/apis/third-party-apis/mapquest/">Simple Mapquest API の例</a>を参考に、サードパーティ API とブラウザー API の違いを説明します。</p> + +<div class="note"> +<p><strong>注意</strong>: 一度に<a href="/ja/docs/Learn#Getting_our_code_examples">すべてのコード例を取得</a>したい場合があります。その場合は、各セクションで必要なサンプルファイルをレポジトリーで検索するだけで済みます。</p> +</div> + +<h3 id="それらはサードパーティのサーバーにあります">それらはサードパーティのサーバーにあります</h3> + +<p>ブラウザー API はブラウザーに組み込まれており、すぐに JavaScript からアクセスできます。たとえば、<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#How_do_APIs_work">紹介記事で見た</a>Web Audio API は、ネイティブの {{domxref("AudioContext")}} オブジェクトを使ってアクセスします。例えば:</p> + +<pre class="brush: js notranslate">const audioCtx = new AudioContext(); + ... +const audioElement = document.querySelector('audio'); + ... +const audioSource = audioCtx.createMediaElementSource(audioElement); +// etc.</pre> + +<p>一方、サードパーティの API はサードパーティのサーバーにあります。JavaScript からこれらにアクセスするには、まず API 機能に接続してページで利用できるようにする必要があります。 これは通常、Mapquest の例で見られるように、{{htmlelement("script")}} 要素を介してサーバー上で利用可能な JavaScript ライブラリーへの最初のリンクを含めます。</p> + +<pre class="brush: js notranslate"><script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script> +<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/></pre> + +<p>そのライブラリーで利用可能なオブジェクトを使い始めることができます。例えば：</p> + +<pre class="brush: js notranslate">let map = L.mapquest.map('map', { + center: [53.480759, -2.242631], + layers: L.mapquest.tileLayer('map'), + zoom: 12 +});</pre> + +<p>ここでは、マップ情報を格納するための変数を作成し、次に <code>mapquest.map()</code> メソッドを使用して新しいマップを作成します。このメソッドは、必要な {{htmlelement("div")}} 要素の ID を受け取ります。('map') で地図を表示し、表示したい特定の地図の詳細を含む options オブジェクトを表示します。この場合は、地図の中心座標、表示する <code>map</code> 型の地図レイヤー (<code>mapquest.tileLayer()</code> メソッドを使用して作成)、およびデフォルトのズームレベルを指定します。</p> + +<p>これが、Mapquest API が単純な地図を描くために必要なすべての情報です。接続しているサーバーは、表示されている地域の正しい地図タイルを表示するなど、複雑なものをすべて処理します。</p> + +<div class="note"> +<p><strong>メモ</strong>: API の中には、機能へのアクセスをわずかに異なる方法で処理するものがあり、開発者はデータを取得するために特定の URL パターンに対して HTTP リクエストを行う必要があります。これらは <a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs#A_RESTful_API_—_NYTimes">RESTful API と呼ばれ、後で例が出てきます</a>。</p> +</div> + +<h3 id="通常は_API_キーが必要です">通常は API キーが必要です</h3> + +<p><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#They_have_additional_security_mechanisms_where_appropriate">最初の記事で説明した</a>ように、ブラウザー API のセキュリティは許可プロンプトによって処理される傾向があります。これらの目的は、<span class="tlid-translation translation" lang="ja"><span title="">ユーザーが訪問したウェブサイトで何が起こっているのかをユーザー自身が認識できるようにし</span><span title="">、悪意のある方法で API を使用している人の被害にあう可能性を低くすることです。</span></span></p> + +<p>サードパーティの API には、少し異なる権限システムがあります。開発者が API 機能にアクセスできるようにするために開発者キーを使用する傾向があります。</p> + +<p>Mapquest API の例には、次のような行があります。</p> + +<pre class="notranslate">L.mapquest.key = 'YOUR-API-KEY-HERE';</pre> + +<p>この行では、アプリケーションで使用する API キーまたは開発者キーを指定します。アプリケーションの開発者は、キーを取得して API の機能へのアクセス許可を得るためにコードに含める必要があります。この例では、プレースホルダーを用意しました。</p> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: 独自の例を作成するときは、プレースホルダーの代わりに独自の API キーを使用します。</p> +</div> + +<p>他の API では、少し異なる方法でキーを含める必要があるかもしれませんが、ほとんどのパターンは比較的似ています。</p> + +<p>キーを要求することで、API プロバイダーは API のユーザーに自分のアクションに対する責任を持たせることができます。開発者がキーを登録すると、それらは API プロバイダに認識され、彼らが API に悪意のあることをし始めたらアクション (たとえば、人々の位置を追跡したり、APIを機能させないために大量のリクエストで API をスパムしようとするなど) を取ることができます。最も簡単なアクションは、単にそれらの API 特権を取り消すことです。</p> + +<h2 id="Mapquest_の例を拡張する">Mapquest の例を拡張する</h2> + +<p>API の他の機能の使用方法を示すために、Mapquest の例にさらに機能を追加しましょう。</p> + +<ol> + <li> + <p>この章を始めるにあたり、新しいディレクトリーに<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/mapquest/starter-file.html">mapquest starter file</a>をコピーしましょう。もしもすでに<a href="/ja/docs/Learn#Getting_our_code_examples">examples repository</a> をクローンしているようなら、必要な <em>javascript/apis/third-party-apis/mapquest</em> を見つけてコピーしてください。</p> + </li> + <li> + <p>次に <a href="https://developer.mapquest.com/">Mapquest developer site</a>に行ってください。アカウントを作り、デベロッパーキーを使用してあなたのサンプルに利用してください。(アカウント作成時、デベロッパーキーは "consumer key" と呼ばれています。そして、"callback URL" を尋ねられると思いますが、その入力欄は空欄でかまいません)</p> + </li> + <li>starting fileを開き、APIキーのプレスホルダーにあなたのキーを入力してください。</li> +</ol> + +<h3 id="地図の種類を変更する">地図の種類を変更する</h3> + +<p>Mapquest API で表示できるマップには、さまざまな種類があります。 これを行うには、次の行を見つけます。</p> + +<pre class="brush: js notranslate">layers: L.mapquest.tileLayer('map')</pre> + +<p>hybrid-style map にするために <code>'map'</code> を <code>'hybrid'</code> に変えてみてください。他にも様々な値があります。<a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-tile-layer/"><code>tileLayer</code> reference page</a> には使える様々なオプションや情報が載っています。</p> + +<h3 id="さまざまなコントロールを追加する">さまざまなコントロールを追加する</h3> + +<p>この地図には様々な機能を実装できますが、デフォルトでは、ズームコントロールのみが表示されます。<code>map.addControl()</code> メソッドを使うことで機能を拡張することが出来ます。以下のコードを<code>window.onload</code>ハンドラーに追加してみてください。</p> + +<pre class="brush: js notranslate">map.addControl(L.mapquest.control());</pre> + +<p><a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-control/"><code>mapquest.control()</code></a> メソッドは、単純なフル機能のコントロールセットを作成するだけで、デフォルトでは右上隅に配置されます。<code>position</code> プロパティを含むコントロールのパラメータとしてオプションオブジェクトを指定することで、位置を調整することができます。例えば、次のようにしてみてください。</p> + +<pre class="brush: js notranslate"> map.addControl(L.mapquest.control({ position: 'bottomright' }));</pre> + +<p>他にも、<code><a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-search-control/">mapquest.searchControl()</a></code> や <code><a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-satellite-control/">mapquest.satelliteControl()</a></code> など、利用可能なコントロールの種類があり、中には非常に複雑で強力なものもあります。実際に遊んでみて、何ができるか見てみましょう。</p> + +<h3 id="カスタムマーカーを追加する">カスタムマーカーを追加する</h3> + +<p>マップ上の特定のポイントにマーカー (アイコン) を追加するのは簡単です。<code><a href="https://leafletjs.com/reference-1.3.0.html#marker">L.marker()</a></code> メソッドを使用するだけです (関連する Leaflet.js のドキュメントに記載されているようです)。次のコードを <code>window.onload</code> に追加します。</p> + +<pre class="brush: js notranslate">L.marker([53.480759, -2.242631], { + icon: L.mapquest.icons.marker({ + primaryColor: '#22407F', + secondaryColor: '#3B5998', + shadow: true, + size: 'md', + symbol: 'A' + }) +}) +.bindPopup('This is Manchester!') +.addTo(map);</pre> + +<p>ご覧のように、最もシンプルな方法では、2 つのパラメータを取ります。マーカーを表示する座標を含む配列と、その時点で表示するアイコンを定義する <code>icon</code> プロパティを含むオプションオブジェクトです。</p> + +<p>アイコンは、<code><a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-icons/">mapquest.icons.marker()</a></code> メソッドを使用して定義され、ご覧のようにマーカーの色やサイズなどの情報が含まれています。</p> + +<p>最初のメソッド呼び出しの最後に <code>.bindPopup('This is Manchester!')</code> を連鎖させ、マーカーがクリックされたときに表示されるコンテンツを定義します。</p> + +<p>最後に、<code>.addTo(map)</code> を連鎖させて、実際にマーカーをマップに追加します。</p> + +<p>ドキュメントに記載されているその他のオプションを試してみて、何ができるか見てみましょう。Mapquest には、道案内や検索など、かなり高度な機能があります。</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: サンプルがうまく動作しない場合は、完成版のコードをチェックしてみてください。<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/mapquest/expanded-example.html">expanded-example.html</a> を参照してください (<a href="https://mdn.github.io/learning-area/javascript/apis/third-party-apis/mapquest/expanded-example.html">ここでライブで実行しているのも見てください</a>)。</p> +</div> + +<h2 id="Google_マップはどうですか？">Google マップはどうですか？</h2> + +<p>Google Maps は間違いなく最も人気のある地図 API です。使用方法を示すために<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/google-maps/finished-maps-example.html">例を作成しました</a>が、最終的にはいくつかの理由から Mapquest を使用しました：</p> + +<ul> + <li>使い始めるのがはるかに簡単だからです。一般的な Google API の場合、Google アカウントを作成して <a href="https://console.cloud.google.com">Google Cloud Platform Console</a> にログインして API キーなどを作成する必要があり、そのプロセスはかなり複雑です。特に <a href="https://cloud.google.com/maps-platform/">Google Maps API</a> の場合は、課金目的でクレジットカードを提供する必要があり (基本的な利用は無料ですが)、基本的なチュートリアルとしては受け入れられないと思いました。</li> + <li>他にも選択肢があることを示したかったのです。</li> +</ul> + +<h2 id="RESTful_API_—_NYTimes">RESTful API — NYTimes</h2> + +<p>では、もう一つのAPIの例を見てみましょう — <a href="https://developer.nytimes.com/">New York Times API</a> です。この API を使用すると、New York Times のニュースストーリー情報を取得して、サイトに表示することができます。このタイプの API は <strong>RESTful API</strong> として知られています。Mapquest で行ったように JavaScript ライブラリーの機能を使用してデータを取得するのではなく、特定の URL にHTTP リクエストを行い、検索語やその他のプロパティのようなデータを URL 内にエンコードしてデータを取得します (多くの場合、URL パラメーターとして)。これは、API でよく見られるパターンです。</p> + +<h2 id="サードパーティAPIを利用するためのアプローチ">サードパーティAPIを利用するためのアプローチ</h2> + +<p>以下では、NYTimes API の使用方法を示すエクササイズを紹介しますが、新しい API を使用するためのアプローチとして、より一般的なステップのセットを提供します。</p> + +<h3 id="ドキュメントを探す">ドキュメントを探す</h3> + +<p>サードパーティの API を利用したい場合、その API がどのような機能を持っているのか、どのように利用するのかなどを知るために、ドキュメントがどこにあるのかを知ることは欠かせません。New York Times API のドキュメントは <a href="https://developer.nytimes.com/">https://developer.nytimes.com/</a> にあります。</p> + +<h3 id="開発者キーを取得">開発者キーを取得</h3> + +<p>ほとんどの API では、セキュリティと説明責任のために、何らかの開発者キー使用する必要があります。NYTimes API キーの登録には、<a href="https://developer.nytimes.com/get-started">https://developer.nytimes.com/get-started</a> の指示に従ってください。</p> + +<ol> + <li> + <p>記事検索 API のキーを要求してみよう — 新規アプリを作成し、これを利用したい API として選択します (名前と説明を記入し、「記事検索 API 」の下のスイッチをオンに切り替えて「作成」をクリックします)。</p> + </li> + <li> + <p>結果のページから API キーを取得します。</p> + </li> + <li> + <p>さて、例題を始めるために、<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/nytimes_start.html">nytimes_start.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/nytimes.css">nytimes.css</a> のコピーをコンピュータ上の新しいディレクトリに作成してください。すでに <a href="/ja/docs/Learn#Getting_our_code_examples">examples リポジトリをクローン</a>している場合は、<em>javascript/apis/third-party-apis/nytimes</em> ディレクトリにあるこれらのファイルのコピーをすでに持っているでしょう。最初に <code><script></code> 要素には、例のセットアップに必要な変数がいくつか含まれています。</p> + </li> +</ol> + +<p>このアプリは、検索用語とオプションの開始日と終了日を入力することを可能にし、Article Search API をクエリして検索結果を表示するために使用します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14821/nytimes-search.png" style="border-style: solid; border-width: 1px; display: block; height: 374px; margin: 0px auto; width: 700px;"></p> + +<h3 id="API_をアプリに接続する">API をアプリに接続する</h3> + +<p>まず、API とアプリ間の接続を行う必要があります。この API の場合、サービスから正しい URL でデータを要求するたびに、API キーを<a href="/ja/docs/Web/HTTP/Methods/GET">取得</a>パラメーターとして含める必要があります。</p> + +<ol> + <li> + <p>次の行を探します。</p> + + <pre class="brush: js notranslate">let key = ' ... ';</pre> + + <p>既存の API キーを、前のセクションで取得した実際の API キーに置き換えます。</p> + + <p>JavaScriptに次の行を追加してください。<code>// Event listeners to control the functionality</code> コメントの下に、次の行を追加します。これは、フォームが送信されたとき (ボタンが押されたとき) に submitSearch() という関数を実行します。</p> + + <pre class="brush: js notranslate">searchForm.addEventListener('submit', submitSearch);</pre> + </li> + <li> + <p>前の行の下に submitSearch() と fetchResults() 関数の定義を追加します。</p> + + <pre class="brush: js notranslate">function submitSearch(e) { + pageNumber = 0; + fetchResults(e); +} + +function fetchResults(e) { + // Use preventDefault() to stop the form submitting + e.preventDefault(); + + // Assemble the full URL + url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value <span class="blob-code-inner"><span class="pl-s1"><span class="pl-k x">+</span><span class="x"> </span><span class="pl-s"><span class="pl-pds x">'</span><span class="x">&fq=document_type:("article")</span><span class="pl-pds x x-last">'</span></span></span></span>; + + if(startDate.value !== '') { + url += '&begin_date=' + startDate.value; + }; + + if(endDate.value !== '') { + url += '&end_date=' + endDate.value; + }; + +}</pre> + </li> +</ol> + +<p><code>submitSearch()</code> は最初にページ番号を 0 に戻してから <code>fetchResults()</code> を呼び出します。これは最初にイベントオブジェクトの <code>preventDefault()</code> を呼び出し、フォームが実際に送信されるのを止めるためです (これでは例が壊れてしまいます)。次に、文字列を操作してリクエスト先の完全な URL を組み立てます。このデモで必須と思われる部分を組み立てることから始めます。</p> + +<ul> + <li>ベース URL (<code>baseURL</code> 変数から取得)。</li> + <li>API キー。これは <code>api-key</code> URL パラメーターで指定する必要があります (値は key 変数から取得されます)。</li> + <li>ページ番号。これは <code>page</code> URL パラメーターで指定する必要があります (値は <code>pageNumber</code> 変数から取得されます)。</li> + <li><code>q</code> URL パラメーターで指定しなければならない検索語 (値は <code>searchTerm</code> テキスト {{htmlelement("input")}} の値から取得されます)。</li> + <li><code>fq</code> URL パラメーターで渡された式で指定された、結果を返すドキュメントの種類。この例では、記事を返したいとします。</li> +</ul> + +<p>次に、いくつかの <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else">if()</a></code> ステートメントを使用して、<code>startDate</code> と <code>endDate</code> <code><input></code> に値が入力されているかどうかをチェックします。記入されている場合は、それぞれ <code>begin_date</code> と <code>end_date</code> の URL パラメーターで指定された値を URL に追加します。</p> + +<p>そのため、完全な URL は次のような形になってしまいます。</p> + +<pre class="notranslate">https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HERE&page=0&q=cats +&<span class="blob-code-inner"><span class="pl-s1"><span class="pl-s"><span class="x">fq=document_type:("article")</span></span></span></span>&begin_date=20170301&end_date=20170312</pre> + +<div class="note"> +<p><strong>Note</strong>: どのようなURLパラメーターを含めることができるかについての詳細は、<a href="https://developer.nytimes.com/">NYTimes developer docs</a> を参照してください。</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: この例では初歩的なフォームデータの検証を行っています — 検索語フィールドは、フォームを送信する前に入力しなければなりません (<code>required</code> 属性を使用して達成されます)。日付フィールドには <code>pattern</code> 属性が指定されており、値が 8 個の数字 (<code>pattern="[0-9]{8}"</code>) で構成されていないと送信されません。これらがどのように機能するかについての詳細は <a href="/ja/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a> を参照してください。</p> +</div> + +<h3 id="API_からデータを要求する">API からデータを要求する</h3> + +<p>これで URL を作成したので、それにリクエストしてみましょう。これは <a href="/ja/docs/Web/API/Fetch_API/Using_Fetch">Fetch API</a> を使って行います。</p> + +<p>以下のコードブロックを <code>fetchResults()</code> 関数の中に追加します：</p> + +<pre class="brush: js notranslate">// Use fetch() to make the request to the API +fetch(url).then(function(result) { + return result.json(); +}).then(function(json) { + displayResults(json); +});</pre> + +<p>ここでは、<code>url</code> 変数を <code><a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> に渡してリクエストを実行し、<code><a href="/ja/docs/Web/API/Body/json">json()</a></code> 関数を使用してレスポンスボディを JSON に変換し、結果の JSON を <code>displayResults()</code> 関数に渡して、データを UI に表示できるようにします。</p> + +<h3 id="データを表示する">データを表示する</h3> + +<p>それでは、データを表示する方法を見てみましょう。 <code>fetchResults()</code> 関数の下に以下の関数を追加します。</p> + +<pre class="brush: js notranslate">function displayResults(json) { + while (section.firstChild) { + section.removeChild(section.firstChild); + } + + const articles = json.response.docs; + + if(articles.length === 10) { + nav.style.display = 'block'; + } else { + nav.style.display = 'none'; + } + + if(articles.length === 0) { + const para = document.createElement('p'); + para.textContent = 'No results returned.' + section.appendChild(para); + } else { + for(var i = 0; i < articles.length; i++) { + const article = document.createElement('article'); + const heading = document.createElement('h2'); + const link = document.createElement('a'); + const img = document.createElement('img'); + const para1 = document.createElement('p'); + const para2 = document.createElement('p'); + const clearfix = document.createElement('div'); + + let current = articles[i]; + console.log(current); + + link.href = current.web_url; + link.textContent = current.headline.main; + para1.textContent = current.<span class="blob-code-inner"><span class="pl-s1"><span class="pl-smi x x-first x-last">snippet</span></span></span>; + para2.textContent = 'Keywords: '; + for(let j = 0; j < current.keywords.length; j++) { + const span = document.createElement('span'); + span.textContent += current.keywords[j].value + ' '; + para2.appendChild(span); + } + + if(current.multimedia.length > 0) { + img.src = 'http://www.nytimes.com/' + current.multimedia[0].url; + img.alt = current.headline.main; + } + + clearfix.setAttribute('class','clearfix'); + + article.appendChild(heading); + heading.appendChild(link); + article.appendChild(img); + article.appendChild(para1); + article.appendChild(para2); + article.appendChild(clearfix); + section.appendChild(article); + } + } +}</pre> + +<p>ここにはたくさんのコードがあります：</p> + +<ul> + <li><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/while">while</a></code> ループは、DOM 要素のすべてのコンテンツを削除するために使われる一般的なパターンで、この場合は {{htmlelement("section")}} 要素です。私たちは <code><section></code> に最初の子があるかどうかをチェックし続け、ある場合は最初の子を削除します。ループは <code><section></code> に子がいなくなった時点で終了します。</li> + <li>次に、<code>articles</code> 変数を <code>json.response.docs</code> と等しくなるように設定します — これは検索によって返された記事を表すすべてのオブジェクトを保持する配列です。これは、以下のコードを少しシンプルにするために行われています。</li> + <li>最初の <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else">if()</a></code> ブロックは、10 個の記事が返されるかどうかをチェックします ( API は一度に10個までの記事を返します。) もし返された場合、前の10個 / 次の10個のページネーションボタンを含む {{htmlelement("nav")}} を表示します。10記事未満の記事が返された場合、それらはすべて 1 ページに収まるので、ページ分割ボタンを表示する必要はありません。次のセクションでは、ページ分割機能の配線を行います。</li> + <li>次の <code>if()</code> ブロックは記事が返ってこないかどうかをチェックします。もしそうならば、何も表示しようとしません — "No results returned." というテキストを含む {{htmlelement("p")}} を作成して、それを <code><section></code> に挿入します。</li> + <li>いくつかの記事が返された場合、私たちはまず、それぞれのニュース記事を表示するために使用したいすべての要素を作成し、それぞれに適切なコンテンツを挿入し、適切な場所で DOM に挿入します。記事オブジェクトのどのプロパティに表示すべき正しいデータが含まれているかを調べるために、Article Search API リファレンスを参照しました (<a href="https://developer.nytimes.com/apis">NYTimes APIs</a>)。これらの操作のほとんどはかなり明白ですが、いくつかは呼び出す価値があります： + <ul> + <li>私たちは <a href="/ja/docs/Web/JavaScript/Reference/Statements/for">for loop</a> を使用しました (<code>for(var j = 0; j < current.keywords.length; j++) { ... }</code>) を使って、それぞれの記事に関連するすべてのキーワードをループさせ、それぞれのキーワードを {{htmlelement("span")}} に挿入し、<code><p></code> の中に入れています。これは、それぞれの記事のスタイルを簡単にするために行われました。</li> + <li><code>if()</code> ブロック ( <code>if(current.multimedia.length > 0) { ... }</code>) を使って、各記事に関連する画像があるかどうかをチェックしています (記事によってはないものもあります)。</li> + <li><code><div></code> 要素に "clearfix" というクラスを与えたので、簡単にクリアリングを適用することができます。</li> + </ul> + </li> +</ul> + +<h3 id="ページネーションボタンの配線">ページネーションボタンの配線</h3> + +<p>ページ分割ボタンを動作させるために、<code>pageNumber</code> 変数の値をインクリメント (またはデクリメント) し、ページ URL パラメーターに含まれる新しい値でフェッチリクエストを再実行します。これは、NYTimes API が一度に 10 件の結果しか返さないからです — 10 件以上の結果が利用可能な場合、<code>page</code> URL パラメーターが 0 に設定されている場合は最初の 10 (0-9) を (または全く含まれない — 0 がデフォルト値です。) 1 に設定されている場合は次の 10 (10-19) を返します。</p> + +<p>これにより、単純なページネーション関数を簡単に書くことができるようになりました。</p> + +<ol> + <li> + <p>既存の <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> コールの下に、関連するボタンがクリックされたときに <code>nextPage()</code> および <code>previousPage()</code> 関数が呼び出されるように、これら 2 つの新しいものを追加します：</p> + + <pre class="brush: js notranslate">nextBtn.addEventListener('click', nextPage); +previousBtn.addEventListener('click', previousPage);</pre> + </li> + <li> + <p>前回の追加の下に、2 つの関数を定義してみましょう — 今すぐこのコードを追加します：</p> + + <pre class="brush: js notranslate">function nextPage(e) { + pageNumber++; + fetchResults(e); +}; + +function previousPage(e) { + if(pageNumber > 0) { + pageNumber--; + } else { + return; + } + fetchResults(e); +};</pre> + + <p>最初の関数は単純で、変数 <code>pageNumber</code> をインクリメントしてから、次のページの結果を表示するために <code>fetchResults()</code> 関数を再度実行します。</p> + + <p>2 番目の関数は逆の方法でほぼ正確に同じように動作しますが、<code>pageNumber</code> がすでに 0 ではないことを確認するという余分なステップを踏まなければなりません — もしフェッチリクエストがマイナスの <code>page</code> パラメーターで実行された場合、エラーを引き起こす可能性があります。もし <code>pageNumber</code> がすでに 0 であれば、処理能力を無駄にしないように、単に関数から <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/return">return</a></code> します (すでに最初のページにいるのであれば、同じ結果を再び読み込む必要はありません)。</p> + </li> +</ol> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 完成した <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/index.html">nytimes API のサンプルコードは GitHub で見ることができます</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/third-party-apis/nytimes/">ここでもライブで動作しています</a>) 。</p> +</div> + +<h2 id="YouTube_の例">YouTube の例</h2> + +<p>また、<a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/third-party-apis/youtube">YouTube video search example</a> をご覧ください。これは 2 つの関連する API を使用しています。</p> + +<ul> + <li>YouTube の動画を検索して結果を返す <a href="https://developers.google.com/youtube/v3/docs/">YouTube Data API</a>。</li> + <li>返された動画の例を IFrame ビデオプレーヤー内に表示して視聴できるようにするための <a href="https://developers.google.com/youtube/iframe_api_reference">YouTube IFrame Player API</a> です。</li> +</ul> + +<p>この例は、2つの関連するサードパーティ API を一緒に使用してアプリを構築していることを示しているので興味深いです。1 つ目は RESTful API で、2 つ目は Mapquest のように動作します (API 固有のメソッドなどがあります)。ただし、どちらの API もページに適用するために JavaScript ライブラリを必要とする点は注目に値します。RESTful API には、HTTP リクエストを行い、結果を返すための関数が用意されています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14823/youtube-example.png" style="border-style: solid; border-width: 1px; display: block; height: 389px; margin: 0px auto; width: 700px;"></p> + +<p>この例については、記事の中ではあまり多くを語るつもりはありません。<a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/third-party-apis/youtube">ソースコード</a>には、それがどのように動作するかを説明するために、その中に詳細なコメントが挿入されています。</p> + +<p>稼動させるために必要です：</p> + +<ul> + <li><a href="https://cloud.google.com/">Google Cloud</a> から API キーを取得します。</li> + <li>ソースコードから <code>ENTER-API-KEY-HERE</code> という文字列を見つけ、それを API キーに置き換えます。</li> + <li>ウェブサーバー経由でサンプルを実行します。ブラウザーで直接実行した場合 (つまり <code>file://</code> URL を経由した場合) は動作しません。</li> +</ul> + +<h2 id="まとめ">まとめ</h2> + +<p>この記事では、サードパーティ API を使用してウェブサイトに機能を追加するための便利な方法を紹介しました。</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<div> +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">ドキュメントの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバーからのデータ取得</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">グラフィックの描画</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側ストレージ</a></li> +</ul> +</div> diff --git a/files/ja/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html b/files/ja/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html new file mode 100644 index 0000000000..09e6e27ca7 --- /dev/null +++ b/files/ja/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html @@ -0,0 +1,507 @@ +--- +title: 動画と音声の API +slug: Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs +tags: + - API + - Audio + - Beginner + - CodingScripting + - Guide + - JavaScript + - Learn + - Video + - 記事 +translation_of: Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">HTML5 comes with elements for embedding rich media in documents — {{htmlelement("video")}} and {{htmlelement("audio")}} — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>JavaScript basics (see <a href="/en-US/docs/Learn/JavaScript/First_steps">first steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">building blocks</a>, <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>), the <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">basics of Client-side APIs</a></td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>To learn how to use browser APIs to control video and audio playback.</td> + </tr> + </tbody> +</table> + +<h2 id="HTML5_video_と_audio">HTML5 video と audio</h2> + +<p>The {{htmlelement("video")}} and {{htmlelement("audio")}} elements allow us to embed video and audio into web pages. As we showed in <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a>, a typical implementation looks like this:</p> + +<pre class="brush: html notranslate"><video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> +</video></pre> + +<p>This creates a video player inside the browser like so:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html", '100%', 380)}}</p> + +<p>You can review what all the HTML features do in the article linked above; for our purposes here, the most interesting attribute is {{htmlattrxref("controls", "video")}}, which enables the default set of playback controls. If you don't specify this, you get no playback controls:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats-no-controls.html", '100%', 380)}}</p> + +<p>This is not as immediately useful for video playback, but it does have advantages. One big issue with the native browser controls is that they are different in each browser — not very good for cross-browser support! Another big issue is that the native controls in most browsers aren't very keyboard-accessible.</p> + +<p>You can solve both these problems by hiding the native controls (by removing the <code>controls</code> attribute), and programming your own with HTML, CSS, and JavaScript. In the next section we'll look at the basic tools we have available to do this.</p> + +<h2 id="The_HTMLMediaElement_API">The HTMLMediaElement API</h2> + +<p>Part of the HTML5 spec, the {{domxref("HTMLMediaElement")}} API provides features to allow you to control video and audio players programmatically — for example {{domxref("HTMLMediaElement.play()")}}, {{domxref("HTMLMediaElement.pause()")}}, etc. This interface is available to both {{htmlelement("audio")}} and {{htmlelement("video")}} elements, as the features you'll want to implement are nearly identical. Let's go through an example, adding features as we go.</p> + +<p>Our finished example will look (and function) something like the following:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/video-audio/finished/", '100%', 360)}}</p> + +<h3 id="Getting_started">Getting started</h3> + +<p>To get started with this example, <a href="https://github.com/mdn/learning-area/raw/master/javascript/apis/video-audio/start/media-player-start.zip">download our media-player-start.zip</a> and unzip it into a new directory on your hard drive. If you <a href="https://github.com/mdn/learning-area">downloaded our examples repo</a>, you'll find it in <code>javascript/apis/video-audio/start/</code></p> + +<p>At this point, if you load the HTML you should see a perfectly normal HTML5 video player, with the native controls rendered.</p> + +<h4 id="Exploring_the_HTML">Exploring the HTML</h4> + +<p>Open the HTML index file. You'll see a number of features; the HTML is dominated by the video player and its controls:</p> + +<pre class="notranslate"><div class="player"> + <video controls> + <source src="video/sintel-short.mp4" type="video/mp4"> + <source src="video/sintel-short.webm" type="video/webm"> + <!-- fallback content here --> + </video> + <div class="controls"> + <button class="play" data-icon="P" aria-label="play pause toggle"></button> + <button class="stop" data-icon="S" aria-label="stop"></button> + <div class="timer"> + <div></div> + <span aria-label="timer">00:00</span> + </div> + <button class="rwd" data-icon="B" aria-label="rewind"></button> + <button class="fwd" data-icon="F" aria-label="fast forward"></button> + </div> +</div> +</pre> + +<ul> + <li>The whole player is wrapped in a {{htmlelement("div")}} element, so it can all be styled as one unit if needed.</li> + <li>The {{htmlelement("video")}} element contains two {{htmlelement("source")}} elements so that different formats can be loaded depending on the browser viewing the site.</li> + <li>The controls HTML is probably the most interesting: + <ul> + <li>We have four {{htmlelement("button")}}s — play/pause, stop, rewind, and fast forward.</li> + <li>Each <code><button></code> has a <code>class</code> name, a <code>data-icon</code> attribute for defining what icon should be shown on each button (we'll show how this works in the below section), and an <code>aria-label</code> attribute to provide an understandable description of each button, since we're not providing a human-readable label inside the tags. The contents of <code>aria-label</code> attributes are read out by screenreaders when their users focus on the elements that contain them.</li> + <li>There is also a timer {{htmlelement("div")}}, which will report the elapsed time when the video is playing. Just for fun, we are providing two reporting mechanisms — a {{htmlelement("span")}} containing the elapsed time in minutes and seconds, and an extra <code><div></code> that we will use to create a horizontal indicator bar that gets longer as the time elapses. To get an idea of what the finished product will look like, <a href="https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/">check out our finished version</a>.</li> + </ul> + </li> +</ul> + +<h4 id="Exploring_the_CSS">Exploring the CSS</h4> + +<p>Now open the CSS file and have a look inside. The CSS for the example is not too complicated, but we'll highlight the most interesting bits here. First of all, notice the <code>.controls</code> styling:</p> + +<pre class="brush: css notranslate">.controls { + visibility: hidden; + opacity: 0.5; + width: 400px; + border-radius: 10px; + position: absolute; + bottom: 20px; + left: 50%; + margin-left: -200px; + background-color: black; + box-shadow: 3px 3px 5px black; + transition: 1s all; + display: flex; +} + +.player:hover .controls, player:focus .controls { + opacity: 1; +} +</pre> + +<ul> + <li>We start off with the {{cssxref("visibility")}} of the custom controls set to <code>hidden</code>. In our JavaScript later on, we will set the controls to <code>visible</code>, and remove the <code>controls</code> attribute from the <code><video></code> element. This is so that, if the JavaScript doesn't load for some reason, users can still use the video with the native controls.</li> + <li>We give the controls an {{cssxref("opacity")}} of 0.5 by default, so that they are less distracting when you are trying to watch the video. Only when you are hovering/focusing over the player do the controls appear at full opacity.</li> + <li>We lay out the buttons inside the control bar using Flexbox ({{cssxref("display")}}: flex), to make things easier.</li> +</ul> + +<p>Next, let's look at our button icons:</p> + +<pre class="brush: css notranslate">@font-face { + font-family: 'HeydingsControlsRegular'; + src: url('fonts/heydings_controls-webfont.eot'); + src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/heydings_controls-webfont.woff') format('woff'), + url('fonts/heydings_controls-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +button:before { + font-family: HeydingsControlsRegular; + font-size: 20px; + position: relative; + content: attr(data-icon); + color: #aaa; + text-shadow: 1px 1px 0px black; +}</pre> + +<p>First of all, at the top of the CSS we use a {{cssxref("@font-face")}} block to import a custom web font. This is an icon font — all the characters of the alphabet equate to common icons you might want to use in an application.</p> + +<p>Next we use generated content to display an icon on each button:</p> + +<ul> + <li>We use the {{cssxref("::before")}} selector to display the content before each {{htmlelement("button")}} element.</li> + <li>We use the {{cssxref("content")}} property to set the content to be displayed in each case to be equal to the contents of the <code><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">data-icon</a></code> attribute. In the case of our play button, <code>data-icon</code> contains a capital "P".</li> + <li>We apply the custom web font to our buttons using {{cssxref("font-family")}}. In this font, "P" is actually a "play" icon, so therefore the play button has a "play" icon displayed on it.</li> +</ul> + +<p>Icon fonts are very cool for many reasons — cutting down on HTTP requests because you don't need to download those icons as image files, great scalability, and the fact that you can use text properties to style them — like {{cssxref("color")}} and {{cssxref("text-shadow")}}.</p> + +<p>Last but not least, let's look at the CSS for the timer:</p> + +<pre class="brush: css notranslate">.timer { + line-height: 38px; + font-size: 10px; + font-family: monospace; + text-shadow: 1px 1px 0px black; + color: white; + flex: 5; + position: relative; +} + +.timer div { + position: absolute; + background-color: rgba(255,255,255,0.2); + left: 0; + top: 0; + width: 0; + height: 38px; + z-index: 2; +} + +.timer span { + position: absolute; + z-index: 3; + left: 19px; +}</pre> + +<ul> + <li>We set the outer <code>.timer</code> <code><div></code> to have flex: 5, so it takes up most of the width of the controls bar. We also give it {{cssxref("position")}}<code>: relative</code>, so that we can position elements inside it conveniently according to it's boundaries, and not the boundaries of the {{htmlelement("body")}} element.</li> + <li>The inner <code><div></code> is absolutely positioned to sit directly on top of the outer <code><div></code>. It is also given an initial width of 0, so you can't see it at all. As the video plays, the width will be increased via JavaScript as the video elapses.</li> + <li>The <code><span></code> is also absolutely positioned to sit near the left hand side of the timer bar.</li> + <li>We also give our inner <code><div></code> and <code><span></code> the right amount of {{cssxref("z-index")}} so that the timer will be displayed on top, and the inner <code><div></code> below that. This way, we make sure we can see all the information — one box is not obscuring another.</li> +</ul> + +<h3 id="Implementing_the_JavaScript">Implementing the JavaScript</h3> + +<p>We've got a fairly complete HTML and CSS interface already; now we just need to wire up all the buttons to get the controls working.</p> + +<ol> + <li> + <p>Create a new JavaScript file in the same directory level as your index.html file. Call it <code>custom-player.js</code>.</p> + </li> + <li> + <p>At the top of this file, insert the following code:</p> + + <pre class="brush: js notranslate">const media = document.querySelector('video'); +const controls = document.querySelector('.controls'); + +const play = document.querySelector('.play'); +const stop = document.querySelector('.stop'); +const rwd = document.querySelector('.rwd'); +const fwd = document.querySelector('.fwd'); + +const timerWrapper = document.querySelector('.timer'); +const timer = document.querySelector('.timer span'); +const timerBar = document.querySelector('.timer div'); +</pre> + + <p>Here we are creating constants to hold references to all the objects we want to manipulate. We have three groups:</p> + + <ul> + <li>The <code><video></code> element, and the controls bar.</li> + <li>The play/pause, stop, rewind, and fast forward buttons.</li> + <li>The outer timer wrapper <code><div></code>, the digital timer readout <code><span></code>, and the inner <code><div></code> that gets wider as the time elapses.</li> + </ul> + </li> + <li> + <p>Next, insert the following at the bottom of your code:</p> + + <pre class="brush: js notranslate">media.removeAttribute('controls'); +controls.style.visibility = 'visible';</pre> + + <p>These two lines remove the default browser controls from the video, and make the custom controls visible.</p> + </li> +</ol> + +<h4 id="Playing_and_pausing_the_video">Playing and pausing the video</h4> + +<p>Let's implement probably the most important control — the play/pause button.</p> + +<ol> + <li> + <p>First of all, add the following to the bottom of your code, so that the <code>playPauseMedia()</code> function is invoked when the play button is clicked:</p> + + <pre class="brush: js notranslate">play.addEventListener('click', playPauseMedia); +</pre> + </li> + <li> + <p>Now to define <code>playPauseMedia()</code> — add the following, again at the bottom of your code:</p> + + <pre class="brush: js notranslate">function playPauseMedia() { + if(media.paused) { + play.setAttribute('data-icon','u'); + media.play(); + } else { + play.setAttribute('data-icon','P'); + media.pause(); + } +}</pre> + + <p>Here we use an <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code> statement to check whether the video is paused. The {{domxref("HTMLMediaElement.paused")}} property returns true if the media is paused, which is any time the video is not playing, including when it is set at 0 duration after it first loads. If it is paused, we set the <code>data-icon</code> attribute value on the play button to "u", which is a "paused" icon, and invoke the {{domxref("HTMLMediaElement.play()")}} method to play the media.</p> + + <p>On the second click, the button will be toggled back again — the "play" icon will be shown again, and the video will be paused with {{domxref("HTMLMediaElement.pause()")}}.</p> + </li> +</ol> + +<h4 id="Stopping_the_video">Stopping the video</h4> + +<ol> + <li> + <p>Next, let's add functionality to handle stopping the video. Add the following <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> lines below the previous one you added:</p> + + <pre class="brush: js notranslate">stop.addEventListener('click', stopMedia); +media.addEventListener('ended', stopMedia); +</pre> + + <p>The {{event("click")}} event is obvious — we want to stop the video by running our <code>stopMedia()</code> function when the stop button is clicked. We do however also want to stop the video when it finishes playing — this is marked by the {{event("ended")}} event firing, so we also set up a listener to run the function on that event firing too.</p> + </li> + <li> + <p>Next, let's define <code>stopMedia()</code> — add the following function below <code>playPauseMedia()</code>:</p> + + <pre class="brush: js notranslate">function stopMedia() { + media.pause(); + media.currentTime = 0; + play.setAttribute('data-icon','P'); +} +</pre> + + <p>there is no <code>stop()</code> method on the HTMLMediaElement API — the equivalent is to <code>pause()</code> the video, and set its {{domxref("HTMLMediaElement.currentTime","currentTime")}} property to 0. Setting <code>currentTime</code> to a value (in seconds) immediately jumps the media to that position.</p> + + <p>All there is left to do after that is to set the displayed icon to the "play" icon. Regardless of whether the video was paused or playing when the stop button is pressed, you want it to be ready to play afterwards.</p> + </li> +</ol> + +<h4 id="Seeking_back_and_forth">Seeking back and forth</h4> + +<p>There are many ways that you can implement rewind and fast forward functionality; here we are showing you a relatively complex way of doing it, which doesn't break when the different buttons are pressed in an unexpected order.</p> + +<ol> + <li> + <p>First of all, add the following two <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> lines below the previous ones:</p> + + <pre class="brush: js notranslate">rwd.addEventListener('click', mediaBackward); +fwd.addEventListener('click', mediaForward); +</pre> + </li> + <li> + <p>Now on to the event handler functions — add the following code below your previous functions to define <code>mediaBackward()</code> and <code>mediaForward()</code>:</p> + + <pre class="brush: js notranslate">let intervalFwd; +let intervalRwd; + +function mediaBackward() { + clearInterval(intervalFwd); + fwd.classList.remove('active'); + + if(rwd.classList.contains('active')) { + rwd.classList.remove('active'); + clearInterval(intervalRwd); + media.play(); + } else { + rwd.classList.add('active'); + media.pause(); + intervalRwd = setInterval(windBackward, 200); + } +} + +function mediaForward() { + clearInterval(intervalRwd); + rwd.classList.remove('active'); + + if(fwd.classList.contains('active')) { + fwd.classList.remove('active'); + clearInterval(intervalFwd); + media.play(); + } else { + fwd.classList.add('active'); + media.pause(); + intervalFwd = setInterval(windForward, 200); + } +} +</pre> + + <p>You'll notice that first we initialize two variables — <code>intervalFwd</code> and <code>intervalRwd</code> — you'll find out what they are for later on.</p> + + <p>Let's step through <code>mediaBackward()</code> (the functionality for <code>mediaForward()</code> is exactly the same, but in reverse):</p> + + <ol> + <li>We clear any classes and intervals that are set on the fast forward functionality — we do this because if we press the <code>rwd</code> button after pressing the <code>fwd</code> button, we want to cancel any fast forward functionality and replace it with the rewind functionality. If we tried to do both at one, the player would break.</li> + <li>We use an <code>if</code> statement to check whether the <code>active</code> class has been set on the <code>rwd</code> button, indicating that it has already been pressed. The {{domxref("Element.classList", "classList")}} is a rather handy property that exists on every element — it contains a list of all the classes set on the element, as well as methods for adding/removing classes, etc. We use the <code>classList.contains()</code> method to check whether the list contains the <code>active</code> class. This returns a boolean <code>true</code>/<code>false</code> result.</li> + <li>If <code>active</code> has been set on the <code>rwd</code> button, we remove it using <code>classList.remove()</code>, clear the interval that has been set when the button was first pressed (see below for more explanation), and use {{domxref("HTMLMediaElement.play()")}} to cancel the rewind and start the video playing normally.</li> + <li>If it hasn't yet been set, we add the <code>active</code> class to the <code>rwd</code> button using <code>classList.add()</code>, pause the video using {{domxref("HTMLMediaElement.pause()")}}, then set the <code>intervalRwd</code> variable to equal a {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} call. When invoked, <code>setInterval()</code> creates an active interval, meaning that it runs the function given as the first parameter every x milliseconds, where x is the value of the 2nd parameter. So here we are running the <code>windBackward()</code> function every 200 milliseconds — we'll use this function to wind the video backwards constantly. To stop a {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} running, you have to call {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}}, giving it the identifying name of the interval to clear, which in this case is the variable name <code>intervalRwd</code> (see the <code>clearInterval()</code> call earlier on in the function).</li> + </ol> + </li> + <li> + <p>Finally, we need to define the <code>windBackward()</code> and <code>windForward()</code> functions invoked in the <code>setInterval()</code> calls. Add the following below your two previous functions:</p> + + <pre class="brush: js notranslate">function windBackward() { + if(media.currentTime <= 3) { + rwd.classList.remove('active'); + clearInterval(intervalRwd); + stopMedia(); + } else { + media.currentTime -= 3; + } +} + +function windForward() { + if(media.currentTime >= media.duration - 3) { + fwd.classList.remove('active'); + clearInterval(intervalFwd); + stopMedia(); + } else { + media.currentTime += 3; + } +}</pre> + + <p>Again, we'll just run through the first one of these functions as they work almost identically, but in reverse to one another. In <code>windBackward()</code> we do the following — bear in mind that when the interval is active, this function is being run once every 200 milliseconds.</p> + + <ol> + <li>We start off with an <code>if</code> statement that checks to see whether the current time is less than 3 seconds, i.e., if rewinding by another three seconds would take it back past the start of the video. This would cause strange behaviour, so if this is the case we stop the video playing by calling <code>stopMedia()</code>, remove the <code>active</code> class from the rewind button, and clear the <code>intervalRwd</code> interval to stop the rewind functionality. If we didn't do this last step, the video would just keep rewinding forever.</li> + <li>If the current time is not within 3 seconds of the start of the video, we simply remove three seconds from the current time by executing <code>media.currentTime -= 3</code>. So in effect, we are rewinding the video by 3 seconds, once every 200 milliseconds.</li> + </ol> + </li> +</ol> + +<h4 id="Updating_the_elapsed_time">Updating the elapsed time</h4> + +<p>The very last piece of our media player to implement is the time elapsed displays. To do this we'll run a function to update the time displays every time the {{event("timeupdate")}} event is fired on the <code><video></code> element. The frequency with which this event fires depends on your browser, CPU power, etc (<a href="http://stackoverflow.com/questions/9678177/how-often-does-the-timeupdate-event-fire-for-an-html5-video">see this stackoverflow post</a>).</p> + +<p>Add the following <code>addEventListener()</code> line just below the others:</p> + +<pre class="brush: js notranslate">media.addEventListener('timeupdate', setTime);</pre> + +<p>Now to define the <code>setTime()</code> function. Add the following at the bottom of your file:</p> + +<pre class="brush: js notranslate">function setTime() { + let minutes = Math.floor(media.currentTime / 60); + let seconds = Math.floor(media.currentTime - minutes * 60); + let minuteValue; + let secondValue; + + if (minutes < 10) { + minuteValue = '0' + minutes; + } else { + minuteValue = minutes; + } + + if (seconds < 10) { + secondValue = '0' + seconds; + } else { + secondValue = seconds; + } + + let mediaTime = minuteValue + ':' + secondValue; + timer.textContent = mediaTime; + + let barLength = timerWrapper.clientWidth * (media.currentTime/media.duration); + timerBar.style.width = barLength + 'px'; +} +</pre> + +<p>This is a fairly long function, so let's go through it step by step:</p> + +<ol> + <li>First of all, we work out the number of minutes and seconds in the {{domxref("HTMLMediaElement.currentTime")}} value.</li> + <li>Then we initialize two more variables — <code>minuteValue</code> and <code>secondValue</code>.</li> + <li>The two <code>if</code> statements work out whether the number of minutes and seconds are less than 10. If so, they add a leading zero to the values, in the same way that a digital clock display works.</li> + <li>The actual time value to display is set as <code>minuteValue</code> plus a colon character plus <code>secondValue</code>.</li> + <li>The {{domxref("Node.textContent")}} value of the timer is set to the time value, so it displays in the UI.</li> + <li>The length we should set the inner <code><div></code> to is worked out by first working out the width of the outer <code><div></code> (any element's {{domxref("Element.clientWidth", "clientWidth")}} property will contain its length), and then multiplying it by the {{domxref("HTMLMediaElement.currentTime")}} divided by the total {{domxref("HTMLMediaElement.duration")}} of the media.</li> + <li>We set the width of the inner <code><div></code> to equal the calculated bar length, plus "px", so it will be set to that number of pixels.</li> +</ol> + +<h4 id="Fixing_play_and_pause">Fixing play and pause</h4> + +<p>There is one problem left to fix. If the play/pause or stop buttons are pressed while the rewind or fast forward functionality is active, they just don't work. How can we fix it so that they cancel the <code>rwd</code>/<code>fwd</code> button functionality and play/stop the video as you'd expect? This is fairly easy to fix.</p> + +<p>First of all, add the following lines inside the <code>stopMedia()</code> function — anywhere will do:</p> + +<pre class="brush: js notranslate">rwd.classList.remove('active'); +fwd.classList.remove('active'); +clearInterval(intervalRwd); +clearInterval(intervalFwd); +</pre> + +<p>Now add the same lines again, at the very start of the <code>playPauseMedia()</code> function (just before the start of the <code>if</code> statement).</p> + +<p>At this point, you could delete the equivalent lines from the <code>windBackward()</code> and <code>windForward()</code> functions, as that functionality has been implemented in the <code>stopMedia()</code> function instead.</p> + +<p>Note: You could also further improve the efficiency of the code by creating a separate function that runs these lines, then calling that anywhere it is needed, rather than repeating the lines multiple times in the code. But we'll leave that one up to you.</p> + +<h2 id="Summary">Summary</h2> + +<p>I think we've taught you enough in this article. The {{domxref("HTMLMediaElement")}} API makes a wealth of functionality available for creating simple video and audio players, and that's only the tip of the iceberg. See the "See also" section below for links to more complex and interesting functionality.</p> + +<p>Here are some suggestions for ways you could enhance the existing example we've built up:</p> + +<ol> + <li> + <p>The time display currently breaks if the video is an hour long or more (well, it won't display hours; just minutes and seconds). Can you figure out how to change the example to make it display hours?</p> + </li> + <li> + <p>Because <code><audio></code> elements have the same {{domxref("HTMLMediaElement")}} functionality available to them, you could easily get this player to work for an <code><audio></code> element too. Try doing so.</p> + </li> + <li> + <p>Can you work out a way to turn the timer inner <code><div></code> element into a true seek bar/scrobbler — i.e., when you click somewhere on the bar, it jumps to that relative position in the video playback? As a hint, you can find out the X and Y values of the element's left/right and top/bottom sides via the <code><a href="/en-US/docs/Web/API/Element/getBoundingClientRect">getBoundingClientRect()</a></code> method, and you can find the coordinates of a mouse click via the event object of the click event, called on the {{domxref("Document")}} object. For example:</p> + + <pre class="brush: js notranslate">document.onclick = function(e) { + console.log(e.x) + ',' + console.log(e.y) +}</pre> + </li> +</ol> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLMediaElement")}}</li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a> — simple guide to <code><video></code> and <code><audio></code> HTML.</li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and video delivery</a> — detailed guide to delivering media inside the browser, with many tips, tricks, and links to further more advanced tutorials.</li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Audio and video manipulation</a> — detailed guide to manipulating audio and video, e.g. with <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a>, <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, and more.</li> + <li>{{htmlelement("video")}} and {{htmlelement("audio")}} reference pages.</li> + <li><a href="/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">ドキュメントの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></li> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">グラフィックの描画</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側ストレージ</a></li> +</ul> diff --git a/files/ja/learn/javascript/first_steps/a_first_splash/index.html b/files/ja/learn/javascript/first_steps/a_first_splash/index.html new file mode 100644 index 0000000000..3281944f5b --- /dev/null +++ b/files/ja/learn/javascript/first_steps/a_first_splash/index.html @@ -0,0 +1,610 @@ +--- +title: JavaScriptへの最初のダイブ +slug: Learn/JavaScript/First_steps/A_first_splash +tags: + - CodingScripting + - Conditionals + - JavaScript + - Objects + - Operators + - events + - 'l10n:priority' + - 初心者 + - 変数 + - 学習 + - 記事 + - 関数 +translation_of: Learn/JavaScript/First_steps/A_first_splash +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">JavaScript の理論、そしてそれを使ってできることについて学んだところで、完全に実用的なチュートリアルを通じて、JavaScript の基本的な機能についての短期集中コースをお見せします。ここでは、簡単な「数字を当てる」ゲームをステップバイステップで構築します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターの知識および HTML と CSS への理解、JavaScript とは何かを知っている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>簡単な JavaScript を書いてみて、JavaScript のプログラムを書くために必要な知識を会得する。</td> + </tr> + </tbody> +</table> + +<p>ここでは、JavaScript (とその他のプログラミング言語) がどのように動くのかという高度なコンセプトを紹介したいので、一度ですべての詳細を理解する必要はありません。詳細については続く記事にてご紹介しますので！</p> + +<div class="note"> +<p><strong>注記</strong>: JavaScript の機能として紹介する、関数や繰り返しなどの機能は、ほとんどが他のプログラミング言語にもあります。書き方は異なりますが、コンセプトは大体同じです。</p> +</div> + +<h2 id="Thinking_like_a_programmer" name="Thinking_like_a_programmer">プログラマーのように考える</h2> + +<p>プログラミングで一番難しいのは、書き方を覚えることではなく、現実の問題にどう適用するかということです。プログラマーのように考え始める必要があります — それは一般的に、そのプログラムが何をしなければならないかという説明を見て、それを満たすためにコードのどんな機能を用いるかを考え、さらにそれを組み合わせていかなければなりません。</p> + +<p>これには努力・プログラミング文法の経験・練習に加え、少しの想像力が必要です。たくさんコードを書けばもっと慣れていくでしょう。たったの 5分で「プログラマー脳」を開発することは約束できませんが、このコースを通じてプログラマーのように考えるたくさんの機会を提供したいと思います。</p> + +<p>まずはそれを念頭に置いてから、この記事で作るプログラムの実例を見てみましょう。さらにその後、具体的な手順に落とし込む方法について学習しましょう。</p> + +<h2 id="Example_—_Guess_the_number_game" name="Example_—_Guess_the_number_game">例: 数字当てゲーム</h2> + +<p>この記事では、以下に示す簡単なゲームを作る方法を紹介します。</p> + +<div class="hidden"> +<h6 id="Top_hidden_code" name="Top_hidden_code">Top hidden code</h6> + +<pre class="brush: html line-numbers language-html notranslate"><!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>数字当てゲーム</title> + <style> + html { + font-family: sans-serif; + } + + body { + width: 50%; + max-width: 800px; + min-width: 480px; + margin: 0 auto; + } + + .lastResult { + color: white; + padding: 3px; + } + </style> +</head> + +<body> + <h1>数字当てゲーム</h1> + <p>1 から 100 までの数字を当ててみて！10 回以内に当てられるでしょうか。選んだ数字が大きいか小さいかを表示します。</p> + <div class="form"> <label for="guessField">予想を入力してください: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="予想を入力" class="guessSubmit"> </div> + <div class="resultParas"> + <p class="guesses"></p> + <p class="lastResult"></p> + <p class="lowOrHi"></p> + </div> +</body> +<script> + // JavaScript はここから +<code class="language-html"><span class="script token"><span class="language-javascript token"><span class="keyword token"> let</span> randomNumber <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">100</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">;</span> + <span class="keyword token">const</span> guesses <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guesses'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">const</span> lastResult <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.lastResult'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">const</span> lowOrHi <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.lowOrHi'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">const</span> guessSubmit <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guessSubmit'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">const</span> guessField <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guessField'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">let</span> guessCount <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> + <span class="keyword token">let</span> resetButton<span class="punctuation token">;</span></span></span></code> + function checkGuess() { + let userGuess = Number(guessField.value); + if (guessCount === 1) { + guesses.textContent = '前回の予想: '; + } + + guesses.textContent += userGuess + ' '; + + if (userGuess === randomNumber) { + lastResult.textContent = 'おめでとう! 正解です!'; + lastResult.style.backgroundColor = 'green'; + lowOrHi.textContent = ''; + setGameOver(); + } else if (guessCount === 10) { + lastResult.textContent = '!!!ゲームオーバー!!!'; + lowOrHi.textContent = ''; + setGameOver(); + } else { + lastResult.textContent = '間違いです!'; + lastResult.style.backgroundColor = 'red'; + if(userGuess < randomNumber) { + lowOrHi.textContent='今の予想は小さすぎです!もっと大きな数字です。' ; + } else if(userGuess > randomNumber) { + lowOrHi.textContent = '今の予想は大きすぎです!もっと小さな数字です。'; + } + } + + <code class="language-html"><span class="script token"><span class="language-javascript token">guessCount<span class="operator token">++</span><span class="punctuation token">;</span> + guessField<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + guessSubmit<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> checkGuess<span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="keyword token">function</span> <span class="function token">setGameOver</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + guessField<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="boolean token">true</span><span class="punctuation token">;</span> + guessSubmit<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="boolean token">true</span><span class="punctuation token">;</span> + resetButton <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'button'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + resetButton<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'Start new game'</span><span class="punctuation token">;</span> + document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>resetButton<span class="punctuation token">)</span><span class="punctuation token">;</span> + resetButton<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> resetGame<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">function</span> <span class="function token">resetGame</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + guessCount <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> + <span class="keyword token">const</span> resetParas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'.resultParas p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">let</span> i <span class="operator token">=</span> <span class="number token">0</span> <span class="punctuation token">;</span> i <span class="operator token"><</span> resetParas<span class="punctuation token">.</span>length <span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + resetParas<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + resetButton<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>resetButton<span class="punctuation token">)</span><span class="punctuation token">;</span> + guessField<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="boolean token">false</span><span class="punctuation token">;</span> + guessSubmit<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="boolean token">false</span><span class="punctuation token">;</span> + guessField<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span> + guessField<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + lastResult<span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'white'</span><span class="punctuation token">;</span> + randomNumber <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">100</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +</div> + +<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>さあ、ゲームで遊んでみてください。次に進む前にゲームに慣れておきましょう。</p> + +<p>上司から、次のように作るゲームの概要を聞いたところを想像してみてください。</p> + +<blockquote> +<p>数字を予想する単純なゲームを作って欲しい。ランダムな 1 から 100 の数字を決めて、プレイヤーに 10 回以内に当ててもらうゲームだ。プレイヤーには予想する都度、正解か間違いかを表示する。もしプレイヤーが間違っていれば、プレイヤーが予想した数字に応じて、大きすぎるか小さすぎるかを表示する。また、プレイヤーの前回の予想がどうだったかも表示する。ゲームはプレイヤーの予想が正しかった場合、もしくは回数の上限に達した場合に終了する。ゲームが終了したら、プレイヤーはもう一度プレイ開始できるようにする。</p> +</blockquote> + +<p>できるだけプログラマーのように考えると、この概要から最初に行うべきことは、簡潔な実行可能な単位に分割することです。</p> + +<ol> + <li>1 から 100 までの数字をランダムに一つ生成する。</li> + <li>プレイヤーの予想した回数を記録する。最初は 1 回から。</li> + <li>プレイヤーが数字が何かを予想する方法を用意する。</li> + <li>予想が入力されたら、プレイヤーが以前の予想を見られるように、どこかに記録する。</li> + <li>入力された数字が正しいかどうかを調べる。</li> + <li>入力された数字が正しい場合... + <ol> + <li>正解したお祝いのメッセージを表示する。</li> + <li>プレイヤーが次の予想を出来ないようにする。(ゲームがおかしくならないように)</li> + <li>プレイヤーが次のゲームを始められるようなコントロールを表示する。</li> + </ol> + </li> + <li>プレイヤーの予想が間違いで、予想回数の上限にはまだ達していない場合... + <ol> + <li>プレイヤーが間違っていることを表示する。</li> + <li>次の予想を入力できるようにする。</li> + <li>予想回数に 1 を加算する。</li> + </ol> + </li> + <li>プレイヤーの予想が間違いで、予想回数の上限に達した場合... + <ol> + <li>プレイヤーにゲームオーバーであることを伝える。</li> + <li>プレイヤーが次の予想を出来ないようにする。(ゲームがおかしくならないように)</li> + <li>プレイヤーが次のゲームを始められるようなコントロールを表示する。</li> + </ol> + </li> + <li>ゲームがもう一度始まったら、画面とロジックが完全にリセットされるようにして、1.に戻る。</li> +</ol> + +<p>さあ、先に進みましょう。この手順をどのようにコードにするのか見て、JavaScript の機能を探求していきましょう。</p> + +<h3 id="Initial_setup" name="Initial_setup">まず初めに</h3> + +<p>チュートリアルを開始するにあたり、自分のコンピューターに <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a> ファイル (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">こちらでデモが見られます</a>) をコピーしてください。テキストエディターとブラウザーの両方でそのファイルを開いてください。すると、簡単な見出しと説明の段落、予想を入力するフォームが見えるでしょう。ただし、そのフォームはまだ何もできません。</p> + +<p>コードを入力するのはすべて HTML の一番下にある {{htmlelement("script")}} 要素の中です。</p> + +<pre class="brush: html notranslate"><script> + + // JavaScript をここに書きます + +</script> +</pre> + +<h3 id="Adding_variables_to_store_our_data" name="Adding_variables_to_store_our_data">データを保持する変数を追加する</h3> + +<p>始めましょう。まず、{{htmlelement("script")}} 要素の中に以下の内容を書いてみてください。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> randomNumber <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">100</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">;</span> + +<span class="keyword token">const</span> guesses <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guesses'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">const</span> lastResult <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.lastResult'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">const</span> lowOrHi <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.lowOrHi'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">const</span> guessSubmit <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guessSubmit'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">const</span> guessField <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guessField'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">let</span> guessCount <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> +<span class="keyword token">let</span> resetButton<span class="punctuation token">;</span></code></pre> + +<p>上記のコードはプログラムが使用するデータを保持する変数と定数をセットアップしています。変数とは基本的には値 (数字や文字など) の入れ物です。 <code>let</code> (か <code>var</code>) キーワードに続いて変数の名前を書くことで、変数を作成します (これらのキーワードの違いは<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">以降の記事</a>で見ます) 。定数は変更しない値を保持するのに、 <code>const</code> キーワードといっしょに使います。この場合では、定数をユーザーインターフェイスのパーツへの参照を保存するのに使っていて、一部の内部のテキストは変わるかも知れませんが、参照されるHTML要素は同じままです。</p> + +<p>等号記号 ( <code>=</code> ) に続いて、与えたい値を書いて、変数や定数に値を代入できます。</p> + +<p>この例では:</p> + +<ul> + <li>最初の変数 ( <code>randomNumber</code> ) には数学的なアルゴリズムにより計算された 1 から 100 までのランダムな数字が代入されます。</li> + <li>続く 3 つの変数 ( <code>guesses</code>、<code>lastResult</code>、<code>lowOrHi</code> ) には、以下に示す HTML の段落の場所がそれぞれに保持されます。後ほど段落に値を追加するために使用します。 (すべて<code><div></code> 要素内にあり、後にゲーム再開時にリセットするのにすべてを選択するのに使われるのに注意してください): + <pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>resultParas<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>guesses<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lastResult<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lowOrHi<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + </li> + <li>次の 2 つの定数はにはテキスト入力フォームおよび送信ボタンへの参照が保持され、後で予想の送信をコントロールする際に使用されます。 + <pre class="brush: html notranslate"><label for="guessField">予想を入力してください: </label><input type="text" id="guessField" class="guessField"> +<input type="submit" value="予想を投稿" class="guessSubmit"></pre> + </li> + <li>最後の 2 つの変数はプレイヤーが予想した回数を記録するため 1 を (プレイヤーが何回予想したかの回数を追跡します) 、そしてまだ存在していない(あとで追加する)リセットボタンへの参照を保持します。</li> +</ul> + +<div class="note"> +<p><strong>注記</strong>: 変数や定数についてはこのコースの間に、<a href="https://developer.mozilla.org/ja/docs/user:chrisdavidmills/variables">次の記事</a>を始めとして何度も出てきます。</p> +</div> + +<h3 id="Functions" name="Functions">関数</h3> + +<p>次に、以下のコードを先ほどの JavaScript に追加してください。</p> + +<pre class="brush: js notranslate">function checkGuess() { + alert('ここはプレースホルダです'); +}</pre> + +<p>関数は再利用可能なコードのかたまりです。何度も実行することができ、同じコードを書く手間を省けます。これはとても便利です。関数の書き方 (定義の仕方) はいくつかありますが、今回は集中するために、一つの簡単な書き方だけを使用します。ここでは <code>function</code> キーワードに続いて関数の名前、括弧 ( <code>()</code> )、中括弧 ( <code>{ }</code> )が続く書き方で定義しました。中括弧の中に、関数を呼ぶたびに実行されるコードを書きます。</p> + +<p>関数を実行したい場合には、関数の名前に続いて括弧を書きます。</p> + +<p>それでは試してみましょう。コードを保存してブラウザーを再読み込みしてみてください。<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツールの JavaScript コンソール</a>を開いてください。そして次のコードを実行します。</p> + +<pre class="brush: js notranslate">checkGuess();</pre> + +<p><kbd>Return</kbd>/<kbd>Enter</kbd> を押した後で、"ここはプレースホルダです"という警告が表示されましたね。呼び出すと、いつでも警告が表示される関数を定義することができました。</p> + +<div class="note"> +<p><strong>注記</strong>: 関数についても<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions">このコースの後の方で</a>詳しく学びます。</p> +</div> + +<h3 id="Operators" name="Operators">演算子</h3> + +<p>JavaScript で演算子を使用して値の確認をしたり、計算したり、文字を結合したりなど、いろいろなことができます。</p> + +<p>コードを保存してブラウザーを再読み込みしてみてください。まだ開いていなければ、<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツールの JavaScript コンソール</a>を開いて、表の「例」の列に書いてある通りに入力してみましょう。例を一つ入力したら、その都度 <kbd>Return</kbd>/<kbd>Enter</kbd> キーを押してください。結果が表示されるはずです。</p> + +<p>まずは算術演算子の例を見てください。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">演算子</th> + <th scope="col">名前</th> + <th scope="col">例</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+</code></td> + <td>加算</td> + <td><code>6 + 9</code></td> + </tr> + <tr> + <td><code>-</code></td> + <td>減算</td> + <td><code>20 - 15</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>乗算</td> + <td><code>3 * 7</code></td> + </tr> + <tr> + <td><code>/</code></td> + <td>除算</td> + <td><code>10 / 5</code></td> + </tr> + </tbody> +</table> + +<p>また、 <code>+</code> 演算子は 2 つの文字を繋げて一つにするときにも使います。(プログラミングでは文字列を<em>結合</em>すると言います。) 下の例も試してみてください。</p> + +<pre class="brush: js notranslate">let name = 'ビンゴさん'; +name; +let hello = 'が、こんにちは！と言っています。'; +hello; +let greeting = name + hello; +greeting;</pre> + +<p>累算<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">代入演算子</a>と呼ばれるもっと短い書き方もあります。すでにある文字列に、さらに文字を追加した結果を返したい場合などに使います。例えば、</p> + +<pre class="brush: js notranslate">name += 'が、こんにちは！と言っています。';</pre> + +<p>のように書いたとき、次と同じです:</p> + +<pre class="brush: js notranslate">name = name + 'が、こんにちは！と言っています。';</pre> + +<p>true/false テスト（例えば条件内 - {{anch("Conditionals", "below")}}参照）を実行しているとき、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">比較演算子</a>を使用します。例えば：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">演算子</th> + <th scope="col">名前</th> + <th scope="col">例</th> + </tr> + <tr> + <td><code>===</code></td> + <td>厳密に等しい (全く同じかどうか)</td> + <td> + <pre class="brush: js line-numbers language-js notranslate"> +<code class="language-js"><span class="number token">5</span> <span class="operator token">===</span> <span class="number token">2</span> <span class="operator token">+</span> <span class="number token">4</span> <span class="comment token">// false</span> +<span class="string token">'Chris'</span> <span class="operator token">===</span> <span class="string token">'Bob'</span> <span class="comment token">// false</span> +<span class="number token">5</span> <span class="operator token">===</span> <span class="number token">2</span> <span class="operator token">+</span> <span class="number token">3</span> <span class="comment token">// true</span> +<span class="number token">2</span> <span class="operator token">===</span> <span class="string token">'2'</span> <span class="comment token">// false; number versus string</span></code></pre> + </td> + </tr> + <tr> + <td><code>!==</code></td> + <td>等しくない (違うかどうか)</td> + <td> + <pre class="brush: js line-numbers language-js notranslate"> +<code class="language-js"><span class="number token">5</span> <span class="operator token">!==</span> <span class="number token">2</span> <span class="operator token">+</span> <span class="number token">4</span> <span class="comment token">// true</span> +<span class="string token">'Chris'</span> <span class="operator token">!==</span> <span class="string token">'Bob'</span> <span class="comment token">// true</span> +<span class="number token">5</span> <span class="operator token">!==</span> <span class="number token">2</span> <span class="operator token">+</span> <span class="number token">3</span> <span class="comment token">// false</span> +<span class="number token">2</span> <span class="operator token">!==</span> <span class="string token">'2'</span> <span class="comment token">// true; number versus string</span></code></pre> + </td> + </tr> + <tr> + <td><code><</code></td> + <td>小なり</td> + <td> + <pre class="brush: js line-numbers language-js notranslate"> +<code class="language-js"><span class="number token">6</span> <span class="operator token"><</span> <span class="number token">10</span> <span class="comment token">// true</span> +<span class="number token">20</span> <span class="operator token"><</span> <span class="number token">10</span> <span class="comment token">// false</span></code></pre> + </td> + </tr> + <tr> + <td><code>></code></td> + <td>大なり</td> + <td> + <pre class="brush: js line-numbers language-js notranslate"> +<code class="language-js"><span class="number token">6</span> <span class="operator token">></span> <span class="number token">10</span> <span class="comment token">// false</span> +<span class="number token">20</span> <span class="operator token">></span> <span class="number token">10</span> <span class="comment token">// true</span></code></pre> + </td> + </tr> + </thead> +</table> + +<h3 id="Conditionals" name="Conditionals">条件式</h3> + +<p>先ほどの <code>checkGuess()</code> 関数に話を戻します。当然ですが、ただ単にプレースホルダメッセージを出したいわけではありませんよね。この関数にはプレイヤーの予想が正しいかどうかを調べて適切に返事をすることを望みます。</p> + +<p>それでは、今の <code>checkGuess()</code> 関数を以下のように書き換えてみましょう。</p> + +<pre class="brush: js notranslate">function checkGuess() { + let userGuess = Number(guessField.value); + if (guessCount === 1) { + guesses.textContent = '前回の予想: '; + } + guesses.textContent += userGuess + ' '; + + if (userGuess === randomNumber) { + lastResult.textContent = 'おめでとう! 正解です!'; + lastResult.style.backgroundColor = 'green'; + lowOrHi.textContent = ''; + setGameOver(); + } else if (guessCount === 10) { + lastResult.textContent = '!!!ゲームオーバー!!!'; + setGameOver(); + } else { + lastResult.textContent = '間違いです!'; + lastResult.style.backgroundColor = 'red'; + if(userGuess < randomNumber) { + lowOrHi.textContent='今の予想は小さすぎです!' ; + } else if(userGuess > randomNumber) { + lowOrHi.textContent = '今の予想は大きすぎです!'; + } + } + + guessCount++; + guessField.value = ''; + guessField.focus(); +}</pre> + +<p>たくさん書きましたね！各部分に分割して、それぞれの部分を詳細に見て何をしているか説明しましょう。</p> + +<ul> + <li>関数の最初の行 (上のコードの 2行目) で、<code>userGuess</code> という変数を宣言して、現在のテキストフィールドに入力された値をセットしています。そして、組み込みの <code>Number()</code> 関数を呼び出して、テキストフィールドに入力された値が間違いなく数値であることも確認しています。</li> + <li>次に、初めて条件分岐を伴うコードブロックが出てきます (3行目～5行目)。条件分岐は、条件の判定結果が真 (true) であるかどうかによって、次に実行するコードが変わります。見た目が少しだけ関数に似ていますが、違うものです。条件分岐の最も単純な書き方は <code>if</code> キーワードから始まり、括弧が続き、中括弧が続きます。括弧の中には分岐する条件を書きます。条件が <code>true</code> となれば、中括弧の中にあるコードが実行されます。条件が <code>true</code> にならなければ、中括弧の次のコードまで移動します。今回の条件は <code>guessCount</code> 変数が <code>1</code> であるかどうかを判定しています。(つまり、プレイヤーの初回の予想かどうかを判定しているのです。) + <pre class="brush: js notranslate">guessCount === 1</pre> + もしそうなら、<code>guesses</code> 段落 ({{htmlelement("p")}}要素) の内容を "<samp>前回の予想: </samp>" に変更します。違うなら、何もしません。</li> + <li>6行目では、<code>guesses</code> 段落の最後にスペースを付けて、現在の <code>userGuess</code> 変数の値を追加しています。なので、予想が表示されるときにはスペースで区切られて表示されます。</li> + <li>次の部分 (8行目～24行目) には、確認すべきことがいくつかあります。 + <ul> + <li>最初の <code>if(){ }</code> は、プレイヤーの予想が、JavaScript のコードの先頭で設定したランダムな数字を格納した <code>randomNumber</code> 変数の値と等しいかどうかを調べています。もし等しければ、プレイヤーは正解し勝ちとなるため、祝福のメッセージを素敵な緑色で表示します。さらに、数字の大小を表示する段落をクリアして、後で説明する <code>setGameOver()</code> 関数を実行します。</li> + <li>今度は <code>else if(){ }</code> という部分で、ひとつ前の条件に続けて条件を書いています。この条件はユーザの最後のターンかどうかを調べています。もし最後の回ならば、プログラムは祝福のメッセージの代わりにゲームオーバーメッセージとする以外は、ひとつ前の部分と同じことをします。</li> + <li>このコードに連なる最後のブロック (<code>else { }</code>) は、前の二つの条件がどちらも真とならなかった場合にのみ実行されます。(つまり、プレイヤーは間違えてはいるものの、予想回数が残っている場合です。) この場合、プレイヤーに予想が間違っていることを伝え、入力された数字が大きいか小さいかを伝えるため、さらなる条件の確認を行います。</li> + </ul> + </li> + <li>最後の 3行 (26行目～28行目) は、次の予想の入力を受け取るための準備です。<code>guessCount</code> 変数に 1 を加算して、プレイヤーの予想回数を数えます。(<code>++</code> はインクリメント演算子で、1 だけインクリメント(増加)します。) そして、入力フォームのテキストフィールドを空にしてからフォーカスを当て、プレイヤーの次の入力に備えます。</li> +</ul> + +<h3 id="Events" name="Events">イベント</h3> + +<p>ここまでで、<code>checkGuess()</code> 関数を上手に実装することができました。しかしまだ何も起きません。なぜなら、まだこの関数を呼び出していないからです。出来れば、"予想を入力"のボタンが押されたときに、この関数が呼ばれるようにしたいです。そのためにはイベントを使います。イベントとは、ボタンが押されたり、ページが読み込まれたり、ビデオを再生したりといったブラウザーで起きることで、それに反応してコードを実行させることができます。イベントが発生したことを聞き取る構成が<strong>イベントリスナー</strong>で、発生したイベントに反応して実行されるコードブロックが<strong>イベントハンドラー</strong>です。</p> + +<p><code>checkGuess()</code> 関数の下に、以下の一文を加えましょう。</p> + +<pre class="brush: js notranslate">guessSubmit.addEventListener('click', checkGuess);</pre> + +<p><code>guessSubmit</code> ボタンに対して、イベントリスナーを追加しました。これは発生したことを知りたいイベントの種類 (この場合は <code>click</code>)と、イベントが発生した場合に実行するコード (この場合は <code>checkGuess()</code>) の 2 つの入力値 (<em>引数</em>と言います) を取る関数です。({{domxref("EventTarget.addEventListener", "addEventListener()")}}の中では括弧を書く必要はありません。)</p> + +<p>保存して再度コードを読み直してください。今度はきっとある程度まで動くはずです。ただし、まだ問題があります。もし正解したり、予想回数の上限に達してしまった場合には、ゲームが止まってしまうでしょう。なぜなら、ゲームが終わった時に実行されるべき関数 <code>setGameOver()</code> をまだ定義していないためです。さあ、足りないコードを書いてチュートリアルの機能を完成させましょう。</p> + +<h3 id="Finishing_the_game_functionality" name="Finishing_the_game_functionality">ゲームの機能を完成させる</h3> + +<p><code>setGameOver()</code> 関数をコードの一番下に追加して、中身を見てみましょう。これを JavaScript の一番下に追加します。</p> + +<pre class="brush: js notranslate">function setGameOver() { + guessField.disabled = true; + guessSubmit.disabled = true; + resetButton = document.createElement('button'); + resetButton.textContent = '新しいゲームを始める'; + document.body.appendChild(resetButton); + resetButton.addEventListener('click', resetGame); +}</pre> + +<ul> + <li>最初の 2行は入力フォームのテキストフィールドとボタンの <code>disabled</code> プロパティを <code>true</code> に設定することで、入力できないようにしています。ゲーム終了後にユーザーがさらに予想を入力し、ゲームが予期しない動作をすることを防ぐために必要です。</li> + <li>さらに次の 3行では、新しい {{htmlelement("button")}} 要素を生成し、そのラベルに"<samp>新しいゲームを始める</samp>"という文言を設定し、HTML ページに追加しています。</li> + <li>最後の行では、上で生成したボタンがクリックされたときに <code>resetGame()</code> という関数が実行されるようにイベントリスナーを設定しています。</li> +</ul> + +<p>この関数も定義しなければなりませんね！もう一度、以下のコードを JavaScript のいちばん下に追加してください。</p> + +<pre class="brush: js notranslate">function resetGame() { + guessCount = 1; + + const resetParas = document.querySelectorAll('.resultParas p'); + for (let i = 0 ; i < resetParas.length ; i++) { + resetParas[i].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; +}</pre> + +<p>ちょっと長めのこのコードブロックは、プレイヤーが次のゲームができるように、ゲームを起動したときの状態に完全にリセットします。</p> + +<ul> + <li><code>guessCount</code> に 1 を代入して元に戻します。</li> + <li>情報段落のすべてを消去します。</li> + <li>リセットボタンをページから削除します。</li> + <li>入力フォームの要素を使用可能にして、新しい予想が入力できるようにテキストフィールドを空にしてフォーカスを設定します。</li> + <li>最終結果を表示している <code>lastResult</code> 段落の背景色を消去します。</li> + <li>同じ数字以外の数字でゲームができるように、新しいランダムな数字を再度生成します。</li> +</ul> + +<p><strong>ここまでで (単純ではありますが) 動くゲームの完成です。お疲れ様でした!</strong></p> + +<p>この記事では、あと少し説明しなければならない大事な機能が残っています。既に見ているはずですが気づいたでしょうか。</p> + +<h3 id="Loops" name="Loops">ループ (繰り返し)</h3> + +<p>上のコードでもう少し詳しく説明しなければならないのは、<a href="/ja/docs/Web/JavaScript/Reference/Statements/for">for</a> ループです。ループはプログラミングにおいてとても重要な概念です。ある条件に達するまで何度も何度もコードを繰り返し実行することができます。</p> + +<p><a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザーの開発者ツールの JavaScript コンソール</a> をもう一度開いて次のコードを入力してみましょう。</p> + +<pre class="brush: js notranslate">for (let i = 1 ; i < 21 ; i++) { console.log(i) }</pre> + +<p>どうでしょうか。<samp>1</samp> から <samp>20</samp> の数字がコンソールに出力されましたね。これが繰り返しです。<code>for</code> ループには 3 つの入力値 (引数) が必要です。</p> + +<ol> + <li><strong>初期値</strong>: 上の例では、<code>i</code> を 1 からはじめましたが、どんな数字でもかまいません。さらに言えば、<code>i</code> という名前でなくともかまいません。ただし、ループでは短くて覚えやすいため、<code>i</code> という変数の名前がよく使われることを覚えておいてください。</li> + <li><strong>条件</strong>: 上の例では <code>i < 21</code> をループが継続する条件としました。つまりループは <code>i</code> が 21未満でなくなるまで継続します。<code>i</code> が 21 になったらループの実行が終了します。</li> + <li><strong>増分</strong>: 上の例では増分を <code>i++</code> と指定しています。つまり「<code>i</code> に 1 を足し」ます。ループは <code>i</code> が 21 になるまで(それは 2.の継続条件で説明しましたね) 、<code>i</code> の取りうる値について、それぞれ一度ずつ実行されます。今回の例では繰り返しのコードが実行される度に <code>i</code> の値を{{domxref("Console.log", "console.log()")}}を使用してコンソールに出力しています。</li> +</ol> + +<p>さて、それでは数字当てゲームに登場したループを見てみましょう。<code>resetGame()</code> 関数に以下の記述がありますね。</p> + +<pre class="brush: js notranslate">const resetParas = document.querySelectorAll('.resultParas p'); +for (let i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; +}</pre> + +<p>このコードは <code><div class="resultParas"></code> に含まれるすべての {{htmlelement("p")}} 要素を {{domxref("Document.querySelectorAll", "querySelectorAll()")}} というメソッドを使用して取得しています。そしてループを使用してその一つ一つの要素の中身を消去しています。</p> + +<h3 id="A_small_discussion_on_objects" name="A_small_discussion_on_objects">オブジェクトについて(簡単に)</h3> + +<p>オブジェクトについて説明する前に、プログラムに対して最後のちょっとした改良を加えてみましょう。JavaScript の書き出しの方にある <code>let resetButton;</code> のすぐ下に、以下の行を追記してファイルを保存します。</p> + +<pre class="brush: js notranslate">guessField.focus();</pre> + +<p>この行はページが読み込まれるとすぐ、 {{domxref("HTMLElement.focus", "focus()")}} メソッドを呼び出して、入力フォームの {{htmlelement("input")}} 要素に対して自動的にカーソル (フォーカス) を設定しています。つまり、ページが開いたと同時に、入力フォームを最初にクリックすることなくプレイヤーが予想を入力できるようにしているのです。本当にちょっとしたことですが、ユーザーにゲームで遊ぶためには何をすればよいかの視覚的なヒントを教えてあげることで、使い勝手が向上します。</p> + +<p>もう少し詳細に何が起こっているのか分析しましょう。JavaScript では、すべてのものはオブジェクトです。オブジェクトというのは 1 か所に関連する機能をまとめたものです。自分でオブジェクトを作ることもできますが、高度なことなので、このコースの大分後まで出てきません。今は簡単に、これを使うと多くの便利なことができるようになる、ブラウザーに含まれる組み込みオブジェクトについて説明します。</p> + +<p>この具体的なケースでは、HTML のテキスト入力フィールドを参照するために、最初に <code>guessField</code> 変数を作成しました。以下の行は最上部のあたりの変数定義で見つかります、</p> + +<pre class="brush: js notranslate">const guessField = document.querySelector('.guessField');</pre> + +<p>この参照を得るため、{{domxref("document")}} オブジェクトの{{domxref("document.querySelector", "querySelector()")}} メソッドを使用しています。<code>querySelector()</code> はある情報 (必要な要素を選択する <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS セレクタ</a>) を受け取ります。</p> + +<p><code>guessField</code> に {{htmlelement("input")}} 要素の参照が得られたので、これでたくさんのプロパティ (基本的にはオブジェクトの内部に保持されている変数のことですが、中には値を変えられないものもあります) とメソッド (基本的にはオブジェクトの内部に保持されている関数のこと) にアクセスできるようになりました。ようやく {{htmlelement("input")}} 要素のメソッドの一つである <code>focus()</code> メソッドを使ってテキストフィールドにフォーカスを当てられます。</p> + +<pre class="brush: js notranslate">guessField.focus();</pre> + +<p>入力フォームの要素の参照を含まない変数に対しては、<code>focus()</code> は使用できません。例えば、<code>guesses</code> 変数には {{htmlelement("p")}} 要素への参照が入っていますし、<code>guessCount</code> には数値が入っています。</p> + +<h3 id="Playing_with_browser_objects" name="Playing_with_browser_objects">ブラウザーのオブジェクトで遊ぼう</h3> + +<p>少しブラウザーが持っているオブジェクトで遊んでみましょう。</p> + +<ol> + <li>まずブラウザーでプログラムを開いてください</li> + <li>次に<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツール</a>を開き、JavaScript コンソールのタブが開いたのを確認します</li> + <li><code>guessField</code> と入力してみてください。するとコンソールに {{htmlelement("input")}} 要素を含む変数が表示されます。また、気づいたと思いますが、コンソールは実行中の環境にある変数名を含んだオブジェクト名を自動的に補完しました!</li> + <li>さらに下のように入力してみてください + <pre class="brush: js notranslate">guessField.value = 'Hello';</pre> + <code>value</code> プロパティは今のテキストフィールドに入力された値を表しています。コマンドを入力したら、テキストフィールドの値が変わりましたね！</li> + <li>さらに続けて <code>guesses</code> と入力して <kbd>Return</kbd>/<kbd>Enter</kbd> を押します。{{htmlelement("p")}} 要素を含む変数がコンソールに表示されますね。</li> + <li>そして次のコードを入力します + <pre class="brush: js notranslate">guesses.value</pre> + コンソールには <code>undefined</code> (未定義) という文字が返ってきましたね。<code>value</code> というプロパティは {{htmlelement("p")}} 要素にはないためです。</li> + <li>パラグラフ内のテキストを変えたい場合には、{{domxref("Node.textContent", "textContent")}} プロパティを使用する必要があります。こうしてみます + <pre class="brush: js notranslate">guesses.textContent = 'Where is my paragraph?';</pre> + </li> + <li>ちょっと遊んでみましょう。下のコードをひとつづつ入力してみてください。 + <pre class="brush: js notranslate">guesses.style.backgroundColor = 'yellow'; +guesses.style.fontSize = '200%'; +guesses.style.padding = '10px'; +guesses.style.boxShadow = '3px 3px 6px black';</pre> + ページ内に存在するすべての要素は <code>style</code> プロパティを持っていて、そのオブジェクトを介して CSS のインラインスタイルで要素に適用されるすべてのプロパティにアクセスすることができます。これを使うことで、JavaScript から動的に要素の CSS のスタイルを設定できるのです。</li> +</ol> + +<h2 id="Finished_for_now..." name="Finished_for_now...">ここで一息...</h2> + +<p>これで数字当てゲームができました。最後までついて来れましたね！作ったプログラムを動かしてみてください 。(最後のプログラムは<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">こちらでも遊べます</a>。) もし作ったプログラムが動かなければ、<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">ソースコード</a>と見比べてみてください。</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "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> diff --git a/files/ja/learn/javascript/first_steps/arrays/index.html b/files/ja/learn/javascript/first_steps/arrays/index.html new file mode 100644 index 0000000000..973a8511fa --- /dev/null +++ b/files/ja/learn/javascript/first_steps/arrays/index.html @@ -0,0 +1,568 @@ +--- +title: 配列 +slug: Learn/JavaScript/First_steps/Arrays +tags: + - CodingScripting + - JavaScript + - Join + - Pop + - Push + - 'l10n:priority' + - shift + - split + - unshift + - 初心者 + - 学習 + - 記事 + - 配列 +translation_of: Learn/JavaScript/First_steps/Arrays +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">このモジュールの最後に、配列について見ていきましょう。配列は 1 つの変数名でリスト形式のデータを保持するのに好都合です。ここでは、どう便利なのか、どのように作るのか、そして配列の項目を追加したり削除したり取得したりする方法について学びます。</p> + +<table class="learn-box standard-table"> + <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="What_is_an_array" name="What_is_an_array">配列とは何？</h2> + +<p>配列はたいてい「リストのようなオブジェクトである」と説明され、単一のオブジェクト内に複数の値をリストとして持っています。配列オブジェクトは変数に格納され、その他の型と同様に扱われます。異なるのはリスト内の値に個別にアクセスすることができ、繰り返しを用いて全ての値に同じことをするといった、リストとして便利で効率的に扱うことができます。商品とその価格の一覧を配列に保持し、その値をループして合計額を計算しつつ請求書にそれぞれの価格を表示して一番下に合計額を表示することもできるでしょう。</p> + +<p>もし配列がなかったとしたら、別々の変数にそれぞれの値を格納しなければならず、各変数を表示するのと計算するので別々に呼び出さなければならなかったでしょう。こうなると、書き出すのがとても長く、非効率的でエラーを起こしやすいプログラムとなるでしょう。例えば、10 個の項目を請求書に出すだけでも最悪ですが、それが 100 個や 1000 個だったらどうでしょう。この記事の最後に実例としてやってみましょう。</p> + +<p>前回までの記事と同様に、JavaScript コンソールに配列の基礎となるコード例を<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザーの開発者コンソール</a>に入力しながら学びましょう。</p> + +<h3 id="Creating_an_array" name="Creating_an_array">配列を作る</h3> + +<p>配列を作るには、角括弧の中にカンマで区切ったリストの形式で項目を並べます。</p> + +<ol> + <li>買い物リストを配列に保持したいとき、次のようにします。下のコードをコンソールに入力してみましょう。 + <pre class="brush: js notranslate">let shopping = ['パン', '牛乳', 'チーズ', 'ハム', '麺']; +shopping;</pre> + </li> + <li>この例では、配列の各項目は文字列ですが、配列には何でも格納することができることを頭に入れておきましょう。文字列、数値、オブジェクト、その他の変数、さらには別の配列ですら格納することができます。そして混ぜ合わせることも。すべて同じデータ型である必要はありません。 + <pre class="brush: js notranslate">let sequence = [1, 1, 2, 3, 5, 8, 13]; +let random = ['tree', 795, [0, 1, 2]];</pre> + </li> + <li>いくつか配列を作ってみましょう。それから先に進みます。</li> +</ol> + +<h3 id="Accessing_and_modifying_array_items" name="Accessing_and_modifying_array_items">配列の項目を取得し変更する</h3> + +<p>配列の各項目は<a href="/ja/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">文字列中の文字を取得したときのように</a>列で角括弧 (<code>[]</code>) を使用して取得することができます。</p> + +<ol> + <li>次のコードをコンソールに入力してください。 + <pre class="brush: js notranslate">shopping[0]; +// "パン"という値が戻ります</pre> + </li> + <li>そして、配列中の項目は単に新しい値を代入することで変更することが出来ます。 + <pre class="brush: js notranslate">shopping[0] = 'タヒーニ'; +shopping; +// ショッピングリストは[ "タヒーニ", "牛乳", "チーズ", "ハム", "麺" ]に変更されています。</pre> + + <div class="note"><strong>注</strong>: 前にも言いましたが、重要なことなのでもう一度言います。コンピューターは 0 から数を数えます！</div> + </li> + <li>配列の中に配列があるとき、その配列は多次元配列と呼ばれます。配列中の配列に含まれる項目には角括弧を繋げて書くことでアクセスすることができます。例えば、先ほどの例で出てきた <code>random</code> 変数に格納された配列の 3番目の項目のさらに 3番目の項目を取得するには以下のようにします。 + <pre class="brush: js notranslate">random[2][2];</pre> + </li> + <li>移動する前に、配列の例をいくつか変更してみてください。遊んでみて、何が動いて何がそうでないかを見てください</li> +</ol> + +<h3 id="Finding_the_length_of_an_array" name="Finding_the_length_of_an_array">配列の長さを調べる</h3> + +<p>ある配列の長さ (いくつの項目が配列中に存在するか) を知るには、文字列の (文字の) 長さを調べた時と全く同じようにします。{{jsxref("Array.prototype.length","length")}}プロパティを使用して長さを取得することができます。</p> + +<pre class="brush: js notranslate">sequence.length; +// 7 が返る</pre> + +<p>このプロパティはいろいろな使われ方をするのですが、最もよく使われるのは、配列中の全項目をループするために使用されます。次の例を見てください。</p> + +<pre class="brush: js notranslate">let sequence = [1, 1, 2, 3, 5, 8, 13]; +for (let i = 0; i < sequence.length; i++) { + console.log(sequence[i]); +}</pre> + +<p>ループについてはそのうち (<a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a> の記事で) しっかりと学ぶ機会があるでしょうが、ここで簡単に説明すると上のコードは次のように動きます。</p> + +<ol> + <li>配列中の項目 0 番よりループを開始します。</li> + <li>項目番号が配列の長さと同じ数になったら、繰り返しを終了します。これで配列中の要素がいくつであっても動くようになります。今回の場合は、項目の番号が 7 のときに終了します(ループでカバーしたい最後の項目番号は 6 なので、これで問題ありません)。</li> + <li>そして、各項目を <code><a href="/ja/docs/Web/API/Console/log">console.log()</a></code> メソッドを使用してブラウザーのコンソールに出力しています。</li> +</ol> + +<h2 id="Some_useful_array_methods" name="Some_useful_array_methods">便利な配列メソッド</h2> + +<p>このセクションでは、文字列を配列にしたり、配列を文字列にしたり、配列に項目を追加したり、ちょっと便利な配列関連のメソッドを見てみましょう。</p> + +<h3 id="Converting_between_strings_and_arrays" name="Converting_between_strings_and_arrays">文字列と配列を相互に変換する</h3> + +<p>データが長い長い文字列の中に含まれていて、それを使いやすい形に分割して操作したいときがあります。例えばデータを表形式で表示するというようなときです。それには{{jsxref("String.prototype.split()","split()")}} メソッドが使用できます。このメソッドは文字列を分割するのに使用する文字を引数として取り、文字列をその文字で区切った部分文字列の配列に分割します。</p> + +<div class="note"> +<p><strong>注</strong>: 実際のところ、これは配列ではなく文字列のメソッドです。しかし、ここで紹介するのが一番だと思い取り上げています。</p> +</div> + +<ol> + <li>それではどのように動くか試してみましょう。まずは文字列をコンソールに作ります。 + <pre class="brush: js notranslate">let myData = '札幌,仙台,東京,名古屋,大阪,博多';</pre> + </li> + <li>この文字列をカンマで区切ります。 + <pre class="brush: js notranslate">let myArray = myData.split(','); +myArray;</pre> + </li> + <li>そして、できた配列の長さを確認して、その中身を見てみましょう。 + <pre class="brush: js notranslate">myArray.length; +myArray[0]; // 配列の最初の項目 +myArray[1]; // 配列の二番目の項目 +myArray[myArray.length-1]; // 配列の最後の項目</pre> + </li> + <li>{{jsxref("Array.prototype.join()","join()")}} メソッドを使うことで、逆のことができます。 + <pre class="brush: js notranslate">let myNewString = myArray.join(','); +myNewString;</pre> + </li> + <li>配列を文字列にするもう一つの方法は、{{jsxref("Array.prototype.toString()","toString()")}} メソッドを使うことです。引数を取らない <code>toString()</code> は <code>join()</code> と比べ簡単でしょうが、制限があります。<code>join()</code> を使えば、他の区切り文字を指定することもできます (4. の例をカンマ以外の他の文字を指定して試してください)。 + <pre class="brush: js notranslate">let dogNames = ['ポチ','ハチ','タロウ','モコ']; +dogNames.toString(); //ポチ,ハチ,タロウ,モコ</pre> + </li> +</ol> + +<h3 id="Adding_and_removing_array_items" name="Adding_and_removing_array_items">項目の追加と削除</h3> + +<p>まだ配列への項目の追加と削除をやっていませんでしたね。次はこれをやりましょう。先ほどの例にあった <code>myArray</code> 配列を使用します。先ほどの例をまだ実行していなければ、以下のコードをコンソールに入力して配列を作ってください。</p> + +<pre class="brush: js notranslate">let myArray = ['札幌', '仙台', '東京', '名古屋', '大阪', '博多'];</pre> + +<p>まず、配列の最後に項目を追加したり、最後の項目を削除するには、それぞれ {{jsxref("Array.prototype.push()","push()")}} と {{jsxref("Array.prototype.pop()","pop()")}} を使います。</p> + +<ol> + <li>先に <code>push()</code> を使ってみます。配列の最後に項目を追加するには 1 つ以上の項目を引数に指定します。 + + <pre class="brush: js notranslate">myArray.push('横浜'); +myArray; +myArray.push('神戸', '広島'); +myArray; +</pre> + </li> + <li>メソッドの呼び出しが終わると、新しい配列の長さが返ります。もし新しい配列の長さを変数に格納したければ、次のようにできます。 + <pre class="brush: js notranslate">let newLength = myArray.push('京都'); +myArray; +newLength;</pre> + </li> + <li>配列の最後の要素を削除するには <code>pop()</code> を呼び出すだけです。 + <pre class="brush: js notranslate">myArray.pop();</pre> + </li> + <li>メソッドの呼び出しが終わると、削除された項目それ自体が返ります。 + <pre class="brush: js notranslate">let removedItem = myArray.pop(); +myArray; +removedItem;</pre> + </li> +</ol> + +<p>{{jsxref("Array.prototype.unshift()","unshift()")}} と {{jsxref("Array.prototype.shift()","shift()")}} はそれぞれ <code>push()</code> や <code>pop()</code> と同様の動作ですが、配列の末尾ではなく先頭において動作します。</p> + +<ol> + <li>まずは、<code>unshift()</code> を次のように実行します。 + + <pre class="brush: js notranslate">myArray.unshift('奈良'); +myArray;</pre> + </li> + <li>今度は <code>shift()</code> でやってみましょう！ + <pre class="brush: js notranslate">let removedItem = myArray.shift(); +myArray; +removedItem;</pre> + </li> +</ol> + +<h2 id="アクティブラーニング_商品を印字しよう！">アクティブラーニング: 商品を印字しよう！</h2> + +<p>商品の名前と価格、合計金額を請求書に印字するという最初の話に戻りましょう。以下に示す編集可能なコードのコメントの中に数字が書かれています。この数字はコードを書くべき場所を示しています。各数字の場所に次のようなコードを書いてください。</p> + +<ol> + <li><code>// No.1</code> というコメントの下に、商品の名前と価格をコロン (:) で繋げた、いくつか文字列が並んでいます。これを <code>products</code> という名前の配列にしてください。</li> + <li><code>// No.2</code> というコメントの行から for ループが始まっています。この行には <code>i <= 0</code> と書かれています。「<code>i</code> の値が 0 以下でなくなれば終了」と書かれており、<code>i</code> は 0 から始まるので、この <a href="/ja/Learn/JavaScript/First_steps/A_first_splash#Loops">for ループ</a>は一度しか実行されません。この条件を <code>i</code> が <code>products</code> 配列の長さより小さくなくなった場合に終了するような条件に置き換えて下さい。</li> + <li><code>// No.3</code> のコメントの直下に 1 行で、現在の配列の項目 (<code>name:price</code>) を 2 つに分割するコードを書いてください。一方は商品の名前、もう一方は価格です。もしどうすればいいのかわからなければ、<a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列のメソッド</a>の記事を参照してください。さらに{{anch("Converting between strings and arrays","文字列と配列を相互に変換する")}}も役に立つでしょう。</li> + <li>上記のコードの一部として、価格を文字列から数値に変換する必要もあるでしょう。どのようにすべきか思い出せなければ、<a href="/ja/Learn/JavaScript/First_steps/Strings#Numbers_vs._strings">文字列の最初の記事</a>を確認してみましょう。</li> + <li>コードの先頭に <code>total</code> という名前の変数が宣言されて、0 で初期化されています。ループの中で (<code>// No.4</code><em> の</em>下) 繰り返している現在の項目の価格を <code>total</code> 変数に加算するコードを一行で書いてください。そうすれば、コードの最後で正しい合計が請求書に印字されます。恐らく<a href="/ja/Learn/JavaScript/First_steps/Math#Assignment_operators">代入演算子</a>が役に立つでしょう。</li> + <li><code>// No.5</code> のコメントの直下のコードを <code>itemText</code> 変数が「現在の項目の商品名 — $現在の項目の価格」となるように変更してください。「靴 — $23.99」という感じです。そうすれば正しい情報が請求書に印字されます。これはもう慣れたはずの単純な文字列結合で実現できます。</li> +</ol> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> + +<div class="output" style="min-height: 150px;"> + +<ul> + +</ul> + +<p></p> + +</div> + +<h2>コードエディター</h2> + +<p class="a11y-label">コードエディターから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + +<textarea id="code" class="playable-code" style="height: 410px;width: 95%"> +const list = document.querySelector('.output ul'); +const totalBox = document.querySelector('.output p'); +let total = 0; +list.innerHTML = ''; +totalBox.textContent = ''; +// No.1 + 'パンツ:6.99' + '靴下:5.99' + 'T シャツ:14.99' + 'ズボン:31.99' + '靴:23.99'; + +for (let i = 0; i <= 0; i++) { // No.2 + // No.3 + + // No.4 + + // No.5 + let itemText = 0; + + const listItem = document.createElement('li'); + listItem.textContent = itemText; + list.appendChild(listItem); +} + +totalBox.textContent = '合計: $' + total.toFixed(2); +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div> +</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === '答えを見る') { + textarea.value = solutionEntry; + solution.value = '答えを隠す'; + } else { + textarea.value = userEntry; + solution.value = '答えを見る'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');\nconst totalBox = document.querySelector(\'.output p\');\nlet total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nlet products = [\'パンツ:6.99\',\n \'靴下:5.99\',\n \'T シャツ:14.99\',\n \'ズボン:31.99\',\n \'靴:23.99\'];\n\nfor(let i = 0; i < products.length; i++) {\n let subArray = products[i].split(\':\');\n let name = subArray[0];\n let price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n let listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'合計: $\' + total.toFixed(2);'; +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// タブキーでテキストエリアから抜けてしまうのを防ぎ、 +// 代わりにカーソル位置にタブ文字を挿入する + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する + +textarea.onkeyup = function(){ + // ユーザーのコードが表示されているときのみ状態を保存し、 + // 答えのコードでユーザーコードが上書きされないようにする + if(solution.value === '答えを見る') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background-color: #f5f9fa; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', '100%', 730, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Active_learning_Top_5_searches" name="Active_learning_Top_5_searches">アクティブラーニング: 上位5件の検索</h2> + +<p>{{jsxref("Array.prototype.push()","push()")}} や{{jsxref("Array.prototype.pop()","pop()")}} といったメソッドを使用するよい例は、ウェブアプリでデータの中で有効な項目だけを抜き出して維持したいときなどです。例えば、アニメーションのあるシーンで、現在表示中の背景イメージを保持している配列があり、一度に表示するイメージをパフォーマンスなどの理由で 50 に制限したいとします。その際、新しいオブジェクトを配列に追加したと同時に、古いオブジェクトを削除して配列を希望のサイズに維持します。</p> + +<p>次の例では、もう少し単純に、検索ボックスのある、ダミーの検索サイトを用意しました。検索ボックスに文字が入力されたら、直前 5 つの検索語がリストに表示されます。検索された語が 5 を超えたら最後の検索語が削除されるようになります。新しい検索語が先頭に追加されるので、常に 5 つの検索語が表示されます。</p> + +<div class="note"> +<p><strong>注</strong>: 本当の検索アプリでは、前回の検索語をクリックすることでその検索に戻れて、実際に検索結果が表示されることでしょう！ただし、今は単純にしておきましょう。</p> +</div> + +<p>アプリを完成させるには...</p> + +<ol> + <li><code>// No.1</code> コメントの下に、検索ボックスに入力された検索語を配列の先頭に追加するコードを書いてください。検索語は <code>searchInput.value</code> と書いて取得します。</li> + <li><code>// No.2</code> コメントの下に、配列の最後の項目を削除するコードを書いてください。</li> +</ol> + +<div class="hidden"> +<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> +<div class="output" style="min-height: 150px;"> + +<input type="text"><button>検索</button> + +<ul> + +</ul> + +</div> + +<h2>コードエディター</h2> + +<p class="a11y-label">コードエディターから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + + +<textarea id="code" class="playable-code" style="height: 370px; width: 95%"> +const list = document.querySelector('.output ul'); +const searchInput = document.querySelector('.output input'); +const searchBtn = document.querySelector('.output button'); + +list.innerHTML = ''; + +let myHistory = []; + +searchBtn.onclick = function() { + // 検索ボックスが空ではない場合のみ検索語を受け付けるようにします + if (searchInput.value !== '') { + // No.1 + + // 表示中の一覧を空にして、同じ項目が表示されないようにして、 + // 結果は検索語が入力される度に毎回作り直されます。 + list.innerHTML = ''; + + // 配列をループして、リスト内の全ての検索語を表示します + for (let i = 0; i < myHistory.length; i++) { + itemText = myHistory[i]; + const listItem = document.createElement('li'); + listItem.textContent = itemText; + list.appendChild(listItem); + } + + // 配列の長さが 5以上になったら一番古い検索語を削除します + if (myHistory.length >= 5) { + // No.2 + + } + + // 次の検索語を受け付けるため、検索ボックスを空にしてフォーカスします + searchInput.value = ''; + searchInput.focus(); + } +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === '答えを見る') { + textarea.value = solutionEntry; + solution.value = '答えを隠す'; + } else { + textarea.value = userEntry; + solution.value = '答えを見る'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');\nconst searchInput = document.querySelector(\'.output input\');\nconst searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nlet myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(let i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n const listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}'; +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// タブキーでテキストエリアから抜けてしまうのを防ぎ、 +// 代わりにカーソル位置にタブ文字を挿入する + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する + +textarea.onkeyup = function(){ + // ユーザーのコードが表示されているときのみ状態を保存し、 + // 答えのコードでユーザーコードが上書きされないようにする + if(solution.value === '答えを見る') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', '100%', 700, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を維持しているか検証するテストを見ることができます — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays">Test your skills: Arrays</a> を見てください。</p> + +<h2 id="Conclusion" name="Conclusion">結論</h2> + +<p>この記事を読んで、配列がとても使えるものであることがお分かりいただけたのではないでしょうか。配列は JavaScript の至るところで見かけます。特に配列の各項目に対して同じことをする際にループと一緒に使われます。便利なループの基本については次のモジュールで教えますが、今は自分自身を褒めて、十分に休みましょう！このモジュールのすべての記事をやり終えました！</p> + +<p>ただし、次のモジュールの前に、理解度を確認するため、このモジュールの課題をやりましょう。残っているのはそれだけです。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Guide/Indexed_collections">インデックス付きコレクション</a> — 配列とそのいとこにあたる型付き配列についての高度なガイドです。</li> + <li>{{jsxref("Array")}} — <code>Array</code> オブジェクトのリファレンスページです。詳細なガイドと機能については、このリファレンスページで紹介されています。</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> +</ul> diff --git a/files/ja/learn/javascript/first_steps/index.html b/files/ja/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..13cb953a6c --- /dev/null +++ b/files/ja/learn/javascript/first_steps/index.html @@ -0,0 +1,84 @@ +--- +title: JavaScript の第一歩 +slug: Learn/JavaScript/First_steps +tags: + - Arrays + - Article + - Assessment + - Beginner + - CodingScripting + - Guide + - JavaScript + - Landing + - Module + - Numbers + - Operators + - Variables + - 'l10n:priority' + - maths + - strings +translation_of: Learn/JavaScript/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">最初の JavaScript のモジュールでは、初めて JavaScript を書く実践的な経験を体験する前に、「JavaScript とは何？」や「どのようなもの？」や「何ができる？」といったような基本的な質問に答えます。その後変数や文字列、 数値、配列といったような言語の内容をお話します。</p> + +<div class="in-page-callout webdev"> +<h3 id="フロントエンドのWeb開発者になりたいですか？">フロントエンドのWeb開発者になりたいですか？</h3> + +<p>私たちはあなたがあなたの目標に向かって取り組むために必要なすべての重要な情報を含むコースをまとめました。</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">始めましょう</a></p> +</div> + +<h2 id="Prerequisites" name="Prerequisites">前提条件</h2> + +<p>このモジュールを始めるには JavaScript の知識は必要ありませんが、HTML や CSS に少し慣れている必要があります。JavaScript の学習を開始する前に以下のモジュールを学習することをお勧めします :</p> + +<ul> + <li><a href="/ja/docs/Learn/Getting_started_with_the_web">Web 入門</a> (<a href="/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の入門</a> を含む)</li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a></li> +</ul> + +<div class="note"> +<p><strong>注記</strong> : もしあなたが作業しているコンピューター・タブレットやその他のデバイスで自分でファイルを作れない場合は、<a href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> といったようなオンラインコーディングプログラムで (ほとんどの場合) 試すことができます。</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<dl> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何？</a></dt> + <dd>MDN の初心者向け JavaScript コースへようこそ！<span>この最初の記事では JavaScript を高い視点から見ていき、「それは何ですか？」「それで何ができますか？」などの質問に答え、JavaScript の目的があなたに受け入れられるものであるかを確認します。</span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">最初のダイブ</a></dt> + <dd><span id="result_box" lang="ja"><span>JavaScript の理論についていくつか学びましたが、それで何ができるのでしょう？完全に実践的なチュートリアルを通して、JavaScript の基本機能の短期集中コースを提供します。</span> <span>ここでは、簡単な数字当てゲームを段階的に作っていきます。</span></span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている？JavaScript のトラブルシューティング</a></dt> + <dd>前の記事で数字当てゲームを構築した時に、うまく動かなかったかもしれません。心配しないでください —この記事は、JavaScript のプログラムにエラーを見つけて修正するシンプルな方法を提供することで、こうした大変な事態からあなたを手助けすることを目的としています。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></dt> + <dd>前の 2 つの記事を読んで、JavaScript が何であるか、あなたのために何ができるか、他のウェブテクノロジーと一緒に使う方法、そして高い視点から見た主な機能を知ったことでしょう。この記事では実際の基礎に着目し、JavaScript の最も基本的な構成要素を扱う方法を見ていきます ― それが変数です。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript の簡単な数学 — 数値と算術演算子</a></dt> + <dd>ここで、JavaScript における数学について論じます。指示に従ってうまく数値を操作するために、演算子やその他の機能を組み合わる方法を説明します。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></dt> + <dd>次に、文字列に注目します ― プログラミングではテキストのことをこう呼びます。この記事では、文字列の作成、文字列の引用符のエスケープ、およびそれらの結合など、JavaScript を学習するにあたって本当に知っておくべき、文字列についてのすべての一般的な事柄を見ていきます。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></dt> + <dd>文字列の基本について見てきましたが、文字列の長さの取得、文字列の結合と分割、文字列内の文字の置換、その他の文字列の置換など、組込みメソッドを使用して文字列に対して実行できる便利な操作について考えてみましょう。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></dt> + <dd>このモジュールの最後の記事では、配列を見ていきます — 単一の変数名の下に複数のデータ項目のリストを保存するのに適した方法です。ここでは、なぜこれが便利なのかを確認してから、配列の作成方法、配列に格納された項目の取り出し、追加、削除などの方法を学びます。</dd> +</dl> + +<h2 id="Assessments" name="Assessments">課題</h2> + +<p>以下の成績評価では、上のガイドで取り上げた JavaScript の基礎についての理解をテストします。</p> + +<dl> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">バカ話ジェネレーター</a></dt> + <dd>この課題では、このモジュールの記事で取り上げた知識の一部を用いて、ランダムなバカ話を生成する愉快なアプリの作成に適用することを求められます。楽しんで取り組みましょう！</dd> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<dl> + <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt> + <dd>短いレッスンとインタラクティブなテストを使用して、自動化された評価に基づいた、インタラクティブな環境でJavaScriptを学びます。<br> + 最初の40レッスンは無料で、コース全体を少額の1回払いで利用できます。</dd> +</dl> diff --git a/files/ja/learn/javascript/first_steps/math/index.html b/files/ja/learn/javascript/first_steps/math/index.html new file mode 100644 index 0000000000..bbdb6550b7 --- /dev/null +++ b/files/ja/learn/javascript/first_steps/math/index.html @@ -0,0 +1,469 @@ +--- +title: JavaScriptでの基本演算 — 数値と演算子 +slug: Learn/JavaScript/First_steps/Math +tags: + - Article + - Beginner + - CodingScripting + - Guide + - JavaScript + - Learn + - Math + - Operators + - augmented + - increment + - 'l10n:priority' + - maths + - modulo +translation_of: Learn/JavaScript/First_steps/Math +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">今回は JavaScript での数学的処理についてです。我々の命令を実行するために上手く数値を操作するのにどのように {{Glossary("Operator","演算子")}} や、その他の機能を使用できるのかを見ていきましょう。</p> + +<table class="learn-box standard-table"> + <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="Everybody_loves_math" name="Everybody_loves_math">みんな数学が大好き</h2> + +<p>まあ、みんなではないですね。好きな人もいれば、九九や長い数字の割り算が出てきてから嫌いになってしまった人もいるでしょう。どちらでもない人も。けれど、数学が生活に必要なものであるということは、否定することは出来ません。特に JavaScript のプログラミングを学習しているのなら、なおさらです。数値データを処理したり、計算をしたりすることが多いので、JavaScript に数学的な関数が十分にそろっていることは、驚くことではありません。</p> + +<p>この記事ではまず知っておくべき基礎的なものに絞って見ていきます。</p> + +<h3 id="Types_of_numbers" name="Types_of_numbers">数値の種類</h3> + +<p>プログラミングをしていると、慣れ親しんだ普通の数値ですら難しいと思えるかもしれません。数値と言ってもいくつか種類があり、それぞれ名前を付けて区別しています。</p> + +<ul> + <li><strong>整数</strong> ( integer ) とは 10、400、-5 といった数値のことです。</li> + <li><strong>浮動小数点数 </strong>( float ) とは小数以下の数と小数桁を持つ 12.5 や 56.7786543 といった数値のことです。</li> + <li><strong>倍精度浮動小数点数 </strong>( double ) は浮動小数点数の特殊な型であり、通常の浮動小数点数よりも大きな精度を持ちます (つまりより大きい桁数まで精度を保つことを意味します)。</li> +</ul> + +<p>さらに通常とは異なる数値表現も使います！今まで出てきた数値は 10 を基数 (0 ～ 9 を 1 つの桁として扱う) とした十進数でしたが、他にも以下のようなものがあります。</p> + +<ul> + <li><strong>二進数</strong> — 0 と 1 だけで表現される、コンピューターの最も低レベルな言語です。</li> + <li><strong>八進数</strong> — 8 を基数として、1 桁を 0 ～ 7 で表します。</li> + <li><strong>十六進数</strong> — 16 を基数として、1 桁を 0 ～ 9、a ～ f で表します。もしかしたら <a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">CSS の色</a>を設定するときに見たかもしれませんね。</li> +</ul> + +<p><strong>脳みそが溶けそうだと思う前に、少し待ってください！</strong>まず、この講座では十進数しか扱いません。それに「もしかすれば」ですが、他の数値表現について考える機会は訪れないということだってあり得ます。</p> + +<p>さらにちょっといいことを教えましょう。いくつかの他のプログラミング言語とは違い、JavaScript には数値(整数と少数の両方)を表すデータ型が一つしかありません。わかりますか？{{jsxref("Number","Number (数値)")}} で、これは整数と小数の両方です。これはJavaScript でどんな型の数値を扱おうとも、それらを全く同じように扱うことが可能だということを意味します。</p> + +<div class="blockIndicator note"> +<p><strong>記</strong>: 実際に、JavaScript には 2 つ目の数値型である{{Glossary("BigInt")}} があり、これはとても大きな整数に使います。しかしこのコースの目的としては、<code>Number</code> の値だけに関心を持つことにします。</p> +</div> + +<h3 id="Its_all_numbers_to_me" name="It's_all_numbers_to_me">すべてが「Number」に見えるよね</h3> + +<p>書き方の復習を兼ねてちょっと数字で遊んでみましょう。以下に示すコマンドを<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツールの JavaScript コンソール</a>入力してみましょう。もちろんこのページに埋め込みのコンソールを使っても構いません。</p> + +<ol> + <li>まず、変数を 2 つ宣言して、それぞれ整数と浮動小数点数で初期化してみましょう。そして、変数の名前を入力して、期待通りに値が入っていることを確認してみましょう。 + <pre class="brush: js notranslate">var myInt = 5; +var myFloat = 6.667; +myInt; +myFloat;</pre> + </li> + <li>数値にはクォーテーションマークが不要です。次に進む前にもう少し変数の宣言と初期化をしてみてください。</li> + <li>さて、それでは上で入力した 2 つの変数が同じデータ型であるか確認してみましょう。JavaScript では、{{jsxref("Operators/typeof", "typeof")}} という演算子を使用することで、データ型を確認することができます。次の 2 行を入力してみましょう。 + <pre class="brush: js notranslate">typeof myInt; +typeof myFloat;</pre> + どちらの変数についても <code>"number"</code> という文字が戻ってきましたね。もし、別々の数値型が存在しているとすれば、別々に処理しなければならないので、そう考えるととても簡単に思えますよね！</li> +</ol> + +<h3 id="便利な_Number_メソッド">便利な Number メソッド</h3> + +<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> オブジェクトは、あなたが JavaScript を使う時すべての基本的な数値を表現するインスタンスですが、その中には、数値を操作するための沢山の便利なメソッドがあります。この記事では、簡単な紹介と基本的な要点だけまとめたいので、詳しくは割愛しますが、この段落を何回か読んだら、オブジェクト参照ページに行って、どんなメソッドが使えるのかを勉強するのが良いと思います。</p> + +<p>例えば、数値を固定の桁数に丸めるには <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed">toFixed()</a></code> メソッドを使用します。ブラウザの<a href="/ja/docs/Tools/Web_Console">コンソール</a>に次の行を入力します。</p> + +<pre class="brush: js notranslate">let lotsOfDecimal = 1.766584958675746364; +lotsOfDecimal; +let twoDecimalPlaces = lotsOfDecimal.toFixed(2); +twoDecimalPlaces;</pre> + +<h3 id="数値データ型への変換">数値データ型への変換</h3> + +<p>たまに、文字列型として格納されている数字で計算ができなくなってしまうことがあります。これは、データが<a href="/ja/docs/Learn/Forms">フォーム</a>入力に入力され、<a href="/ja/docs/Web/HTML/Element/input/text">input タイプが text</a> である場合によく起こります。この問題を解決する方法があります - 文字列の値を <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/Number">Number()</a></code> コンストラクタに渡して、同じ値の数値バージョンを返します。</p> + +<p>例えば、これらの命令をコンソールに入力してみてください。</p> + +<pre class="brush: js notranslate">let myNumber = '74'; +myNumber + 3;</pre> + +<p>答えは 743 です。77 ではありません。 なぜなら <code>myNumber</code> は string として定義されているからです。以下の命令で確認することができます。</p> + +<pre class="brush: js notranslate">typeof myNumber;</pre> + +<p>これは以下のようにして修正することができます。</p> + +<pre class="brush: js notranslate">Number(myNumber) + 3;</pre> + +<h2 id="Arithmetic_operators" name="Arithmetic_operators">算術演算子</h2> + +<p>算術演算子は JavaScript で計算をするのに使用する最も基本的な演算子です。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">演算子</th> + <th scope="col">名前</th> + <th scope="col">目的</th> + <th scope="col">例</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+</code></td> + <td>加算</td> + <td>左項と右項を足す。</td> + <td><code>6 + 9</code></td> + </tr> + <tr> + <td><code>-</code></td> + <td>減算</td> + <td>左項より右項の数を引く。</td> + <td><code>20 - 15</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>乗算</td> + <td>左項と右項を掛ける。</td> + <td><code>3 * 7</code></td> + </tr> + <tr> + <td><code>/</code></td> + <td>除算</td> + <td>左項の数値を右項で割る。</td> + <td><code>10 / 5</code></td> + </tr> + <tr> + <td><code>%</code></td> + <td>剰余 (モジューロともいう) </td> + <td> + <p>左項を右項で割った余りを求める。</p> + </td> + <td><code>8% 3</code> (8 を 3 で割ったとき、商 2 余り 2 の ２ ですね)</td> + </tr> + <tr> + <td><code>**</code></td> + <td>指数</td> + <td> + <p><code>基数</code>を<code>指数</code>の累乗にします。つまり、<code>指数</code>の回数だけ<code>基数</code>の数自身を乗算します。EcmaScript 2016 で最初に導入されました。</p> + </td> + <td><code>5 ** 2</code> ( <code>25</code> を返します。その値は <code>5 * 5</code> と同じですね)</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>メモ</strong>: 演算子 (オペレーター) に必要とされる数のことを{{Glossary("Operand", "オペランド")}}と呼ぶことがあります。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: 指数が古い {{jsxref("Math.pow()")}} メソッドを使って表現されているのを見ることがあるかもしれませんが、それはとてもよく似た働きをします。たとえば、<code>Math.pow(7, 3)</code>では、<code>7</code> が基底で <code>3</code> が指数であるため、式の結果は <code>343</code> になります。<code>Math.pow(7, 3)</code> は <code>7**3</code> と同じです。</p> +</div> + +<p>たぶん基本的な数学を教える必要はないでしょうが、ここに出てくる文法を理解しているかをテストしたいと思います。書き方を覚えるため、以下に示す例を<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツールの JavaScript コンソール</a>に入力してみましょう。</p> + +<ol> + <li>まずは次のような簡単な例を自分で試してみてください。 + <pre class="brush: js notranslate">10 + 7 +9 * 8 +60 % 3</pre> + </li> + <li>そして、変数を宣言して初期化し、数を変数に格納します。それから変数を使って計算してみましょう。変数は計算するにあたり、保持している値がそこにあるかのように使えます。例えば次の通り。 + <pre class="brush: js notranslate">let num1 = 10; +let num2 = 50; +9 * num1; +num1 ** 3; +num2 / num1;</pre> + </li> + <li>それではさらに難しい計算式を入力してみましょう。 + <pre class="brush: js notranslate">5 + 10 * 3; +num2 % 9 * num1; +num2 + num1 / 8 + 2;</pre> + </li> +</ol> + +<p>最後の例の中に予想した結果と違う答えがありませんでしたか。次の章でなぜそうなったかを説明してみましょう。</p> + +<h3 id="Operator_precedence" name="Operator_precedence">演算子の優先順位</h3> + +<p>先ほどの計算式の一番最後の例を見てみましょう。<code>num2</code> に 50、<code>num1</code> に 10 が格納されているものとします。(最初はそうでしたよね。)</p> + +<pre class="brush: js notranslate">num2 + num1 / 8 + 2;</pre> + +<p>ある人は、先に「50 + 10 = 60」と「8 + 2 = 10」を先に計算して、その後で「60 ÷ 10 = 6」となるように計算するかもしれません。</p> + +<p>けれどもブラウザは「10 ÷ 8 = 1.25」を先に計算してから「50 + 1.25 + 2 = 53.25」を計算します。</p> + +<p>どうしてこうなるのかといえば、<strong>演算子には優先順位がある</strong>からです。ある演算子は (プログラムの<em>式</em>によっては) 他の演算子よりも先に実行されます。JavaScript の演算子の優先順位は算数の授業で教わったものと同じです。つまり、乗算と除算は常に最初に行われ、それから加算と減算が実行されます(通常の計算は常に左から右に評価されます)。</p> + +<p>もし、演算子の優先順位を変更したいならば、先に実行したい部分を括弧 (<code>()</code>) を使って囲みます。もし先ほどの例で 6 が答えになるようにしたいなら次のようにします。</p> + +<pre class="brush: js notranslate">(num2 + num1) / (8 + 2);</pre> + +<p>実際に実行し、結果を見てみてください。</p> + +<div class="note"> +<p><strong>メモ</strong>: JavaScript の演算子とその優先順位については<a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">式と演算子</a>で確認することができます。</p> +</div> + +<h2 id="Increment_and_decrement_operators" name="Increment_and_decrement_operators">インクリメント演算子とデクリメント演算子</h2> + +<p>たまに、繰り返し値を足したり引いたりしたいときがあるでしょう。そんなときに便利なのがインクリメント演算子 (<code>++</code>) とデクリメント演算子 (<code>--</code>) です。もう既に、<a href="/ja/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">JavaScript への最初のダイブ</a>に出てくる「数字当てゲーム」で、ユーザーの残り予想回数を求めるために使用する <code>guessCount</code> 変数に 1 を加えるのに <code>++</code> を使用しましたね。</p> + +<pre class="brush: js notranslate">guessCount++;</pre> + +<div class="note"> +<p><strong>メモ</strong>: これらの演算子は、このコースの後で学ぶ<a href="/ja/docs/Web/JavaScript/Guide/Loops_and_iteration">繰り返し</a>処理でよく使われます。例えば、価格の一覧があって、それに対して掛かる税金を各要素に足していきたいとします。恐らく繰り返し処理を使用して、それぞれの価格に対して必要な計算をすることになるでしょう。そのときに、次の値に移動するためインクリメント演算子を使用します。どのように行うかを説明する簡単な例をご用意しました。— インクリメント演算子に興味を持ったら<a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html">ライブで実行</a>、および<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/maths/loop.html">ソースコードの閲覧</a>をしてみてください。繰り返しについては、このコースの後で詳細を見てみます。</p> +</div> + +<p>それでは、コンソールで試してみましょう。ただし、その前に注意点です。この演算子は数値には直接使用できません。変に思えるかもしれませんが、これは対象の値そのものに作用するわけではなく、変数に対して新しい値を代入するのです。次の例はエラーになります。</p> + +<pre class="brush: js notranslate">3++;</pre> + +<p>既に存在する値に対してのみインクリメントすることができます。</p> + +<pre class="brush: js notranslate">let num1 = 4; +num1++;</pre> + +<p>また変なことが起きましたね！上のコードを実行したとき「4」がコンソールに表示されました。これはブラウザが現在の値を先に返して、その後にインクリメントを実行したためです。もう一度変数を入力してみると、変数がインクリメントされていることがわかります。</p> + +<pre class="brush: js notranslate">num1;</pre> + +<p>それは <code>--</code> 演算子についても同様です。以下のコードも試してみてください。</p> + +<pre class="brush: js notranslate">var num2 = 6; +num2--; +num2;</pre> + +<div class="note"> +<p><strong>メモ</strong>: 変数の前に演算子を置くことで、ブラウザにインクリメントまたはデクリメントを先にさせてから値を戻すようにすることもできます。上記の例に戻って今度は <code>++num1</code> や <code>--num2</code> のように入力してみてください。</p> +</div> + +<h2 id="Assignment_operators" name="Assignment_operators">代入演算子</h2> + +<p>代入演算子は変数に値を代入します。すでに一番基本的な <code>=</code> 演算子を何度も使用しています。この演算子は単に左辺に記述された値を右辺に代入します。</p> + +<pre class="brush: js notranslate">let x = 3; // x には 3 が入る +let y = 4; // y には 4 が入る +x = y; // x には y と同じ値:4 が入る</pre> + +<p>ただし、コードを簡潔に効率よく書くための、もっと複雑な方法が用意されています。よく見かけるものを以下に示します。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">演算子</th> + <th scope="col">名前</th> + <th scope="col">目的</th> + <th scope="col">例</th> + <th scope="col">同様のコード</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+=</code></td> + <td>加算代入</td> + <td>右辺の値を左辺の変数値に加算してから、新しい値を返します</td> + <td style="white-space: nowrap;"><code>x += 4;</code></td> + <td style="white-space: nowrap;"><code>x = x + 4;</code></td> + </tr> + <tr> + <td><code>-=</code></td> + <td>減算代入</td> + <td>右辺の値を左辺の変数値より減算してから、新しい値を返します</td> + <td style="white-space: nowrap;"><code>x -= 3;</code></td> + <td style="white-space: nowrap;"><code>x = x - 3;</code></td> + </tr> + <tr> + <td><code>*=</code></td> + <td>乗算代入</td> + <td>左辺の変数値に右辺の値を乗算してから、新しい値を返します</td> + <td style="white-space: nowrap;"><code>x *= 3;</code></td> + <td style="white-space: nowrap;"><code>x = x * 3;</code></td> + </tr> + <tr> + <td><code>/=</code></td> + <td>除算代入</td> + <td>左辺の変数値を右辺の値で除算してから、新しい値を返します</td> + <td style="white-space: nowrap;"><code>x /= 5;</code></td> + <td style="white-space: nowrap;"><code>x = x / 5;</code></td> + </tr> + </tbody> +</table> + +<p>どのように動いているか理解するため、コンソールに上記の例をいくつか入力してみましょう。どの例も、2 行目を入力する前にコードがどのようになるかを予想してから入力しましょう。</p> + +<p>ちなみに、どの演算子も右辺には自由に変数を置くことができます。例えば以下のように。</p> + +<pre class="brush: js notranslate">let x = 3; // x には 3 が入る +let y = 4; // y には 4 が入る +x *= y; // x は 12 になる</pre> + +<div class="note"> +<p><strong>メモ</strong>: もっとたくさんの<a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">代入演算子があります</a>が、とりあえず今は基本的なものだけ知っておけばよいでしょう。</p> +</div> + +<h2 id="Active_learning_sizing_a_canvas_box" name="Active_learning_sizing_a_canvas_box">アクティブラーニング: Canvas のボックスのサイズを変更する</h2> + +<p>練習として、数値と演算子を使用してボックスのサイズを変更してみましょう。ブラウザの {{domxref("Canvas API", "", "", "true")}} を使用してボックスを描きます。どうやって描くかについて気にする必要はありません。今は計算に集中しましょう。ボックスの幅と高さ (ピクセル単位で) 変数 <code>x</code> と <code>y</code> で宣言しています。最初は 50 になっています。</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 620)}}</p> + +<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">新しいウィンドウで開く</a></strong></p> + +<p>上の編集可能なコードには、変更すべき 2 つの行にコメントが書かれています。その行を適切な演算子および値を用いて変更し、拡大縮小させてください。それではやってみましょう。</p> + +<ul> + <li>ボックスの幅を 50px としたまま x の値を求める行を変更してください。ただし、50 を 43 と 7、算術演算子を一つ使って演算によって求めてください。</li> + <li>ボックスの高さを 75px になるよう y の値を求める行を変更してください。ただし、75 を 25 と 3、算術演算子を一つ使用して演算によって求めてください。</li> + <li>ボックスの幅を 250px になるように x の値を求める行を変更してください。ただし、250 は 2 つの数値と、剰余演算子を使用して演算によって求めてください。</li> + <li>ボックスの高さを 150px になるように y の値を求める行を変更してください。ただし 150 は 3 つの数値と減算演算子および除算演算子を使用して演算によって求めてください。</li> + <li>ボックスの幅が 200px になるように x の値を求める行を変更してください。ただし 200 は 4 と代入演算子を一つ使用して演算によって求めてください。</li> + <li>ボックスの高さが 200px になるように y の値を求める行を変更してください。ただし 200 は 50 と 3 と乗算演算子、加算演算子を使用して求めてください。</li> +</ul> + +<p>コードを完全に壊してしまっても大丈夫です。いつでもリセットボタンを押すことで何度でも最初から実行できます。上の問題に全問正解したら、もう少し遊んでみてもいいですし、自分で問題を作ってみてもいいですね。</p> + +<h2 id="Comparison_operators" name="Comparison_operators">比較演算子</h2> + +<p>ときには、true または false を判定し、その結果により動作を変更したいと思う時があるでしょう。そのようなことをするために<strong>比較演算子</strong>を使用します。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">演算子</th> + <th scope="col">名前</th> + <th scope="col">目的</th> + <th scope="col">例</th> + </tr> + <tr> + <td><code>===</code></td> + <td>厳密な等価</td> + <td>右辺と左辺が厳密に同一の値であるかを判定します</td> + <td><code>5 === 2 + 4</code></td> + </tr> + <tr> + <td><code>!==</code></td> + <td>厳密な不等</td> + <td>右辺と左辺が厳密に同一の値<strong>ではない</strong>ことを判定します</td> + <td><code>5 !== 2 + 3</code></td> + </tr> + <tr> + <td><code><</code></td> + <td>小なり</td> + <td>左辺の値が右辺の値より小さいこととを判定します</td> + <td><code>10 < 6</code></td> + </tr> + <tr> + <td><code>></code></td> + <td>大なり</td> + <td>左辺の値が右辺の値より大きいことを判定します</td> + <td><code>10 > 20</code></td> + </tr> + <tr> + <td><code><=</code></td> + <td>以下なり</td> + <td>左辺の値が右辺の値以下であることを判定します</td> + <td><code>3 <= 2</code></td> + </tr> + <tr> + <td><code>>=</code></td> + <td>以上なり</td> + <td>左辺の値が右辺の値以上であることを判定します</td> + <td><code>5 >= 4</code></td> + </tr> + </thead> +</table> + +<div class="note"> +<p><strong>メモ</strong>: もしかしたら <code>==</code> や <code>!=</code> といった演算子を同値かどうかの判定に使用する人を見かけることがあるかもしれません。これらも JavaScript の有効な演算子ですが、<code>===</code> や <code>!==</code> とは異なります。前者のバージョンは値が同様であるかを判定しますが、データ型が同様かは判定しません。後者は厳格なバージョンで値とデータ型の両方を判定します。厳格なバージョンはエラーとなることが少ないため後者を使用することをお勧めします。</p> +</div> + +<p>もし、これらの値をコンソールに入力したら、すべて <code>true<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> または </span></font></code><code>false</code> の値を返します。これは前回の記事で言及した、真偽値です。真偽値はとても便利です。コードで判断をすることを可能にしてくれます。また選択肢を選ぶときには毎回使うことになるでしょう。例えば以下のような場合に。</p> + +<ul> + <li>機能が使用可能かどうかに応じてボタンに表示するテキストを変更する</li> + <li>負けた時にゲームオーバー、勝った時に勝利のメッセージを表示する</li> + <li>時候のあいさつを時期に応じて表示する</li> + <li>選択されたズームレベルに応じて地図を拡大する</li> +</ul> + +<p>後の記事にて、条件文でどのようにロジックをコーディングするのかを見ていきます。とりあえずの簡易な例で見てみましょう。</p> + +<pre class="brush: html notranslate"><button>起動する</button> +<p>マシンは停止中です。</p> +</pre> + +<pre class="brush: js notranslate">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 = 'マシンは停止中です。'; + } +}</pre> + +<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p> + +<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">新しいウィンドウで開く</a></strong></p> + +<p>等価演算子が <code>updateBtn()</code> 関数の中で使用されていることがわかりますね。今回の場合は数値が同じ値かを判定するためには使用していません。ボタンの内容として設定されている文字列が、特定の文字列であるかどうかを比較しています。ただし、原理的には同じ働きです。もしボタンに「起動する」と書かれていれば、押されたときにボタンのラベルが「停止する」に代わります。もしボタンに「停止する」と書かれていれば、再度入れ替わって元に戻ります。</p> + +<div class="note"> +<p><strong>メモ</strong>: 2 つの状態を行き来するこのような操作を一般的に<strong>トグル</strong>といいます。スイッチの ON/OFF のように、ある状態がもう一つの状態にトグル (切り替え) するといいます。</p> +</div> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の終わりまで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を取得したかのテストを見ることができます — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Test_your_skills:_Math">Test your skills: Math</a> を見てください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事では、JavaScript の数値処理で知っておくべき基礎的なことを学びました。JavaScript を学習する間、今後も繰り返し数値を扱うことになるので、しっかりと復習しておきましょう。数学が好きではなくとも、この章はとても短いので安心して (復習して) ください。</p> + +<p>次の章では文字列と、文字列を JavaScript で操作する方法について見ていきます。</p> + +<div class="note"> +<p><strong>メモ</strong>: もし数学が好きで、JavaScript にどう実装されているかをもっと知りたいのであれば、MDN の JavaScript のメインの章に詳細がたくさん載っています。まずは<a href="/ja/docs/Web/JavaScript/Guide/Numbers_and_dates">数値と日付</a>や<a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators">式と演算子</a>辺りの記事から読むのがいいでしょう。</p> +</div> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "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> diff --git a/files/ja/learn/javascript/first_steps/silly_story_generator/index.html b/files/ja/learn/javascript/first_steps/silly_story_generator/index.html new file mode 100644 index 0000000000..ae52da17c7 --- /dev/null +++ b/files/ja/learn/javascript/first_steps/silly_story_generator/index.html @@ -0,0 +1,151 @@ +--- +title: バカ話ジェネレーター +slug: Learn/JavaScript/First_steps/Silly_story_generator +tags: + - Arrays + - Assessment + - CodingScripting + - JavaScript + - Numbers + - Operators + - Variables + - 'l10n:priority' + - strings + - 初心者 + - 学習 +translation_of: Learn/JavaScript/First_steps/Silly_story_generator +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">この評価試験では、このモジュールを通して身に付けた知識を生かして、ランダムなバカ話を生成する楽しいアプリを作ります。楽しんでください！</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>この評価試験を試す前に、このモジュール内のすべての記事を一通り作業しておくべきです。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript の基礎である、変数、数値、演算子、文字列、配列などの理解をテストする。</td> + </tr> + </tbody> +</table> + +<h2 id="Starting_point" name="Starting_point">開始地点</h2> + +<p>評価試験を開始するには...</p> + +<ul> + <li>GitHubからサンプル用の <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">HTML ファイルを取って</a>きて自分のコンピュータの新しいディレクトリーに <code>index.html</code> という名前で保存します。ここには見た目をきれいにするため、CSS も含まれています。</li> + <li><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">この生テキストを含むページ</a>に移動してどこか別のブラウザタブで開いたままにしておきます。後で必要となります。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: 上記の手順に代わって、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> のようなサイトを使って評価試験を実施できます。HTML、CSS、JavaScript をオンラインエディターにペーストできます。使っているオンラインエディターが独立した JavaScript パネルを持たない場合、HTML ページ内の <code><script></code> 要素内に書いても問題ありません。</p> +</div> + +<h2 id="Project_brief" name="Project_brief">プロジェクトの要点</h2> + +<p>HTML および CSS と少しのテキストと JavaScript 関数がありますね。JavaScript を必要なだけ書いて、下記のような動作をするプログラムを書きましょう。</p> + +<ul> + <li>"Generate random story" ボタンが押された時にバカな話を生成する。</li> + <li>バカな話を生成するボタンが押される前に "Enter custom name" のテキストフィールドに名前が入力されていた場合には、既定の "Bob" という名前を入力された名前に置き換える。</li> + <li>バカな話を生成するボタンが押される前に UK のラジオボタンがチェックされていた場合のみ、既定の US (米国) の重さと気温を UK (英国) の同等な単位に変換する。</li> + <li>ボタンが再度 (何度でも) 押されたら、別のランダムなバカ話を生成する。</li> +</ul> + +<p>下記のスクリーンショットは完成したプログラムが出力する例を表しています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13667/assessment-1.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>これ以上のアイデアを与えるには<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">完成プログラムの例を見てください</a> (ソースコードは覗かないで！)</p> + +<h2 id="Steps_to_complete" name="Steps_to_complete">完成させるステップ</h2> + +<p>以下の項目が達成すべきリストです。</p> + +<p>基本的なセットアップ</p> + +<ol> + <li><code>index.html</code> ファイルと同じディレクトリーに <code>main.js</code> を作ります。</li> + <li>{{htmlelement("script")}} 要素を使用して、HTML ファイルに <code>main.js</code> への参照を外部 JavaScript として適用します。{{htmlelement("script")}} 要素は <code></body></code> タグの直前に配置します。</li> +</ol> + +<p>最初の変数と関数</p> + +<ol> + <li>先ほどのテキストファイル内の "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" という見出しの直後にあるコードをコピーして <code>main.js</code> の先頭に貼り付けます。これで "Enter custom name" テキストフィールド (<code>customName</code>) 、"Generate random story" ボタン (<code>randomize</code>) 、HTML の body の下のほうにある {{htmlelement("p")}} 要素 (<code>story</code>) への参照を保持することができます。さらに <code>randomValueFromArray()</code> という、引数として配列を取りその配列からランダムに 1 つの項目を戻り値として返す関数が使えるようになります。</li> + <li>次にテキストファイルの 2番目のセクションを見てみましょう。"2. RAW TEXT STRINGS" という見出しのところです。このプログラムの入力となる文字列が書かれています。<code>main.js</code> の内部で使用できるように、これらの文字列を変数に保持してください。 + <ol> + <li>先頭の長い長い文字列を <code>storyText</code> という変数に格納します。</li> + <li>3 つセットになっている最初の文字列の組を <code>insertX</code> という配列に格納します。</li> + <li>2組目の文字列を <code>insertY</code> という配列に格納します。</li> + <li>3組目の文字列を <code>insertZ</code> という配列に格納します。</li> + </ol> + </li> +</ol> + +<p>イベントハンドラーと未完成の関数の配置:</p> + +<ol> + <li>テキストファイルに戻ります。</li> + <li>"3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" という見出しの直後にあるコードをコピーして <code>main.js</code> ファイルの最後に貼り付けます。これで、 + <ul> + <li><code>randomize</code> 変数へのクリックイベントリスナーが追加され、その変数に紐づくボタンが押された場合に <code>result()</code> 関数が実行されるようになります。</li> + <li>部分的に実装されている <code>result()</code> 関数の定義が追加されます。この課題の中で、この関数の残りを実装し、正しく動作するようにします。</li> + </ul> + </li> +</ol> + +<p><code>result()</code> 関数の作成</p> + +<ol> + <li><code>newStory</code> という変数を作り、<code>storyText</code> の値を <code>newStory</code> 変数に格納します。これはボタンが押された場合に、毎回新しい話を作り出すために必要となります。もし <code>storyText</code> 変数自体に変更を加えてしまうと一度しか面白い話が生成できなくなってしまいます。</li> + <li><code>xItem</code>、<code>yItem</code>、<code>zItem</code> という変数を 3 つ作成し、それぞれ対応する配列で呼び出した <code>randomValueFromArray()</code> の戻り値を設定します (それぞれの配列に含まれる文字列がランダムに選ばれます)。例えば、関数を呼び出して <code>insertX</code> から一つの文字列を取得するには <code>randomValueFromArray(insertX)</code> のように書きます。</li> + <li>次に <code>newStory</code> 文字列内の <code>:insertx:</code>、<code>:inserty:</code>、<code>:insertz:</code> という 3 か所のプレースホルダーをそれぞれ <code>xItem</code>、<code>yItem</code>、<code>zItem</code> に格納されている文字列で置き換えます。ここでは適切なメソッドを使用して、<code>newStory</code> に対して何度メソッドを呼び出しても <code>newStory</code> 自体の値を変えずに置換された文字列が手に入るようにしてください。これでボタンが何度押されても、プレースホルダーの値をランダムなバカ話で置き換えることができます。もう少しヒントを出すと、そのメソッドは見つけた最初の部分文字列だけを置き換えるため、同じ部分文字列を置換するためには 2 回メソッドを呼び出す必要があるでしょう。</li> + <li>最初の <code>if</code> ブロックで、<code>newStory</code> の文字列内で見つかる 'Bob' という文字列を <code>name</code> 変数の値で置換するため、別の文字列置換のメソッド呼び出し追加します。このブロック内では、「もし ( if ) <code>customName</code> テキストフィールドに何かが入力されていれば、Bob をその文字列で置き換える」ということを言っています。</li> + <li>次の <code>if</code> ブロックの中では、<code>uk</code> のラジオボタンが選択されているかどうかを調べています。もし選択されているのなら、重さと温度の単位をポンド・華氏から、ストーン・摂氏に変換したいと思います。そのために必要なことは... + <ol> + <li>ポンドからストーンへ変換する公式、および、華氏から摂氏へ変換する公式を調べます。</li> + <li><code>weight</code> 変数が宣言されている行内の、300 を ポンドからストーンに変換した値で置き換えます。そして <code>' stone'</code> (ストーン) を <code>Math.round()</code> の結果に対して、その後ろに結合します。</li> + <li><code>temperature</code> 変数が宣言されている行内の、94 を華氏から摂氏に変換した値で置き換えます。こちらには <code>' centigrade'</code> (摂氏～度) という文字を <code>Math.round()</code> の結果に対して、後ろに結合します。</li> + <li>上記2 つの変数の宣言の直後に、さらにもう 2 つ文字列を置換するコードを書いて、'94 farenheit' を <code>temperature</code> 変数の内容に、'300 pounds' を <code>weight</code> 変数の内容にそれぞれ置換します。</li> + </ol> + </li> + <li>最後に、関数の下から 2行目にある、<code>story</code> 変数の <code>textContent</code> プロパティ(段落を参照している) を、<code>newStory</code> 変数の内容で置き換えます。</li> +</ol> + +<h2 id="Hints_and_tips" name="Hints_and_tips">ヒントと tips</h2> + +<ul> + <li>JavaScript を HTML に適用する以外に、HTML を変更する必要は全くありません。</li> + <li>もし、JavaScript が HTML に適切に適用されているかどうかを知りたければ、JavaScript ファイルから一時的に全てのコードを削除して、確実に何かが起きるようなコードを追加して、JavaScript ファイルを保存して HTML ファイルを更新してみましょう。次の例は {{htmlelement("html")}} 要素の背景色を赤くするコードです。JavaScript が適切に HTML に適用されていれば、ブラウザのウィンドウが真っ赤になることでしょう。 + <pre class="brush: js notranslate">document.querySelector('html').style.backgroundColor = 'red';</pre> + </li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> は JavaScript の組み込みメソッドで、計算結果を整数値に四捨五入します。</li> + <li>置き換えなければならない文字列のインスタンスが３つあります。 <code>replace()</code> メソッドを複数回繰り返すか、正規表現を使用するかします。具体的には、 <code>var text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like');</code> とするとすべての 'love' のインスタンスを 'like' に置き換えます。なお、 String は変化しないことに注意してください。</li> +</ul> + +<h2 id="Assessment" name="Assessment">評価</h2> + +<p>もし特定の組織の元でこのコースを受けているのなら、先生やメンターに出来たものを見せて、評価をお願いしてみましょう。もし自分だけでやっているのなら、<a href="https://discourse.mozilla.org/t/silly-story-generator-assessment/24686">この評価試験のスレッド</a>や、<a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルに評価をお願いしてみましょう。まずはやってみましょう。カンニングしても得られるものはないですよ！</p> + +<p>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> +</ul> diff --git a/files/ja/learn/javascript/first_steps/strings/index.html b/files/ja/learn/javascript/first_steps/strings/index.html new file mode 100644 index 0000000000..d4b850bd6d --- /dev/null +++ b/files/ja/learn/javascript/first_steps/strings/index.html @@ -0,0 +1,240 @@ +--- +title: テキストを扱う — JavaScript での文字列 +slug: Learn/JavaScript/First_steps/Strings +tags: + - Article + - Beginner + - CodingScripting + - Guide + - JavaScript + - Join + - Quotes + - concatenation + - 'l10n:priority' + - strings +translation_of: Learn/JavaScript/First_steps/Strings +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">プログラミングでは文字の羅列を文字列と呼びますが、次はこれを学習しましょう。この記事では、JavaScript でよく使われる、文字列を作ったり、引用符をエスケープしたり、文字列を結合したりといった、文字列について本当に知っておくべきことだけを見てみましょう。</p> + +<table class="learn-box standard-table"> + <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="The_power_of_words" name="The_power_of_words">言葉の力</h2> + +<p>言葉はコミュニケーションの大部分を担う、人類にとって、とても大切なものです。Web は情報の共有やコミュニケーションができるように設計された大規模な文字ベースの媒体ですので、そこで使用される言葉を操作できると便利です。{{glossary("HTML")}} は意味付けされ、構造化されたテキストを提供し、{{glossary("CSS")}} がきれいに体裁を整える事を可能にし、そして JavaScript には、挨拶用の文章を生成したり、適切なラベルを表示したり、言葉を並べ替えたりといった、文字列を操作するたくさんの機能が含まれています。</p> + +<p>今までこのコースでお見せしたプログラムのほとんどが、何らかの文字列操作を含んでいましたね。</p> + +<h2 id="Strings_—_the_basics" name="Strings_—_the_basics">文字列 — 基本</h2> + +<p>文字列は一見すると数値と同じように見えますが、少し深く見ていくと、違いに気づくことでしょう。まずは慣らすために基本的なコードを<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザの開発者ツール</a>に入力してみましょう。</p> + +<h3 id="Creating_a_string" name="Creating_a_string">文字列を作る</h3> + +<ol> + <li>初めに、次の行を入力してみましょう。 + <pre class="brush: js notranslate">let string = '革命はテレビでは放送されない。'; +string;</pre> + 数値のところでやったのと同じように、変数を宣言して、値を入れて初期化しています。そして値を返しています。ただ違うのは、文字列が引用符で囲まれて書かれていることです。</li> + <li>もし引用符で囲わななかったり、どちらか一方を書き忘れたりすると、エラーになります。 + <pre class="brush: js example-bad notranslate">let badString = これはテストです; +let badString = 'これはテストです; +let badString = これはテストです';</pre> + これらの行は動きません。なぜなら引用符で文字を囲わなければ、変数名や、プロパティ名や、予約語などと解釈されてしまうためです。もしブラウザが引用符を見つけられないと、エラーとなります (たとえば "missing ; before statement" [文の前に、セミコロンが見つかりません] のようなエラーです)。2行目の例のように、ブラウザが引用符を見つけても、文字列の終わりが示されていなければ、これもエラーとなります ("unterminated string literal" [文字列リテラルの終わりがありません] というエラーです)。このようなエラーがプログラムで起きたら、全ての文字列について、引用符の付け忘れがないかを確認してください。</li> + <li>続くコードは先ほど変数を <code>string</code> という名前で宣言していれば、動くでしょう。試してみましょう。 + <pre class="brush: js notranslate">let badString = string; +badString;</pre> + <code>badString</code> という変数に <code>string</code> という変数の値が設定されたことでしょう。</li> +</ol> + +<h3 id="Single_quotes_vs._double_quotes" name="Single_quotes_vs._double_quotes">シングルクォーテーション vs. ダブルクォーテーション</h3> + +<ol> + <li>JavaScript では、文字列を囲む引用符として、シングルクォーテーションとダブルクォーテーションを使用することができます。以下のどちらの例も正しく動きます。 + <pre class="brush: js notranslate">let sgl = 'シングルクォーテーション'; +let dbl = "ダブルクォーテーション"; +sgl; +dbl;</pre> + </li> + <li>どちらを使ってもほとんど違いはありません。どちらを使うかは好みの問題ですが、どちらを使うかは統一するべきでしょう。両方を同時に使うと混乱してしまいます、特に同じ文字列に二種類の引用符を使ってしまうときなど！次の行はエラーです。 + <pre class="brush: js example-bad notranslate">let badQuotes = 'なんということだ！";</pre> + </li> + <li>ブラウザは上の文字列が閉じていないと認識します。なぜなら、文字列を囲うのに使用していない引用符はその文字列の中に含めることができるからです。たとえば次の例は問題ありません。 + <pre class="brush: js notranslate">let sglDbl = 'Would you eat a "fish supper"?'; +let dblSgl = "I'm feeling blue."; +sglDbl; +dblSgl;</pre> + </li> + <li>ただし、文字列の中に、囲んでいるのと同じ種類の引用符を含めることはできません。以下の例は文字列の終わりがわからないので、ブラウザを混乱させてしまいます。 + <pre class="brush: js example-bad notranslate">let bigmouth = 'I've got no right to take my place...';</pre> + それでは同じ種類の引用符を含めるにはどのようにすればよいでしょうか。</li> +</ol> + +<h3 id="Escaping_characters_in_a_string" name="Escaping_characters_in_a_string">文字列をエスケープする</h3> + +<p>先ほどのコード行を直すには、問題となっている引用符をエスケープする必要があります。文字のエスケープとは、その文字が、コードではなく、文字列の一部であるとブラウザに認識させる書き方です。JavaScript ではバックスラッシュ ( \ [環境によっては円マーク (￥)]) を文字の前におくことでエスケープすることができます。</p> + +<pre class="brush: js notranslate">let bigmouth = 'I\'ve got no right to take my place...'; +bigmouth;</pre> + +<p>これでうまく動きます。 同じ方法で他の文字をエスケープする (例えば <code>\"</code>) ことができ、それ以外にも特別なコードがあります。詳細は<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation">エスケープ記法</a>を見てください。</p> + +<h2 id="Concatenating_strings" name="Concatenating_strings">文字列を連結する</h2> + +<ol> + <li>コンカチする (concatenate) という単語は「結合する」ことを表すプログラミングの用語です。JavaScript で文字列を結合するにはプラス (+) 演算子を使用します。数値の加算をするのに使用した演算子ですが、今回は違う動作をします。下の例をコンソールに入力してみてください。 + <pre class="brush: js notranslate">let one = 'こんにちは、'; +let two = 'ご機嫌いかがでしょう？'; +let joined = one + two; +joined;</pre> + この例の実行結果は <code>joined</code> という変数に格納され、値は "こんにちは、ご機嫌いかがでしょう？" となります。</li> + <li>今の例は 2 つの文字列だけを結合しましたが、<code>+</code> 演算子が変数と変数の間にあれば、いくつでも結合することができます。例えば、次の例を試しましょう。 + <pre class="brush: js notranslate">let multiple = one + one + one + one + two; +multiple;</pre> + </li> + <li>変数のほかに、実際の文字列と混ぜて使うこともできます。 + <pre class="brush: js notranslate">let response = one + '私は元気です。' + two; +response;</pre> + </li> +</ol> + +<div class="note"> +<p><strong>注</strong>: コード中に、シングルクォーテーションおよびダブルクォーテーションで囲われた、実際の文字列を書いたときそれは<strong>文字列リテラル</strong>と呼ばれます。</p> +</div> + +<h3 id="Concatenation_in_context" name="Concatenation_in_context">様々な結合</h3> + +<p>実際に文字列が結合されている場面を見てみましょう。これはこのコースの最初の方からの例です。</p> + +<pre class="brush: html notranslate"><button>押してみて！</button></pre> + +<pre class="brush: js notranslate">let button = document.querySelector('button'); + +button.onclick = function() { + let name = prompt('あなたの名前は？'); + alert('こんにちは、' + name + 'さん。初めまして！'); +}</pre> + +<p>{{ EmbedLiveSample('Concatenation_in_context', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>4行目でユーザに答えてもらうため、{{domxref("Window.prompt()", "Window.prompt()")}}関数を使用して、テキストを入力できるポップアップダイアログを表示し、ユーザによって入力された文字列を <code>name</code> 変数に格納しています。そして、5行目で{{domxref("Window.alert()", "Window.alert()")}}関数を使用し、2 つの文字列リテラルと <code>name</code> 変数を結合して別のポップアップに文字列を作り上げています。</p> + +<h3 id="Numbers_vs._strings" name="Numbers_vs._strings">数値 vs. 文字列</h3> + +<ol> + <li>それでは文字列と数値を足したら (もしくは結合したら) 何が起きるでしょうか。コンソールに入力してみましょう。 + <pre class="brush: js notranslate">'フロント' + 242; +</pre> + エラーが起きると予想したかもしれませんが、普通に動きます。文字列を数値として表すのには意味がありませんが、数値を文字で表すのはわかりますね。つまりブラウザはどうやら、数値を文字列に変換し、2 つの文字列としてから結合しているようです。</li> + <li>数字同士でやっても同じです。数字を引用符で囲むと文字列になります。次の行を実行してみてください。(<code>typeof</code>演算子で変数が文字列なのか数値なのか調べています。) + <pre class="brush: js notranslate">let myDate = '19' + '67'; +typeof myDate;</pre> + </li> + <li>もし、数値を文字列に変換したかったり、文字列を数値に変換したかったりする場合には、次の 2 つの生成方法を見てください。 + <ul> + <li>{{jsxref("Number")}}オブジェクトは渡されたものすべてを数値に変換します。次の例を実行してみましょう。 + <pre class="brush: js notranslate">let myString = '123'; +let myNum = Number(myString); +typeof myNum;</pre> + </li> + <li>反対に全ての数値は <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code> という文字列に変換するメソッドを持っています。 + <pre class="brush: js notranslate">let myNum = 123; +let myString = myNum.toString(); +typeof myString;</pre> + </li> + </ul> + この生成方法は状況によってはとても便利です。例えば、ユーザがフォームのテキストフィールドに数字を入力した場合、入力された値は文字列です。しかし、その数字を使って計算したい場合、数値にしなければなりません。そんな時は <code>Number()</code> に任せましょう。これは実際に<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L54">数字当てゲームの 54行目</a>で使用した方法です。</li> +</ol> + +<h2 id="テンプレートリテラル">テンプレートリテラル</h2> + +<p>遭遇する可能性のある別のタイプの文字列構文は、<strong>テンプレートリテラル</strong>（テンプレート文字列と呼ばれることもあります）です。 これは、より柔軟で読みやすい文字列を提供する新しい構文です。</p> + +<div class="blockIndicator note"> +<p>注: 以下の例をブラウザの JavaScript コンソールに入力して、どのような結果が得られるかを確認してください。</p> +</div> + +<p>標準の文字列リテラルをテンプレートリテラルに変換するには、引用符 (<code>' '</code> または <code>" "</code>) をバッククォート文字 (<code>` `</code>) に置き換える必要があります。</p> + +<p>簡単な例。</p> + +<pre class="brush: js notranslate">let song = 'Fight the Youth';</pre> + +<p>テンプレートリテラルに変換します。</p> + +<pre class="brush: js notranslate">song = `Fight the Youth`;</pre> + +<p>文字列を連結したり、文字列内に式の結果を含めたりする場合、従来の文字列で書くのは面倒です。</p> + +<pre class="brush: js notranslate">let score = 9; +let highestScore = 10; +let output = 'I like the song "' + song + '". I gave it a score of ' + (score/highestScore * 100) + '%.';</pre> + +<p>テンプレートリテラルはこれを非常に簡単に行えます。</p> + +<pre class="brush: js notranslate">output = `I like the song "${ song }". I gave it a score of ${ score/highestScore * 100 }%.`;</pre> + +<p>複数の文のピースを繋げる必要はありません。文章全体を1組のバッククォートで囲むだけです。文字列内に変数または式を含める場合は、プレースホルダーと呼ばれる <code>${ }</code> 構造内に含めます。</p> + +<p>テンプレートリテラル内に複雑な式を含めることもできます。</p> + +<pre class="brush: js notranslate">let examScore = 45; +let examHighestScore = 70; +examReport = `You scored ${ examScore }/${ examHighestScore } (${ Math.round((examScore/examHighestScore*100)) }%). ${ examScore >= 49 ? 'Well done, you passed!' : 'Bad luck, you didn\'t pass this time.' }`;</pre> + +<ul> + <li>最初の2つのプレースホルダーは非常に単純で、変数を参照する単純な文字列のみが含まれています。</li> + <li>3つ目は、パーセンテージの結果を計算し、それを最も近い整数に丸めます。</li> + <li>4つ目は、三項演算子を使用してスコアが特定の値を超えているかどうかを確認し、結果に応じて合格または不合格のメッセージを出力します。</li> +</ul> + +<p>従来の文字列リテラルで複数の行に分割する場合は、改行文字 <code>\n</code> を含める必要がありました。</p> + +<pre class="brush: js notranslate">output = 'I like the song "' + song + '".\nI gave it a score of ' + (score/highestScore * 100) + '%.';</pre> + +<p>テンプレートリテラルはソースコードの改行をそのまま再現するため、改行文字は不要になります。 以下は同じ結果を得ます。</p> + +<pre class="brush: js notranslate">output = `I like the song "${ song }". +I gave it a score of ${ score/highestScore * 100 }%.`;</pre> + +<p>できるだけ早くテンプレートリテラルの使用に慣れることをお勧めします。 これらは最新のブラウザで十分にサポートされており、サポートが不足しているのは Internet Explorer だけです。私たちの例の多くはまだ標準の文字列リテラルを使用していますが、今後さらに多くのテンプレートリテラルを含める予定です。</p> + +<p>高度な機能の例と詳細については、<a href="/ja/docs/Web/JavaScript/Reference/Template_literals">テンプレートリテラル</a>のリファレンスページを参照してください。</p> + +<h2 id="あなたのスキルをテストしてください！">あなたのスキルをテストしてください！</h2> + +<p>この記事の最後に到達しましたが、最も重要な情報を覚えていますか？ 先に進む前に、この情報を記憶していることを確認するためのいくつかの<a href="/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings">テスト</a>を見つけることができます。これには次の記事の知識も必要なので、最初にそれを読むことをお勧めします。</p> + +<h2 id="Conclusion" name="Conclusion">結論</h2> + +<p>ここまでが JavaScript での文字列の基礎になります。次の記事では、JavaScript で使える文字列操作の組み込み関数と、それを使って思い通りの形に文字列を変換する方法を、その基礎の上に建てていきましょう。</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "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> diff --git a/files/ja/learn/javascript/first_steps/useful_string_methods/index.html b/files/ja/learn/javascript/first_steps/useful_string_methods/index.html new file mode 100644 index 0000000000..0c2f22adfd --- /dev/null +++ b/files/ja/learn/javascript/first_steps/useful_string_methods/index.html @@ -0,0 +1,680 @@ +--- +title: 便利な文字列メソッド +slug: Learn/JavaScript/First_steps/Useful_string_methods +tags: + - Article + - Beginner + - CodingScripting + - JavaScript + - Learn + - case + - indexof + - 'l10n:priority' + - length + - lower + - replace + - split + - upper +translation_of: Learn/JavaScript/First_steps/Useful_string_methods +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">文字列の基本についてはすでに見ました。ここからはレベルを上げて、組み込みのメソッドを使用して文字列に対して実行できる便利な操作について考えてみましょう。例えば、文字列の長さを調べたり、繋げたり、分割したり、ある文字を他の文字に置き換えたりなどです。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基礎的なコンピュータの知識、HTML と CSS の基本の理解、JavaScript が何かを知っていること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>文字列がオブジェクトであることを理解して、そのオブジェクトで使用できる基本的なメソッドを使って文字列を操作する方法を身に付ける。</td> + </tr> + </tbody> +</table> + +<h2 id="Strings_as_objects" name="Strings_as_objects">オブジェクトとしての文字列</h2> + +<p id="Useful_string_methods">JavaScript ではほとんどのものはオブジェクトです。たとえば、次のように文字列を作った時も、</p> + +<pre class="brush: js notranslate">let string = 'This is my string';</pre> + +<p>この変数は文字列オブジェクトのインスタンスになり、大量のプロパティとメソッドが使用可能となります。{{jsxref("String")}} オブジェクトのページに行って、横にある一覧を眺めてみてください！</p> + +<p><strong>また、脳が溶け出しそうかもしれませんが、安心してください！</strong>先ほどのページにある、ほとんどのメソッドは学習の初期に覚える必要はありません。しかし、今から紹介する、文字列操作のメソッドはとてもよく使いますのでぜひ覚えましょう。 </p> + +<p><a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザの開発者コンソール</a>にいくつかの例を入力してみましょう。</p> + +<h3 id="Finding_the_length_of_a_string" name="Finding_the_length_of_a_string">文字列の長さを調べる</h3> + +<p>ただ {{jsxref("String.prototype.length", "length")}} プロパティを使用すればよいので、とても簡単です。次の行を入力してみましょう。</p> + +<pre class="brush: js notranslate">let browserType = 'mozilla'; +browserType.length;</pre> + +<p>これで 7 という数値が戻ります。なぜなら "mozilla" は 7文字だからです。例えば、文字の長さによって文字列を並べたいときや、ユーザーがある長さ以上のユーザー名をフォームの入力フィールドに入れたことを知らせたりするような場面で便利です。</p> + +<h3 id="Retrieving_a_specific_string_character" name="Retrieving_a_specific_string_character">特定の文字列を扱う</h3> + +<p>前の例と関連していますが、文字列に対して<strong>角括弧記法</strong>を使用することで文字列中の任意の 1文字が得られます。つまり角括弧 (<code>[]</code>) を変数名の後ろに付け、その中に数値を入れることで、その番目にある文字が返ってきます。例えば最初の一文字を取得するには次のようにします。</p> + +<pre class="brush: js notranslate">browserType[0];</pre> + +<p>コンピューターは 1 からではなく、0 から数えます！例えば、文字列から最初の文字を見つけてアルファベット順に並べるときに使うことができます。</p> + +<p>文字列の一番最後の文字を取得したいときは、先ほどの <code>length</code> プロパティと組み合わせて以下のようにします。</p> + +<pre class="brush: js notranslate">browserType[browserType.length-1];</pre> + +<p>"mozilla" の長さは 7 ですが、0 から始まるので、最後の文字の位置は 6 になります。よって <code>length-1</code> とする必要があるのです。</p> + +<h3 id="Finding_a_substring_inside_a_string_and_extracting_it" name="Finding_a_substring_inside_a_string_and_extracting_it">部分文字列を探して抽出する</h3> + +<p>長い文字列の中に、ある文字列が存在するか調べたいと思うことがあります (よく文字列中に部分文字列が存在するなどといいます)。これには、探したい部分文字列を{{glossary("parameter","引数")}}に取る {{jsxref("String.prototype.indexOf()", "indexOf()")}} メソッドを使用することで可能です。</p> + +<p>もし対象の文字列中に部分文字列が<em>見つかった</em>場合、このメソッドは部分文字列のインデックス位置を表す数値 (対象の文字列上で部分文字列が始まる文字数) を返します。もし対象の文字列中に部分文字列が<em>見つからなかった</em>場合は、<code>-1</code> の値を返します。</p> + +<ol> + <li>以下を試してみましょう。 + <pre class="brush: js notranslate">browserType.indexOf('zilla');</pre> + このコードは 2 を返します。なぜならば、"mozilla"という文字列中で、部分文字列"zilla"の開始位置が 2 (0、1、2 — つまり 3文字目)であるからです。このようなコードは文字列を絞り込むときなどに使います。例えば、ウェブサイトのアドレスの一覧があったとき、その中から"mozilla"を含むものだけを表示したい場合などです。</li> +</ol> + +<ol start="2"> + <li>部分文字列が含まれてることを確認するもう一つの方法があり、こちらのほうが効果的な場合があります。 + <pre class="brush: js notranslate">browserType.indexOf('vanilla');</pre> + 上記のコードは <code>-1</code> を返します。これは部分文字列 (この場合は 'vanilla') がメインの文字列の中に見つからなかった場合に返されます。<br> + <br> + これを使って、部分文字列 'mozilla' を<strong>含まない</strong> (あるいは否定演算子 <code>!==</code> を使うなら<strong>含む</strong>) 文字列のすべてのインスタンスを見つけることができます。 + + <pre class="brush: js notranslate">if(browserType.indexOf('mozilla') === -1) { + // もし部分文字列 'mozilla' が含まれていない場合は、 + // 文字列で何かをします。 +} + +if(browserType.indexOf('mozilla') !== -1) { + // もし部分文字列 'mozilla' が含まれている場合は、 + // 文字列で何かをします。 +}</pre> + </li> + <li>部分文字列がその文字列のどこから始まるかが分かっており、どこで終わっているかがわかれば、その部分文字列を {{jsxref("String.prototype.slice()", "slice()")}} メソッドを使用することで抽出することができます。 + <pre class="brush: js notranslate">browserType.slice(0,3);</pre> + このコードは "moz" という文字列を返します。最初の引数は抽出を始める最初の位置で、2番目の引数が抽出する最後の文字の直後の位置です。つまり、この場合先頭から 4番目の手前までの文字列が切り出されたということです。言い換えると、この場合は 2番目の引数と同じ 3文字が切り出されました。</li> + <li>また、ある文字以降の文字列の残りの文字をすべて抽出したいとわかっている場合は、2番目のパラメータを含める必要はありません！その代わり、文字列内の残りの文字を抽出したい文字の位置を含める必要があるだけです。次のようにしてみてください。 + <pre class="brush: js notranslate">browserType.slice(2);</pre> + この例は "zilla" という文字列を返します。なぜなら、2 の位置にある文字は z であり、2番目の引数を指定していないため、3文字目から最後までが部分文字列として戻ったのです。 </li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <code>slice()</code> の 2番目の引数はオプション (任意指定) です。もし指定しなければ、元々の文字列の最後まで切り出しを行います。他にもオプションがありますので、さらに詳しく知りたければ{{jsxref("String.prototype.slice()", "slice()")}}のページで調べてみましょう。</p> +</div> + +<h3 id="Changing_case" name="Changing_case">大文字・小文字の切り替え</h3> + +<p>String には{{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}と{{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}という 2 つのメソッドがあり、引数として渡された文字列のすべての文字の大文字・小文字を切り替えます。これは例えば、ユーザーの入力を DB に保存する場合に、値を正規化するのに便利です。</p> + +<p>それでは次の行を入力し、何が起きるか見てみましょう。</p> + +<pre class="brush: js notranslate">let radData = 'My NaMe Is MuD'; +radData.toLowerCase(); +radData.toUpperCase();</pre> + +<h3 id="Updating_parts_of_a_string" name="Updating_parts_of_a_string">文字列の一部分を書き換える</h3> + +<p>{{jsxref("String.prototype.replace()", "replace()")}}メソッドを使用することで、ある部分文字列を他の文字列に置き換えることができます。基本レベルではとても単純に動作しますが、<code>replace()</code> メソッドは高度な機能を持っています (今回はその機能は紹介しませんが)。</p> + +<p>検索する文字列と、置き換える文字列の 2 つを引数に取ります。次の例を実行してみてください。</p> + +<pre class="brush: js notranslate">browserType.replace('moz','van');</pre> + +<p>これはコンソールで"vanilla"を返しますが、<code>browserType</code> の値は、"mozilla"のままです。プログラムで変数 <code>browserType</code> の値を実際に更新するには、演算の結果を変数に設定し直す必要があります。つまりそれ変数に設定されている部分文字列を自動的には更新してくれないのです。従って実際に変数の内容を更新するためには <code>browserType = browserType.replace('moz','van');</code> のように書きます。</p> + +<h2 id="Active_learning_examples" name="Active_learning_examples">アクティブ学習の実例</h2> + +<p>この章では、文字列を操作するコードを書いてもらいます。以下のどの問題も文字列の配列をループで回して、順序なしリスト形式で表示しますが、配列やループに関して今は理解する必要はありません。配列については今後の記事で説明します。必要なのは、どのような書式で出力するかという要求を満たすコードを書くことです。</p> + +<p>どの例も「リセット」ボタンがあるので、コードが動かなくなった場合は使用してみてください。もし本当に行き詰まってしまった場合には、「答えを見る」ボタンを押すことで、回答を見ることができます。</p> + +<h3 id="Filtering_greeting_messages" name="Filtering_greeting_messages">挨拶を選別する</h3> + +<p>まずは簡単な問題から始めます。挨拶状に使用するメッセージの配列の中から、クリスマスのメッセージのみを選別し、並べ替えてください。やるべきことは、メッセージがクリスマスメッセージであることを判定しその場合のみ表示されるよう、<code>if ( ... )</code> 文の条件式を埋めることです。</p> + +<ol> + <li>まず、各メッセージがどうであればクリスマス(Christmas)メッセージとみなせるかを考えてください。こういうメッセージ中にはどんな文字列があり、それが存在するか判定するのにどんなメソッドが使えるでしょうか？</li> + <li>それから、オペランド 1 演算子 オペランド 2 の形で条件を書いてください。その条件は左辺と右辺が等しいかというものでしょうか？もしくは左辺のメソッドの戻り値が、右辺であるかというものでしょうか。</li> + <li>ヒント: 今回の場合、メソッドの戻り値の結果が何でないかを判定するとよいでしょう。</li> +</ol> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>コードエディタ</h2> +<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + +<textarea id="code" class="playable-code" style="height: 290px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let greetings = ['Happy Birthday!', + 'Merry Christmas my love', + 'A happy Christmas to all the family', + 'You\'re all I want for Christmas', + 'Get well soon']; + +for (let i = 0; i < greetings.length; i++) { + let input = greetings[i]; + // 以下の条件の括弧内の内容を書き換えて下さい + if (greetings[i]) { + let listItem = document.createElement('li'); + listItem.textContent = input; + list.appendChild(listItem); + } +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = '答えを見る'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === '答えを見る') { + textarea.value = solutionEntry; + solution.value = '答えを隠す'; + } else { + textarea.value = userEntry; + solution.value = '答えを見る'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet greetings = [\'Happy Birthday!\',' + +'\n \'Merry Christmas my love\',' + +'\n \'A happy Christmas to all the family\',' + +'\n \'You\\\'re all I want for Christmas\',' + +'\n \'Get well soon\'];' + +'\n' + +'\nfor (let i = 0; i < greetings.length; i++) {' + +'\n let input = greetings[i];' + +'\n if (greetings[i].indexOf(\'Christmas\') !== -1) {' + +'\n let result = input;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n }' + +'\n}'; + +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// タブキーでテキストエリアから抜けてしまうのを防ぎ、 +// 代わりにカーソル位置にタブ文字を挿入する + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する + +textarea.onkeyup = function(){ + // ユーザーのコードが表示されているときのみ状態を保存し、 + // 答えのコードでユーザーコードが上書きされないようにする + if(solution.value === '答えを見る') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Fixing_capitalization" name="Fixing_capitalization">単語の最初の文字を大文字に直す</h3> + +<p>この課題ではイギリスの都市名を題材にします。ところが、単語の大文字と小文字がぐちゃぐちゃになっています。そこで最初の文字を大文字にし、残りをすべて小文字にしてみましょう。こういう手順でやってみます:</p> + +<ol> + <li><code>input</code> 変数に入っている文字列全体を小文字に変換し、それを新しい変数に格納します。</li> + <li>この新しい変数にある最初の文字を取り出し、さらに別の変数に格納します。</li> + <li>その新しい変数を部分文字列とし、小文字ばかりの文字列にある最初の文字を置換して、大文字化します。この置換処理の結果を別の新しい変数に格納します。</li> + <li><code>input</code> 変数ではなく、最終結果が <code>result</code> 変数の値に代入されるよう修正します。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: ヒント — 文字列メソッドのパラメーターは文字列リテラルである必要はありません。変数でもよいですし、メソッドが呼び出される変数であっても構いません。</p> +</div> + +<div class="hidden"> +<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>コードエディタ</h2> +<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + +<textarea id="code" class="playable-code" style="height: 250px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL']; +for(var i = 0; i < cities.length; i++) { + var input = cities[i]; + // この下にコードを書いて下さい + + let result = input; + let listItem = document.createElement('li'); + listItem.textContent = result; + list.appendChild(listItem); +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = '答えを見る'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === '答えを見る') { + textarea.value = solutionEntry; + solution.value = '答えを隠す'; + } else { + textarea.value = userEntry; + solution.value = '答えを見る'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];' + +'\n' + +'\nfor (let i = 0; i < cities.length; i++) {' + +'\n let input = cities[i];' + +'\n let lower = input.toLowerCase();' + +'\n let firstLetter = lower.slice(0,1);' + +'\n let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());' + +'\n let result = capitalized;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n' + +'\n}'; + +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// タブキーでテキストエリアから抜けてしまうのを防ぎ、 +// 代わりにカーソル位置にタブ文字を挿入する + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する + +textarea.onkeyup = function(){ + // ユーザーのコードが表示されているときのみ状態を保存し、 + // 答えのコードでユーザーコードが上書きされないようにする + if(solution.value === '答えを見る') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Making_new_strings_from_old_parts" name="Making_new_strings_from_old_parts">既存の部分から新しい文字列を作成する</h3> + +<p>最後の課題では、北イングランドの駅に関する情報が入っている文字列を格納している配列を扱います。この文字列にはデータ項目として、アルファベット 3文字の駅コード、次にコンピューター読み取り用のデータ、次にセミコロン、そして人間が読める駅名が入っています。例:</p> + +<pre class="notranslate">MAN675847583748sjt567654;Manchester Piccadilly</pre> + +<p>駅コードと駅名を抽出し、それを文字列にまとめてこのような形にします:</p> + +<pre class="notranslate">MAN: Manchester Piccadilly</pre> + +<p>このようにプログラムしてみましょう:</p> + +<ol> + <li>アルファベット 3文字のコードを抽出し、新しい変数に格納します。</li> + <li>セミコロンの文字インデックス番号を検索します。</li> + <li>セミコロンの文字インデックス番号を参照位置にして、人が読める駅名を抽出し、新しい変数に格納します。</li> + <li>この 2 つの新しい変数と文字列リテラルとを連結し、最終的な文字列を作成します。</li> + <li><code>input</code> 変数ではなく、この最終結果が <code>result</code> 変数の値に代入されるよう修正します。</li> +</ol> + +<div class="hidden"> +<h6 id="Playable_code_3" name="Playable_code_3">Playable code 3</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>コードエディタ</h2> +<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + +<textarea id="code" class="playable-code" style="height: 285px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let stations = ['MAN675847583748sjt567654;Manchester Piccadilly', + 'GNF576746573fhdg4737dh4;Greenfield', + 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street', + 'SYB4f65hf75f736463;Stalybridge', + 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield']; + +for (var i = 0; i < stations.length; i++) { + let input = stations[i]; + // この下にコードを書いてください + + let result = input; + let listItem = document.createElement('li'); + listItem.textContent = result; + list.appendChild(listItem); +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = '答えを見る'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === '答えを見る') { + textarea.value = solutionEntry; + solution.value = '答えを隠す'; + } else { + textarea.value = userEntry; + solution.value = '答えを見る'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',' + +'\n \'GNF576746573fhdg4737dh4;Greenfield\',' + +'\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',' + +'\n \'SYB4f65hf75f736463;Stalybridge\',' + +'\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];' + +'\n' + +'\nfor (let i = 0; i < stations.length; i++) {' + +'\n let input = stations[i];' + +'\n let code = input.slice(0,3);' + +'\n let semiC = input.indexOf(\';\');' + +'\n let name = input.slice(semiC + 1);' + +'\n let result = code + \': \' + name;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n}'; + +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// タブキーでテキストエリアから抜けてしまうのを防ぎ、 +// 代わりにカーソル位置にタブ文字を挿入する + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する + +textarea.onkeyup = function(){ + // ユーザーのコードが表示されているときのみ状態を保存し、 + // 答えのコードでユーザーコードが上書きされないようにする + if(solution.value === '答えを見る') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を維持しているかを検証するテストを見ることができます— <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings">Test your skills: Strings</a> を見てください。</p> + +<h2 id="Conclusion" name="Conclusion">結論</h2> + +<p>プログラミング、特に JavaScript では単語や文を処理できるようになることが大事であるという現実から逃れることはできません。それはウェブサイトは人とのコミュニケーションがすべてとなるためです。この記事では、文字列を処理するのに当面知っておくべき基礎を解説しました。今後もっと複雑なトピックに進んで行くときに役立つはずです。次に、配列を見てみます。重要なデータ型のうち、短期間で押さえておくべき最後の 1 つです。</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "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> diff --git a/files/ja/learn/javascript/first_steps/variables/index.html b/files/ja/learn/javascript/first_steps/variables/index.html new file mode 100644 index 0000000000..80c3c5af57 --- /dev/null +++ b/files/ja/learn/javascript/first_steps/variables/index.html @@ -0,0 +1,342 @@ +--- +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"><button>押してください</button></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"><</span> <span class="number token">3</span><span class="punctuation token">;</span></code></pre> + +<p>これは「小なり」演算子 (<code><</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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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> diff --git a/files/ja/learn/javascript/first_steps/what_is_javascript/index.html b/files/ja/learn/javascript/first_steps/what_is_javascript/index.html new file mode 100644 index 0000000000..4dc00a10e4 --- /dev/null +++ b/files/ja/learn/javascript/first_steps/what_is_javascript/index.html @@ -0,0 +1,434 @@ +--- +title: JavaScript とは +slug: Learn/JavaScript/First_steps/What_is_JavaScript +tags: + - 3rd party + - API + - Article + - Beginner + - Browser + - CodingScripting + - Core + - JavaScript + - Learn + - Script + - comments + - external + - inline + - 'l10n:priority' + - what +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">MDN 初心者向け JavaScript コースへようこそ！ この最初の記事では、高水準から JavaScript を見ていき、「JavaScript とは何か？」「これを使うと何ができるか？」などの質問に答えます。JavaScript の用途にきっちりと親しめるようになります。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターリテラシー、HTML および CSS の基本的な理解。</td> + </tr> + <tr> + <th scope="row">到達目標:</th> + <td>JavaScript とは何か、何ができるか、どのようにウェブサイトに適用できるかについて親しむ。</td> + </tr> + </tbody> +</table> + +<h2 id="高水準の定義">高水準の定義</h2> + +<p>JavaScript はウェブページにて複雑な機能をできるようにするプログラミング言語です —ウェブページが読み込まれるたびに、単にあなたが見ている静的な情報を表示する以上のことをしています— 更新されたコンテンツの定期表示や、インタラクティブな地図や、2D/3D グラフィックのアニメーションや、ビデオジュークボックスのスクロールなど — たぶん JavaScript が組み込まれています。ウェブ技術をケーキだとするとこれは 3 つ目の層で、他の 2 つ (<a href="/ja/docs/Learn/HTML">HTML</a> と <a href="/ja/docs/Learn/CSS">CSS</a>) は学習エリアの他の部分でもっと詳しく扱ってきました。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>{{glossary("HTML")}} はマークアップ言語で、これを使ってウェブコンテンツに構造と意味を与えます。例えば段落や見出しや表を定義したり、ページに画像や動画を入れたりします。</li> + <li>{{glossary("CSS")}} は HTML コンテンツに適用するスタイリング規則の言語です。例えば背景とフォントの色を設定したり、複数カラムにコンテンツをレイアウトしたりします。</li> + <li>{{glossary("JavaScript")}} は動的にコンテンツを更新したり、マルチメディアを管理したり、その他多くのことができるスクリプト言語です。(ええ、すべてできるわけではないですが、JavaScript の数行でできることは素晴らしいです。)</li> +</ul> + +<p>この 3 層は素晴らしい構成です。例としてシンプルなテキストラベルを見てみます。HTML を使って構造と意図をマークアップできます:</p> + +<pre class="brush: html notranslate"><p>Player 1: Chris</p></pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p> + +<p>次に、CSS を加えて、見栄えをよくします:</p> + +<pre class="brush: css notranslate">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; +}</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p> + +<p>最後に、JavaScript を加えて動的なふるまいを実装します:</p> + +<pre class="brush: js notranslate">const para = document.querySelector('p'); + +para.addEventListener('click', updateName); + +function updateName() { + let name = prompt('名前を入力して下さい'); + para.textContent = 'Player 1: ' + name; +} +</pre> + +<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>テキストラベルの最新バージョンをクリックしてみて、何が起きるのか見てみます (このデモは GitHub でも見られます— <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">ソースコード</a>または<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">ライブ実行</a>を参照してください)。</p> + +<p>JavaScript はそれ以上のことができます — もっと詳しく見てみましょう。</p> + +<h2 id="So_what_can_it_really_do" name="So_what_can_it_really_do">実際に何ができるのか</h2> + +<p>JavaScript は次のことを実現する一般的なプログラミング機能で構成されています。</p> + +<ul> + <li>有用な値を変数に格納する。上の例では、ユーザーに新しい名前を問いかけて、<code>name</code> と名付けられた変数に入力された新しい名前を格納しています。</li> + <li>連なった文字 (プログラミングでは「文字列」と呼ばれます) に対する操作。上の例では「Player 1: 」という文字列と <code>name</code> 変数を繋げて「Player 1: Chris」というような新しいラベルを生成しています。</li> + <li>ウェブページで起きる事柄に対処する。先ほどの例では {{Event("click")}} イベントを使用して、ボタンがクリックされたことを検出し、ラベルを更新するコードを実行しました。</li> + <li>他にもたくさんのことができます！</li> +</ul> + +<p>さらにワクワクするのは、JavaScript からすぐに使えるように構築されている機能です。それは <strong>Application Programming Interface</strong> (<strong>API</strong>) と呼ばれ、JavaScript のコードにさらなる強力な力を与えてくれることでしょう。</p> + +<p>API がなければ難しかったり、不可能であるようなコードを、すぐに使えるブロックのように、開発者がプログラムを作ることを可能にします。家を作るときの既製の家具と同じことを、プログラミングでしてくれるのです。自分で設計し、使用する木材を選定し、正しい形で板を切り出して、正しいサイズのネジを見つけて、自分で組み立てるよりも、既に切り出されたボードとネジを使って本棚を組み立てるだけの方がずっと簡単ですよね。</p> + +<p>API は大まかに 2種類に分けられます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p> + +<p><strong>ブラウザー API </strong>はウェブブラウザーに組み込まれていて、コンピューターを取り巻く環境からデータを取り出したり、複雑で便利なことをしてくれたりします。例えば、</p> + +<ul> + <li>{{domxref("Document_Object_Model","DOM (Document Object Model) API")}} は HTML と CSS の操作を可能とします。HTML を生成し、削除し、変更し、動的にページの見た目を変更することなどが可能です。もし (先ほどの簡単な例で見たように) ページ内でポップアップウィンドウを見たり、新しいコンテンツが表示されたりしたのなら、DOM が使用されていることでしょう。</li> + <li>{{domxref("Geolocation","Geolocation API")}} は地理的な情報を取得します。これは <a href="https://www.google.com/maps">Google マップ</a>があなたの所在地を見つけて地図上にプロットする場合に使用されています。</li> + <li>{{domxref("Canvas_API","Canvas")}} と {{domxref("WebGL_API","WebGL")}} の API は 2D や 3D グラフィックでのアニメーションを可能とします。このウェブ技術を使用してすごいことをやってのける人たちがいます。<a href="https://www.chromeexperiments.com/webgl">Chrome Experiments</a> や <a href="http://webglsamples.org/">webglsamples</a> などのページを見てください。</li> + <li><a href="/ja/Apps/Fundamentals/Audio_and_video_delivery">音声と動画の API</a>、たとえば {{domxref("HTMLMediaElement")}} や {{domxref("WebRTC API", "WebRTC")}} などは適切な音声・動画をウェブページで再生することや、ウェブカメラの動画を撮って他の人のコンピューターで流すといった、マルチメディアの可能性を示してくれます (我々が作った<a href="http://chrisdavidmills.github.io/snapshot/"> Snapshot demo</a> を見てみてください)。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: 上記の多くは古いブラウザーでは動作しません。試すには Firefox、Chrome、Edge、Opera といったモダンなブラウザーを使うのがよいでしょう。プロダクションコードを提供する (顧客に実際のコードを納品する) 段になったら、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザーテスト</a>を読んでみるとよいでしょう。</p> +</div> + +<p><strong>サードパーティ API </strong>はブラウザーには組み込まれておらず、さらに普通はウェブ上のどこかからそのコードと情報を探さなければなりません。例えば、</p> + +<ul> + <li><a href="https://dev.twitter.com/overview/documentation">Twitter API</a> を使用して、ウェブサイトに最新のツイートを表示させることができます。</li> + <li><a href="https://developers.google.com/maps/">Google マップ API</a> と <a href="https://wiki.openstreetmap.org/wiki/API">OpenStreetMap API</a> を使用して、ウェブサイトに専用の地図を埋め込み、付加機能を付けることもできます。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: このような API は先進的ですが、このモジュールでは扱いません。詳しく知りたければ <a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs module</a> で扱っています。</p> +</div> + +<p>ワクワクすることはもっとたくさんあります！ ですが、まだ興奮しすぎないでください。24 時間程度の勉強だけでは、Facebook や Google マップや Instagram は作れません。まずはやらなければならない基本がたくさんあるのです。さあ、先に進みましょう！</p> + +<h2 id="What_is_JavaScript_doing_on_your_page" name="What_is_JavaScript_doing_on_your_page">JavaScript は何をするのか</h2> + +<p>まずは実際にコードを見てみましょう。そしてページで JavaScript を動かすと何が起きるのか見てみましょう。</p> + +<p>ブラウザーをウェブページに読み込んだときの話を簡単に説明します (<a href="/ja/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">How CSS works</a> の記事で最初に出てきました)。ウェブページをブラウザーで見たとき、実行環境 (ブラウザーのタブ) の中で、コード (HTML、CSS そして JavaScript) が実行されます。これは素材 (コード) を加工して製品 (ウェブページ) を出力する工場のようなものです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p> + +<p>JavaScript のごく一般的な用途は、(先ほど例示した) Document Object Model API を介して動的に HTML と CSS を変更し、ユーザーインターフェイスを更新することです。なお、ウェブドキュメント上のコードは通常、ページ上に現れる順序で読み込まれて実行されます。もし JavaScript がロードされ、影響を受ける HTML および CSS がロードされる前に実行しようとすると、エラーが発生する可能性があります。この回避策については、記事の後半の「<a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Script_loading_strategies">スクリプトの読み込み方針</a>」セクションで学習します。</p> + +<h3 id="ブラウザーのセキュリティ">ブラウザーのセキュリティ</h3> + +<p>ブラウザーのそれぞれのタブは、コードを実行するための入れ物を個別に持ちます (この入れ物を技術的用語では「実行環境」と呼びます)。つまり、それぞれのタブ内でコードは完全に分かれて実行されており、あるタブで動いているコードは他のタブや他のウェブサイトのコードに、直接的には干渉できません。これは良いセキュリティ対策です。互いに干渉することが出来てしまえば、ウェブの悪党たちは、他のタブで開いているウェブサイトから情報を盗み出したり、もっとひどいことをするためにコードを書き始めることでしょう。</p> + +<div class="note"> +<p><strong>注</strong>: 他のウェブサイトや、タブに安全にデータや実行可能なコードを送る方法はあります。けれども、このコースでは扱わない高度な技術です。</p> +</div> + +<h3 id="JavaScript_running_order" name="JavaScript_running_order">JavaScript の実行順序</h3> + +<p>ブラウザーが JavaScript のブロックを見つけたとき、たいていは先頭から最後に向かって順番に実行されます。つまりどの順番で実行されるかということに気を配らなければなりません。例えば、最初の例で見た JavaScript のブロックに戻りましょう。</p> + +<pre class="brush: js notranslate">const para = document.querySelector('p'); + +para.addEventListener('click', updateName); + +function updateName() { + let name = prompt('名前を入力して下さい'); + para.textContent = 'Player 1: ' + name; +}</pre> + +<p>このコードでは文章段落を選択して (1 行目)、イベントリスナーを登録して (3 行目) 段落がクリックされたとき、<code>updateName()</code> というコードブロック (5 行目から 8 行目) が実行されるようにしています。<code>updateName()</code> というコードブロック (再利用可能なコードブロックで「関数」と呼びます) は、ユーザーに新しい名前を尋ねて、表示内容を変更するため、段落にその名前を挿入します。</p> + +<p>もし、最初の 2行を入れ替えた場合、動かなくなってしまいます。代わりに<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザーの開発者コンソール</a>に <code>TypeError: para is undefined</code> というエラーが出るでしょう。この意味は <code>para</code> オブジェクトがまだ存在しないため、イベントリスナーを設定できないということを表しています。</p> + +<div class="note"> +<p><strong>注</strong>: これはとてもよくあるエラーです。オブジェクトに対して何かをする前にはそのオブジェクトへの参照が存在していることに気を配らなければなりません。</p> +</div> + +<h3 id="Interpreted_versus_compiled_code" name="Interpreted_versus_compiled_code">インタープリターとコンパイルコード</h3> + +<p>もしかしたら、<strong>インタープリター</strong>と<strong>コンパイル</strong>という用語をプログラミングの文脈で聞いたことがあるかもしれませんね。インタープリターでは、コードが上から下に実行されてコードの実行結果がすぐに返ってきます。ブラウザーが実行する前にコードを何らかの形に変換する必要はありません。コードはプログラマーに親しみやすいテキストで受け取って、それから直接処理されます。</p> + +<p>反対に、コンパイル言語はコンピューターで実行する前に他の形式に変換 (コンパイル) しなければなりません。例えば C/C++ は機械語にコンパイルされてから、コンピューターで実行されます。プログラムは、元のプログラムソースコードから生成されるバイナリーフォーマットで実行されます。</p> + +<p>JavaScript は軽量なインタープリター型プログラミング言語です。ウェブブラウザーは元のテキストの形で JavaScript コードを受け取り、それからスクリプトを実行します。技術的な見地からは、たいていの JavaScript インタープリターは <strong>just-in-time compiling</strong> というテクニックを使ってパフォーマンスを向上させています; スクリプトが使われるときに、JavaScript コードが速いバイナリーフォーマットにコンパイルされて、可能な限り高速に実行されます。しかし、JavaScript は、事前ではなく実行時にコンパイルされるために、インタープリター言語と考えられています。</p> + +<p>ここで詳細は話しませんが、どちらの方式も長所と短所があります。</p> + +<h3 id="Server-side_versus_client-side_code" name="Server-side_versus_client-side_code">サーバーサイドコードとクライアントサイドコード</h3> + +<p><strong>サーバーサイド</strong>と<strong>クライアントサイド</strong>という言葉も聞いたことがあるかもしれません。特にウェブ開発でよく聞かれます。クライアントサイドコードはユーザーのコンピューター上で実行されるコードです。ウェブページを見ているとき、ページのクライアントサイドコードがダウンロードされて、ブラウザーで実行されて表示されます。この JavaScript モジュールのことを明示的に<strong>クライアントサイド JavaScript </strong>と言います。</p> + +<p>反対に、サーバーサイドコードはサーバー上で実行され、結果がブラウザーにダウンロードされて表示されます。ウェブで人気のあるサーバーサイドの言語は、PHP、Python、Ruby や ASP.NET など。そして JavaScript です！ JavaScript はサーバーサイドの言語としても使われます。人気のある Node.js 環境がその例です。サーバーサイドの JavaScript については <a href="/ja/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a> のトピックを見てください。</p> + +<h3 id="Dynamic_versus_static_code" name="Dynamic_versus_static_code">動的コードと静的コード</h3> + +<p>クライアントサイドの JavaScript と、サーバーサイドの言語を説明するのに<strong>動的</strong>という言葉を使います。これはウェブページやウェブアプリが必要に応じてコンテンツを生成し、異なる状況において異なる表示ができるという能力を指しています。サーバーサイドのコードは、データベースからデータを取得して動的にコンテンツを生成します。一方、クライアントサイドの JavaScript はクライアント上のブラウザーで HTML のテーブルを生成したり、そのテーブルにサーバーから指示を受け、データを追加したり、ウェブページ上でユーザーにテーブルを表示したりするなどして、動的にコンテンツを生成します。それぞれの文脈で、少し異なる意味合いではありますが、関連しています。そしてどちらの方式も (サーバーサイドもクライアントサイドも) たいていは同時に使用されます。</p> + +<p>動的に更新されるコンテンツを含まないウェブページは<strong>静的</strong>と表現されます。静的なウェブページとは常に同じコンテンツを表示するページのことです。</p> + +<h2 id="How_do_you_add_JavaScript_to_your_page" name="How_do_you_add_JavaScript_to_your_page">ページに JavaScript を追加する方法</h2> + +<p>JavaScript は CSS と同じような方法で、HTML ページに適用することができます。CSS では {{htmlelement("link")}} 要素を使用することで外部のスタイルシートを適用することができ、また、{{htmlelement("style")}} 要素を使用することで HTML 内部に書かれたスタイルシートを適用することが出来ました。しかし、JavaScript で HTML に書く必要があるのは {{htmlelement("script")}} 要素だけです。どのように書くのか見てみましょう。</p> + +<h3 id="Internal_JavaScript" name="Internal_JavaScript">内部の JavaScript</h3> + +<ol> + <li>まずは <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a> ファイルを自分のコンピューターにコピーします。どこか適当な場所に保存してください。</li> + <li>テキストエディターとウェブブラウザーでそのファイルを開いてください。クリックできるボタンが 1 つあるウェブページを作る HTML だということがわかりますね。</li> + <li>次に、テキストエディターで <code></head></code> タグの直前に以下のコードを追加します。 + <pre class="brush: html notranslate"><script> + + // JavaScript をここに書きます + +</script></pre> + </li> + <li>それでは {{htmlelement("script")}} 要素内に JavaScript を書いて、もうちょっと面白いことをしてみましょう。「// JavaScript をここに書きます」と書いてあるすぐ下に、以下のコードを追加してください。 + <pre class="brush: js notranslate">document.addEventListener("DOMContentLoaded", function() { + function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'ボタンが押されました!'; + document.body.appendChild(para); + } + + const buttons = document.querySelectorAll('button'); + + for(let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); + } +});</pre> + </li> + <li>ファイルを保存してブラウザーを更新してください。ボタンを押す度に新しい段落が作られて、下に表示されるようになりましたね。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: もし上記の例が上手く動いていないとしたら、もう一度最初から手順を確認してください。コピーしてコードを書いたファイルは <code>.html</code> というファイル名ですか？ {{htmlelement("script")}} 要素を <code></head></code> タグの直前に追加しましたか？ JavaScript を上の例の通りに書きましたか？<strong> JavaScript は大文字小文字を区別しますので、見えている通りに書かなければなりません。正しく書いていなければ、動いてくれません。</strong>文字化けしているなら、テキストエディターの文字エンコーディングの設定が UTF-8 になっていることを確認してください。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: GitHub にあるこちらのバージョン、<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">動くバージョンもあります</a>) を見ることもできます。</p> +</div> + +<h3 id="External_JavaScript" name="External_JavaScript">外部の JavaScript</h3> + +<p>これで JavaScript が動きましたね。しかし、JavaScript を外部のファイルに書きたいときはどうすればよいでしょうか？ 次の例を見てみましょう。</p> + +<ol> + <li>まず、先ほどの HTML ファイルと同じディレクトリーに新しいファイルを作ります。これを <code>script.js</code> と名付けます。.js という拡張子であることを確認してください。それで JavaScript であると認識されるのです。</li> + <li>{{htmlelement("script")}} 要素を以下のコードで置き換えます。 + <pre class="brush: html notranslate"><script src="script.js" defer></script></pre> + </li> + <li><code>script.js</code> に、次のスクリプトを追加します。 + <pre class="brush: js notranslate">function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'ボタンが押されました!'; + document.body.appendChild(para); +} + +const buttons = document.querySelectorAll('button'); + +for(let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + </li> + <li>HTML ファイルを保存して、ブラウザーを更新してください。同じページが見えますね！ 同じように動いていますが、今回は外部の JavaScript ファイルです。コードを整理して、複数の HTML ファイルから再利用できるようにするには、このようにするのが良いでしょう。大きなスクリプトの塊がないほうが、HTML も読みやすくなります。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: GitHub でこちらのバージョンも見られます。<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> です (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">動いているバージョンもあります</a>)。</p> +</div> + +<h3 id="Inline_JavaScript_handlers" name="Inline_JavaScript_handlers">インラインの JavaScript ハンドラー</h3> + +<p>たまに JavaScript のコードが HTML の途中に書かれているのを見かけます。こんな感じで。</p> + +<div id="inline_js_example"> +<pre class="brush: js example-bad notranslate">function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'ボタンが押されました！'; + document.body.appendChild(para); +}</pre> + +<pre class="brush: html example-bad notranslate"><button onclick="createParagraph()">押してください</button></pre> +</div> + +<p>このバージョンのデモを下のボタンを押して確認してください。</p> + +<p>{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>このデモは先ほどのセクションのものと同じ機能を持っていますが、{{htmlelement("button")}} 要素に <code>onclick</code> 属性を付けてボタンが押されたときに関数が実行されるようにハンドラーを直接書いています。</p> + +<p><strong>書けはしますが、このようにはしないでください。</strong>この書き方は HTML を JavaScript で汚してしまう悪い書き方です。さらに、<code>onclick="createParagraph()"</code> という属性を JavaScript を適用したいボタンすべてに書かなければなりませんので、とても非効率です。</p> + +<p>純粋な JavaScript では、1 つの命令ですべてのボタンが取得できます。先ほど使用した、すべてのボタンを取得するためのコードは以下の通りでした。</p> + +<pre class="brush: js notranslate">const buttons = document.querySelectorAll('button'); + +for(let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + +<p>これは <code>onclick</code> 属性を用いて書くより少し長いように見えますが、どれだけそのページにボタンを追加し、削除し、いくつあろうとも期待通りに動くでしょう。コードを変更することなく。</p> + +<div class="note"> +<p><strong>注</strong>: 自分の <code>apply-javascript.html</code> ファイルを編集して、いくつかボタンを追加してみて下さい。再度読み込むとどのボタンを押しても段落が作られるのがわかるでしょう。素敵でしょ！</p> +</div> + +<h3 id="Script_loading_strategies" name="Script_loading_strategies">スクリプトの読み込み方針</h3> + +<p>スクリプトを適切なタイミングで読み込むためには、いくつかの問題があります。 それは見掛けほど簡単ではありません！ 一般的な問題は、ページ上のすべての HTML が、現れた順に読み込まれることです。JavaScript を使用してページ上の要素（またはより正確には、<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">Document Object Model</a>）を操作している場合、何かをしようとする HTML の前に JavaScript が読み込まれ、解析されてもコードは機能しません。</p> + +<p>上のコード例では、内部の例と外部の例は、HTML 本文が解析される前に JavaScript が読み込まれて文書の head で実行されています。これによりエラーが発生する可能性があるため、いくつかの構文を使用して回避しています。</p> + +<p>内部の例では、コードの周りにこの構造を見ることができます。</p> + +<pre class="brush: js notranslate">document.addEventListener("DOMContentLoaded", function() { + ... +});</pre> + +<p>これはブラウザーの "DOMContentLoaded" イベントをリッスンするイベントリスナーで、HTML body が完全に読み込まれて解析されたことを示します。このブロック内の JavaScript はそのイベントが発生するまで実行されないため、エラーは回避されます (コースの後半で<a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントについて学習</a>します) 。</p> + +<p>外部の例では、より現代的な JavaScript 機能の <code>defer</code> 属性を使用して問題を解決し、<code><script></code> 要素に達した後も HTML コンテンツのダウンロードを続行するようブラウザーに指示します。</p> + +<pre class="brush: js notranslate"><script src="script.js" defer></script></pre> + +<p>この場合、スクリプトと HTML の両方が同時に読み込まれ、コードが機能します。</p> + +<div class="note"> +<p><strong>注</strong>: 外部のケースでは、<code>defer</code> 属性が問題を解決したため、<code>DOMContentLoaded</code> イベントを使用する必要はありませんでした。<code>defer</code> は外部スクリプトに対してのみ機能するため、内部の例では <code>defer</code> による解決策を使用しませんでした。</p> +</div> + +<p>この問題に対する昔ながらの解決策は、すべての HTML が解析された後に読み込まれるように、body の下部に（たとえば <code></body></code> タグの直前に）script 要素を置くことでした。この解決策（および上記の <code>DOMContentLoaded</code> による解決策）の問題点は、HTML DOM が読み込まれるまでスクリプトの読み込みと解析が完全にブロックされることです。JavaScript がたくさんある大規模なサイトでは、これは大きなパフォーマンス上の問題を引き起こす可能性があり、サイトを遅くします。</p> + +<h4 id="async_and_defer" name="async_and_defer">async と defer</h4> + +<p>実際には、スクリプトのブロッキングの問題を回避できるモダンな機能が 2 つあります — <code>async</code> と <code>defer</code>(すでに見てきました)。これらの 2 つの違いを見てみましょう。</p> + +<p><code>async</code> 属性を使って読み込むスクリプトは(下記を見てください)、ページのレンダリングをブロックせずにスクリプトをダウンロードし、スクリプトのダウンロードが終了すると直ちに実行します。複数のスクリプトが特定の順序で実行されるという保証はありませんが、ページの残りの部分の表示を停止することはありません。ページ内のスクリプトが互いに独立して実行され、ページ上の他のスクリプトに依存しない場合は、<code>async</code> を使用することをお勧めします。</p> + +<p>たとえば、次のスクリプト要素があるとします。</p> + +<pre class="brush: html notranslate"><script async src="js/vendor/jquery.js"></script> + +<script async src="js/script2.js"></script> + +<script async src="js/script3.js"></script></pre> + +<p>スクリプトが読み込まれる順序に依存することはできません。<code>jquery.js</code> は <code>script2.js</code> と <code>script3.js</code> に前後して読み込まれます。この場合、<code>jquery</code> に依存するこれらのスクリプトの関数は、スクリプトの実行時に <code>jquery</code> が定義されないため、エラーを生成します。</p> + +<p>読み込むバックグラウンドスクリプトがいくつもあって、それらをできるだけ早く実行したい場合に <code>async</code> を使用するべきです。例えば、ゲームを実際に開始するときに必要になるいくつかのロードすべきゲームデータファイルがあるとして、今のところは、スクリプトのロードによってブロックされずに、ゲームのイントロ、タイトル、ロビーを表示したいだけ、という場合です。</p> + +<p><code>defer</code> 属性つきのスクリプト(下記のようなもの)は、ページに現れた順序でスクリプトを実行し、スクリプトとコンテンツがダウンロードされるとすぐにスクリプトを実行します。</p> + +<pre class="brush: html notranslate"><script defer src="js/vendor/jquery.js"></script> + +<script defer src="js/script2.js"></script> + +<script defer src="js/script3.js"></script></pre> + +<p><code>defer</code> 属性を持つすべてのスクリプトは、ページに現れた順序で読み込まれます。したがって、2番目の例では、<code>jquery.js</code> が <code>script2.js</code> と <code>script3.js</code> の前に読み込まれ、<code>script2.js</code> が <code>script3.js</code> の前に読み込まれることは確実です。ページコンテンツがすべて読み込まれるまでは、実行せず、これはスクリプトが DOM配置に依存している場合に便利です(例: ページの要素を変更する場合)</p> + +<p>要約すると、</p> + +<ul> + <li><code>async</code> と <code>defer</code> の両方とも、ページのその他の部分 (DOM など) がダウンロード中な時でも、ブラウザーにスクリプトを別々のスレッドでダウンロードするよう指示して、このためページ読み込みはスクリプトでブロックされません。</li> + <li>依存関係なしでスクリプトを単独ですぐに実行できる場合は、<code>async</code> を使用します。</li> + <li>スクリプトが他のスクリプトや DOM配置に依存している場合は、<code>defer</code> を使用してスクリプトを読み込み、対応する <code><script></code> 要素をブラウザーで実行して欲しい順序で配置します。</li> +</ul> + +<h2 id="コメント">コメント</h2> + +<p>HTML や CSS と同様に、JavaScript でもコード内にブラウザーが実行しない「コメント」を書くことができます。仲間の開発者 (または、6 カ月後のコードを忘れた自分自身) に対して動作方法を書くことができます。コメントはとても便利ですしたくさん書きましょう。大きなプログラムを書くのならなおのことです。コメントの書き方は 2 種類あります。</p> + +<ul> + <li>1 行で収まるコメントは 2 つのスラッシュ (//) のあとに続けて書きます。 + <pre class="brush: js notranslate">// これはコメントです</pre> + </li> + <li>複数行に渡るコメントは /* から */ の間に書きます。 + <pre class="brush: js notranslate">/* + これも + コメントです +*/</pre> + </li> +</ul> + +<p>先ほどのデモでコメントを書くならば、以下のようにします。</p> + +<pre class="brush: js notranslate">// 関数: HTML の body タグ内の一番下に新しい段落を追加します。 + +function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'ボタンが押されました！'; + document.body.appendChild(para); +} + +/* + 1. ページ内のボタンへの参照をすべて取り出して配列に入れる。 + 2. すべてのボタンをループで回し、クリックイベントのリスナーを追加する + + どのボタンが押されても、createParagraph() 関数が実行されるようにする。 +*/ + +const buttons = document.querySelectorAll('button'); + +for (let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + +<div class="note"> +<p><strong>メモ</strong>: 一般的にコメントは多いほうが少ないよりも優れていますが、変数が何であるかを説明する (変数名はおそらくもっと直感的にするべきです) ため、または非常に単純な操作を説明する (コードが複雑すぎるかもしれません) ために、多くのコメントを追加する場合は注意が必要です。</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>さて、JavaScript の世界に足を踏み入れましたね。なぜ JavaScript を使い、何ができるのかということに慣れるため、まずは理論から始めました。進むにつれ、少しでしたが例を見て、何よりも JavaScript がどのようにウェブサイトの他のコードに組み込まれているかを学習しました。</p> + +<p>JavaScript が少し大変だと思いましたか。でも心配は無用です。このコースを受講することで一歩ずつ、理解しながら前に進んで行きましょう。次の記事で、まっすぐに飛び込んで自分で JavaScript のページを作って<a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">実践に飛び込んでいきましょう</a>。</p> + +<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での演算の基本 — 数値と演算子について</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> +</ul> diff --git a/files/ja/learn/javascript/first_steps/what_went_wrong/index.html b/files/ja/learn/javascript/first_steps/what_went_wrong/index.html new file mode 100644 index 0000000000..accce26c15 --- /dev/null +++ b/files/ja/learn/javascript/first_steps/what_went_wrong/index.html @@ -0,0 +1,265 @@ +--- +title: 何が間違っている? JavaScript のトラブルシューティング +slug: Learn/JavaScript/First_steps/What_went_wrong +tags: + - Article + - Beginner + - CodingScripting + - Debugging + - Developer Tools + - Error + - JavaScript + - Learn + - Tutorial + - console.log + - 'l10n:priority' +translation_of: Learn/JavaScript/First_steps/What_went_wrong +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">前の記事の「数字当てゲーム」を作っていて、動かないことはありませんでしたか？恐れることはありません。この記事では、そんな心配をしなくて済むように、JavaScript のエラーを見つけて直す方法を伝授します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、HTML および CSS の基本的な理解、JavaScript についての理解。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>コード内のシンプルな問題を修正し始める能力と自信を得る。</td> + </tr> + </tbody> +</table> + +<h2 id="Types_of_error" name="Types_of_error">エラーの種類</h2> + +<p>コードに誤りがある場合、一般的に以下の 2 つのうち、どちらかの誤りであることがよくあります。</p> + +<ul> + <li><strong>文法エラー</strong>: プログラムが全く動かなかったり、途中で止まったりするような記述エラーで、通常はエラーメッセージが出力されます。正しいツールに慣れて、エラーメッセージの内容がわかるのなら、さほど無理なく修正が可能です。</li> + <li><strong>論理のエラー</strong>: 書き方は正しくても、コードが意図した通りに動ないエラーです。つまりプログラムは動くのですが、間違った結果を返します。たいていの場合に、問題となる箇所に直接のエラーメッセージが出ることがないため、文法エラーよりも直すのが難しいことが多いです。</li> +</ul> + +<p>まあ、こんなに単純ではありません。もっと深く追及していくと違う種類のエラーも出てくることでしょう。しかし、見習いのうちは上の分類で十分です。上記2 つの種類のエラーについて見ていきましょう。</p> + +<h2 id="An_erroneous_example" name="An_erroneous_example">誤りの例</h2> + +<p>始めるにあたり、数字当て (今回は当たらない) ゲームに戻りましょう。わざとエラーになるバージョンを見ていきます。Github に行って <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> をローカルにコピーしてください。(<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">ライブ実行はこちら</a>を見てください)</p> + +<ol> + <li>始めるには、コピーしたファイルをお好みのテキストエディターとブラウザで開きます。</li> + <li>ゲームで遊んでみてください。気づきましたか。"予想を入力" ボタンを押しても動きません！</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: もしかしたら、あなたにも直したいと思っているバージョンがあるかもしれませんね。ですが、まずはこちらで用意したバージョンを直してみてください。そうすれば、ここで教えるテクニックが身につきます。それから、あなた自身のプログラムに戻って直してみてください。</p> +</div> + +<p>それでは、開発者コンソールで文法エラーがあるか調べてみましょう。それからエラーを修正します。どうやって修正すればいいかは今から教えます。</p> + +<h2 id="Fixing_syntax_errors" name="Fixing_syntax_errors">文法エラーを修正する</h2> + +<p>以前に<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツールの JavaScript コンソール</a>で、簡単なコマンドを入力してもらったことがあったと思います。(思い出せなければ、リンクを見て開き方を調べてください。) コンソールの何が便利かといえば、ブラウザの JavaScript エンジンに読み込ませようとしている JavaScript コードに文法エラーがあれば、すべて教えてくれるのです。さあ、バグを潰していきましょう。</p> + +<ol> + <li><code>number-game-errors.html</code> ファイルを開いているタブを選択して、JavaScript コンソールを開いてください。以下のメッセージが表示されていますね。<img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li> + <li>これは分かりやすいエラーです。ブラウザからもいくつか情報が出ています。(上のスクリーンショットは FireFox のものですが、他のブラウザでも同様の情報が表示されるでしょう。) 左から順に説明します。 + <ul> + <li>赤色の 「x」 ボタンはエラーがあることを示しています。</li> + <li>「TypeError: guessSubmit.addeventListener is not a function」というエラーメッセージが、何が問題かを示しています。</li> + <li>「Learn More」 のリンクがエラー内容についてもっと詳細に説明する MDN のページを指しています。</li> + <li>JavaScript のファイルの名前が出ています。このリンクをクリックすると、開発者ツールのデバッガータブで問題のあるファイルが開きます。ハイライトされているエラーの箇所が見えるでしょう。</li> + <li>エラーがある行の行番号と、最初の文字が始まる番号が出ています。上の例では 86行目の 3文字目です。</li> + </ul> + </li> + <li>テキストエディターで 86行目を見てみましょう。 + <pre class="brush: js notranslate">guessSubmit.addeventListener('click', checkGuess);</pre> + </li> + <li>エラーでは、"guessSubmit.addeventListener is not a function" とあり、これは JavaScript インタープリタに呼び出している関数が認識されないという意味です。しばしば、このエラーメッセージは、スペルミスをしたということです。もし正しい綴りがわからなければ、MDN のサイトで使用している機能を調べてみてください。きっと見つかります。いつもはお好みの検索エンジンで「mdn <em>機能の名前</em>」と検索してみるのがよいでしょう。今回は代わりに <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> のリンクを張っておきます。</li> + <li>ページによると、関数の名前を間違えたみたいですね！JavaScript は大文字・小文字を区別しますので、ちょっとでも違うとエラーの原因になることを覚えておきましょう。それでは <code>addeventListener</code> を <code>addEventListener</code> に修正してエラーを直しましょう。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a> のリファレンスページで、このエラーに関する詳細な説明が見られます。</p> +</div> + +<h3 id="Syntax_errors_round_two" name="Syntax_errors_round_two">文法エラーその 2</h3> + +<ol> + <li>ファイルを保存してブラウザを更新すると、エラーが消えています。</li> + <li>予想を入力して、予想を入力ボタンを押してみると、...別のエラーが起きています！<img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li> + <li>今回のエラーを見ると、78行目で"TypeError: lowOrHi is null"が起きています。 + <div class="note"><strong>注</strong>: <code><a href="/ja/docs/Glossary/Null">Null</a></code> は「何もない」ことや「値がない」ことを表す特別な値です。つまり <code>lowOrHi</code> が宣言されて初期化されているけれど、意味のある値ではない — つまり型も値もないということです。</div> + + <div class="note"><strong>注</strong>: このエラーは関数内部 (<code>checkGuess() { ... }</code> ブロックの中) で発生したため、ページを読み込んだだけでは出てきませんでした。後に続く<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数の記事</a>を読み進めていけば分かりますが、内側の関数のスコープは外側の関数のスコープとは異なります。今回のケースでは、86行目の <code>checkGuess()</code> 関数が実行されるまで実行されず、エラーも発生していませんでした。</div> + </li> + <li>78行目を見てください。以下のコードが書かれています。 + <pre class="brush: js notranslate">lowOrHi.textContent = '今の予想は大きすぎです!';</pre> + </li> + <li>この行は <code>lowOrHi</code> 定数の <code>textContent</code> プロパティに文字列を設定しようとしていますが、<code>lowOrHi</code> 定数に適切な値が設定されていないため上手く動きません。<code>lowOrHi</code> が使用されている箇所をコードのほかの部分から探してみましょう。最初に見つかるのは 48行目でしょう。 + <pre class="brush: js notranslate">const lowOrHi = document.querySelector('lowOrHi');</pre> + </li> + <li>ここでは、HTML の要素を参照する変数を作ろうとしています。この行の後ろで、値が <code>null</code> になっているか確認するため以下のコードを直後の 49行目に追加します。 + <pre class="brush: js notranslate">console.log(lowOrHi);</pre> + + <div class="note"> + <p><strong>注</strong>: <code><a href="/ja/docs/Web/API/Console/log">console.log()</a></code> は値をコンソールに出力する、デバッグするときにとても便利な関数です。これで 48行目で <code>lowOrHi</code> にセットしたはずの値がコンソールに出力されるでしょう。</p> + </div> + </li> + <li>ファイルを保存して再度ブラウザで読み込みます。そして <code>console.log()</code> の結果をコンソールで見てみましょう。 <img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;">わかりましたね。<code>lowOrHi</code> の値は <code>null</code> でした。これで問題が 48行目にあることがわかりました。</li> + <li>それでは何が問題となり得るか考えてみましょう。48行目では要素への参照を CSS セレクタを使用して取得する <code><a href="/ja/docs/Web/API/Document/querySelector">document.querySelector()</a></code> メソッドが使用されています。ファイルの少し上のほうにある、問題となる{{htmlelement("p")}} 要素を見てみましょう。 + <pre class="brush: js notranslate"><p class="lowOrHi"></p></pre> + </li> + <li>ここではクラスセレクタが必要です。クラスセレクタはドット (<code>.</code>) で始まりますが、48行目で <code>querySelector()</code> メソッドに渡された文字列にはドットがありません。これが問題でしょう！48行目の <code>lowOrHi</code> を <code>.lowOrHi</code> に変更してみてください。</li> + <li>ファイルを保存して再度読み込むと、<code>console.log()</code> の文は求めていた <code><p></code> 要素を表示しています。何とか次のエラーを潰すことができました！<code>console.log()</code> の行は削除してもいいですし、後で使うために残しておいても大丈夫です。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> のリファレンスページで、このエラーに関する詳細な説明が見られます。</p> +</div> + +<h3 id="Syntax_errors_round_three" name="Syntax_errors_round_three">文法エラーその 3</h3> + +<ol> + <li>さて、もう一度ゲームをプレイしてみましょう。ゲームは問題なく動いているようです。正解するか、残りの予想回数がなくなって、ゲームが終わるまでは...。</li> + <li>ここで、またゲームが止まってしまいました。最初のエラーと同じく "TypeError: resetButton.addeventListener is not a function" というエラーです！しかし、今回は 94行目から発生していると表示されています。</li> + <li>94行目を見ると、同じ間違いを犯したことがわかります。もう一度 <code>addeventListener</code> を <code>.addEventListener</code> に直してください。</li> +</ol> + +<h2 id="A_logic_error" name="A_logic_error">論理のエラー</h2> + +<p>今回はゲームは上手く動いているようです。しかし、何度か動かしていると、予想すべき「ランダムな」数字が常に 1 であることに気づくでしょう。これはあまりやりたくないゲームですね！</p> + +<p>これはゲームのロジックに間違いなく問題があります。ゲームはエラーとはなっていませんが、正しく動いてはいません。</p> + +<ol> + <li><code>randomNumber</code> 変数にランダムな数値が最初にセットされる場所を検索してみましょう。ゲームの開始で推測するランダムな数字を保存しようとしているのは 44行目のあたりです。 + + <pre class="brush: js notranslate">let randomNumber = Math.floor(Math.random()) + 1;</pre> + そして、それぞれのゲームの合間に次のランダムな数字を設定しているのは 113行目のあたりです。</li> + <li> + <pre class="brush: js notranslate">randomNumber = Math.floor(Math.random()) + 1;</pre> + </li> + <li>これらの行が問題となるかを確認するため、<code>console.log()</code> にもう一度登場してもらいましょう。先ほどのそれぞれの行の直下に以下のコードを追加します。 + <pre class="brush: js notranslate">console.log(randomNumber);</pre> + </li> + <li>保存して再度読み込んで、何度かプレイしてみましょう。コンソールに出力される <code>randomNumber</code> の値が常に 1 であることに気づきます。</li> +</ol> + +<h3 id="Working_through_the_logic" name="Working_through_the_logic">ロジックを何とかする</h3> + +<p>これを直すには、この行が何をしているのか考えなければなりません。まず <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code> を呼んでいます。これは 0 から 1 までのランダムな実数値を生成します。例えば 0.5675493843 などです。</p> + +<pre class="brush: js notranslate">Math.random()</pre> + +<p>次に <code>Math.random()</code> の実行結果を <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code> に渡して、一番近い整数に切り捨てています。そしてその結果に 1 を加えます。</p> + +<pre class="notranslate">Math.floor(Math.random()) + 1</pre> + +<p>0 から 1 のランダムな実数を切り捨てると、結果は常に 0 となり、それに 1 を加えることで常に 1 となります。ランダムな数を切り捨てる前に 100 を乗算しなければなりません。次のコードは 0 から 99 を返すでしょう。</p> + +<pre class="brush: js notranslate">Math.floor(Math.random()*100);</pre> + +<p>さらに 1 を加えることで、1 から 100 のランダムな数字を返してくれるようになります。</p> + +<pre class="brush: js notranslate">Math.floor(Math.random()*100) + 1;</pre> + +<p>先ほどの 2行をそれぞれ修正してください。保存して再度読み込むと、思い通りに動くようになっているでしょう！</p> + +<h2 id="Other_common_errors" name="Other_common_errors">その他のよくあるエラー</h2> + +<p>コードを書いていると、よくあるエラーは他にもあります。このセクションではそれらを紹介してみましょう。</p> + +<h3 id="SyntaxError_missing_before_statement" name="SyntaxError_missing_before_statement">SyntaxError: missing ; before statement</h3> + +<p>たいてい、このエラーはコード行のどこかの末尾にセミコロン (;) がないことを意味しています。しかし、時にはかなり難解です。例えば <code>checkGuess()</code> 関数内の、この行を</p> + +<pre class="brush: js notranslate">var userGuess = Number(guessField.value);</pre> + +<p>以下のように変更してみます。</p> + +<pre class="brush: js notranslate">var userGuess === Number(guessField.value);</pre> + +<p>そうすると、このエラーが吐かれます。違うことをやろうとしているように見えるのでしょう。値を変数にセットする代入演算子 (<code>=</code>) と、ある値が別の値と同じかどうかを判定して <code>true<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> または </span></font></code><code>false</code> を返す等値演算子 (<code>===</code>) を間違わないようにしてください。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: missing ; before statement</a> のリファレンスページで、このエラーに関する詳細な説明が見られます。</p> +</div> + +<h3 id="The_program_always_says_youve_won_regardless_of_the_guess_you_enter" name="The_program_always_says_you've_won_regardless_of_the_guess_you_enter">プログラムが入力の内容に関わらずいつでも勝ちだと言ってくる</h3> + +<p>これは代入と比較を混同する別の症状でしょう。たとえば、<code>checkGuess()</code> 関数内の、この行を</p> + +<pre class="brush: js notranslate">if (userGuess === randomNumber) {</pre> + +<p>以下のように変更してみます。</p> + +<pre class="brush: js notranslate">if (userGuess = randomNumber) {</pre> + +<p>判定で常に <code>true</code> が返るようになり、常にプレイヤーが勝ったことになってしまいます。気を付けましょう！</p> + +<h3 id="SyntaxError_missing__after_argument_list" name="SyntaxError_missing_)_after_argument_list">SyntaxError: missing ) after argument list</h3> + +<p>これは単純です。大体は関数やメソッドの呼び出しで閉じ括弧を忘れたことを表しています。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a> のリファレンスページで、このエラーに関する詳細な説明が見られます。</p> +</div> + +<h3 id="SyntaxError_missing_after_property_id" name="SyntaxError_missing_after_property_id">SyntaxError: missing : after property id</h3> + +<p>たいてい、このエラーは JavaScript のオブジェクトの書き方が正しくないことに関連しているのですが、</p> + +<pre class="brush: js notranslate">function checkGuess() {</pre> + +<p>上記のコードを以下のように変えても起きるでしょう。</p> + +<pre class="brush: js notranslate">function checkGuess( {</pre> + +<p>この変更でブラウザは関数の内容を関数の引数として渡しているように勘違いしてしまいます。括弧には気を付けましょう！</p> + +<h3 id="SyntaxError_missing_after_function_body" name="SyntaxError_missing_after_function_body">SyntaxError: missing } after function body</h3> + +<p>これは簡単ですね。たいていの場合、関数や条件ブロックの終わりの閉じ波括弧が抜けていることを表します。<code>checkGuess()</code> 関数の最後の閉じ波括弧を消すと発生します。</p> + +<h3 id="SyntaxError_expected_expression_got_string_or_SyntaxError_unterminated_string_literal" name="SyntaxError_expected_expression_got_'string'_or_SyntaxError_unterminated_string_literal">SyntaxError: expected expression, got '<em>string</em>' または SyntaxError: unterminated string literal</h3> + +<p>これらのエラーは文字列の始まりもしくは終わりのクォーテーションマークが抜けていることを表します。最初のエラーは、文字列の始めのクォーテーションマークの代わりに、ブラウザが予期しない文字列を見つけた (string には実際に見つけた文字列が入ります) ことを表し、2 つ目のエラーは文字列がクォーテーションマークで終わっていないことを表します。</p> + +<p>どのエラーにも言えることですが、上の例でも見たように、考えてください。エラーが起きた時に、エラーが起きた行の番号をみて、その行にエラーがあるか見てみます。エラーはその行に存在しないこともありますし、上述した理由以外で起きることもあるということを心に留めておいてください。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a> と <a href="/ja/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a> のリファレンスページで、これらエラーに関する詳細な説明が見られます。</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>やっとここまで来ましたね。簡単な JavaScript プログラムのエラーを見つけ出すための基本が理解できました。コードの間違いを解決するのがいつも簡単とは限りませんが、特に学習の最初の過程では、うまくいかない時にも寝る時間を数時間節約し、多少早く進捗をあげられるでしょう。</p> + +<h2 id="See_also" name="See_also">あわせて参照</h2> + +<div> +<ul> + <li>ここで挙げたもの以外にもいくつかのエラーの種類があります。詳細はリファレンスをご覧ください。( <a href="/ja/docs/Web/JavaScript/Reference/Errors">JavaScript エラーリファレンス</a> )</li> + <li>この記事を読んでもまだ直し方がわからないエラーに遭遇した場合は助けを求めましょう！ <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse フォーラムの Learning カテゴリー</a>や <a class="external external-icon" href="https://wiki.mozilla.org/Matrix">Matrix</a> の <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs ルーム</a>などで聞いてください。{{訳注("いずれも英語ベースのもの")}}。日本語では <a href="https://join.slack.com/t/mozillajp/shared_invite/MjI2NDMwODUwNzY5LTE1MDI4MjEyMjktYjE2MThlMmM4OA">Mozilla Japan コミュニティの Slack</a> など。どんなエラーなのか教えてくれれば、助けてあげられるかもしれません。コードを見せてくれてもいいですね。</li> +</ul> +</div> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "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> diff --git a/files/ja/learn/javascript/howto/index.html b/files/ja/learn/javascript/howto/index.html new file mode 100644 index 0000000000..528ce80fe4 --- /dev/null +++ b/files/ja/learn/javascript/howto/index.html @@ -0,0 +1,302 @@ +--- +title: JavaScriptのコードのよくある問題を解決する +slug: Learn/JavaScript/Howto +tags: + - Beginner + - JavaScript + - Learn +translation_of: Learn/JavaScript/Howto +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">JavaScript のコードが正しく動作しないので修正したい、というような場合にみられる、よくある問題の解決方法へのリンクを以下に示します。</p> + +<h2 id="Common_beginner's_mistakes" name="Common_beginner's_mistakes">初学者がよく陥る誤り</h2> + +<h3 id="Correct_spelling_and_casing" name="Correct_spelling_and_casing">スペル、大文字小文字を訂正する</h3> + +<p>コードが正しく動かない場合や、何かが未定義であるとブラウザーがエラーを出した場合、変数名や関数名のスペルが正しいか確認してください。</p> + +<p>ブラウザーの組み込み関数についての正誤例:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">正</th> + <th scope="col">誤</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>getElementsByTagName()</code></td> + <td><code>getElementbyTagName()</code></td> + </tr> + <tr> + <td><code>getElementsByName()</code></td> + <td><code>getElementByName()</code></td> + </tr> + <tr> + <td><code>getElementsByClassName()</code></td> + <td><code>getElementByClassName()</code></td> + </tr> + <tr> + <td><code>getElementById()</code></td> + <td><code>getElementsById()</code></td> + </tr> + </tbody> +</table> + +<h3 id="Semi-colon_position" name="Semi-colon_position">セミコロンの位置</h3> + +<p>セミコロンの位置に誤りがないか確認してください。</p> + +<p>例:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">正</th> + <th scope="col">誤</th> + </tr> + <tr> + <td><code>elem.style.color = 'red';</code></td> + <td><code>elem.style.color = 'red;'</code></td> + </tr> + </thead> +</table> + +<h3 id="Functions" name="Functions">関数</h3> + +<p>関数についての誤りは何点かあります。</p> + +<p>よくある誤りの一つとして、関数を定義したがどこからも呼び出していない、というものがあります。</p> + +<p>例:</p> + +<pre class="brush: js">function myFunction() { + alert('This is my function.'); +};</pre> + +<p>上記のコードで定義した関数は、例えば以下のように呼び出さないかぎり何もしません。</p> + +<pre class="brush: js">myFunction();</pre> + +<h4 id="Function_scope" name="Function_scope">関数のスコープ</h4> + +<p><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">関数は関数自身のスコープを持ちます</a>。変数をグローバルに（関数の外で）定義するか、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">戻り値</a>として変数の値を関数の外に返さないかぎり、関数の外から関数の中で定義された変数にアクセスすることはできません。</p> + +<h4 id="Running_code_after_a_return_statement" name="Running_code_after_a_return_statement">return 文の後ろのコードの実行</h4> + +<p>return文で関数から値を返したとき、JavaScript のインタプリタはその関数を終了します。return文の後ろのコードは実行されません。</p> + +<p>Firefox などのいくつかのブラウザーは、return文の後ろにコードが存在する場合、開発者ツールのコンソールにエラーメッセージを出力します。Firefox が出力するメッセージは "unreachable code after return statement" です。</p> + +<h3 id="Object_notation_versus_normal_assignment" name="Object_notation_versus_normal_assignment">オブジェクトリテラル記法 vs 代入</h3> + +<p>通常、JavaScript で代入する場合、等号を使います。</p> + +<p>例:</p> + +<pre class="brush: js">var myNumber = 0;</pre> + +<p><a href="/ja/docs/Learn/JavaScript/Objects">オブジェクト</a>の場合は、メンバー名とその値をコロンで区切り、メンバー間をカンマで区切る必要があります。</p> + +<p>例:</p> + +<pre class="brush: js">var myObject = { + name : 'Chris', + age : 38 +}</pre> + +<h2 id="Basic_definitions" name="Basic_definitions">基本的な定義</h2> + +<div class="column-container"> +<div class="column-half"> +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript#A_high-level_definition">JavaScript とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables#What_is_a_variable">変数とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">文字列とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays#What_is_an_Array">配列とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループとは</a></li> +</ul> +</div> + +<div class="column-half"> +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントとは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics#Object_basics">オブジェクトとは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON#No_really_what_is_JSON">JSON とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#What_are_APIs">Web API とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">DOM とは</a></li> +</ul> +</div> +</div> + +<h2 id="Basic_use_cases" name="Basic_use_cases">初級のユースケース</h2> + +<div class="column-container"> +<div class="column-half"> +<h3 id="General" name="General">全般</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript#How_do_you_add_JavaScript_to_your_page">JavaScript をページに追加するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Comments">JavaScript のコードにコメントを追加するには</a></li> +</ul> + +<h3 id="Variables" name="Variables">変数</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables#Declaring_a_variable">変数を宣言するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables#Initializing_a_variable">変数を値で初期化するには</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables#Updating_a_variable">変数の値を変更するには</a>(<a href="/ja/docs/Learn/JavaScript/First_steps/Math#Assignment_operators">代入演算子</a>についても参照してください)</li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables#Variable_types">JavaScript のデータ型とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables#Loose_typing">「弱い型付け」とは</a></li> +</ul> + +<h3 id="Math" name="Math">数学</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math#Types_of_numbers">Web開発で扱わなければならない数値型とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math#Arithmetic_operators">JavaScript での基本的な算術演算の方法とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math#Operator_precedence">JavaScript での演算子の優先順位とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math#Increment_and_decrement_operators">JavaScript で値をインクリメント、デクリメントするには</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math#Comparison_operators">JavaScript で値を比較するには</a>(どちらが大きいか、ある値が別の値と等しいか、など)</li> +</ul> + +<h3 id="Strings" name="Strings">文字列</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings#Creating_a_string">JavaScript で文字列を作成するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings#Single_quotes_versus_double_quotes">シングルクォーテーションを使うべきか、ダブルクォーテーションを使うべきか</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings#Escaping_characters_in_a_string">文字列をエスケープするには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings#Concatenating_strings">文字列を連結するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">文字列と数値を連結できるかどうか</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_the_length_of_a_string">文字列の長さを調べるには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">文字列内の特定位置の文字を調べるには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_a_substring_inside_a_string_and_extracting_it">文字列から部分文字列を抽出するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods#Changing_case">文字列の大文字・小文字を切り替えるには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods#Updating_parts_of_a_string">文字列内の一部の文字列を別の文字列に置き換えるには</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Arrays" name="Arrays">配列</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays#Creating_an_array">配列を作成するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays#Accessing_and_modifying_array_items">配列内の要素を取得したり変更したりするには</a>(多次元配列の場合についても含む)</li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays#Finding_the_length_of_an_array">配列の長さを調べるには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays#Adding_and_removing_array_items">配列に要素を追加する、もしくは、配列から要素を削除するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays#Converting_between_strings_and_arrays">文字列を分割して配列にするには、もしくは配列を連結して一つの文字列にするには</a></li> +</ul> + +<h3 id="Debugging_JavaScript" name="Debugging_JavaScript">JavaScript のデバッグ</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong#Types_of_error">基本的なエラーの種類とは</a></li> + <li><a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザー開発者ツールとは何か、どのように開くのか</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#The_Console_API">JavaScript コンソールに値を出力するには</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Using_the_JavaScript_debugger">ブレイクポイント等の JavaScript のデバッグ機能を使うには</a></li> +</ul> + +<p>JavaScript のデバッグに関する詳細については、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">JavaScript のよくある問題を扱う</a>を参照してください。よくあるエラーの説明については<a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong#Other_common_errors">その他のよくあるエラー</a>を参照してください。</p> + +<h3 id="Making_decisions_in_code" name="Making_decisions_in_code">コード内での決定</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">変数の値やその他の条件によって異なるコードブロックのうちどれを実行するか決定するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if...else文を使用するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals#Nesting_if_..._else">条件判定のブロックを別のブロックに入れ子にするには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals#Logical_operators_AND_OR_and_NOT">AND や OR、NOT を JavaScript で使用するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals#switch_statements">多くの選択肢を一つの条件として手軽に扱うには</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/conditionals#Ternary_operator">true/false の判定によって 2 つの選択肢から 1 つを手早く選択するのに、三項演算子を使用するには</a></li> +</ul> + +<h3 id="Loopingiteration" name="Loopingiteration">ループ/イテレーション</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">同一のコード片を繰り返し実行するには</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#Exiting_loops_with_break">終了条件にマッチする前に、ループを終了させるには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#Skipping_iterations_with_continue">次の繰り返し処理にスキップするには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while ループ、do ... while ループを使用するには</a></li> + <li>配列内の要素を反復処理する方法</li> + <li>多次元配列の要素を反復処理する方法</li> + <li>オブジェクト内のメンバーを反復処理する方法</li> + <li>配列内にネストされたオブジェクトのメンバーを反復処理する方法</li> +</ul> +</div> +</div> + +<h2 id="Intermediate_use_cases" name="Intermediate_use_cases">中級のユースケース</h2> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Functions_2" name="Functions_2">関数</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Built-in_browser_functions">ブラウザー内での関数を調べるには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Functions_versus_methods">関数とメソッドの違いとは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作成するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Invoking_functions">関数を呼び出すには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions">匿名関数とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Function_parameters">関数を実行するときに引数を指定するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">関数のスコープとは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">戻り値とは何か、どのように戻り値を返すか</a></li> +</ul> + +<h3 id="Objects" name="Objects">オブジェクト</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics#Object_basics">オブジェクトを作成するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics#Dot_notation">ドット記法とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics#Bracket_notation">角括弧を用いた記法とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics#Setting_object_members">オブジェクトのメソッドやプロパティを取得、設定するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics#What_is_this">オブジェクトのコンテキストにおける <code>this</code> とは何か</a></li> + <li><a href="/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">オブジェクト指向プログラミングとは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS#Constructors_and_object_instances">コンストラクターやインスタンスとは何か、それらをどのように作成するか</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS#Other_ways_to_create_object_instances">JavaScript でオブジェクトを作成する方法にはどのようなものがあるか</a></li> +</ul> + +<h3 id="JSON" name="JSON">JSON</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON#JSON_structure">JSON の構造とは、JavaScript から JSON を読み取るには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON#Loading_our_JSON">JSON ファイルをページに読み込むには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON#Converting_between_objects_and_text">JSON からテキストに変換するには、テキストから JSON に変換するには</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Events" name="Events">イベント</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties">イベントハンドラとは何か、どのように使うのか</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these">インラインイベントハンドラとは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#addEventListener()_and_removeEventListener()"><code>addEventListener()</code> 関数は何をするものか、どのように使うのか</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#What_mechanism_should_I_use">自分のページにイベントのコードを追加するのに、どの方法を使用すべきか</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#Event_objects">イベントオブジェクトとは何か、どのように使うのか</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#Preventing_default_behaviour">既定のイベントの挙動を抑制するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">ネストされた要素でどのようにイベントが発火するか(イベントの伝播、キャプチャ、バブリング)</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation">イベントのデリゲートとは何か、どのように動作するか</a></li> +</ul> + +<h3 id="Object-oriented_JavaScript" name="Object-oriented_JavaScript">オブジェクト指向 JavaScript</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">オブジェクトのプロトタイプとは何か</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes#The_constructor_property">コンストラクタープロパティとは何か、どのように使用するか</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes#Modifying_prototypes">どのようにコンストラクターにメソッドを追加するか</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">継承元からメンバーを引き継いで新しいコンストラクターを作成するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance#Object_member_summary">JavaScript で継承を使用すべきときはいつか</a></li> +</ul> + +<h3 id="Web_APIs" name="Web_APIs">Web API</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#Active_learning_Basic_DOM_manipulation">JavaScript を使用して DOM を操作(要素の追加や削除)するには</a></li> +</ul> + +<p> </p> +</div> +</div> diff --git a/files/ja/learn/javascript/index.html b/files/ja/learn/javascript/index.html new file mode 100644 index 0000000000..eee3009b7a --- /dev/null +++ b/files/ja/learn/javascript/index.html @@ -0,0 +1,93 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - CodingScripting + - JavaScript + - JavaScripting beginner + - Landing + - Module + - Topic + - 'l10n:priority' + - 初心者 +translation_of: Learn/JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{Glossary("JavaScript")}} <span id="result_box" lang="ja"><span>はウェブページ上に複雑なものを実装することを可能にするプログラミング言語です。ウェブページが表示されるたびに静的な情報が表示されるだけでなく、タイムリーにコンテンツを更新したり、インタラクティブマップや 2D/3D グラフィックスのアニメーション</span></span><span lang="ja"><span>を表示したり、またはビデオジュークボックスが流れたりします。ほかにもありますが、これらは 間違いなく JavaScript が関係しています。</span></span></p> + +<div class="in-page-callout webdev"> +<h3 id="フロントエンドの_Web_開発者になりたいですか？">フロントエンドの Web 開発者になりたいですか？</h3> + +<p>目標に向かって頑張るために必要な情報をまとめたコースをご用意しました。</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> +</div> + +<h2 id="Learning_pathway" name="Learning_pathway">学習の道筋</h2> + +<p><span id="result_box" lang="ja"><span>JavaScript は </span></span><a href="/docs/Learn/HTML">HTML </a><span lang="ja"><span>や </span></span><a href="/docs/Learn/CSS">CSS</a><span lang="ja"><span> などの関連技術よりも</span></span><span id="result_box" lang="ja"><span>きっと</span></span><span lang="ja"><span>学ぶのが難しいでしょう。</span><span>JavaScript を習得する前に、まずこれらの 2 つの技術、そしておそらく他の技術を熟知しておくことを強くおすすめします。先ず次のモジュールを実施してください :</span></span></p> + +<ul> + <li><a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Introduction">HTML 入門</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a></li> +</ul> + +<p>以前の他の言語での経験は手助けになるでしょう。</p> + +<p><span class="short_text" id="result_box" lang="ja"><span>JavaScript の基本を</span></span><span class="short_text" lang="ja"><span>よく理解できたら、より高度なトピックについて学ぶことができることでしょう。高度なトピックは例えば次のものです：</span></span></p> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Guide">JavaScript ガイド</a>で紹介した JavaScript 詳細</li> + <li><a href="/ja/docs/Web/API">Web <abbr title="application programming interface">APIs</abbr></a></li> +</ul> + +<h2 id="Modules" name="Modules">モジュール</h2> + +<p>このトピックでは次のモジュールが含まれます。これらは推奨順です。</p> + +<dl> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a></dt> + <dd><span id="result_box" lang="ja"><span>最初の JavaScript の項目では、まず JavaScript を書く初めての実践的な体験に進む前に、「 JavaScript とは何か」、「どのように見えるか」、「何ができるのか？」などの基本的な質問に答えます。その後、変数、文字列、数値、配列などの JavaScript の主要機能について詳しく説明します。</span></span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a></dt> + <dd><span id="result_box" lang="ja"><span>このモジュールでは、条件文、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。これまでにみたか</span></span><span lang="ja"><span>、どこかで目にしたことでしょうが、ここではすべて明示的に説明を行います。</span></span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/Objects">JavaScript オブジェクトの紹介</a></dt> + <dd><span id="result_box" lang="ja"><span>JavaScript では、文字列や配列などの JavaScript のコア機能から、JavaScript の上に構築されたブラウザー API まで、ほとんどのものがオブジェクトです。</span> <span>関連する関数や変数を効率的なパッケージにカプセル化して独自のオブジェクトを作成することもできます。</span> <span>JavaScript のオブジェクト指向の性質は、言語に関する知識をさらに深め、より効率的なコードを書く場合に理解するために重要です。それゆえ、このモジュールを用意しました。</span> <span>ここではオブジェクトの理論と構文を詳しく説明し、独自のオブジェクトを作成する方法を見て、JSON のデータとその使い方を説明します。</span></span></dd> + <dt><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Asynchronous">非同期 JavaScript</a></dt> + <dd> + <p>このモジュールでは、非同期の JavaScript を見ていき、これがなぜ重要であるかや、サーバーからのリソース取得といった、ブロッキングの可能性のある操作を効率的に扱う方法を見ていきます。</p> + </dd> + <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs">クライアントサイドの Web API</a></dt> + <dd><span id="result_box" lang="ja"><span>ウェブサイトやアプリケーション用のクライアントサイド JavaScript を記述するときは、API を使い始める前に、サイトが実行されているブラウザーやオペレーティングシステムのさまざまな側面、または他のウェブサイトやサービスのデータを操作するためのインターフェイスといったものがあるので、すぐには進みません。このモジュールでは、API が何であるか、開発作業で頻繁に出くわす最も一般的な API を使用する方法について説明します。</span></span></dd> +</dl> + +<h2 id="Solving_common_JavaScript_problems" name="Solving_common_JavaScript_problems">よくある JavaScript の問題を解決する</h2> + +<p><a href="/ja/docs/Learn/JavaScript/Howto">よくある JavaScript の問題を解決する</a> では、<span id="result_box" lang="ja"><span>ウェブページの作成時に、とてもよくある問題を解決するために JavaScript を使用する方法を説明するコンテンツのセクションへのリンクを提供します。</span></span></p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<dl> + <dt><a href="/ja/docs/Web/JavaScript">MDN の JavaScript</a></dt> + <dd> + <div id="gt-res-content"> + <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"> + <div id="tts_button"><span id="result_box" lang="ja"><span>MDN の主要な JavaScript ドキュメントの主要なエントリポイントです。ここでは、JavaScript 言語のあらゆる側面に関する広範なリファレンスドキュメント、および経験豊富な JavaScripter を対象とした高度なチュートリアルがあります。</span></span></div> + </div> + </div> + </dd> +</dl> + +<dl> + <dt><a href="https://learnjavascript.online/">JavaScript の学習</a></dt> + <dd>ウェブ開発者になりたい人向けのすばらしいリソース — JavaScript をインタラクティブな環境と、短いレッスンやインタラクティブなテスト、自動化された評価つきで学ぶことができる。最初の 40 レッスンは無料で、完全なコースは少額の支払いで利用できる。</dd> +</dl> + +<p><strong><a href="https://exlskills.com/learn-en/courses/javascript-fundamentals-basics_javascript">JavaScript Fundamentals on EXLskills</a></strong></p> + +<dl> + <dd>JS でアプリケーションを構築するために必要なすべてを紹介する EXLskills オープンソースコースで、無料で JavaScript を学んでください。</dd> + <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt> + <dd><a href="https://twitter.com/bit101">Keith Peters</a> による、有能なプログラマーを理解するのに必要な数学の優れたビデオチュートリアルのシリーズ。</dd> +</dl> diff --git a/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.html new file mode 100644 index 0000000000..8390797c5b --- /dev/null +++ b/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.html @@ -0,0 +1,223 @@ +--- +title: バウンスボールに機能を追加する +slug: Learn/JavaScript/Objects/Adding_bouncing_balls_features +tags: + - Assessment + - Beginner + - CodingScripting + - JavaScript + - Learn + - OOJS + - Object-Oriented + - Objects + - 'l10n:priority' +translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">この評価では、前の記事のバウンスボールのデモを出発点として用い、いくつかの面白い機能を新たに追加してもらいます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件：</th> + <td>この評価を試みる前に、このモジュールのすべての記事を学習済みであること。</td> + </tr> + <tr> + <th scope="row"> + <p>目的：</p> + </th> + <td>JavaScript オブジェクトとオブジェクト指向のインスタンス生成を理解しているかテストする。</td> + </tr> + </tbody> +</table> + +<h2 id="Starting_point" name="Starting_point">出発点</h2> + +<p>この評価をスタートするためには、私たちの最新記事からローカル PC の新しいディレクトリーに<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html"> index-finished.htm</a>、<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a>、<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">main-finshed.js</a> をコピーします。</p> + +<p>または、あなたの評価のために、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://glitch.com/">Glitch</a> を使うことができます。これらのオンラインエディターに HTML、CSS や JavaScript を貼り付けることができます。もしあなたが使用しているオンラインエディタが、別々の JavaScript/CSS のパネルを持っていない場合は、HTML内の <code><script></code>/<code><style></code> 要素を使って、インラインで書くことができます。</p> + +<div class="note"> +<p><strong>注</strong>: もし行き詰った場合は、サポートを依頼してください。このページの下部にある{{anch("Assessment or further help", "評価とさらなる支援")}}セクションを参照してください。</p> +</div> + +<h2 id="Hints_and_tips" name="Hints_and_tips">ヒントと tips</h2> + +<p>始める前にいくつかの助言です。</p> + +<ul> + <li>この評価はかなり難しいです。コーディングを始める前に評価全体を読み、各ステップをゆっくりと注意深く行ってください。</li> + <li>それぞれのステージを作業した後のデモを、別々のコピーとして保管しておけば、後で困ったときに参照することができます。</li> +</ul> + +<h2 id="Project_brief" name="Project_brief">プロジェクト概要</h2> + +<p>このバウンスボールのデモは面白いですが、ここではもう少しインタラクティブにするため、バウンスボールを捕まえたら食べてしまう、ユーザー制御された邪悪な円を追加します。また、<span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>バウンスボールや</span>邪悪な<span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>円が継承できる</span>一般的な <code>Shape()</code> オブジェクトを作ることで、<span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>あなたのオブジェクト構築スキルも</span>試してみましょう。最後に、残ったボールが数えられるスコアカウンターも追加してみましょう。</p> + +<p>次のスクリーンショットでは、完成したプログラムがどのように見えるかのイメージを掴めるでしょう： </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13875/bouncing-evil-circle.png" style="display: block; margin: 0 auto;"></p> + +<ul> +</ul> + +<p>さらにヒントを差し上げます。<a href="http://mdn.github.io/learning-area/javascript/oojs/assessment/">完成デモ</a>を見てみましょう。（ソースコードをチラ見しないように！）</p> + +<h2 id="Steps_to_complete" name="Steps_to_complete">完成までの手順</h2> + +<p>次のセクションでは、必要な操作について説明します。</p> + +<h3 id="Creating_our_new_objects" name="Creating_our_new_objects">新しいオブジェクトを作る</h3> + +<p>まず初めに、既存の <code>Ball()</code> コンストラクターを <code>Shape()</code> コンストラクターに変更し、新しい <code>Ball()</code> コンストラクターを追加します：</p> + +<ol> + <li><code>Shape()</code> コンストラクターは、<code>x</code>、<code>y</code>、<code>velX</code>、および、<code>velY</code> プロパティを、<code>Ball()</code> コンストラクターが最初に行ったのと同じ方法で定義する必要がありますが、色とサイズのプロパティは指定しません。</li> + <li>また、新しいプロパティとして、ボールが存在するか（邪悪な円に食べられていないか）どうかを追跡するために使用される <code>exists</code> を新しく定義する必要があります。これはブール値 (<code>true</code>/<code>false</code>) である必要があります。</li> + <li><code>Ball()</code> コンストラクターは、<code>x</code>、<code>y</code>、<code>velX</code>、<code>velY</code>、および <code>exists</code> プロパティを <code>Shape()</code> コンストラクターから継承する必要があります。</li> + <li>また、元の <code>Ball()</code> コンストラクターのように、<code>color</code> と <code>size</code> プロパティを定義する必要があります。</li> + <li><code>Ball()</code> コンストラクターの <code>prototype</code> と <code>constructor</code> を適切に設定してください。</li> +</ol> + +<p>ボールの <code>draw()</code>、<code>update()</code>、と <code>collisionDetect()</code> メソッドの定義は、前とまったく同じである必要があります。</p> + +<p>また、<code>new Ball() ( ... )</code> <span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>コンストラクターの呼び出し</span>に新しいパラメーターを追加する必要があります。<code>exists</code> パラメーターは 5番目のパラメーターにする必要があり、<code>true</code> の値を指定する必要があります。</p> + +<p>この時点で、コードをリロードしてみてください。再設計されたオブジェクトで、前と全く同じように動作するはずです。</p> + +<h3 id="Defining_EvilCircle" name="Defining_EvilCircle">EvilCircle() の定義</h3> + +<p>さあ、悪者 <code>EvilCircle()</code> の出番です！ 私たちのゲームに邪悪な円は1つしか登場しませんが、練習のためにあえて、<code>Shape()</code> から継承するコンストラクターを使用して定義します。後で、他のプレイヤーによって制御される円、あるいは、コンピューター制御の別の邪悪な円をいくつか加えたいと思うかもしれません。おそらく、あなたは単一の邪悪な円の世界を引き継いでいくつもりはないでしょうが、今回の評価のためにはこれで十分です。</p> + +<p><code>EvilCircle()</code> コンストラクターは、<code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code> と <code>exists</code> を <code>Shape()</code> から継承しますが、<code>velX</code> と <code>velY</code> は常に20です。</p> + +<p>これは <code>Shape.call(this, x, y, 20, 20, exists);</code>のように呼び出します。</p> + +<p>次のように、独自のプロパティも定義する必要があります：</p> + +<ul> + <li><code>color</code> — <code>'white'</code></li> + <li><code>size</code> — <code>10</code></li> +</ul> + +<p>ここでも、継承したプロパティをコンストラクターのパラメーターとして定義し、<code>prototype</code> と <code>constractor</code> のプロパティを正しく設定することを忘れないでください。</p> + +<h3 id="Defining_EvilCircles_methods" name="Defining_EvilCircles_methods">EvilCircle() のメソッドの定義</h3> + +<p><code>EvilCircle()</code> には、以下に示す 4 つのメソッドがあります。</p> + +<h4 id="draw" name="draw"><code>draw()</code></h4> + +<p>このメソッドは、<code>Ball()</code> の <code>draw()</code> メソッドと同じく、キャンバス上にオブジェクトインスタンスを描画するという目的を持ちます。とても良く似た動作をするので、<code>Ball.prototype.draw</code> の定義をコピーすることから始めます。次に、以下の変更を行います。</p> + +<ul> + <li>邪悪な円は塗りつぶしせず、枠線（ストローク）だけを持たせたいと思います。そのために、<code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> と <code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code> を <code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/strokeStyle">strokeStyle</a></code> と <code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/stroke">stroke()</a></code> に変更します。</li> + <li>また、線を少し太くすれば、邪悪な円が少し分かりやすくなります。これは、<code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> 呼び出しの後のどこかで <code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/lineWidth">lineWidth</a></code> の値（3で十分でしょう）を設定することで実現できます 。</li> +</ul> + +<h4 id="checkBounds" name="checkBounds"><code>checkBounds()</code></h4> + +<p>このメソッドは、<code>Ball()</code>の <code>update()</code> 関数の最初の部分と同じ機能、すなわち、邪悪な円が画面の端から出そうになったら出ないようにする機能を持ちます。先ほどと同様に、<code>Ball.prototype.update</code> 定義をほぼコピーするだけでできますが、いくつか変更する必要があります。</p> + +<ul> + <li>最後の 2行を削除します。後で見られるように、別の方法で邪悪な円を動かすので、フレーム毎に邪悪な円の位置を自動的に更新する必要はありません。</li> + <li>テストが true を返す場合、<code>if()</code> ステートメントの内部で<code>velX</code>/<code>velY</code> を更新したくありません。代わりに <code>x</code>/<code>y</code> の値を変更して、邪悪な円が画面上に少し跳ね返ってくるようにします。邪悪な円の size プロパティを（必要に応じて）増減させることは理にかなっています。</li> +</ul> + +<h4 id="setControls" name="setControls"><code>setControls()</code></h4> + +<p>このメソッドは、<code>onkeydown</code> イベントリスナーを <code>window</code> オブジェクトに追加し、特定のキーボードキーが押されたときに、邪悪な円を動かします。次のコードブロックは、メソッド定義の中に置く必要があります。</p> + +<pre class="brush: js notranslate">let _this = this; +window.onkeydown = function(e) { + if (e.key === 'a') { + _this.x -= _this.velX; + } else if (e.key === 'd') { + _this.x += _this.velX; + } else if (e.key === 'w') { + _this.y -= _this.velY; + } else if (e.key === 's') { + _this.y += _this.velY; + } + }</pre> + +<p>キーが押されると、イベントオブジェクトの <a href="/ja/docs/Web/API/KeyboardEvent/key">key</a> プロパティを調べて、どのキーが押されているかを確認します。押されたキーが、指定された4つのキーの 1 つである場合、邪悪な円は左/右/上/下に移動します。</p> + +<p>おまけとして、<code>let _this = this;</code>をこの場所で設定しなければならない理由を教えてください。関数スコープと関係があります。</p> + +<h4 id="collisionDetect" name="collisionDetect"><code>collisionDetect()</code></h4> + +<p>このメソッドは <code>Ball()</code>の <code>collisionDetect()</code>メソッドと非常によく似た方法で動作するので、そのコピーをこの新しいメソッドの基礎として使用することができます。しかし、いくつかの違いがあります。</p> + +<ul> + <li>外側の <code>if</code> ステートメントでは、反復処理中のボールが、チェックを行っているボールと同じであるかをチェックする必要はなくなりました。なぜなら、それは邪悪な円であって、ボールではないからです！ その代わりに、チェックされているボールが存在するかどうかを確認（どのプロパティでこれを行うことができるでしょうか？）するテストを行う必要があります。存在しなければ、それはすでに邪悪な円によって食べられているので、再度チェックする必要はありません。</li> + <li>内部の <code>if</code> ステートメントでは、衝突が検出されたときにオブジェクトの色を変更する必要がなくなりました。その代わりに、邪悪な円と衝突するボールをもう存在しないように設定します（どうやって実行すると思いますか？）。</li> +</ul> + +<h3 id="Bringing_the_evil_circle_into_the_program" name="Bringing_the_evil_circle_into_the_program">プログラムに邪悪な円を持ち込む</h3> + +<p>さて、邪悪な円を定義したので、実際にそれをシーンに表示させる必要があります。そのためには、<code>loop()</code> 関数をいくつか変更する必要があります。</p> + +<ul> + <li>まず、（必要なパラメーターを指定して）新しい邪悪な円オブジェクトインスタンスを作成し、その <code>setControls()</code> メソッドを呼び出します。これらの 2 つの処理は一度だけ実行すればよく、ループの繰り返し毎に行う必要はありません。</li> + <li>すべてのボールをループして、ボールが存在する場合にのみ、それぞれの <code>draw()</code>、<code>update()</code>、<code>collisionDetect()</code> が呼び出されるようにします。</li> + <li>ループの各繰り返しで、邪悪な円インスタンスの <code>draw()</code>、<code>checkBounds()</code>、および <code>collisionDetect()</code>メソッドを呼び出します。</li> +</ul> + +<h3 id="Implementing_the_score_counter" name="Implementing_the_score_counter">スコアカウンターの実装</h3> + +<p>スコアカウンターを実装するには、次の手順に従います。</p> + +<ol> + <li>HTML ファイルの{{HTMLElement("h1")}}要素の直下に、"Ball count:" というテキストを含む{{HTMLElement( "p")}}要素を追加します。</li> + <li>あなたの CSS ファイルに、次のスタイルを追加します： + <pre class="brush: css notranslate">p { + position: absolute; + margin: 0; + top: 35px; + right: 5px; + color: #aaa; +}</pre> + </li> + <li>JavaScript では、次の更新を行います： + <ul> + <li>段落への参照を格納する変数を作成します。</li> + <li>何らかの方法で画面上のボールの数をカウントしてください。</li> + <li>ボールをシーンに追加するたびにカウントを増加させ、更新されたボールの数を表示します。</li> + <li>邪悪な円がボールを食べる（存在を消す）たびにカウントを減らし、更新されたボールの数を表示します。</li> + </ul> + </li> +</ol> + +<h2 id="Assessment_or_further_help" name="Assessment_or_further_help">評価とさらなる支援</h2> + +<p>If you would like your work assessed, or are stuck and want to ask for help:</p> + +<ol> + <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>.</li> + <li>Write a post asking for assessment and/or help at the <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Your post should include: + <ul> + <li>A descriptive title such as "Assessment wanted for Adding bouncing balls features".</li> + <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li> + <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li> + <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> + </ul> + </li> +</ol> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向 JavaScript</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">Object のプロトタイプ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">JavaScript での継承</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト作成の練習</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールに機能を追加する</a></li> +</ul> diff --git a/files/ja/learn/javascript/objects/basics/index.html b/files/ja/learn/javascript/objects/basics/index.html new file mode 100644 index 0000000000..0c97e391d3 --- /dev/null +++ b/files/ja/learn/javascript/objects/basics/index.html @@ -0,0 +1,277 @@ +--- +title: JavaScript オブジェクトの基本 +slug: Learn/JavaScript/Objects/Basics +tags: + - API + - Article + - Beginner + - CodingScripting + - JavaScript + - Syntax + - bracket notation + - dot notation + - instance + - object literal + - this + - オブジェクト + - 学習 + - 理論 +translation_of: Learn/JavaScript/Objects/Basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">この記事では、基本的な JavaScript オブジェクトの構文を学び、このコースで以前に見た一部の JavaScript の機能を復習し、すでに提供された多くの機能がオブジェクトであるという事実を再確認します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターを操作する能力、基本的な HTML と CSS に対する理解、基本的な JavaScript に親しんでいること（<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照してください）。</td> + </tr> + <tr> + <th scope="row">到達目標:</th> + <td>オブジェクト指向プログラミングについての基本的な理論、どのように JavaScript に関連するか、JavaScript の作業を始める方法を理解できること。</td> + </tr> + </tbody> +</table> + +<h2 id="Object_basics" name="Object_basics">オブジェクトの基本</h2> + +<p>オブジェクトとは関連のあるデータと機能の集合です。(機能はたいていは変数と関数で構成されており、オブジェクトの中ではそれぞれプロパティとメソッドと呼ばれます。) どんなものか例を見てみましょう。</p> + +<p>最初に <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> ファイルを手元にコピーしてください。このファイルにはちょっとした内容 — ソースコードを書き込むための {{HTMLElement("script")}} 要素が一つ含まれています。このファイルをオブジェクトを書くための元として使います。作業中は<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">開発者ツールの JavaScript コンソール</a>を開いておいて、すぐにコマンドを入力できるようにしておくとよいでしょう。</p> + +<p>他の JavaScript の書き方と同じように、オブジェクトの生成は変数の宣言と初期化から始まります。手始めに、ファイルにある JavaScript コードの下に次のものを書いてみてください。それから保存して再読み込みしましょう。</p> + +<pre class="brush: js notranslate">const person = {};</pre> + +<p>ブラウザの <a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">JavaScript コンソール</a>を開いて、<code>person</code> と入力して、 <kbd>Enter</kbd>/<kbd>Return</kbd> を押してください。以下のいずれかの行に似た結果が得られるはずです。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="punctuation token">[</span>object Object<span class="punctuation token">]</span> +Object <span class="punctuation token">{</span> <span class="punctuation token">}</span> +<span class="punctuation token">{</span> <span class="punctuation token">}</span></code></pre> + +<p>よくやりましたね! まずは最初のオブジェクトができました。でもこれだけでは空のオブジェクトであまり役には立ちません。さらにオブジェクトを変更してみましょう。</p> + +<pre class="brush: js notranslate">const person = { + name: ['Bob', 'Smith'], + age: 32, + gender: 'male', + interests: ['music', 'skiing'], + bio: function() { + alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); + }, + greeting: function() { + alert('Hi! I\'m ' + this.name[0] + '.'); + } +}; +</pre> + +<p>保存して再読み込みした後で、JavaScript コンソールにいくつか入力してみましょう。</p> + +<pre class="brush: js notranslate">person.name +person.name[0] +person.age +person.interests[1] +person.bio() +person.greeting()</pre> + +<p>オブジェクトから、データと機能を追加することができました。これで簡単な書き方で情報が引き出せます。</p> + +<div class="note"> +<p><strong>注</strong>: もし動かないようなら、完成版のソースコードと見比べてみてください (完成版: <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> さらに<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">ライブ版もあります</a>) 。ライブ版は空白の画面ですが、それで OK です。また開発ツールを開いて上記のコマンドを入力してオブジェクトの構造を見てみます。</p> +</div> + +<p>さて、何が起きているのでしょうか。オブジェクトには複数のメンバーがあり、それぞれに名前がついていて(例えば上の例では <code>name</code> や <code>age</code>)、それぞれに値 (<code>['Bob', 'Smith']</code> や <code>32</code>) があります。それぞれの名前と値の組はカンマ ( , ) で区切られていて、名前と値はコロン ( : ) で区切られています。常にそのように書きます。</p> + +<pre class="brush: js notranslate">const objectName = { + member1Name: member1Value, + member2Name: member2Value, + member3Name: member3Value +}</pre> + +<p>メンバーの値はほとんど何でも大丈夫です。例えば、先ほどの例では文字列、数値、2 つの配列に 2 つの関数でした。最初の 4 つはデータ項目でそのオブジェクトの<strong>プロパティ</strong>と呼ばれます。後ろの 2 つはオブジェクトの持つデータを使用して何かをする関数でオブジェクトの<strong>メソッド</strong>と呼ばれます。</p> + +<p>このように記号を使って書くオブジェクトは後で出てくるクラスを使用して生成する方法と対比して<strong>オブジェクトリテラル</strong>と呼ばます。</p> + +<p>オブジェクトリテラルを使用してオブジェクトを生成する方法はとても一般的で、ある法則に則って構造化、関連付けられたデータをやり取りするときによく使います。(例えばサーバーにリクエストを送ったり、データベースに保存したり。) ある一つのオブジェクトを送るほうが複数の項目を何回かに分けて送るよりも効率的で、名前を用いて検索するときなどには、配列よりも扱いやすいときがあります。</p> + +<h2 id="Dot_notation" name="Dot_notation">ドットによる記述</h2> + +<p>先ほどの例では、オブジェクトのプロパティとメソッドに対して、<strong>ドット記法</strong>を用いてアクセスしました 。オブジェクト名 (person) は<strong>名前空間</strong>として機能します。オブジェクト内に<strong>カプセル化</strong>されたものにアクセスするには、まずこのオブジェクト名を入力する必要があります。次に、ドット ( . ) を書いて、それからアクセスしたい項目を記述します。項目になりうるのは、単純なプロパティの名前や、配列の要素や、そのオブジェクトのメソッドの 1 つへの呼び出しなどです。次に例を示します:</p> + +<pre class="brush: js notranslate">person.age +person.interests[1] +person.bio()</pre> + +<h3 id="Sub-namespaces" name="Sub-namespaces">サブ名前空間</h3> + +<p>オブジェクトの内部にさらにほかのオブジェクトを持つことも可能です。例えば、先の例で、<code>name</code> メンバーを、</p> + +<pre class="brush: js notranslate">name: ['Bob', 'Smith'],</pre> + +<p>以下のように変更してみましょう。</p> + +<pre class="brush: js notranslate">name : { + first: 'Bob', + last: 'Smith' +},</pre> + +<p>これで簡単に<strong>サブ名前空間</strong>を作り出すことができました。難しそうに聞こえるかもしれませんが、ただ単に項目をドットを用いて数珠つなぎにつないでいけばいいのです。コンソールで試してください。</p> + +<pre class="brush: js notranslate">person.name.first +person.name.last</pre> + +<p><strong>重要</strong>: この時点で下の書き方をしていたところは、以下のように変えなければなりません。</p> + +<pre class="brush: js notranslate">name[0] +name[1]</pre> + +<p>を、</p> + +<pre class="brush: js notranslate">name.first +name.last</pre> + +<p>のようにしなければ、メソッドが動かなくなってしまうでしょう。</p> + +<h2 id="Bracket_notation" name="Bracket_notation">角括弧による記述</h2> + +<p>オブジェクトのプロパティにアクセスするもう一つの手段として角括弧を用いた記法があります。</p> + +<pre class="brush: js notranslate">person.age +person.name.first</pre> + +<p>このように書く代わりに、</p> + +<pre class="brush: js notranslate">person['age'] +person['name']['first']</pre> + +<p>のように書きます。</p> + +<p>これは配列の添え字によく似ています。数字の代わりに、名前を用いて関連付けられたメンバーの値にアクセスするだけで、実はほとんど同じなのです。このようなオブジェクトを<strong>連想配列</strong>といい、配列が数字によって値を格納しているように、文字列によって値を格納しています。</p> + +<h2 id="Setting_object_members" name="Setting_object_members">オブジェクトメンバーの設定</h2> + +<p>今まではオブジェクトメンバーからの引き出す (<strong>取得する</strong>) 方法だけを見てきましたが、値を設定するメンバーを宣言することで、オブジェクトのメンバーに値を<strong>設定</strong> (更新) することもできます。(ドットを使用した書き方でも、角括弧を使用した書き方でも構いません。)</p> + +<pre class="brush: js notranslate">person.age = 45; +person['name']['last'] = 'Cratchit';</pre> + +<p>これらの行を入力してみて、実際に値が変わったか調べてみましょう。</p> + +<pre class="brush: js notranslate">person.age +person['name']['last']</pre> + +<p>メンバーの値を設定するのは存在するプロパティやメソッドの更新だけにはとどまりません。まったく新しいメンバーを追加することもできるのです。JS コンソールで次のものを試してみてください。</p> + +<pre class="brush: js notranslate">person['eyes'] = 'hazel'; +person.farewell = function() { alert("Bye everybody!"); }</pre> + +<p>新しいメンバーが追加されたことを確認してみましょう。</p> + +<pre class="brush: js notranslate">person['eyes'] +person.farewell()</pre> + +<p>角括弧での書き方の良いところは、動的にメンバーの値を設定できるだけでなく、メンバーの名前も追加できるところです。例えば、ユーザーの情報として 2 つのテキストフィールドに名前と値を入力してもらい、人により個別のデータを設定したいとします。そういった値を以下のように取得します。</p> + +<pre class="brush: js notranslate">let myDataName = nameInput.value; +let myDataValue = nameValue.value;</pre> + +<p>そうして、取得したメンバー名と値を次のように <code>person</code> オブジェクトに設定します。</p> + +<pre class="brush: js notranslate">person[myDataName] = myDataValue;</pre> + +<p>この動作を確認するため、先ほどのコードの <code>person</code> オブジェクトの中括弧に続いて、次の行をコードに追加してみてください。</p> + +<pre class="brush: js notranslate">let myDataName = 'height'; +let myDataValue = '1.75m'; +person[myDataName] = myDataValue;</pre> + +<p>そして、保存して再度読み込んで、次の行をテキストボックスに入力してみてください。</p> + +<pre class="brush: js notranslate">person.height</pre> + +<p>上記の方法を使用してオブジェクトにプロパティを追加することは、ドット記法ではできません。ドット記法は、名前を指す変数ではなく、書いたとおりのメンバー名のみ受け入れることができます。</p> + +<h2 id="What_is_this" name="What_is_this">"this" とは何か</h2> + +<p>メソッドの中で、少し見慣れない点に気付いたかもしれません。 次の例でその点について考えてみましょう。</p> + +<pre class="brush: js notranslate">greeting: function() { + alert('Hi! I\'m ' + this.name.first + '.'); +}</pre> + +<p>"this" とは何だろうと思ったことでしょう。 この <code>this</code> キーワードはコードの中がその中で書かれている、現在のオブジェクトを参照しています。なので、この場合では <code>person</code> を指します。 なぜ <code>this</code> の代わりに単に <code>person</code> と書かないのでしょうか。 この後 <a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向</a> の記事で見るように、コンストラクター等を書き始めるときに <code>this</code> は非常に便利です。メンバーのコンテキストが変わったとき(例えば 2 つの異なる <code>person</code> オブジェクトのインスタンスは、異なる名前を持っているが、greeting メソッドでそれぞれ自身の名前を使用したいとき)に常に正しい値を保証してくれます。</p> + +<p>それでは、簡略化した <code>person</code> オブジェクトを使って、その意味を説明していきましょう。</p> + +<pre class="brush: js notranslate">const person1 = { + name: 'Chris', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +const person2 = { + name: 'Deepti', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +}</pre> + +<p>この場合、<code>person1.greeting()</code> は "Hi! I'm Chris." を出力します。一方、<code>person2.greeting()</code> は "Hi! I'm Deepti." を出力します。しかし、どちらの場合も、そのメソッド部分のコードは全く同じです。先に述べたように <code>this</code> はそのコードが中にあるオブジェクトと等しいです — これは手作業でオブジェクトリテラルを書くときにはそれ程便利ではありませんが、動的にオブジェクトを生成する(例えばコンストラクターを使う)ときにとても効果的です。これは、この後によりはっきりとするでしょう。</p> + +<h2 id="Youve_been_using_objects_all_along" name="Youve_been_using_objects_all_along">ずっとオブジェクトを使ってきた</h2> + +<p>これらの例を通して、既に使ってきたドット記述と非常に似ていると考えたかもしれません。なぜならこのコースを通してそのような方法を使用してきたからです。組み込みのブラウザー API や JavaScript オブジェクトを使う例への取り組みを通していつもオブジェクトを使用してきました。なぜならそのような機能は、基本的なカスタム例よりも複雑ではありますが、ここまで見てきたものと全く同種のオブジェクト構造を使うことで構築されているからです。</p> + +<p>だから、このように文字列のメソッドを使うとき:</p> + +<pre class="brush: js notranslate">myString.split(',');</pre> + +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> クラスのインスタンスで利用できるメソッドを使用しています。コードの中で文字列を作成するときにはいつでも、その文字列は自動的に <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> クラスのインスタンスとして生成されます。そしてそのために、いくつかの共通なメソッドやプロパティを使用することができます。</p> + +<p>次の行のようにドキュメントオブジェクトモデルにアクセスするときは、</p> + +<pre class="brush: js notranslate">const myDiv = document.createElement('div'); +const myVideo = document.querySelector('video');</pre> + +<p><code><a href="/ja/docs/Web/API/Document">Document</a></code> クラスのインスタンスで使用可能なメソッドを使っています。各ウェブページが読み込まれると、<code>document</code> と呼ばれる <code>Document</code> のインスタンスが作られ、それはウェブページ全体の構造、コンテンツ、その URL 等その他の機能を表現します。もう一度述べますが、これはいくつかの共通なメソッドやプロパティを使用できることを意味します。</p> + +<p>今まで使用してきた、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> や </span></font></code><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code> 等の、他の多くの組み込みのオブジェクトや API でも全く同じです。</p> + +<p>組み込みのオブジェクトと API では常に自動でオブジェクトのインスタンスが生成される訳ではないことを注意する必要があります。例えば、モダンなブラウザーがシステム通知を発行することを許可する <a href="/ja/docs/Web/API/Notifications_API">Notifications API</a> では、発行したい各通知のためにコンストラクターを使用した新しいオブジェクトを生成する必要があります。JavaScript コンソールに次を入力してみてください。</p> + +<pre class="brush: js notranslate">const myNotification = new Notification('Hello!');</pre> + +<p>コンストラクターは後の記事でもう一度見ることができます。</p> + +<div class="note"> +<p><strong>注</strong>: オブジェクトのやり取りを<strong>メッセージの受け渡し</strong>と考えると便利です。オブジェクトが他のオブジェクトにある処理の実行を要求したとき、そのオブジェクトはメソッドを通じて他のオブジェクトにメッセージを送信して、そして応答を待ちます。ご存知の通り、応答とは返り値のことです。</p> +</div> + +<h2 id="Test_your_skills!" name="Test_your_skills!">スキルをテストしましょう!</h2> + +<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="/ja/docs/Learn/JavaScript/Objects/Test_your_skills:_Object_basics">Test your skills: Object basics</a> を見てください。</p> + +<h2 id="Summary" name="Summary">おさらい</h2> + +<p>お疲れ様でした。最初の JS オブジェクトの記事の終わりまで到達しました。JavaScript のオブジェクトがどのように機能するかについて、良い考えを得ることができたのではないでしょうか。記事では、簡単なオリジナルオブジェクトの作成を含んでいました。オブジェクトは関連するデータと機能を保存する構造として非常に便利であることも理解しなければいけません。もし別々の変数と関数として、<code>person</code> オブジェクトのすべてのプロパティとメソッドを記録していくとすると、非効率でありストレスが溜まります。そして同じ名前の他の変数や関数をクラッシュしてしまう危険性も抱えてしまいます。オブジェクトは有害な方法を避けて、パッケージの中で安全に鍵をして情報を守ってくれます。</p> + +<p>次の記事ではオブジェクト指向プログラミング (OOP) 理論を見ていきます。そして、JavaScript ではそのような素晴らしい技術を使うことができます。</p> + +<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向 JavaScript</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">Object のプロトタイプ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">JavaScript での継承</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト作成の練習</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールに機能を追加する</a></li> +</ul> diff --git a/files/ja/learn/javascript/objects/index.html b/files/ja/learn/javascript/objects/index.html new file mode 100644 index 0000000000..65df0e0ece --- /dev/null +++ b/files/ja/learn/javascript/objects/index.html @@ -0,0 +1,53 @@ +--- +title: JavaScript オブジェクト入門 +slug: Learn/JavaScript/Objects +tags: + - Article + - Assesment + - Beginner + - CodingScripting + - Guide + - JavaScript + - Learn + - Objects + - Tutorial + - 学習 +translation_of: Learn/JavaScript/Objects +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">JavaScript では、文字列や配列などの JavaScript のコア機能から、JavaScript の最上部に構築されたブラウザ API まで、ほとんどのものがオブジェクトです。関連する関数や変数を効率的なパッケージにカプセル化して、便利なデータコンテナーとして動作する独自のオブジェクトを作成することもできます。JavaScript のオブジェクトベースの性質を理解することは、言語に関する知識をさらに深め、より効率的なコードを書く場合に重要です。したがって、この役立つモジュールを用意しました。ここではオブジェクトの理論と構文を詳しく説明し、独自のオブジェクトを作成する方法を見ていきます。</p> + +<h2 id="Prerequisites" name="Prerequisites">前提条件</h2> + +<p>このモジュールを始める前に、 HTML と CSS にいくらか精通している必要があります。JavaScript を始める前に <a href="https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Introduction">HTML 入門</a>と <a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>をひととおり学習することをオススメします。</p> + +<p>また、JavaScript オブジェクトを詳細に調べる前に、JavaScript の基本についていくらか精通している必要があります。このモジュールを試す前に、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a> と <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を通して学習してください。</p> + +<div class="note"> +<p><strong>注記 </strong>: もしあなたが作業しているコンピューター・タブレットやその他のデバイスで自分でファイルを作れない場合は、<a href="http://jsbin.com/">JSBin</a> や <a href="https://thimble.mozilla.org/">Thimble</a> といったようなオンラインコーディングプログラムで (ほとんどの場合) 試すことができます。</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<dl> + <dt><a href="/ja/docs/Learn/JavaScript/Objects/Basics">オブジェクトの基本</a></dt> + <dd>JavaScript オブジェクトについて記載している最初の記事では、基本的な JavaScript オブジェクト構文を見てみます。コースの初期段階で既に見た JavaScript の機能を再び見てみたり、すでに扱っている機能の多くは実際にオブジェクトであるという事実を繰り返し述べています。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向 JavaScript</a></dt> + <dd>まずオブジェクト指向 JavaScript (OOJS) に焦点を当てます — この記事では、オブジェクト指向プログラミング (OOP) 理論の基本ビューを示し、次に JavaScript がコンストラクタ関数を介してオブジェクトクラスをエミュレートする方法と、オブジェクトインスタンスを作成する方法について説明します。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">オブジェクトプロトタイプ</a></dt> + <dd>プロトタイプは、JavaScript オブジェクトが互いに機能を継承するメカニズムであり、古典的なオブジェクト指向プログラミング言語の継承メカニズムとは異なる働きをします。この記事では、その違いを探り、プロトタイプチェーンの仕組みを説明し、prototype プロパティを使用して既存のコンストラクタにメソッドを追加する方法を見ていきます。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">JavaScript での継承</a></dt> + <dd>OOJS の大部分の詳細がこれまで説明されているため、この記事では、「親」クラスから機能を継承する「子」オブジェクトクラス (のコンストラクタ) を作成する方法を示します。また OOJS をいつどこで使用するかについてのアドバイスも提供しています。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></dt> + <dd>JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいて構造化されたデータを表現するための標準のテキストベースのフォーマットであり、ウェブサイト上でデータを表現し、送信するために一般的に使用されます (すなわち、サーバーからクライアントへデータを送信して、その結果ウェブページ上に表示することができます)。これはとても良く見るものなので、この記事では、JSON を解析してその中のデータ項目にアクセスしたり、独自の JSON を記述したりするなど、JavaScript を使用して JSON を操作するために必要なことをすべて説明します。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト構築の練習</a></dt> + <dd>これまでの記事では、基本的な JavaScript オブジェクトの理論と構文の詳細をすべて見てもらい、あなたには出発できるしっかりとした基本が与えられました。この記事では実践的なエクササイズを行い、もっと楽しい色とりどりの色付きのボールを作成するカスタム JavaScript オブジェクトを作る練習をしていきます。</dd> +</dl> + +<h2 id="Assessments" name="Assessments">評価</h2> + +<dl> + <dt><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールのデモへの機能の追加</a></dt> + <dd>この評価では、前の記事のバウンスボールデモを出発点として使用し、新しい興味深い機能を追加する予定です。</dd> +</dl> diff --git a/files/ja/learn/javascript/objects/inheritance/index.html b/files/ja/learn/javascript/objects/inheritance/index.html new file mode 100644 index 0000000000..7830f5a676 --- /dev/null +++ b/files/ja/learn/javascript/objects/inheritance/index.html @@ -0,0 +1,412 @@ +--- +title: JavaScript での継承 +slug: Learn/JavaScript/Objects/Inheritance +tags: + - Article + - CodingScripting + - Inheritance + - JavaScript + - OOJS + - OOP + - Object + - Prototype + - 'l10n:priority' + - 初心者 + - 学習 +translation_of: Learn/JavaScript/Objects/Inheritance +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">OOJS のぞっとするような細部はほとんど説明されたので、ここでは”親”クラスからの機能を継承する”子供”のオブジェクトクラス (コンストラクタ) の生成方法について解説します。さらに、いつ、どこで OOJS を使うかについてのアドバイスを提示し、最新の ECMAScript の構文でクラスがどのように扱われるかを見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識</th> + <td>基本的なコンピュータの知識および利用能力、HTML と CSS への基本的な理解、JavaScript の基本 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps">第一歩</a>と<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks">構成要素</a>を参照) と OOJS の基本 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics">オブジェクト入門</a>) に慣れている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript でどのように継承ができるようになっているかを理解していること。</td> + </tr> + </tbody> +</table> + +<h2 id="Prototypal_inheritance" name="Prototypal_inheritance">プロトタイプでの継承</h2> + +<p>ここまで動作している継承 ー プロトタイプチェーンがどのように動作するか、どのようにメンバーが繋がるチェーンから継承されるのかを見てきました。しかし、これらの大半はブラウザーの組み込み関数で実行されています。我々が他のオブジェクトから継承したオブジェクトを作成するには JavaScript でどのようにするのでしょうか。</p> + +<p>具体的な例をjj使ってどのようの継承が行われているかを見てゆきましょう。</p> + +<h2 id="Getting_started" name="Getting_started">さあ始めてみよう</h2> + +<p>まず、<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> ファイルをローカルにコピーしましょう (あるいは<a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">ライブ版の実行</a>でも確認できます)。ここでこのモジュールで幅広く使用されてきた <code>Person()</code> というコンストラクタの例を見つけることができます。わずかな違いがあって、コンストラクタ内部にプロパティのみが定義されています。</p> + +<pre class="brush: js notranslate">function Person(first, last, age, gender, interests) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; +};</pre> + +<p>メソッドはすべてコンストラクタのプロトタイプとして定義されています。例えば、</p> + +<pre class="brush: js notranslate">Person.prototype.greeting = function() { + alert('Hi! I\'m ' + this.name.first + '.'); +};</pre> + +<div class="note"> +<p><strong>注意</strong>: ソースコードに、<code>bio()</code> と <code>farewell()</code> が定義されています。後ほどこれらのメソッドがどのようにほかのコンストラクタで継承されるのかを確認します。</p> +</div> + +<p><code>Teacher</code> クラスを作成したい場合を考えましょう。これは最初のオブジェクト指向の特徴にて述べたもののようなクラスで、<code>Person</code> からすべてのメンバーを継承しますが、次のものも内包しています。</p> + +<ol> + <li>新しいプロパティの <code>subject</code> — これはその先生の教える科目を格納します。</li> + <li>上書きされた <code>greeting()</code> メソッド、標準の <code>greeting()</code> メソッドよりわずかに固く感じられる — 学校で生徒に語りかける先生により相応しい。</li> +</ol> + +<h2 id="Defining_a_Teacher_constructor_function" name="Defining_a_Teacher_constructor_function">Teacher() コンストラクタの機能を定義しよう</h2> + +<p>われわれのまずすべき事は <code>Teacher()</code> コンストラクタを作成する事です — 以下に続くコードを既存コードの下に追加してください。</p> + +<pre class="brush: js notranslate">function Teacher(first, last, age, gender, interests, subject) { + Person.call(this, first, last, age, gender, interests); + + this.subject = subject; +}</pre> + +<p>これは多くの点で Person コンストラクタと似ていますが、これまでに見てきたものと異なったものがあります— <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code> 関数です。この関数は基本的にその他の場所 (ただし現在のコンテキスト) で定義された関数から呼ぶことができます。最初の引数は関数を実行するときに使用することのできる <code>this</code> の値を表します、また他の引数は実行される関数に渡されるべき値です。</p> + +<p><code>Teacher()</code> コンストラクタは継承元の <code>Person()</code> コンストラクタと同じ引数を取りたいため、 <code>call()</code> を呼び出して、すべての引き数を引数として渡します。</p> + +<p>コンストラクタの最後の行は、先生が行うべきであり、一般の人が持たない新たな <code>subject</code>(授業) のプロパティを定義しています。</p> + +<p>注意として、下記のソースのように、このようにシンプルにも書けます。</p> + +<pre class="brush: js notranslate">function Teacher(first, last, age, gender, interests, subject) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + this.subject = subject; +}</pre> + +<p>しかしながらこれはただ改めてプロパティを再定義しているだけで、 <code>Person()</code> から継承していません、そのため、説明しようとしたポイントが伝わりません。またコード行数が多くもなります。</p> + +<h3 id="Inheriting_from_a_constructor_with_no_parameters" name="Inheriting_from_a_constructor_with_no_parameters">引数なしのコンストラクタからの継承</h3> + +<p>もし継承したコンストラクタがパラメータからプロパティの値を取得しない場合、 <code>call()</code> の呼び出しで追加の引数を指定する必要がないことを示しておきます。そのため、例えば、このような本当にシンプルなものがある場合、</p> + +<pre class="brush: js notranslate">function Brick() { + this.width = 10; + this.height = 20; +}</pre> + +<p>このように書くことで <code>width</code> と <code>height</code> プロパティを継承することができます(もちろん、下に挙げる数行のステップの様にすることもできます)。</p> + +<pre class="brush: js notranslate">function BlueGlassBrick() { + Brick.call(this); + + this.opacity = 0.5; + this.color = 'blue'; +}</pre> + +<p> <code>call()</code> の中に <code>this</code> だけを記載していることに注意して下さい— 引数を介して親より設定されるどのプロパティも継承しないので他の引数は不要です。</p> + +<h2 id="Setting_Teachers_prototype_and_constructor_reference" name="Setting_Teachers_prototype_and_constructor_reference">Teacher()のプロトタイプ とコンストラクタの参照への設定方法</h2> + +<p>今まではすべて順調でしたが、1点問題があります。新しいコンストラクタを定義して、その中に 1 つの <code>prototype</code> プロパティを持たせ、これはデフォルトでただ自身のコンストラクタ関数への参照を保持しています。Person のコンストラクタの <code>prototype</code> プロパティへのメソッド群は持っていません。このことを見てみたいのならば <code>Object.getOwnPropertyNames(Teacher.prototype)</code> をテキスト入力フィールドや JavaScript コンソールへ入力を試してみてください。そして再度入力する時には、<code>Teacher</code> を <code>Person</code> で置き換えてみてください。新しいコンストラクタもそれらのメソッドを継承していません。このことを確認するために、<code>Person.prototype.greeting</code> と <code>Teacher.prototype.greeting</code> の出力結果を比べてみてください。<code>Person()</code> のプロトタイプに定義されたメソッドを継承するために <code>Teacher()</code> を生成する必要があります。ではどのようにすればよいのでしょうか。</p> + +<ol> + <li>前回追加した部分の下に以下の行を追加してみましょう: + <pre class="brush: js notranslate">Teacher.prototype = Object.create(Person.prototype);</pre> + ここで我々に馴染み深い <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> に再度助けてもらいましょう。この場合に新しいオブジェクトを作ってそれを <code>Teacher.prototype</code> の値とするのに使います。新しいオブジェクトは <code>Person.prototype</code> を自身のプロトタイプとして保持し、それがゆえに(必要となる時には) <code>Person.prototype</code> 上で利用できるすべてのメソッドを継承します。</li> + <li>先に進む前にもう一つやることがあります。<br> + 最後の行を追加した後、<code>Teacher.</code><code>prototype</code> の <code>constructor</code> プロパティは <code>Person()</code> と同じになりました。なぜなら、<code>Person.prototype</code> からプロパティを継承するオブジェクトを参照するように <code>Teacher.prototype</code> を設定しただけだからです。コードを保存し、ブラウザでページを読み込み、コンソールに <code>Teacher.prototype.constructor</code> と入力して確認してみてください。</li> + <li>これは問題になるかもしれません、なので以下の内容をすぐに設定しましょう。 ソースコードにまた戻って最後に以下の行を追加しましょう。 + <pre class="brush: js notranslate">Object.defineProperty(Teacher.prototype, 'constructor', { + value: Teacher, + enumerable: false, // 'for in'ループで現れないようにする + writable: true });</pre> + </li> + <li>ソースコードを保存およびページの再読み込みを行って、 <code>Teacher.prototype.constructor</code> と入力したならば <code>Teacher()</code> と返すでしょう、希望した通りに <code>Person()</code> から継承することができました！</li> +</ol> + +<h2 id="Giving_Teacher_a_new_greeting_function" name="Giving_Teacher_a_new_greeting_function">Teacher() に greeting() ファンクションを付け加える</h2> + +<p>コードを完成させる前に、<code>Teacher()</code> コンストラクタに新たに <code>greeting()</code> 関数を追加する必要があります。</p> + +<p>このようにする一番簡単な方法は <code>Teacher()</code> のプロトタイプに定義することです — コードの最後に以下のコードを追加します。</p> + +<pre class="brush: js notranslate">Teacher.prototype.greeting = function() { + let prefix; + + if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') { + prefix = 'Mr.'; + } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') { + prefix = 'Mrs.'; + } else { + prefix = 'Mx.'; + } + + alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.'); +};</pre> + +<p>これは性別を基にした適切な敬称を使う教師の挨拶を通知します。条件文を使うことで実現します。</p> + +<h2 id="Trying_the_example_out" name="Trying_the_example_out">例を試してみよう</h2> + +<p>これまでのコードをすべて入力し終えているなら、ソースコード(もしくはあなたの用意した同じようなコードに)の最後に続けて <code>Teacher()</code> からオブジェクトインスタンスを生成してみましょう。</p> + +<pre class="brush: js notranslate">let teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre> + +<p>保存し、再読み込みをしたなら、新たな <code>teacher1</code> オブジェクトのプロパティとメソッドにアクセスしてみましょう、例えば。</p> + +<pre class="brush: js notranslate">teacher1.name.first; +teacher1.interests[0]; +teacher1.bio(); +teacher1.subject; +teacher1.greeting(); +teacher1.farewell();</pre> + +<p>これらはすべて正常に動作するはずです。1, 2, 3, 6 行目のクエリは、ジェネリックな <code>Person()</code> コンストラクタ (クラス) から継承されたメンバにアクセスします。4 行目のクエリは、より特殊な <code>Teacher()</code> コンストラクタ (クラス) でのみ利用可能なメンバにアクセスしています。5 行目のクエリは <code>Person()</code> から継承したメンバにアクセスしていますが、<code>Teacher()</code> には同じ名前の独自のメンバがあるため、そのメンバにアクセスしています。</p> + +<div class="note"> +<p><strong>注記</strong>: もしここまでの例がうまく動作しないなら、あなたのコードと<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">完成版</a>(<a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">ライブ版</a>も参照)を比較してみてください。</p> +</div> + +<p>ここで述べている手法は JavaScript でクラスを継承する唯一の方法ではなく、問題なく動作し、JavaScript でのどのように実装するかの良いアイデアを提示しています。</p> + +<p>また JavaScript でより明瞭に継承を行えるようにした新しい{{glossary("ECMAScript")}}の機能(<a href="/ja/docs/Web/JavaScript/Reference/Classes">Classes</a> を参照)にも興味を持つかもしれません。ここではそれらについて言及はしませんでした、それはまだブラウザー間で幅広くサポートされていないためです。一連の記事で検討してきた他のコード構造はすべて、IE9 やそれ以前のバージョンといった、はるか以前よりサポートされており、それより早くからのサポートを確認する方法となります。</p> + +<p>一般的な方法は JavaScript ライブラリを使用することです — よく知られた選択肢のうちの大部分は、よりたやすく素早く利用できる簡易な機能セットを持っています。例えば <a href="http://coffeescript.org/#classes">CoffeeScript</a> は <code>class</code>, <code>extends</code> などを提供します。</p> + +<h2 id="A_further_exercise" name="A_further_exercise">追加の特訓</h2> + +<p><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">OOP 理論のセクション</a>では、概念として <code>Student</code> クラスも取り上げました。このクラスは <code>Person</code> のすべての機能を継承しており、また <code>Person</code> とは異なる <code>Teacher</code> の greeting よりもはるかにくだけた <code>greeting()</code> メソッドを持っています。このセクションで生徒の挨拶がどのように見えるかを見て、<code>Person()</code> のすべての機能を継承し、異なる <code>greeting()</code> 関数を実装した独自の <code>Student()</code> コンストラクタを実装してみてください。</p> + +<div class="note"> +<p><strong>注記</strong>: もしここまでの例がうまく動作しないなら、あなたのコードと<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">完成版</a>(<a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">動作するライブ版</a>も参照)を比較してみてください。</p> +</div> + +<h2 id="Object_member_summary" name="Object_member_summary">Object メンバーの概要</h2> + +<p>要約すると、気になるプロパティ/メソッドは4種類あります。</p> + +<ol> + <li>コンストラクタ関数の内部で定義され、オブジェクトインスタンスに与えられるもの。独自のカスタムコードでは、コンストラクタの内部で <code>this.x = x</code> 型の行を使用して定義されたメンバです。組み込みのブラウザコードでは、オブジェクトインスタンス (通常は <code>new</code> キーワードを使用してコンストラクタを呼び出すことで作成されます。例: <code>let myInstance = new myConstructor()</code>) のみが利用可能なメンバです</li> + <li>コンストラクタ自身で直接定義されたもので、コンストラクタ上でのみ利用可能なもの。これらは一般的に組み込みのブラウザオブジェクトでのみ利用可能であり、インスタンスではなくコンストラクタに直接連結されていることで認識されます。たとえば <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code> などです。これらは<strong>静的プロパティ/メソッド</strong>としても知られています</li> + <li>コンストラクタのプロトタイプに定義されているもので、すべてのインスタンスに継承され、オブジェクトクラスを継承しているもの。これらには、コンストラクタの <code>prototype</code> プロパティに定義されている任意のメンバ (例: <code>myConstructor.prototype.x()</code>) が含まれます</li> + <li>これらは、上で見たようにコンストラクタがインスタンス化されたときに作成されるオブジェクト (例えば <code>let teacher1 = new Teacher('Chris');</code> の後に <code>teacher1.name</code>)、またはオブジェクトリテラル (<code>let teacher1 = { name : 'Chris' }</code> の後に <code>teacher1.name</code>) のいずれかであることができます</li> +</ol> + +<p>もしどれがどれを指すかを区別できないのであれば、まだ気にしないでください — あなたはまだ学習中で、実践を通じて精通することでしょう。</p> + +<h2 id="ECMAScript_2015_Classes" name="ECMAScript_2015_Classes">ECMAScript 2015 のクラス</h2> + +<p>ECMAScript 2015では、C++ や Java のクラスに似た、より簡単で洗練された構文を使用して再利用可能なクラスを記述する方法として、JavaScript に<a href="/ja/docs/Web/JavaScript/Reference/Classes">クラス構文</a>を導入しています。このセクションでは、Person と Teacher の例をプロトタイプの継承からクラスに変更して、どのようにして行うかを示します。</p> + +<div class="note"> +<p><strong>メモ</strong>: この近代的なクラスの作成方法は現在のすべてのブラウザでサポートされていますが、この構文をサポートしていないブラウザ (特に Internet Explorer) をサポートする必要があるプロジェクトで作業する場合に備えて、基本的なプロトタイプの継承の仕組みについて知っておくことはまだ価値があります。</p> +</div> + +<p>Person の例を class-style で書き直したバージョンを見てみましょう：</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">class</span> <span class="class-name token">Person</span> <span class="punctuation token">{</span> + <span class="function token">constructor</span><span class="punctuation token">(</span>first<span class="punctuation token">,</span> last<span class="punctuation token">,</span> age<span class="punctuation token">,</span> gender<span class="punctuation token">,</span> interests<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>name <span class="operator token">=</span> <span class="punctuation token">{</span> + first<span class="punctuation token">,</span> + last + <span class="punctuation token">}</span><span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>age <span class="operator token">=</span> age<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>gender <span class="operator token">=</span> gender<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>interests <span class="operator token">=</span> interests<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="function token">greeting</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><span class="template-string token"><span class="string token">`Hi! I'm </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span><span class="keyword token">this</span><span class="punctuation token">.</span>name<span class="punctuation token">.</span>first<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">`</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> + + <span class="function token">farewell</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><span class="template-string token"><span class="string token">`</span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span><span class="keyword token">this</span><span class="punctuation token">.</span>name<span class="punctuation token">.</span>first<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> has left the building. Bye for now!`</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Statements/class">class</a>ステートメントは、新しいクラスを作成していることを示します。 このブロックの中で、クラスのすべての機能を定義します。</p> + +<ul> + <li><code><a href="/ja/docs/Web/JavaScript/Reference/Classes/constructor">constructor()</a></code> メソッドは、<code>Person</code>クラスを表すコンストラクタ関数を定義します</li> + <li><code>greeting()</code> と <code>farewell()</code> はクラスメソッドです。クラスに関連付けたいメソッドは、コンストラクタの後に定義されます。この例では、コードを読みやすくするために、文字列連結ではなく<a href="/ja/docs/Web/JavaScript/Reference/template_strings">テンプレート文字列</a>を使用しています</li> +</ul> + +<p>以前と同じように<a href="/ja/docs/Web/JavaScript/Reference/Operators/new">new演算子</a>を使用してオブジェクトインスタンスをインスタンス化できるようになりました。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> han <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">'Han'</span><span class="punctuation token">,</span> <span class="string token">'Solo'</span><span class="punctuation token">,</span> <span class="number token">25</span><span class="punctuation token">,</span> <span class="string token">'male'</span><span class="punctuation token">,</span> <span class="punctuation token">[</span><span class="string token">'Smuggling'</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +han<span class="punctuation token">.</span><span class="function token">greeting</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// Hi! I'm Han</span> + +<span class="keyword token">let</span> leia <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">'Leia'</span><span class="punctuation token">,</span> <span class="string token">'Organa'</span><span class="punctuation token">,</span> <span class="number token">19</span><span class="punctuation token">,</span> <span class="string token">'female'</span><span class="punctuation token">,</span> <span class="punctuation token">[</span><span class="string token">'Government'</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +leia<span class="punctuation token">.</span><span class="function token">farewell</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// Leia has left the building. Bye for now</span></code></pre> + +<div class="note"> +<p><strong>メモ</strong>: 内部ではクラスはプロトタイプの継承モデルに変換されています。これはシンタックスシュガーです。しかし、私たちはあなたがそれを書く方が簡単だと考えるだろうと確信しています。</p> +</div> + +<h3 id="Inheritance_with_class_syntax" name="Inheritance_with_class_syntax">クラス構文による継承</h3> + +<p>上記では人を表すクラスを作成しました。彼らはすべての人々に共通の一連の属性を持っています。このセクションでは、特殊な<code>Teacher</code>クラスを作成し、現代のクラス構文を使用して<code>Person</code>から継承します。これはサブクラス、またはサブクラスの作成と呼ばれます。<br> + <br> + サブクラスを作成するには <a href="/ja/docs/Web/JavaScript/Reference/Classes/extends">extends キーワード</a>を使用して、クラスの基底となるクラスをJavaScriptに通知します。</p> + +<pre class="brush: js notranslate">constructor(first, last, age, gender, interests) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; +} </pre> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code></a> 演算子を <code>constructor()</code> 内の最初の項目として定義することで、コードをより読みやすくすることができます。これは親クラスのコンストラクタを呼び出し、そこに定義されている限り、指定したメンバーを<code>super()</code> のパラメータとして継承します。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">class</span> <span class="class-name token">Teacher</span> <span class="keyword token">extends</span> <span class="class-name token">Person</span> <span class="punctuation token">{</span> + <span class="function token">constructor</span><span class="punctuation token">(</span>first<span class="punctuation token">,</span> last<span class="punctuation token">,</span> age<span class="punctuation token">,</span> gender<span class="punctuation token">,</span> interests<span class="punctuation token">,</span> subject<span class="punctuation token">,</span> grade<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">super</span><span class="punctuation token">(</span>first<span class="punctuation token">,</span> last<span class="punctuation token">,</span> age<span class="punctuation token">,</span> gender<span class="punctuation token">,</span> interests<span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="comment token">// 科目と学年は教師によって決まっている</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>subject <span class="operator token">=</span> subject<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>grade <span class="operator token">=</span> grade<span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + +<p><code>Teacher</code>のオブジェクトをインスタンス化するときには、<code>Teacher</code>と<code>Person</code>の両方で定義されたメソッドとプロパティを呼び出すことができます。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> snape <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Teacher</span><span class="punctuation token">(</span><span class="string token">'Severus'</span><span class="punctuation token">,</span> <span class="string token">'Snape'</span><span class="punctuation token">,</span> <span class="number token">58</span><span class="punctuation token">,</span> <span class="string token">'male'</span><span class="punctuation token">,</span> <span class="punctuation token">[</span><span class="string token">'Potions'</span><span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="string token">'Dark arts'</span><span class="punctuation token">,</span> <span class="number token">5</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +snape<span class="punctuation token">.</span><span class="function token">greeting</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Hi! I'm Severus.</span> +snape<span class="punctuation token">.</span><span class="function token">farewell</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Severus has left the building. Bye for now.</span> +snape<span class="punctuation token">.</span>age <span class="comment token">// 58</span> +snape<span class="punctuation token">.</span>subject<span class="punctuation token">;</span> <span class="comment token">// Dark arts</span></code></pre> + +<p>Teachers と同じように、基本クラスを変更せずに <code>Person</code> をさらに特化したものにするために、他のサブクラスを作成できます。</p> + +<div class="note"> +<p><strong>メモ</strong>: この例は、GitHub で <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-class-inheritance.html">es2015-class-inheritance.html</a> として見つけることができます(<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-class-inheritance.html">これも実際に参照してください</a>)。</p> +</div> + +<h2 id="Getters_and_Setters" name="Getters_and_Setters">Getter と Setter</h2> + +<p>作成するクラスの属性の値を変更したい場合や、属性の最終値がわからない場合があります。<code>Teacher</code> の例を使用すると、教師が教材を作成する前にどの教科を教えるか分からないことがあります。<br> + <br> + getter や setter でこのような状況を処理できます。<br> + <br> + getter と setter で Teacher クラスを強化しましょう。私たちが最後に見たときと同じようにクラスが始まります。<br> + <br> + getter と setter はペアで動作します。getter は変数の現在の値を返し、対応する setter は変数の値をひとつの値に変更します。<br> + <br> + 変更された <code>Teacher</code> クラスは次のようになります。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">class</span> <span class="class-name token">Teacher</span> <span class="keyword token">extends</span> <span class="class-name token">Person</span> <span class="punctuation token">{</span> + <span class="function token">constructor</span><span class="punctuation token">(</span>first<span class="punctuation token">,</span> last<span class="punctuation token">,</span> age<span class="punctuation token">,</span> gender<span class="punctuation token">,</span> interests<span class="punctuation token">,</span> subject<span class="punctuation token">,</span> grade<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">super</span><span class="punctuation token">(</span>first<span class="punctuation token">,</span> last<span class="punctuation token">,</span> age<span class="punctuation token">,</span> gender<span class="punctuation token">,</span> interests<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="comment token">// 科目と学年は教師によって決まっている</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>_subject <span class="operator token">=</span> subject<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>grade <span class="operator token">=</span> grade<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">get</span> <span class="function token">subject</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">.</span>_subject<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">set</span> <span class="function token">subject</span><span class="punctuation token">(</span>newSubject<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>_subject <span class="operator token">=</span> newSubject<span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + +<p>上のクラスでは、<code>subject</code> プロパティの getter と setter があります。 Nameプロパティを格納するために <strong><code>_</code> </strong>を使用して別の値を作成します。この規約を使用しないと、get または set を呼び出すたびにエラーが発生します。 この時点で：</p> + +<ul> + <li><code>snape</code> オブジェクトの <code>_subject</code> プロパティの現在の値を表示するには、<code>snape.subject</code> getter メソッドを使用します</li> + <li><code>_subject</code> プロパティに新しい値を割り当てるには、<code>snape.subject="new value"</code> setter メソッドを使用できます</li> +</ul> + +<p>以下の例は、動作している2つの機能を示しています。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="comment token">// デフォルトの値をチェックする</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>snape<span class="punctuation token">.</span>subject<span class="punctuation token">)</span> <span class="comment token">// Returns "Dark arts"</span> + +<span class="comment token">// 値を変更する</span> +snape<span class="punctuation token">.</span>subject <span class="operator token">= </span><span class="string token">"Balloon animals"</span> <span class="comment token">// Sets _subject to "Balloon animals"</span> + +<span class="comment token">// 新しい値と一致しているか再度チェックする</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>snape<span class="punctuation token">.</span>subject<span class="punctuation token">)</span> <span class="comment token">// Returns "Balloon animals"</span></code></pre> + +<div class="note"> +<p><strong>メモ</strong>: この例は、GitHub で <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-class-inheritance.html">es2015-class-inheritance.html</a> として見つけることができます(<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-class-inheritance.html">これも実際に参照してください</a>)。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: ゲッターやセッターは、プロパティが要求されたり設定されたりするたびにコードを実行したい場合など、非常に便利な場合があります。しかし、単純なケースでは、ゲッターやセッターを使用しないプレーンなプロパティアクセスで十分です。</p> +</div> + +<h2 id="When_would_you_use_inheritance_in_JavaScript" name="When_would_you_use_inheritance_in_JavaScript">JavaScript でいつ継承を使用するのでしょうか？</h2> + +<p>特にこの最後の記事を読み終えた後、「うーん、これはややこしいな。」と考えることでしょう。ええ、それは正しい感想です。プロトタイプと継承は JavaScript のもっとも複雑な面のいくつかに当たります、しかし多くの JavaScript の能力と柔軟性はそのオブジェクトの構造と継承に由来します、そしてそれがどのように動作するかは理解するに値します。</p> + +<p>ある意味では、常に継承を使用しています。Web API の様々な機能、文字列や配列といったブラウザーに組み込まれたオブジェクトで定義されているメソッド/プロパティを使用するときはいつも、暗黙の内に継承を使用しています。</p> + +<p>コードに継承を使用していることに関して、特に開始時には、そして小さなプロジェクトでは多分頻繁には使っていないでしょう。不要にも関わらず、継承のためだけにオブジェクトおよび継承を使用するのは時間の浪費です。しかしコードの母体が大きくなればなるほど、継承についての必要性が目に付きやすくなってきます。同じような機能を持ついくつものオブジェクトを作成していることに気付いた場合は、共有機能を持つ汎化オブジェクトタイプを作成し、特化オブジェクトタイプでそれらの機能を継承させるのがお手軽であり、便利です。</p> + +<div class="note"> +<p><strong>注記</strong>: プロトタイプチェーンなどを使って JavaScript が動作する方法のために、オブジェクト間での機能の共有をしばしば <strong>移譲</strong> と呼ぶ事があります。特化オブジェクトは汎化オブジェクトタイプから機能的に移譲されています。</p> +</div> + +<p>継承を使用している時、継承をやたら多いレベルに行わないように、メソッドとプロパティをどこに定義したかを注意深く追跡し続けるようにアドバイスされるでしょう。組み込みブラウザーのオブジェクトのプロトタイプを一時的に変更するコードを書き始めることは可能ですが、実際に良い理由がないのであれば、そうすべきではありません。過剰な継承は終わりない混乱や、そんなコードをデバックする時は終わりない痛みに繋がりかねません。</p> + +<p>究極的には、オブジェクトは関数やループのような、自身の固有の役割や長所を活かした、コードの再利用の単なる別の形でもあります。もし関連のある変数や関数の一団を作成していることに気付き、それらすべてを追跡して適切にパッケージ化したいのであれば、オブジェクトは良いアイデアです。オブジェクトはまた、ある所から別の所にデータの集合を渡したい場合にも大変便利です。これらの事柄の両方がコンストラクタや継承を使用する事なく達成できます。もしオブジェクトの単一のインスタンスが必要なだけであれば、オブジェクトリテラルを使用するのが多分より良く、確実に継承は必要ないでしょう。</p> + +<h2 id="Alternatives_for_extending_the_prototype_chain" name="Alternatives_for_extending_the_prototype_chain">プロトタイプチェーンを拡張するための代替案</h2> + +<p>JavaScript では、上で示したものとは別に、オブジェクトのプロトタイプを拡張する方法がいくつかあります。その他の方法についての詳細は、<a href="/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Different_ways_to_create_objects_and_the_resulting_prototype_chain">継承とプロトタイプチェーン</a>の記事を参照してください。</p> + +<h2 id="Test_your_skills!" name="Test_your_skills!">あなたのスキルをテストしてみましょう!</h2> + +<p>この記事はここまでですが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストがいくつかあります - <a href="/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript">あなたのスキルをテストする: オブジェクト指向 JavaScript</a> を参照してください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事は今知っておくべき考えられる OOJS の核となる理論および文法の残りの部分をカバーしています。この時点で、 JavaScript オブジェクトおよび オブジェクト指向プログラミングの基本、プロトタイプとプロトタイプにおける継承、クラス(コンストラクタ)とオブジェクトのインスタンスの生成、クラスへの機能の追加、他のクラスから継承されたサブクラスの生成をどのように行うか、を理解しているでしょう。</p> + +<p>次の記事では JavaScript Object Notaion (JSON) 、つまり JavaScript オブジェクトを使用して書かれた共通データ交換フォーマット、がどのように動作するかをを見て行きましょう。</p> + +<h2 id="See_also" name="See_also">あわせて参照</h2> + +<ul> + <li><a href="http://www.objectplayground.com/">ObjectPlayground.com</a> — オブジェクトについて学べる非常に有益な会話型学習サイト</li> + <li><a href="https://www.amazon.com/gp/product/193398869X/">Secrets of the JavaScript Ninja</a>, Chapter 6 — John Resig Bear Bibeault による、先進的な JavaScript のコンセプトおよび手法についての良書。6 章ではプロトタイプや継承の非常に有効な面が説明されている。多分プリントやオンラインのコピーを比較的簡単に追跡する事ができるでしょう。</li> + <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes">You Don't Know JS: this & Object Prototypes</a> — Kyle Simpson による JavaScript を説明したすぐれたシリーズの一部。特に 5 章はプロトタイプについて、我々の説明より相当詳細に説明しています。初心者向けのこのシリーズ記事では単純化した見方を提供してきましたが、いっぽう Kyle は非常に深く論じており、より複雑だがより正確な図を提供しています。</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向 JavaScript</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">Object のプロトタイプ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">JavaScript での継承</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト作成の練習</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールに機能を追加する</a></li> +</ul> diff --git a/files/ja/learn/javascript/objects/json/index.html b/files/ja/learn/javascript/objects/json/index.html new file mode 100644 index 0000000000..c72a38744b --- /dev/null +++ b/files/ja/learn/javascript/objects/json/index.html @@ -0,0 +1,357 @@ +--- +title: JSON データの操作 +slug: Learn/JavaScript/Objects/JSON +tags: + - Article + - Beginner + - CodingScripting + - Guide + - JSON + - JavaScript + - Learn + - Objects + - Tutorial + - 'l10n:priority' +translation_of: Learn/JavaScript/Objects/JSON +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">JavaScript Object Notation (JSON) は表現用の標準的なテキストベースの構造データ表現フォーマットで、JavaScript 構造データオブジェクトの表記法をベースとしています。一般的にはウェブアプリケーションでデータを転送する場合に使われます。(例えば、データをサーバーからクライアントへ送信する場合などで、ウェブページに表示されたりすることもあり、その逆もあります)。頻繁に見かけるデータフォーマットですので、この節では JavaScript を使って JSON をパースする、JSON のデータを参照する、JSON を作るなど、JSON を扱うために必要となる操作を説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基礎的なコンピュータの知識、HTML と CSS への基本的な理解、基礎的な JavaScript の理解 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照) とオブジェクト指向JavaScript の基本 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks">JavaScript オブジェクトの基本</a>を参照)。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JSON内のデータの扱い方、JSON 文字列の作成方法について理解できること。</td> + </tr> + </tbody> +</table> + +<h2 id="No_really_what_is_JSON" name="No_really_what_is_JSON">JSON とは何か</h2> + +<p>{{glossary("JSON")}} は JavaScript オブジェクトの構文に従ったテキストベースのフォーマットで、<a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockford</a> によって普及されました。JSON は JavaScript オブジェクトの構文に似ていますが、JavaScript とは独立して扱われることがあり、多くのプログラミング言語環境には JSON を読み込む(パースする)したり生成したりする機能があります。</p> + +<p>JSON は文字列です。ですので、ネットワークを通してデータを転送したい場合に便利です。JSON データへアクセスしたい場合は、JavaScript オブジェクトへ変換する必要があります。JavaScript には JSON と JavaScript オブジェクトを相互に変換できるメソッドを持った <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> というグローバルなオブジェクトがあるので、その変換は大きな問題ではありません。</p> + +<div class="note"> +<p><strong>注記</strong>: 文字列をネイティブオブジェクトへ変換することは<em>デシリアライゼーション (deserialization)</em> と呼ばれており、ネイティブオブジェクトをネットワークを通して転送できように文字列へ変換することは<em>シリアライゼーション (serialization) </em>と呼ばれています。</p> +</div> + +<p>JSON 文字列はそれ自身をファイルとして格納することもできます。それは {{glossary("MIME type")}} が <code>application/json</code> で、<code>.json</code> という拡張子の付いたただのテキストファイルです。</p> + +<h3 id="JSON_structure" name="JSON_structure">JSON の構造</h3> + +<p>上で説明したように、JSON は JavaScript オブジェクトにとても似ているフォーマットを持った文字列です。JSON では通常の JavaScript オブジェクトと同様な基本データ型(文字列、数値、配列、ブーリアンやその他のリテラル型)を使うことができます。これにより、以下のように階層的にデータを構成することができます。</p> + +<pre class="brush: json notranslate">'{ + "squadName": "Super hero squad", + "homeTown": "Metro City", + "formed": 2016, + "secretBase": "Super tower", + "active": true, + "members": [ + { + "name": "Molecule Man", + "age": 29, + "secretIdentity": "Dan Jukes", + "powers": [ + "Radiation resistance", + "Turning tiny", + "Radiation blast" + ] + }, + { + "name": "Madame Uppercut", + "age": 39, + "secretIdentity": "Jane Wilson", + "powers": [ + "Million tonne punch", + "Damage resistance", + "Superhuman reflexes" + ] + }, + { + "name": "Eternal Flame", + "age": 1000000, + "secretIdentity": "Unknown", + "powers": [ + "Immortality", + "Heat Immunity", + "Inferno", + "Teleportation", + "Interdimensional travel" + ] + } + ] +}'</pre> + +<p>もし、この文字列を JavaScript プログラムへ読み込んだ場合(例えば、例えば変数<code>superHeroes</code> へ代入する)、<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a>の節で見たのと同様に ドットや角括弧を使ってデータへアクセスすることができます。例としては以下のようになります。</p> + +<pre class="brush: js notranslate">superHeroes.homeTown +superHeroes['active']</pre> + +<p>さらに深い階層のデータへアクセスする場合は、単純にプロパティ名や配列のインデックスを連結します。例えば、メンバーリスト中2番目のヒーローの 3番目の能力を参照する場合は、以下のようになります。</p> + +<pre class="brush: js notranslate">superHeroes['members'][1]['powers'][2]</pre> + +<ol> + <li>まず、変数名<code>superHeroes</code> を指定します。</li> + <li>その中の <code>members</code> プロパティへアクセスしたいので、<code>["members"]</code>と指定します。</li> + <li><code>members</code> にはオブジェクトの配列が格納されています. ここでは、配列内の 2番目のオブジェクトへアクセスするので、<code>[1]</code>を指定します。</li> + <li>そのオブジェクト内で、<code>powers</code> プロパティへアクセスするため, <code>["powers"]</code>と指定します。</li> + <li><code>powers</code> プロパティは選択したヒーローの能力を含んだ配列となっており、その中の 3番目が欲しいので、<code>[2]</code>と記述します。</li> +</ol> + +<div class="note"> +<p><strong>注記</strong>: 上記の JSON は <a href="http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html">JSONTest.html</a> で参照することができます。(ページ内の <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html">source code</a> を参照してください)。ページを読み込んで見て、ブラウザーのコンソールで変数内のデータにアクセスしてみてください。</p> +</div> + +<h3 id="Arrays_as_JSON" name="Arrays_as_JSON">JSON 配列</h3> + +<p>上記で、JSON テキストは基本的に文字列に入った JavaScript オブジェクトのように見えることを説明しました。配列を JSON との間で変換することもできます。以下も有効な JSON です。例:</p> + +<pre class="brush: json notranslate">'[ + { + "name": "Molecule Man", + "age": 29, + "secretIdentity": "Dan Jukes", + "powers": [ + "Radiation resistance", + "Turning tiny", + "Radiation blast" + ] + }, + { + "name": "Madame Uppercut", + "age": 39, + "secretIdentity": "Jane Wilson", + "powers": [ + "Million tonne punch", + "Damage resistance", + "Superhuman reflexes" + ] + } +]'</pre> + +<p>これも有効な JSON であり、パースしたデータには配列のインデックスを指定するだけです。例えば、<code>[0]["powers"][0]</code>のように表記できます。</p> + +<h3 id="Other_notes" name="Other_notes">その他の注意点</h3> + +<ul> + <li>JSON は指定されたデータフォーマットの純粋な文字列であり、プロパティのみを含むことができ、メソッドを含むことができません。</li> + <li>JSON では文字列とプロパティ名をダブルクォートで括る必要があります。シングルクォートは、JSON 文字列全体を囲む以外では無効です。</li> + <li>1 つだけカンマやコロンが抜けているだけで無効な JSON になりえます。なので、使用しているデータが有効であるかについては注意してみなければなりません(機械的に作った JSON のほうが、プログラムに問題がなければ、エラーは少なく済みます)。 <a href="http://jsonlint.com/">JSONLint</a> のようなアプリケーションを使って妥当性検査をすることもできます。</li> + <li>JSON は配列やオブジェクトに限らず JSON内に含むことができるデータ型のデータだけでも有効な JSON となります。 例えば、1 つだけの文字列や数値も有効な JSON です。</li> + <li>プロパティがクォートで括られていない JavaScript コードと異なり、JSON では、クォートされた文字列だけがプロパティとして使われます。</li> +</ul> + +<h2 id="Active_learning_Working_through_a_JSON_example" name="Active_learning_Working_through_a_JSON_example">手を動かして学ぼう: JSON をさわってみる</h2> + +<p>それでは、Web サイト上でどのように JSON 形式のデータを使うことができるか例を通して見てみましょう。</p> + +<h3 id="Getting_started" name="Getting_started">はじめに</h3> + +<p>まず、<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html">heroes.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css">style.css</a> のコピーをローカルに作成してください。後者は例題ページをスタイリングするための CSS であり、前者は簡単な形式の HTML です。</p> + +<pre class="brush: html notranslate"><header> +</header> + +<section> +</section></pre> + +<p>他には、この演習で書く JavaScript を含んだ {{HTMLElement("script")}} 要素があります。この時点では、{{HTMLElement("header")}} 要素と {{HTMLElement("section")}} 要素 を取得して、変数へ代入している 2行コードのみが書かれています。</p> + +<pre class="brush: js notranslate">const header = document.querySelector('header'); +const section = document.querySelector('section');</pre> + +<p>演習用の JSON データは <a href="https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json</a> に用意してあります。</p> + +<p>そのデータを演習ページに読み込んで、それを表示するのにいくらかの DOM操作を行います。最終的には、以下の画像のようになります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13857/json-superheroes.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Obtaining_the_JSON" name="Obtaining_the_JSON">JSON の取得</h3> + +<p>JSON を取得するには、{{domxref("XMLHttpRequest")}} (しばしば <strong>XHR</strong> と呼ばれる) という API を使用します。これは非常に便利な JavaScript オブジェクトで、JavaScript を使用してサーバからリソース (例：画像、テキスト、JSON、さらには HTML スニペットなど) を取得するネットワークリクエストを行うことができます。つまりページ全体を再読み込みせずに、小さな部分のコンテンツを更新することができます。これにより、よりレスポンシブな Web ページを作成できますが、それをもっと詳細に教えるのはこの記事の範囲を超えています。</p> + +<ol> + <li>まず、取得したい JSON がある URL を変数へ代入します。次のコードを JavaScript の最後の行へ追加してください。 + <pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> requestURL <span class="operator token">=</span> <span class="string token">'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'</span><span class="punctuation token">;</span></code></pre> + </li> + <li>HTTP リクエストを作成するのに、<code>new</code> を使って <code>XMLHttpRequest</code> から新しいリクエストオブジェクトをつくる必要があります。先ほどのコードの下に、次のコードを追加してください。 + <pre class="brush: js notranslate">let request = new XMLHttpRequest();</pre> + </li> + <li>新しいリクエストを開始するのには <code><a href="/ja/docs/Web/API/XMLHttpRequest/open">open()</a></code> メソッドを使います。 次のコードを追加してください。 + <pre class="brush: js notranslate">request.open('GET', requestURL);</pre> + + <p>このメソッドは最低２つのパラメータを引数として取ります（他に任意の引数を与えることもできます)。今回の簡単な例では、次の２つの必須パラメータのみを利用します。</p> + + <ul> + <li>リクエストを開始する際に HTTP のメソッドを決める必要があります。今回のケースでは、単純にデータを取得するだけですので <code><a href="/ja/docs/Web/HTTP/Methods/GET">GET</a></code> が良いでしょう。</li> + <li>リクエストを送る先の URL。今回は JSON ファイルが置かれている URL です。</li> + </ul> + </li> + <li>次に、以下の２行のコードを追加してください。XHR オブジェクトがサーバーから返されるデータを判断できるように <code><a href="/ja/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> に JSON を指定します。すると、ブラウザ側で JavaScript オブジェクトへ変換してくれます。それから、<code><a href="/ja/docs/Web/API/XMLHttpRequest/send">send()</a></code> メソッドでリクエストを送信します。 + <pre class="brush: js notranslate">request.responseType = 'json'; +request.send();</pre> + </li> + <li>最後に、サーバーからのレスポンスを待ち、それを処理するコードを用意するので、以下のコードをこれまでのコードの下に追加してください。 + <pre class="brush: js notranslate">request.onload = function() { + const superHeroes = request.response; + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + </li> +</ol> + +<p>ここでは、先ほどのリクエストに対するレスポンス (<code><a href="/ja/docs/Web/API/XMLHttpRequest/response">response</a></code> プロパティから取得できます) を <code>superHeroes</code> という変数へ代入しています。つまり、この変数に JSON を元に生成された JavaScript オブジェクトが格納されているということです! それから 2 つの関数をそのオブジェクトを引数として与えて呼び出しています。最初の関数は引数のデータを <code><header></code> へ埋め込み、2 つ目は各ヒーローごとのインフォメーションカードを作り、<code><section></code> へ埋め込みます。</p> + +<p>上記の処理は、リクエストオブジェクトで load イベントが発生した時に呼び出される関数 (<code><a href="/ja/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code> を参照) に記述しました。このイベントはレスポンスがうまく取得できた場合に呼び出されるので、 <code>request.response</code> を使って何か処理をしようとしたときに、それが必ず利用できることが保証されています。</p> + +<h3 id="Populating_the_header" name="Populating_the_header">ヘッダーへの値のセット</h3> + +<p>ここまでで、JSON の取得と JavaScript オブジェクトへの変換ができました、先ほどの 2 つの関数を実装して使ってみましょう。まずはじめに、以下のコードをこれまでのコードの下に追加してください。</p> + +<pre class="brush: js notranslate">function populateHeader(obj) { + const myH1 = document.createElement('h1'); + myH1.textContent = obj['squadName']; + header.appendChild(myH1); + + const myPara = document.createElement('p'); + myPara.textContent = 'Hometown: ' + obj['homeTown'] + ' // Formed: ' + obj['formed']; + header.appendChild(myPara); +}</pre> + +<p>まず、<code><a href="/ja/docs/Web/API/Document/createElement">createElement()</a></code> で {{HTMLElement("h1")}} 要素を生成、その <code><a href="/ja/docs/Web/API/Node/textContent">textContent</a></code> プロパティにそのオブジェクトの <code>squadName</code> プロパティをセット、そしてそれを <code><a href="/ja/docs/Web/API/Node/appendChild">appendChild()</a></code> を使いヘッダーに追加します。そして要素の生成、テキストのセット、ヘッダーへの追加という同じような操作をパラグラフ要素でも行います。セットするテキストの値が <code>homeTown</code> と <code>formed</code> プロパティの文字列を結合したものであるという点だけが異なります。</p> + +<h3 id="Creating_the_hero_information_cards" name="Creating_the_hero_information_cards">ヒーローインフォメーションカードの作成</h3> + +<p>次に、以下の関数をコードの下へ追記してください。この関数はスーパーヒーローカードの作成と画面表示を行います。</p> + +<pre class="brush: js notranslate">function showHeroes(jsonObj) { + const heroes = jsonObj['members']; + + for (let i = 0; i < heroes.length; i++) { + const myArticle = document.createElement('article'); + const myH2 = document.createElement('h2'); + const myPara1 = document.createElement('p'); + const myPara2 = document.createElement('p'); + const myPara3 = document.createElement('p'); + const myList = document.createElement('ul'); + + myH2.textContent = heroes[i].name; + myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity; + myPara2.textContent = 'Age: ' + heroes[i].age; + myPara3.textContent = 'Superpowers:'; + + const superPowers = heroes[i].powers; + for (let j = 0; j < superPowers.length; j++) { + const listItem = document.createElement('li'); + listItem.textContent = superPowers[j]; + myList.appendChild(listItem); + } + + myArticle.appendChild(myH2); + myArticle.appendChild(myPara1); + myArticle.appendChild(myPara2); + myArticle.appendChild(myPara3); + myArticle.appendChild(myList); + + section.appendChild(myArticle); + } +}</pre> + +<p>始めに、JavaScript オブジェクトの <code>members</code> プロパティを新しい変数に保存します。<br> + この配列は複数のオブジェクトを持ち、オブジェクトはそれぞれのヒーローについての情報を持ちます。</p> + +<p>次に、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for ループ</a>を使って配列の個々のオブジェクトについてループしていきます。それぞれについて:</p> + +<ol> + <li>新しい要素をいくつか作ります: <code><article></code> 1つ、<code><h2></code> 1つ、3つの <code><p></code> と1つの <code><ul></code> です。</li> + <li><code><h2></code> の中身を今のヒーローの名前 (<code>name</code>) にします。</li> + <li>3つの <code><p></code> の中身を、それぞれの <code>secretIdentity</code> と <code>age</code>、リストにある情報を紹介していくために「超能力 ("Superpowers:")」で始まる行とします。</li> + <li><code>powers</code> プロパティを <code>superPowers</code> という新しい定数に保存します — この定数は今のヒーローの超能力のリストを持つ配列です。</li> + <li>別の <code>for</code> ループをつかって、今のヒーローの超能力をループします — それぞれに対する <code><li></code> 要素を作成し、超能力をこの要素の中身とし、<code><ul></code>要素(<code>myList</code>変数)の <code>listItem</code> に <code>appendChild()</code> を使って追加します。</li> + <li>最後の最後にやるのは、<code><h2></code>、<code><p></code>、<code><ul></code> を <code><article></code> (<code>myArticle</code>) の中身に追加し、それから <code><article></code> を <code><section></code> の中身に追加します。HTML の中身として表示される順序になりますので、これらの要素が追加された順序は重要です。</li> +</ol> + +<div class="note"> +<p><strong>付記</strong>: 例を動かしてみるのに問題があったら、<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> ソースコードを参照して見て下さい(こちらで <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">ライブ実行</a> もできます)。</p> +</div> + +<div class="note"> +<p><strong>付記</strong>: もし JavaScript オブジェクトにアクセスするのに使っているドット/ブラケット記法をなぞっていくのが難しければ、<a href="http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">superheroes.json</a> のファイルを別のタブやテキストエディタで開いておいて、JavaScript と並べて読んでいくとわかりやすいかもしれません。<a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a> 記事にも戻って、ドット/ブラケット記法について読み返してみてください。</p> +</div> + +<h2 id="Converting_between_objects_and_text" name="Converting_between_objects_and_text">オブジェクトとテキスト間の変換</h2> + +<p>上の例は XHR リクエストで JSON レスポンスを直接JavaScript オブジェクトに変換していたので、JavaScript オブジェクトへのアクセスという面では単純でした。次の部分です:</p> + +<pre class="brush: js notranslate">request.responseType = 'json';</pre> + +<p>時にはこんなにツイていない場合もあります — 時には生の JSON 文字列を受けとり、自分でオブジェクトに変換しなければならない場合もあるでしょう。また JavaScript オブジェクトをネットワーク越しに送信したい場合、送信する前に JSON 文字列に変換しなければならないでしょう。ツイている事に、ウェブ開発でこの二つの問題にはしょっちゅう出くわすので、ブラウザには組込みの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> オブジェクトが備わっていて、これは以下二つのメソッドを備えています:</p> + +<ul> + <li><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">parse()</a></code>: JSON文字列を引数に取り、それに対する JavaScript オブジェクトを返します。</li> + <li><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringify()</a></code>: オブジェクトを引数に取り、等価な JSON 文字列を返します。</li> +</ul> + +<p>一つめの方の動作例が <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html">heroes-finished-json-parse.html</a> にあります (<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html">ソース</a> を見て下さい) — ここでは前の方で作成した例と全く同じ事をしていますが、XHR では生の JSON 文字列を返させて、それを <code>parse()</code> で JavaScript オブジェクトに変換しているところだけが異なります。コードの重要な箇所はこの部分です:</p> + +<pre class="brush: js notranslate">request.open('GET', requestURL); +request.responseType = 'text'; // now we're getting a string! +request.send(); + +request.onload = function() { + const superHeroesText = request.response; // get the string from the response + const superHeroes = JSON.parse(superHeroesText); // convert it to an object + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + +<p>で、ご想像の通り <code>stringify()</code> は全く反対の向きに動作します。次の行をブラウザーの JavaScript コンソールに一つずつ打ち込んでいって、実際に動かしてみて下さい:</p> + +<pre class="brush: js notranslate">let myObj = { name: "Chris", age: 38 }; +myObj +let myString = JSON.stringify(myObj); +myString</pre> + +<p>JavaScript オブジェクトを作成してその中身を確認し、次に <code>stringify()</code> を使って JSON 文字列に変換し — 戻り値を新しい変数に保存しています — その値も確認しています。</p> + +<h2 id="Test_your_skills!" name="Test_your_skills!">あなたのスキルをテストしてみましょう!</h2> + +<p>この記事はここまでですが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストがいくつかあります — <a href="/ja/docs/Learn/JavaScript/Objects/Test_your_skills:_JSON">Test your skills: JSON</a> を参照してください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この節では、プログラム内で、JSON を生成する、JSON をパースする、JSON データを参照するなど、JSON を扱う方法について簡単に説明しました。次の節では、オブジェクト指向 JavaScript について見ていくことにします。</p> + +<h2 id="See_also" name="See_also">あわせて参照</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON リファレンス</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest オブジェクトリファレンス</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の利用</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Methods">HTTP リクエストメソッド</a></li> + <li><a href="http://json.org/">ECMA のオフィシャル JSON Web サイト</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向 JavaScript</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">Object のプロトタイプ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">JavaScript での継承</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト作成の練習</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールに機能を追加する</a></li> +</ul> diff --git a/files/ja/learn/javascript/objects/object-oriented_js/index.html b/files/ja/learn/javascript/objects/object-oriented_js/index.html new file mode 100644 index 0000000000..ab99282acb --- /dev/null +++ b/files/ja/learn/javascript/objects/object-oriented_js/index.html @@ -0,0 +1,291 @@ +--- +title: 初心者のためのオブジェクト指向 JavaScript +slug: Learn/JavaScript/Objects/Object-oriented_JS +tags: + - Beginner + - Create + - JavaScript + - OOJS + - OOP + - オブジェクト + - オブジェクト指向 + - 学習 + - 記事 +translation_of: Learn/JavaScript/Objects/Object-oriented_JS +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">基礎が片付いたところで、オブジェクト指向 JavaScript (OOJS) について取り上げます。この記事ではオブジェクト指向プログラミング (OOP) の基本的な視点を説明し、 JavaScript がどのようにコンストラクター関数を通じてオブジェクトクラスをエミュレートしているか、またどのようにオブジェクトインスタンスを生成しているかを紹介します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基礎的なコンピュータリテラシー、基礎的な HTML と CSS の理解、JavaScript (<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>や <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照) および OOJS (<a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a>を参照)の基礎知識。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>オブジェクト指向プログラミングの基本理論、どのようにそれが JavaScript (「すべてはオブジェクトである」) に関連しているか、どのようにコンストラクターがオブジェクトインスタンスを生成しているかを理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="Object-oriented_programming_—_the_basics" name="Object-oriented_programming_—_the_basics">オブジェクト指向プログラミング - その基本</h2> + +<p>はじめに、オブジェクト指向プログラミング (OOP) とは何か、シンプルかつ高レベルな視点を提示します。シンプルと述べたのは、OOP はあっという間にひどく複雑になり得るためで、現時点でそのすべてを論じてしまうと、助けとなるよりもむしろ混乱を生んでしまうことでしょう。OOP の基本的な考え方は、プログラムの中で扱いたい、現実世界の事物を模るためにオブジェクトを使用すること、またはそうしなければ使うことが難しいあるいは不可能だった機能にアクセスするための、シンプルな方法を提供することです。</p> + +<p>オブジェクトは、モデル化しようとしている事物に関する情報および、持たせたい機能や動作を表現する、関連したデータとコードを持つことができます。オブジェクトのデータ (しばしば関数も含む) はオブジェクトのパッケージの中 (<strong>名前空間</strong>と呼ばれることがある) に適切に格納されます (<strong>カプセル化</strong>)。オブジェクトは一般に、ネットワークを通じて容易に送信することが可能な、データストアとしても使われます。</p> + +<h3 id="Defining_an_object_template" name="Defining_an_object_template">オブジェクトのテンプレートを定義する</h3> + +<p>学校の生徒と教師の情報を表示する、シンプルなプログラムを考えてみましょう。特定のプログラミング言語の文脈ではなく、OOP 一般の理論を眺めていきます。</p> + +<p>はじめに、<a href="/ja/docs/Learn/JavaScript/Objects/Basics">オブジェクト入門の最初の記事</a>にある、人物の包括的なデータや機能を定義した、Person オブジェクトに戻りましょう。ある人物について知り得る事柄は数多くあります (住所、身長、靴のサイズ、DNA 情報、パスポート番号、顕著な人格特性など) が、このケースでは名前、年齢、性別、趣味を表示することに興味があるだけです。また、このデータに基づいた短い自己紹介や、挨拶をさせられるようにもしましょう。これは<strong>抽象化</strong> — より複雑な事物を、プログラムの目的に沿って簡単に操作できるように、その最も重要な側面を表現する、シンプルなモデルを作ること — として知られています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13889/person-diagram.png" style="display: block; height: 219px; margin: 0px auto; width: 610px;"></p> + +<h3 id="Creating_actual_objects" name="Creating_actual_objects">実際のオブジェクトの生成</h3> + +<p>このクラスから、<strong>オブジェクトインスタンス</strong>を生成することができます。オブジェクトインスタンスは、クラスで定義されたデータや機能を持ったオブジェクトです。 Person クラスから、何名かの実際の人物を生成します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15163/MDN-Graphics-instantiation-2-fixed.png" style="display: block; height: 702px; margin: 0px auto; width: 695px;"></p> + +<p>クラスからオブジェクトインスタンスが生成されるとき、クラスの<strong>コンストラクター関数</strong>が生成のために実行されます。クラスからオブジェクトインスタンスが生成される過程を<strong>インスタンス化</strong>と呼びます。オブジェクトインスタンスは、クラスを<strong>インスタンス化</strong>したものです。</p> + +<h3 id="Specialist_classes" name="Specialist_classes">専門のクラス</h3> + +<p>このケースで求めているのは、包括的な人物ではなく、より特定のタイプである、教師と生徒です。OOP では、他のクラスを元にした新しいクラスを作ることができます。これらの新しい<strong>子クラス</strong>は、<strong>親クラス</strong>からデータやコード機能を<strong>継承</strong>することができ、すべてのオブジェクトタイプに共通する機能を、重複させるのではなく、再利用することができます。クラス間で機能が異なる場合は、必要に応じて特殊化された機能を直接定義することができます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13881/MDN-Graphics-inherited-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p>これは実に役立ちます。教師と生徒は名前、性別、年齢のように多数の共通機能を共有しており、これらの機能を一度だけ定義すればいいので便利です。異なるクラスで、同じ機能を分けて定義することもでき、その機能の各定義は異なる名前空間に置かれます。例えば、生徒の挨拶は "Yo, I'm [firstName]" (例：<em>Yo, I'm Sam) という形式とし、一方の教師の挨拶は、より形式的に </em>"Hello, my name is [Prefix] [lastName], and I teach [Subject]." (例：<em>Hello, My name is Mr Griffiths, and I teach Chemistry) のように。</em></p> + +<div class="note"> +<p><strong>注</strong>: 同じ機能を複数のオブジェクトタイプが実装する能力のことを示す用語に、<strong>ポリモーフィズム</strong>があります。不思議に感じているかも知れないので念のため。</p> +</div> + +<p>子クラスのオブジェクトインスタンスを生成しましょう。例：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13885/MDN-Graphics-instantiation-teacher-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p>記事の続きでは、OOP 理論が JavaScript でどのように実践されているかを見ていきます。</p> + +<h2 id="Constructors_and_object_instances" name="Constructors_and_object_instances">コンストラクターとオブジェクトインスタンス</h2> + +<p>JavaScript では、オブジェクトやその機能を定義し初期化するために<strong>コンストラクター関数</strong>と呼ばれる特殊な関数を使用します。これは便利です。なぜならオブジェクトをいくつ作成することになるか分からない状況に出くわすでしょうから。コンストラクターは必要な数のオブジェクトを効率的な方法で作成し、必要に応じてデータや関数を付加する手段を提供します。</p> + +<p>JavaScript でコンストラクターを通じてクラスを作り、そこからオブジェクトのインスタンスを生成するところを見ていきましょう。まずは、最初のオブジェクトの記事で見た <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> ファイルの新しいコピーを、ローカルに作成したおいてください。</p> + +<h3 id="A_simple_example" name="A_simple_example">シンプルな例</h3> + +<ol> + <li>どのように通常の関数で人物を定義できるかを見てみるところから始めましょう。この関数を <code>script</code> 要素の中に加えてください。 + + <pre class="brush: js notranslate">function createNewPerson(name) { + const obj = {}; + obj.name = name; + obj.greeting = function() { + alert('Hi! I\'m ' + obj.name + '.'); + }; + return obj; +}</pre> + </li> + <li>この関数を呼び出すことで、新しい人物を生成することができます。次の 3 行をブラウザーの JavaScript コンソールで試してみてください。 + <pre class="brush: js notranslate">const salva = createNewPerson('Salva'); +salva.name; +salva.greeting();</pre> + これも十分上手くいっていますが、やや長ったらしいです。オブジェクトを生成したいと知っているなら、なぜ明示的に空のオブジェクトを生成し、返すことが必要なのでしょうか？幸いにも、 JavaScript はコンストラクター関数という形で、便利なショートカットを提供してくれます。早速作ってみましょう！</li> + <li>前の関数を、以下のもので置き換えてください。 + <pre class="brush: js notranslate">function Person(name) { + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; +}</pre> + </li> +</ol> + +<p>コンストラクター関数は、 JavaScript 版のクラスです。それは関数に期待される全ての機能を持っていますが、何も返さないし、明示的にオブジェクトを生成しもしないという点に注意してください。基本的には、プロパティとメソッドを定義するだけです。加えて、 <code>this</code> キーワードが使われていることにも注意してください。基本、オブジェクトインスタンスの 1 つが作成されるときにはいつでも、オブジェクトの <code>name</code> プロパティはコンストラクター呼び出しに渡される name 値と等しくなり、 <code>greeting()</code> メソッドもコンストラクター呼び出しに渡される name 値を使用します。</p> + +<div class="note"> +<p><strong>メモ</strong>: 通常、コンストラクター関数の名前は大文字で始まります。コードの中で、コンストラクター関数がより容易に認識されるようにするための慣習です。</p> +</div> + +<p>では、オブジェクトを生成するために、どのようにコンストラクターを呼び出したらよいでしょうか？</p> + +<ol> + <li>次の 2 行を、前のコードの続きに加えてください。 + <pre class="brush: js notranslate">let person1 = new Person('Bob'); +let person2 = new Person('Sarah');</pre> + </li> + <li>コードを保存し、ブラウザーをリロードして、以下の 4 行を JavaScript コンソールに入れて試してみてください。 + <pre class="brush: js notranslate">person1.name +person1.greeting() +person2.name +person2.greeting()</pre> + </li> +</ol> + +<p>素晴らしい！2 つの新しいオブジェクトが、異なる名前空間の下でページに格納されていることが確認できます。それらのプロパティとメソッドにアクセスするときには、 <code>person1</code> または <code>person2</code> を呼び出すことから始めなければなりません。中に含まれている機能は適切にパッケージ化されており、他の機能と衝突しないようになっています。しかしながら、それらは同じように <code>name</code> プロパティと <code>greeting()</code> メソッドが利用可能です。 2 つのオブジェクトはそれぞれ、生成されたときに割り当てられた、自身の <code>name</code> 値を使っていることに注意してください。これが <code>this</code> を使うことがとても重要である理由の 1 つであり、他の値ではなく、自身の値を使っているのです。</p> + +<p>コンストラクターをもう一度呼び出してみましょう。</p> + +<pre class="brush: js notranslate">let person1 = new Person('Bob'); +let person2 = new Person('Sarah');</pre> + +<p>いずれのケースでも、新しいオブジェクトインスタンスを生成したいとブラウザーに伝えるために <code>new</code> キーワードが使われており、その後に、括弧に必要なパラメーターを入れた関数名が続き、その結果が変数に格納されていて、一般的な関数の呼ばれ方とよく似ています。どちらのインスタンスも、次の定義によって生成されています。</p> + +<pre class="brush: js notranslate">function Person(name) { + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; +}</pre> + +<p>新しいオブジェクトが生成された後、 <code>person1</code> および <code>person2</code> 変数は、次のオブジェクトを格納しています。</p> + +<pre class="brush: js notranslate">{ + name: 'Bob', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +{ + name: 'Sarah', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +}</pre> + +<p>コンストラクター関数を呼び出すとき、毎回 <code>greeting()</code> メソッドを定義していることに注意してください。これは理想的ではありません。これを回避するために、代わりにプロトタイプに関数を定義することができます。後で見てみましょう。</p> + +<h3 id="Creating_our_finished_constructor" name="Creating_our_finished_constructor">最終的なコンストラクターの作成</h3> + +<p>上で見てきた例は、スタートのためのシンプルな例に過ぎません。次は最終的な <code>Person()</code> コンストラクター関数を作りましょう。</p> + +<ol> + <li>ここまでに挿入したコードを削除し、代わりとなるコンストラクターを追加してください。これはシンプルな例とほぼ同じもので、ほんのわずか複雑になっているだけです。 + <pre class="brush: js notranslate">function Person(first, last, age, gender, interests) { + this.name = { + first : first, + last : last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + this.bio = function() { + alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); + }; + this.greeting = function() { + alert('Hi! I\'m ' + this.name.first + '.'); + }; +}</pre> + </li> + <li>ではその下に、コンストラクターからオブジェクトインスタンスを生成するため、次の行を追加してください。 + <pre class="brush: js notranslate">let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> + </li> +</ol> + +<p>ちょうど以前行ったように、プロパティやメソッドにアクセスできることを確認できます。 JavaScript コンソールの中でやってみましょう。</p> + +<pre class="brush: js notranslate">person1['age'] +person1.interests[1] +person1.bio() +// etc.</pre> + +<div class="note"> +<p><strong>メモ</strong>: もしこの工程で何らかのトラブルがあった場合は、あなたのコードを我々のバージョン (<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a>。<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">ライブサンプル</a>も) と比べてみてください。</p> +</div> + +<h3 id="Further_exercises" name="Further_exercises">さらなる練習</h3> + +<p>まずはじめに、さらにいくつかのオブジェクトを生成する独自の行を追加し、オブジェクトインスタンスのメンバーの取得や設定をしてみてください。</p> + +<p>加えて、 <code>bio()</code> メソッドにはいくつかの問題点があります。人物が女性である、あるいは他の優先される性別分類の場合でも、その出力には常に "He" という代名詞が含まれています。また、 bio は <code>interests</code> 配列により多くのものが列挙されていても、2 つの趣味しか含みません。このクラス定義 (コンストラクター) の問題を、あなたはどのように修正することができますか？コンストラクター内に任意のコード (恐らく、いくつかの条件分岐やループが必要となるでしょう) を入れてみてください。性別や、趣味の数が 1、2、あるいは 2 よりも多いかどうかによって、文がどのように構築されるべきか考えてみてください。</p> + +<div class="note"> +<p><strong>注</strong>: もし行き詰まってしまった場合は、<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">GitHub に答えとなるリポジトリ</a> (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">ライブ</a>) があります。最初はあなた自身で書いてみてください！</p> +</div> + +<h2 id="Other_ways_to_create_object_instances" name="Other_ways_to_create_object_instances">オブジェクトインスタンスを生成する他の方法</h2> + +<p>ここまで、オブジェクトインスタンスを生成する 2 つの異なる方法を見てきました。<a href="/ja/docs/Learn/JavaScript/Objects/Basics#Object_basics">オブジェクトリテラルの宣言</a>と、上で見たコンストラクター関数の使用です。</p> + +<p>これで十分かもしれませんが、他にも方法はあります。ウェブを巡る際に遭遇したときに備えて、よく知っておいてください。</p> + +<h3 id="The_Object_constructor" name="The_Object_constructor">Object() コンストラクター</h3> + +<p>まず最初に、 <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object">Object()</a></code> コンストラクターを新しいオブジェクトの生成のために使うことができます。はい、一般的なオブジェクトにも、空のオブジェクトを生成するコンストラクターがあります。</p> + +<ol> + <li>このコードを JavaScript コンソールに入力してみましょう。 + <pre class="brush: js notranslate">let person1 = new Object();</pre> + </li> + <li><code>person1</code> 変数に空のオブジェクトが格納されました。このオブジェクトに、ドット記法とブラケット記法を使ってプロパティを追加することができます。次の例を JavaScript コンソールで試してみましょう。 + <pre class="brush: js notranslate">person1.name = 'Chris'; +person1['age'] = 38; +person1.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); +};</pre> + </li> + <li>あらかじめプロパティやメソッドを設定するため、<code>Object()</code> コンストラクターに引数としてオブジェクトリテラルを渡すことも可能です。次のコードを JavaScript コンソールで試してみてください。 + <pre class="brush: js notranslate">let person1 = new Object({ + name: 'Chris', + age: 38, + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +});</pre> + </li> +</ol> + +<h3 id="Using_the_create_method" name="Using_the_create_method">create() メソッドの使用</h3> + +<p>コードの順序についてもコンストラクターが助けとなります。コンストラクターを一箇所で作っておくと、必要に応じてインスタンスを生成することができ、それらがどこから来たものであるか、明瞭です。</p> + +<p>しかしながら、特に少数のインスタンスのみを生成する場合に、最初にコンストラクターを作らずにインスタンスを生成することを好む人もいます。JavaScript にはそれを可能とする、<code>create()</code> と呼ばれる組み込みメソッドがあります。それにより、既存のオブジェクトを基にして、新しいオブジェクトを生成することができます。</p> + +<ol> + <li>前のセクションの練習をブラウザーで終えた状態で、こちらを JavaScript コンソールで試してみてください。 + <pre class="brush: js notranslate">let person2 = Object.create(person1);</pre> + </li> + <li>次は以下のコードです。 + <pre class="brush: js notranslate">person2.name; +person2.greeting();</pre> + </li> +</ol> + +<p><code>person1</code> を基に <code>person2</code> が生成され、<code>person2</code> では同じプロパティとメソッドが利用可能であることを確認することができます。</p> + +<p><code>create()</code> には、IE8 が対応していないという制限があります。つまり、コンストラクターは古いブラウザーに対応したい場合により効果的かもしれません。</p> + +<p>いずれ、<code>create()</code> の効果についてより詳細に紹介するつもりです。</p> + +<h2 id="あなたのスキルをテストしてみましょう!">あなたのスキルをテストしてみましょう!</h2> + +<p>この記事はここまでですが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するために、さらにいくつかのテストを見つけることができます。<a class="new" href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript" rel="nofollow">あなたのスキルをテストする: オブジェクト指向 JavaScript</a> を参照してください。</p> + +<p>この一連のテストは次の記事で紹介する知識に依存していることに注意してください。なので、試してみる前に、まずそれを読んでみるといいかもしれません。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事はオブジェクト指向の理論の概略を見てきました。これですべてではありませんが、ここで扱っていることに関する考えを提示しました。加えて、オブジェクトのインスタンスを生成する様々な方法を見始めたところです。</p> + +<p>次の記事では、 JavaScript オブジェクトのプロトタイプについて紹介します。</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics">オブジェクトの基本</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向 JavaScript</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">Object のプロトタイプ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">JavaScript での継承</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト作成の練習</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールに機能を追加する</a></li> +</ul> diff --git a/files/ja/learn/javascript/objects/object_building_practice/index.html b/files/ja/learn/javascript/objects/object_building_practice/index.html new file mode 100644 index 0000000000..af94a8eede --- /dev/null +++ b/files/ja/learn/javascript/objects/object_building_practice/index.html @@ -0,0 +1,314 @@ +--- +title: オブジェクト構築の練習 +slug: Learn/JavaScript/Objects/Object_building_practice +tags: + - Article + - Beginner + - Canvas + - CodingScripting + - Guide + - JavaScript + - Learn + - Objects + - Tutorial + - 'l10n:priority' +translation_of: Learn/JavaScript/Objects/Object_building_practice +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">ここまでの記事で JavaScript オブジェクトの根幹部に関する理論と文法の詳細についてすべてを見てきて、始めていくのに十分な基礎固めをしました。この記事では実練習を行ない、独自の JavaScript オブジェクトを作っていくための実践をしていきましょう — 楽しくてカラフルなものを。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基礎的なコンピューターの知識、HTML と CSS への基本的な理解、基礎的な JavaScript の理解 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照) とオブジェクト指向JavaScript の基本 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks">JavaScript オブジェクトの基本</a>を参照)。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>オブジェクトの使い方とオブジェクト指向のテクニックを実世界のコンテストで練習する。</td> + </tr> + </tbody> +</table> + +<h2 id="Lets_bounce_some_balls" name="Lets_bounce_some_balls">ボールを弾ませよう</h2> + +<p>この記事では伝統的な「弾むボール」のデモを作ってみて、JavaScript でどれほどオブジェクトが役に立つかお見せしましょう。小さなボールは画面じゅうを跳ねまわり、それぞれがぶつかると色が変わります。完成したものはこんな風に見えることでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13865/bouncing-balls.png" style="display: block; height: 614px; margin: 0px auto; width: 800px;"></p> + +<ol> +</ol> + +<p>この例では画面にボールを描くのに <a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Canvas API</a> を使い、画面をアニメーションさせるのに <a href="/ja/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a> を使います — これらの API について事前の知識は不要です。この記事を読み終わる頃にはこれら API についてもっと知りたくなっているだろうと期待してますが。道中では、イカしたオブジェクトを活用して、ボールを壁で弾ませる、それぞれがぶつかった事を判定する(<strong>衝突判定</strong>という呼び名で知られています)といった上手いテクニックをいくつかお見せしていきます。</p> + +<h2 id="Getting_started" name="Getting_started">始めに</h2> + +<p>始める前に <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html">index.html</a></code>, <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a></code>, と <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js">main.js</a></code> ファイルのローカルコピーを作成してください。これらにはそれぞれ、以下が含まれています:</p> + +<ol> + <li>とても簡素な HTML文書で、{{HTMLElement("h1")}} 要素と、ボールを描画するための {{HTMLElement("canvas")}} 要素と、この HTML に CSS と JavaScript を適用するための要素だけからなります。</li> + <li>とても簡単なスタイル、主には<code><h1></code>のスタイルとポジションを指定し、スクロールバーやページ端周辺のマージンを消す(素敵にきれいに見せるため)ためのもの。</li> + <li><code><canvas></code>要素を設定し、これから使うことになる汎用の関数を提供する若干の JavaScript。</li> +</ol> + +<p>スクリプトの最初の部分はこんな具合です:</p> + +<pre class="brush: js notranslate">const canvas = document.querySelector('canvas'); + +const ctx = canvas.getContext('2d'); + +const width = canvas.width = window.innerWidth; +const height = canvas.height = window.innerHeight;</pre> + +<p>このスクリプトでは<code><canvas></code>要素への参照を取得し、これに対して <code><a href="/ja/docs/Web/API/HTMLCanvasElement/getContext">getContext()</a></code> メソッドを使って描画していくためのコンテキストを取得します。得られる定数 (<code>ctx</code>) はキャンバスの描画可能領域を直接表現しており、ここに二次元の形状を書き込む事ができます。</p> + +<p>次に <code>width</code> と <code>height</code> 二つの定数をセットし、キャンバス要素の幅と高さ(<code>canvas.width</code> と <code>canvas.height</code> プロパティで表わされます)をブラウザーのビューポートの幅と高さ(ウェブページが表示される領域です — {{domxref("Window.innerWidth")}} と{{domxref("Window.innerHeight")}} プロパティから取得できます)に等しくします。</p> + +<p>変数値をさっと全部同じにするのに、代入が連鎖している事に注意してください — これで全く問題ありません。</p> + +<p>初期化スクリプトの最後の部分はこんなのです:</p> + +<pre class="brush: js notranslate">function random(min, max) { + const num = Math.floor(Math.random() * (max - min + 1)) + min; + return num; +}</pre> + +<p>この関数は二つの数を引数に取り、二つ数の範囲内の乱数を戻します。</p> + +<h2 id="Modeling_a_ball_in_our_program" name="Modeling_a_ball_in_our_program">我々のプログラム用のボールを一つモデル化する</h2> + +<p>我々のプログラムでは画面中を跳ねまわるたくさんのボールがあります。これらのボールはどれも同じルールで動くので、1つのオブジェクトで表わすのが理に叶っています。まずはコードの最後に以下のコンストラクターを追加するところから始めましょう。</p> + +<pre class="brush: js notranslate">function Ball(x, y, velX, velY, color, size) { + this.x = x; + this.y = y; + this.velX = velX; + this.velY = velY; + this.color = color; + this.size = size; +}</pre> + +<p>ここではいくつかの引数を用意し、我々のプログラムの中で個々のボールが動作するのに必要なプロパティを定義しています:</p> + +<ul> + <li><code>x</code>、<code>y</code>座標 — ボールが画面のどこからスタートするか表わす水平と垂直の座標。これは 0(画面左上隅)からブラウザービューポートの幅と高さの(画面右下隅)間の値を取ります。</li> + <li>水平と垂直方向の速度(<code>velX</code> と <code>velY</code>) — 個々のボールには水平と垂直方向の速度が与えられます。実際にはアニメーションが開始されると、これらの値が <code>x</code>/<code>y</code>座標値に定期的に加算され、各フレームでこの値だけ移動していきます。</li> + <li><code>color</code> — 個々のボールには色がつけられます。</li> + <li><code>size</code> — 個々のボールには大きさがあります — ピクセルを単位とする半径で表わします。</li> +</ul> + +<p>これはプロパティを取り扱いましたが、メソッドはどうしましょう? プログラムの中ではボールに実際に何かさせたいわけです。</p> + +<h3 id="Drawing_the_ball" name="Drawing_the_ball">ボールを描画する</h3> + +<p>まず以下の <code>draw()</code> メソッドを <code>Ball()</code> のプロトタイプ(<code>prototype</code>)に追加しましょう:</p> + +<pre class="brush: js notranslate">Ball.prototype.draw = function() { + ctx.beginPath(); + ctx.fillStyle = this.color; + ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); + ctx.fill(); +}</pre> + +<p>この関数を使って、以前定義した 2D キャンバスコンテキスト(<code>ctx</code>)のメンバーを順に呼び出す方法で、ボール自身が画面に自分を描画する方法を教え込みます。コンテキストは紙のようなもので、ペンを使って何か描くように指示したいわけです:</p> + +<ul> + <li>まずは、<code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> を使って紙に形を描きたいと宣言します。</li> + <li>次に <code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> を使って形を何色にしたいか宣言します — ここではボールの <code>color</code> プロパティを指定します。</li> + <li>次に <code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/arc">arc()</a></code> メソッドを使って紙に円弧形をなぞります。これの引数は: + <ul> + <li>円弧の中心座標、<code>x</code> と <code>y</code> — ボールの <code>x</code>、<code>y</code> プロパティを指定します。</li> + <li>円弧の半径 — ここではボールの <code>size</code> プロパティです。</li> + <li>最後の二つの引数は円弧の開始点から終了点までの角度を円の中心角で指定します。ここでは 0度から <code>2 * PI</code>、これはラジアンで表わした 360度に相当します(ややこしいですがラジアンで指定しなければなりません)。これで一周した円を描けます。もし <code>1 * PI</code> までしか指定しなければ、半円(180度)になるでしょう。</li> + </ul> + </li> + <li>最後の最後に、<code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code> メソッドを使って、これはおおよそ、「<code>beginPath()</code> から描き始めた線描を終了し、描いた領域を前に <code>fillStyle</code> で指定していた色で塗り潰せ」という指示になります。</li> +</ul> + +<p>これでオブジェクトをテストしてみられるようになりました。</p> + +<ol> + <li>コードを保存し、HTML ファイルをブラウザーで読み込みます。</li> + <li>ブラウザーの JavaScript コンソールを開いて、ページをリフレッシュし、キャンバスのサイズがコンソール分小さくなったビューポート領域に合うようにします。</li> + <li>次をタイプして、新しいボールのインスタンスを作成します: + <pre class="brush: js notranslate">let testBall = new Ball(50, 100, 4, 4, 'blue', 10);</pre> + </li> + <li>そのメンバを呼び出して見てください: + <pre class="brush: js notranslate">testBall.x +testBall.size +testBall.color +testBall.draw()</pre> + </li> + <li>最後の行を入力すると、キャンバスのどこかにボールが表示されたはずです。</li> +</ol> + +<h3 id="Updating_the_balls_data" name="Updating_the_balls_data">ボールのデータを更新する</h3> + +<p>ボールを座標に表示できるようになりましたが、ボールを実際に移動させるには、何らかの更新するための関数が必要です。JavaScript ファイルの最後に以下のコードを追加し、<code>update()</code> メソッドを <code>Ball()</code> の <code>prototype</code> に追加します:</p> + +<pre class="brush: js notranslate">Ball.prototype.update = function() { + if ((this.x + this.size) >= width) { + this.velX = -(this.velX); + } + + if ((this.x - this.size) <= 0) { + this.velX = -(this.velX); + } + + if ((this.y + this.size) >= height) { + this.velY = -(this.velY); + } + + if ((this.y - this.size) <= 0) { + this.velY = -(this.velY); + } + + this.x += this.velX; + this.y += this.velY; +}</pre> + +<p>関数の頭から 4 つの部分でボールがキャンバスの端に達したかどうかチェックします。もしそうであれば、関連する速度の向きを反転してボールが反対の向きに移動するようにします。つまり例えば、ボールが上方向に移動していたならば(<code>velY</code> が正)、垂直方向の速度をボールが下方向に移動するように変更します(<code>velY</code> を負に)。(<strong>訳注</strong>: 左上が原点、右下が座標の正方向ならば、ボールが上に移動する時の velY は負のはずだけど…)</p> + +<p>4 つの場合で、次のことを確認しています:</p> + +<ul> + <li><code>x</code>座標がキャンバスの幅より大きいか (ボールは右端から飛び出そうとしている)</li> + <li><code>x</code>座標が 0 より小さいか (ボールは左端から飛び出そうとしている)</li> + <li><code>y</code>座標がキャンバスの高さより大きいか (ボールは下端から飛び出そうとしている)</li> + <li><code>y</code>座標が 0 より小さいか (ボールは上端から飛び出そうとしている)</li> +</ul> + +<p>それぞれの場合で計算にボールの <code>size</code> を含めていますが、これは <code>x</code>/<code>y</code>座標はボールの中心ですが、ボールの端のところで周囲から跳ね返って欲しいからです — 跳ね返る前に画面外にめり込んで欲しくないからです。</p> + +<p>最後の二行では <code>velX</code> を <code>x</code> 座標に、<code>velY</code> を <code>y</code> 座標に加算しています — 結果ボールはこのメソッドが呼ばれる毎に移動します。</p> + +<p>とりあえずはここまでで、ちょいとアニメーションさせてみよう!</p> + +<h2 id="Animating_the_ball" name="Animating_the_ball">ボールのアニメーション</h2> + +<p>さあ、楽しい事をやりましょう。では、キャンバスにボールを追加し、アニメーションさせるところから始めましょう。</p> + +<ol> + <li>最初に、ボールを全部保存しておく場所がどこかに必要です。以下がこれをやってくれます — あなたのコードの最後に追加してください: + <pre class="brush: js notranslate">let balls = []; + +while (balls.length < 25) { + let size = random(10,20); + let ball = new Ball( + // ball position always drawn at least one ball width + // away from the edge of the canvas, to avoid drawing errors + random(0 + size,width - size), + random(0 + size,height - size), + random(-7,7), + random(-7,7), + 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')', + size + ); + + balls.push(ball); +}</pre> + + <p><code>while</code> ループは、我々の <code>random()</code>関数で作成したランダムな値を使った新しい <code>Ball()</code> のインスタンスを作成し、ボールの配列の後ろに <code>push()</code> して追加していきますが、これは配列中のボールの数が 25 に満たない間まで繰り返されます。<code>balls.length < 25</code> の数字をいろいろ変えれば表示されるボールの数を増やしたり減らしたりできます。あなたのコンピューターとブラウザーがどれだけ速いかによりますが、ボールを数千にするとアニメーションはかなり遅くなります! 注意してね。</p> + </li> + <li>以下をあなたのコードの末尾に追加してください: + <pre class="brush: js notranslate">function loop() { + ctx.fillStyle = 'rgba(0, 0, 0, 0.25)'; + ctx.fillRect(0, 0, width, height); + + for (let i = 0; i < balls.length; i++) { + balls[i].draw(); + balls[i].update(); + } + + requestAnimationFrame(loop); +}</pre> + + <p>ものをアニメーションさせるすべてのプログラムには、大概アニメーションループがあり、プログラム内の情報を更新して、アニメーションの各フレームでその結果を表示します。これは大半のゲームや類似するプログラムの基本になります。コード中の <code>loop()</code> 関数は以下の事を行ないます:</p> + + <ul> + <li>キャンバスの塗り潰し色を半透明の黒にし、その色でキャンバスの幅と高さいっぱいの長方形を <code>fillRect()</code> で描きます(これの 4 つの引数は始点の座標と、描画する長方形の幅と高さになります)。これで次のフレームを描く前に、前のフレームで描いた内容を見えなくします。これをしないと、ボールじゃなくて長い蛇がキャンバスの中を這い回る様を見る事になります! 塗り潰す色は半透明の <code>rgba(0,0,0,0.25)</code> なので、以前の何フレーム分かがかすかに残り、ボールが移動した後の軌跡を表現します。もし 0.25 を 1 に変更すると、軌跡は全く見えなくなります。この値を変えて、どんな効果になるか見てみてください。</li> + <li>ループで <code>balls</code>配列のボール全部をなめてそれぞれのボールの <code>draw()</code> と <code>update()</code> 関数を実行し、それぞれを画面に描画してから、次のフレームに備えて必要な位置と速度の更新を行います。</li> + <li>この関数を <code>requestAnimationFrame()</code> メソッドを使って再実行します — このメソッドが繰り返し実行され同じ関数名を与えられると、その関数がスムースなアニメーションを行なうために毎秒設定された回数実行されます。これはたいてい再帰的に行われます — つまり関数は毎回その関数自身を呼び出すので、何度も何度も繰り返し実行されます。</li> + </ul> + </li> + <li>最後に、あなたのコードの最後に次の行を追加します — アニメーションを開始するために、一旦は関数を呼ぶ必要があるのです。 + <pre class="brush: js notranslate">loop();</pre> + </li> +</ol> + +<p>基本としてはこんなところ — セーブしてリフレッシュして、ボールがはずむのをテストしてみてください!</p> + +<h2 id="Adding_collision_detection" name="Adding_collision_detection">衝突判定を追加する</h2> + +<p>さあ、もうちょっと面白くするため、プログラムに衝突判定を追加して、ボールに他のボールとぶつかったらどうするのか教えましょう。</p> + +<ol> + <li>最初に、以下のメソッド定義を <code>update()</code> メソッドを定義した箇所(つまり <code>Ball.prototype.update</code> ブロック)の下に追加します + + <pre class="brush: js notranslate">Ball.prototype.collisionDetect = function() { + for (let j = 0; j < balls.length; j++) { + if (!(this === balls[j])) { + const dx = this.x - balls[j].x; + const dy = this.y - balls[j].y; + const distance = Math.sqrt(dx * dx + dy * dy); + + if (distance < this.size + balls[j].size) { + balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')'; + } + } + } +}</pre> + </li> + <li> + <p>このメソッドはちょっとばかり複雑なので、今はどんな動作をしているのか正確に理解できなくても構いません。説明していきます:</p> + + <ul> + <li>それぞれのボールで、他のボールそれぞれとこのボールが衝突していないか調べなければなりません。そのために、<code>balls[]</code>配列すべてのボールを回すために別の <code>for</code> ループを始めます。</li> + <li>内側のループに入ってすぐ、<code>if</code>文でループで回しているボールがチェックしているボールと同じか調べています。ボールがそれ自体とぶつかっているかチェックしたくないですから! これのために、現在のボール(collisionDetect メソッドが実行されているボールです)がループ中のボール(現在の collisionDetect メソッド内のループのくりかえし中で参照されているボール)と一致しているかチェックします。<code>!</code>を使って等価性チェックを逆にしているので、<code>if</code> 文の中のコードはボールが<strong>同じでない</strong>ときだけ実行されます。</li> + <li>そして二つの円が衝突していないか調べるための一般的なアルゴリズムを使っています。基本的には円ないの領域が重なっているかチェックしています。これについて詳しくは <a href="/ja/docs/Games/Techniques/2D_collision_detection">2次元の衝突判定</a>で解説されています。</li> + <li>もし衝突が検出されたら、内側の <code>if</code>文の中のコードが実行されます。この場合では、両方のボールの <code>color</code> プロパティをランダムな新しい色に設定しているだけです。もっと複雑なこと、現実っぽくボールを互いに跳ね返らせたりもできたでしょうが、これを実装したとするともっとずっとに複雑なったでしょう。そのような物理シミュレーションには、<a href="http://wellcaffeinated.net/PhysicsJS/">PhysicsJS</a>, <a href="http://brm.io/matter-js/">matter.js</a>, <a href="http://phaser.io/">Phaser</a> などのゲームや物理用のライブラリを使う開発者が多いです。</li> + </ul> + </li> + <li>あなたはアニメーションの各フレーム毎にこのメソッドを呼ばなければなりません。以下を <code>balls[i].update();</code> の行の後に追加してください: + <pre class="brush: js notranslate">balls[i].collisionDetect();</pre> + </li> + <li>保存とデモのリフレッシュをして、ボールがぶつかった時に色が変わるのを見てください!</li> +</ol> + +<div class="note"> +<p><strong>注記</strong>: この例題を動かすのに困った時は、あなたの JavaScript コードを私たちの<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">完成版</a>と比べてみてください(<a href="http://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html">ライブ実行版</a>も見られます)。</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>自分版の実世界で跳ね回るランダムボール例作り、この全単元で出てきた様々なオブジェクトやオブジェクト指向テクニックを使ったものをあなたに楽しんでいただけていれば、と思います。オブジェクトの実践的な使い方の練習や、実世界のコンテキストについて得られるものがあったはずです。</p> + +<p>オブジェクトに関する記事は以上です — 残るのは、あなが自分のスキルをオブジェクトの評価問題で試してみる事だけです。</p> + +<h2 id="See_also" name="See_also">参考文献</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> — 2D キャンバスの初心者向けガイド。</li> + <li><a href="/ja/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></li> + <li><a href="/ja/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></li> + <li><a href="/ja/docs/Games/Techniques/3D_collision_detection">3D collision detection</a></li> + <li><a href="/ja/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a> — 2D ゲームの作り方に関する、素晴しい初心者向けチュートリアル。</li> + <li><a href="/ja/docs/Games/Tutorials/2D_breakout_game_Phaser">2D breakout game using Phaser</a> — JavaScript ゲームライブラリを使って 2D ゲームを作るための基本を解説しています。</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向 JavaScript</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">Object のプロトタイプ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">JavaScript での継承</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト作成の練習</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールに機能を追加する</a></li> +</ul> diff --git a/files/ja/learn/javascript/objects/object_prototypes/index.html b/files/ja/learn/javascript/objects/object_prototypes/index.html new file mode 100644 index 0000000000..4e9419e49d --- /dev/null +++ b/files/ja/learn/javascript/objects/object_prototypes/index.html @@ -0,0 +1,314 @@ +--- +title: Object のプロトタイプ +slug: Learn/JavaScript/Objects/Object_prototypes +tags: + - Beginner + - CodingScripting + - JavaScript + - Learn + - OOJS + - OOP + - Object + - Prototype + - create() + - 'l10n:priority' + - コンストラクタ + - 記事 +translation_of: Learn/JavaScript/Objects/Object_prototypes +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">プロトタイプは、JavaScript オブジェクトが互いに機能を継承するメカニズムです。この記事では、プロトタイプチェーンの仕組みを説明し、<code>prototype</code> プロパティを使って既存のコンストラクタにメソッドを追加する方法を見ていきます。</p> + +<div class="blockIndicator note"> +<p class="summary"><strong>Note</strong>: この記事では、伝統的な JavaScript のコンストラクタとクラスを取り上げます。次の記事では、同じことを実現するためのより簡単な構文を提供する現代的な方法について話します - <a href="/ja/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ECMAScript 2015 のクラス</a>を参照してください。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>JavaScript 関数の理解、JavaScript の基礎知識 (<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と<a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照)、OOJS の基礎 (<a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a>を参照)</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript のオブジェクトのプロトタイプ、プロトタイプチェーンの動作方法、prototype プロパティに新しいメソッドを追加する方法を理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="プロトタイプベースの言語とは">プロトタイプベースの言語とは?</h2> + +<p>JavaScript はしばしば<strong>プロトタイプベースの言語</strong>として記述されます - 継承を提供するために、オブジェクトはメソッドやプロパティを継承するテンプレートオブジェクトとして機能する <strong><code>prototype</code> オブジェクト</strong>を持つことができます。</p> + +<p>オブジェクトのプロトタイプオブジェクトは、メソッドやプロパティを継承するプロトタイプオブジェクトを持つことができます。これはしばしば<strong>プロトタイプチェーン</strong>と呼ばれ、異なるオブジェクトが他のオブジェクトに定義されたプロパティやメソッドを持つ理由を説明しています。</p> + +<p>JavaScript では、オブジェクトのインスタンスとプロトタイプ (コンストラクタの <code>prototype</code> プロパティから派生した <code>__proto__</code> プロパティ) の間にリンクが張られており、プロパティとメソッドはプロトタイプの連鎖を辿って見つけられます。</p> + +<div class="note"> +<p><strong>Note:</strong> <strong>オブジェクトの <code>prototype</code></strong> (<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf">Object.getPrototypeOf(<var>obj</var>)</a></code> または非推奨の <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> プロパティで取得可能) と<strong>コンストラクタ関数の<code>prototype</code> プロパティ</strong>の違いを理解することが重要です。</p> + +<p>前者は各インスタンス上のプロパティ、後者はコンストラクタ上のプロパティです。つまり、<code>Object.getPrototypeOf(new <var>Foobar</var>())</code> は<code><var>Foobar</var>.prototype</code>と同じオブジェクトを参照しています。</p> +</div> + +<p>これを少し明確にするための例を見てみましょう。</p> + +<h2 id="プロトタイプオブジェクトの理解">プロトタイプオブジェクトの理解</h2> + +<p>ここでは、Person() コンストラクタを書き終えた例に戻ります - ブラウザで例を読み込んでください。前回の記事で紹介した <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> の例を使うことができます (<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">ソースコード</a>も参照してください)。</p> + +<p>この例では、次のようにコンストラクタ関数を定義しています。</p> + +<pre class="brush: js notranslate">function Person(first, last, age, gender, interests) { + + // property and method definitions + this.name = { + 'first': first, + 'last' : last + }; + this.age = age; + this.gender = gender; + //...see link in summary above for full definition +}</pre> + +<p>次に、このようなオブジェクトインスタンスを作成します。</p> + +<pre class="brush: js notranslate">let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> + +<p>JavaScript コンソールに "<code>person1.</code>" と入力すると、ブラウザがこのオブジェクトで利用可能なメンバ名でこれを自動補完しようとするはずです：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13853/object-available-members.png" style="display: block; margin: 0 auto;"></p> + +<p>このリストでは、<code>person1</code> のコンストラクタである <code>Person()</code> で定義されているメンバ - <code>name</code>、<code>age</code>、<code>gender</code>、<code>interests</code>、<code>bio</code>、<code>greeting</code> - が表示されています。しかし、他にも <code>toString</code> や <code>valueOf</code> などのメンバがあり、これらのメンバは <code>person1</code> の prototype オブジェクトの prototype オブジェクト (<code>Object.prototype</code>) で定義されています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13891/MDN-Graphics-person-person-object-2.png" style="display: block; height: 150px; margin: 0px auto; width: 700px;"></p> + +<p>実際に <code>Object.prototype</code> で定義されている <code>person1</code> のメソッドを呼び出すとどうなりますか？例えば</p> + +<pre class="brush: js notranslate">person1.valueOf()</pre> + +<p><code>valueOf()</code> は、呼び出されたオブジェクトの値を返します。この場合、何が起こるかというと</p> + +<ul> + <li>ブラウザは最初に、<code>person1</code> オブジェクトのコンストラクタ <code>Person()</code> で定義されている <code>valueOf()</code> メソッドが利用可能かどうかをチェックしますが、利用できません</li> + <li>そこで、ブラウザは <code>person1</code> のプロトタイプオブジェクトに <code>valueOf()</code> メソッドが利用可能かどうかをチェックします。メソッドがない場合、ブラウザは <code>person1</code> のプロトタイプオブジェクトのプロトタイプオブジェクトをチェックします。メソッドが呼び出されて、すべてがうまくいきました</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: プロトタイプチェーンの中では、メソッドやプロパティはあるオブジェクトから別のオブジェクトにコピー<strong>されない</strong>ことを再確認しておきましょう。これらのメソッドやプロパティは、上で説明したように<em>チェーンを上っていく</em>ことで<em>アクセス</em>されます。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: プロトタイプチェーンは、プロパティを取得している間のみ巡回されます。プロパティがオブジェクトに直接設定されたり<code><a href="/ja/docs/Web/JavaScript/Reference/Operators/delete">削除されたり</a></code>した場合は、プロトタイプチェーンは走査されません。</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: ECMAScript 2015 以前は、オブジェクトの <code>prototype</code> に直接アクセスする方法は公式にはありませんでした - チェーン内のアイテム間の「リンク」は、JavaScript 言語の仕様で <code>[[prototype]]</code> と呼ばれる内部プロパティで定義されています ({{glossary("ECMAScript")}}}を参照してください)。</p> + +<p>しかし、ほとんどの最新のブラウザでは、オブジェクトのコンストラクタのプロトタイプオブジェクトを含む <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> (アンダースコア2個分) というプロパティを提供しています。例えば、<code>person1.__proto__</code> と <code>person1.__proto__.__proto__</code> を試してみてください。</p> + +<p>ECMAScript 2015 からは、<code>Object.getPrototypeOf(obj)</code> を介して間接的にオブジェクトのプロトタイプオブジェクトにアクセスすることができます。</p> +</div> + +<h2 id="prototypeプロパティ：継承されたメンバーが定義されている場所">prototypeプロパティ：継承されたメンバーが定義されている場所</h2> + +<p>では、継承されたプロパティとメソッドはどこに定義されているのでしょうか？ <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>リファレンスページを見ると、左側に多数のプロパティとメソッドが表示されます。上のスクリーンショットで<code>person1</code>オブジェクトで使用できた継承されたメンバーの数を超えています。いくつかは継承されており、一部は継承されていません。これはなぜでしょうか？<br> + <br> + 上で述べたように、継承されたものは <code>prototype</code> プロパティ (サブネームスペースと呼ぶこともできます) で定義されたものであり、それは <code>Object.prototype.</code> で始まるものであって、<code>Object.</code> だけで始まるものではありません。<code>prototype</code> プロパティの値はオブジェクトであり、基本的には、プロトタイプチェーンのさらに下のオブジェクトに継承させたいプロパティやメソッドを格納するためのバケットです。<br> + <br> + そのため、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">Object.prototype.toString()</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">Object.prototype.valueOf()</a></code> などは、<code>Person()</code> コンストラクタから作成された新しいオブジェクトインスタンスを含め、<code>Object.prototype</code> を継承するあらゆるオブジェクトタイプで利用できます。</p> + +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is()</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code> など、<code>prototype</code> バケット内で定義されていないメンバは、<code>Object.prototype</code> を継承するオブジェクトインスタンスやオブジェクトタイプには継承されません。これらは、<code>Object()</code> コンストラクタ自身でのみ利用可能なメソッド/プロパティです。</p> + +<div class="note"> +<p><strong>Note</strong>: コンストラクタ上で定義されたメソッドが、それ自体が関数であるというのは不思議な感じがします。</p> + +<p>まあ、関数はオブジェクトの型でもあります。信じられないかもしれませんが、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code> のコンストラクタリファレンスを参照してください。</p> +</div> + +<ol> + <li>既存のプロトタイプのプロパティを自分でチェックすることができます。先ほどの例に戻って、JavaScript コンソールに次のように入力してみてください + <pre class="brush: js notranslate">Person.prototype</pre> + </li> + <li>カスタムコンストラクタのプロトタイプに何も定義していないので、出力はあまり表示されません。デフォルトでは、コンストラクタの <code>prototype</code> は常に空から始まります。では、次のようにしてみてください + <pre class="brush: js notranslate">Object.prototype</pre> + </li> +</ol> + +<p>先ほど示したように、<code>Object</code> の <code>prototype</code> プロパティに定義された多数のメソッドが、<code>Object</code> を継承するオブジェクトで利用できるようになっています。</p> + +<p>プロトタイプチェーン継承の他の例は、JavaScript の至る所で見ることができます。例えば、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code> などのグローバルオブジェクトのプロトタイプに定義されているメソッドやプロパティを探してみてください。これらはすべて、プロトタイプに定義されたいくつかのメンバを持っており、例えばこのように文字列を作るとき</p> + +<pre class="brush: js notranslate">let myString = 'This is my string.';</pre> + +<p><code>myString</code>が最初から、<code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split">split()</a></code>、<code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">indexOf()</a></code>、<code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a></code>などの便利なメソッドを多数持っている理由です。</p> + +<div class="note"> +<p><strong>Note</strong>: このセクションを理解して、もっと知りたいと思ったら、<a href="/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Using_prototypes_in_JavaScript">JavaScript でのプロトタイプの使用</a> についてのより詳細なガイドを読む価値があります。このセクションは、これらの概念に初めて出会ったときに少しでも理解しやすくするために、意図的に簡略化しています。</p> +</div> + +<div class="warning"> +<p><strong>重要</strong>: <code>prototype</code> プロパティは JavaScript の中でも最も紛らわしい名前がついている部分の一つです (<code>this</code> は <code>__proto__</code> でアクセスできる内部オブジェクトです、覚えていますか？)。代わりに <code>prototype</code> は、継承したいメンバを定義したオブジェクトを含むプロパティです。</p> +</div> + +<h2 id="create_の再訪">create() の再訪</h2> + +<p>先ほど、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code> メソッドを使用して新しいオブジェクトのインスタンスを作成する方法を紹介しました。</p> + +<ol> + <li>例えば、先ほどの例の JavaScript コンソールでこれを試してみてください + <pre class="brush: js notranslate">let person2 = Object.create(person1);</pre> + </li> + <li><code>create()</code> が実際に行うことは、指定したプロトタイプオブジェクトから新しいオブジェクトを作成することです。ここでは、<code>person1</code> をプロトタイプオブジェクトとして使用して <code>person2</code> を作成しています。これはコンソールで以下のように入力することで確認できます + <pre class="brush: js notranslate">person2.__proto__</pre> + </li> +</ol> + +<p>これで <code>person1</code> オブジェクトが返されます。</p> + +<h2 id="コンストラクタのプロパティ">コンストラクタのプロパティ</h2> + +<p>すべてのコンストラクタ関数は <code>prototype</code> プロパティを持ち、その値は <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code> プロパティを含むオブジェクトとなります。この <code>constructor</code> プロパティは、元のコンストラクタ関数を指します。</p> + +<p>次のセクションでお分かりのように、<code>Person.prototype</code> プロパティ (あるいは上のセクションで述べたように、一般的にはコンストラクタ関数の <code>prototype</code> プロパティに定義されているオブジェクト) は、<code>Person()</code> コンストラクタを使用して作成されたすべてのインスタンスオブジェクトで利用可能になります。したがって、コンストラクタプロパティは <code>person1</code> と <code>person2</code> の両方のオブジェクトでも利用可能です。</p> + +<ol> + <li>例えば、コンソールで次のコマンドを試してみてください + <pre class="brush: js notranslate">person1.constructor +person2.constructor</pre> + + <p>これらのインスタンスの元の定義を含む <code>Person()</code> コンストラクタを返します。</p> + + <p>巧妙なトリックとしては、<code>constructor</code> プロパティの最後に括弧を付けて (必要なパラメータを含む)、そのコンストラクタから別のオブジェクトのインスタンスを作成することができます。コンストラクタは結局のところ関数なので、括弧を使用して呼び出すことができます。関数をコンストラクタとして使用したい場合は、<code>new</code> キーワードを含めて指定する必要があります。</p> + </li> + <li>これをコンソールで試してみてください + <pre class="brush: js notranslate">let person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);</pre> + </li> + <li>では、新しいオブジェクトの機能にアクセスしてみましょう + <pre class="brush: js notranslate">person3.name.first +person3.age +person3.bio()</pre> + </li> +</ol> + +<p>これはよく機能します。頻繁に使用する必要はありませんが、新しいインスタンスを作成したいときに、何らかの理由で元のコンストラクタへの参照が簡単に利用できない場合に非常に便利です。</p> + +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code> プロパティには他の用途もあります。たとえば、オブジェクトのインスタンスがあり、そのインスタンスのコンストラクタの名前を返したい場合は次のようにします。</p> + +<pre class="brush: js notranslate">instanceName.constructor.name</pre> + +<p>たとえば、これを試してみてください：</p> + +<pre class="brush: js notranslate">person1.constructor.name +</pre> + +<div class="note"> +<p><strong>Note</strong>: <code>constructor.name</code> の値は (プロトタイプの継承、バインディング、プリプロセッサ、トランスパイラなどによる) 変わる可能性があります。そのため、より複雑な例では、代わりに <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code> 演算子を使用することになります。</p> +</div> + +<ol> +</ol> + +<h2 id="プロトタイプの変更">プロトタイプの変更</h2> + +<p>コンストラクタ関数の <code>prototype</code> プロパティを変更する例を見てみましょう - メソッドは、コンストラクタから作成されたすべてのオブジェクトインスタンスで利用可能になります。この時点で、最後に <code>Person()</code> コンストラクタのプロトタイプに何かを追加します。</p> + +<ol> + <li><a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> の例に戻り、<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">ソースコード</a>のローカルコピーを作成します。既存の JavaScript の下に、コンストラクタの <code>prototype</code> プロパティに新しいメソッドを追加する次のコードを追加します + + <pre class="brush: js notranslate">Person.prototype.farewell = function() { + alert(this.name.first + ' has left the building. Bye for now!'); +};</pre> + </li> + <li>コードを保存してブラウザでページを読み込み、テキスト入力に以下のように入力してみてください + <pre class="brush: js notranslate">person1.farewell();</pre> + </li> +</ol> + +<p>コンストラクタ内で定義されている人の名前を特徴とする警告メッセージが表示されるはずです。これは本当に便利ですが、さらに便利なのは継承チェーン全体が動的に更新され、コンストラクタから派生したすべてのオブジェクトインスタンスでこの新しいメソッドが自動的に利用できるようになったことです。</p> + +<p>ちょっと考えてみましょう。このコードでは、コンストラクタを定義し、そのコンストラクタからインスタンスオブジェクトを作成し、コンストラクタのプロトタイプに新しいメソッドを追加しています。</p> + +<pre class="brush: js notranslate">function Person(first, last, age, gender, interests) { + + // プロパティおよびメソッドを定義する + +} + +let person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']); + +Person.prototype.farewell = function() { + alert(this.name.first + ' has left the building. Bye for now!'); +};</pre> + +<p>しかし、<code>farewell()</code> メソッドは <code>person1</code> オブジェクトのインスタンスで利用可能です。そのメンバーは、新たに定義された <code>farewell()</code> メソッドを含むように自動的に更新されます。</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 逆に、コンストラクタのプロトタイプに定義されたプロパティを <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> 演算子を使用して削除すると、他のすべてのクラスインスタンスからもそれぞれのプロパティが削除されます。</p> + +<p>上記の例では、<code>delete person1.__proto__.farewell</code> または <code>delete Person.prototype.farewell</code> を実行すると、すべての <code>Person</code> インスタンスから <code>farewell()</code> メソッドが削除されます。</p> + +<p>この問題を軽減するために、代わりに <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a></code> を使用することができます。</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: この例がうまく動作しない場合は、<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html">oojs-class-prototype.html</a> の例を見てください (<a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html">ライブ</a>でも参照してください) 。</p> +</div> + +<p>このように定義されたプロパティは柔軟性に欠けるため、<code>prototype</code> プロパティで定義されることはほとんどありません。例えば、次のようなプロパティを追加することができます。</p> + +<pre class="brush: js notranslate">Person.prototype.fullName = 'Bob Smith';</pre> + +<p>これはその person がその名前で呼ばれていないかもしれないので、あまり柔軟性がありません。<code>name.first</code> と <code>name.last</code> から <code>fullName</code> を作成する方がずっと良いでしょう。</p> + +<pre class="brush: js notranslate">Person.prototype.fullName = this.name.first + ' ' + this.name.last;</pre> + +<p>しかし、これではうまくいきません。この場合、<code>this</code> は関数スコープではなくグローバルスコープを参照するからです。このプロパティを呼び出すと <code>undefined</code> を返します。これは、先ほどプロトタイプで定義したメソッドでは問題なく動作したのはそれがオブジェクトのインスタンススコープに正常に転送される関数スコープ内にあるためです。そのため、プロトタイプ上で不変の(つまりだれも変更する必要のない)プロパティを定義することもできますが、一般的にはコンストラクタ内でプロパティを定義する方がうまくいきます。</p> + +<p>実際、多くのオブジェクト定義でよく見られるパターンは、コンストラクタ内でプロパティを定義し、プロトタイプ上でメソッドを定義することです。これにより、コンストラクタにはプロパティの定義のみが含まれ、メソッドは別のブロックに分割されるため、コードが読みやすくなります。例えば、以下のようになります。</p> + +<pre class="brush: js notranslate">// Constructor with property definitions + +function Test(a, b, c, d) { + // プロパティ定義 +} + +// 最初のメソッド定義 + +Test.prototype.x = function() { ... }; + +// 第二のメソッド定義 + +Test.prototype.y = function() { ... }; + +// など</pre> + +<p>このパターンは、Piotr Zalewa 氏の<a href="https://github.com/zalun/school-plan-app/blob/master/stage9/js/index.js">学校計画のアプリ</a>の例で実際に見られます。</p> + +<h2 id="あなたのスキルをテストしてみましょう!">あなたのスキルをテストしてみましょう!</h2> + +<p>この記事はここまでですが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するために、さらにいくつかのテストを見つけることができます。<a href="/ja/docs/Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript">あなたのスキルをテストする: オブジェクト指向 JavaScript</a> を参照してください。</p> + +<p>この一連のテストは次の記事で紹介する知識に依存していることに注意してください。なので、試してみる前に、まずそれを読んでみるといいかもしれません。</p> + +<h2 id="まとめ">まとめ</h2> + +<p>この記事では、プロトタイプオブジェクトチェーンによってオブジェクトが互いに機能を継承する方法、プロトタイププロパティとそれを使ってコンストラクタにメソッドを追加する方法など、JavaScript オブジェクトのプロトタイプを取り上げてきました。</p> + +<p>次の記事では、2つのカスタムオブジェクト間で機能の継承を実装する方法を見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向 JavaScript</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">Object のプロトタイプ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">JavaScript での継承</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト作成の練習</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールに機能を追加する</a></li> +</ul> diff --git a/files/ja/learn/javascript/objects/test_your_skills_colon__object_basics/index.html b/files/ja/learn/javascript/objects/test_your_skills_colon__object_basics/index.html new file mode 100644 index 0000000000..d284729df3 --- /dev/null +++ b/files/ja/learn/javascript/objects/test_your_skills_colon__object_basics/index.html @@ -0,0 +1,101 @@ +--- +title: 'スキルテスト: オブジェクトの基本' +slug: 'Learn/JavaScript/Objects/Test_your_skills:_Object_basics' +translation_of: 'Learn/JavaScript/Objects/Test_your_skills:_Object_basics' +--- +<div>{{learnsidebar}}</div> + +<p>このスキルテストの目的は、<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a>の理解度をテストすることです。</p> + +<div class="blockIndicator note"> +<p><strong>注意</strong>: 以下のインタラクティブなエディターでソリューションを試すこともできますが、コードをダウンロードし、<a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>や<a href="https://glitch.com/">Glitch</a>のようなオンラインツールを使用してタスクを実行すると役立つ場合があります。<br> + <br> + 行き詰まった場合は、助けを求めてください — このページの下部にある評価またはさらなる支援セクションを参照してください。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注意</strong>: 以下の例では、コードにエラーがある場合、ページの結果パネルに出力され、答えを見つけ出すのに役立ちます（ダウンロード可能なバージョンの場合は、ブラウザーのJavaScriptコンソールに）</p> +</div> + +<h2 id="オブジェクトの基本_1">オブジェクトの基本 1</h2> + +<p>このタスクでは、オブジェクトリテラルが与えられます。あなたのタスクは下記です。</p> + +<ul> + <li><code>catName</code>変数に、<strong>角括弧記法</strong>を用いて、<code>name</code>プロパティの値を保存する</li> + <li><strong>ドット記法</strong>を用いて、<code>greeting()</code>メソッドを使う</li> + <li><code>color</code>プロパティを<code>black</code>に変更する</li> +</ul> + +<p>以下のライブコードを更新して、完成した例を再現してみてください。</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/object-basics/object-basics1.html", '100%', 400)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/tree/master/javascript/oojs/tasks/object-basics/object-basics1-download.html">このタスクの開始点をダウンロード</a>して、お好きなエディターまたはオンライン・エディターで作業してください。</p> +</div> + +<h2 id="オブジェクトの基本_2">オブジェクトの基本 2</h2> + +<p>次のタスクでは、お気に入りのバンドの1つを表す、自分だけのオブジェクトリテラルを作成してみましょう。必要な要素は次のとおりです。</p> + +<ul> + <li><code>name</code>: バンドの名前を表す文字列</li> + <li><code>nationality</code>: バンドの出身国を表す文字列</li> + <li><code>genre</code>: バンドが演奏する音楽の種類</li> + <li><code>members</code>: バンドのメンバー数を表す数字</li> + <li><code>formed</code>: バンドが結成した年を表す数字</li> + <li><code>split</code>: バンドが解散した年を表す数字、まだ活動している場合は<code>false</code></li> + <li><code>albums</code>: そのバンドによってリリースされたアルバムを表す配列。それぞれの配列の要素は、下記の要素を含んだオブジェクトであること + <ul> + <li><code>name</code>: アルバムの名前を表す文字列</li> + <li><code>released</code>: リリースされた年を表す数字</li> + </ul> + </li> +</ul> + +<p><code>albums</code> 配列には、少なくとも2つのアルバムを含めること。</p> + +<p>これが終わったら、変数<code>bandInfo</code>に、名前、国籍、活動年数、スタイル、最初のアルバムのタイトルと発売日などの少しの詳細を書き込みます。</p> + +<p><span style="">以下のライブコードを更新して、完成した例を再現してみてください。</span></p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/object-basics/object-basics2.html", '100%', 400)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/tree/master/javascript/oojs/tasks/object-basics/object-basics1-download.html">このタスクの開始点をダウンロード</a>して、お好きなエディターまたはオンライン・エディターで作業してください。</p> +</div> + +<h2 id="オブジェクトの基本_3">オブジェクトの基本 3</h2> + +<p>最後に、「オブジェクトの基本」のまとめとして、タスク＃1の<code>cat</code>オブジェクトリテラルに戻りましょう。 「<code>Hello, said Bertie the Cymric.</code>」と記録されるように、<code>greeting（）</code>メソッドを書き直してください。 ブラウザのDevToolsのコンソールにアクセスしますが、名前や品種に関係なく、同じ構造のすべての<code>cat</code>オブジェクトで機能します。</p> + +<p>完了したら、<code>cat2</code>という独自のオブジェクトを作成します。このオブジェクトは、同じ構造、まったく同じ<code>greeting（）</code>メソッドを持ちますが、名前、品種、色が異なります。</p> + +<p>両方の<code>greeting（）</code>メソッドを呼び出して、適切なあいさつ（greeting）がコンソールに記録されることを確認します。</p> + +<p>コードはあまり<a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself">DRY</a>ではありません（それぞれは1回だけ定義すること）—たとえば、同じメソッドを2回定義しています。 どうすればもっとDRYにすることができますか？ よくわからない場合でも、心配しないでください。これは、シリーズの今後の記事で取り上げる予定です。</p> + +<p>以下のライブコードを更新して、完成した例を再現してみてください。</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/object-basics/object-basics3.html", '100%', 400)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/tree/master/javascript/oojs/tasks/object-basics/object-basics1-download.html">このタスクの開始点をダウンロード</a>して、お好きなエディターまたはオンライン・エディターで作業してください。</p> +</div> + +<h2 id="まとめとヘルプ">まとめとヘルプ</h2> + +<p>自分のコードの評価が欲しい、または行き詰まって助けを求めたい場合：</p> + +<ol> + <li>CodePen、jsFiddle、Glitchなどのオンライン共有可能なエディターで作業をします。コードを自分で作成することも、上記のセクションでリンクされているスターティングポイントファイルを使用することもできます。</li> + <li><a href="https://discourse.mozilla.org/c/mdn/learn/250">MDNDiscourseフォーラムの学習カテゴリ</a>で評価や支援を求める投稿を書いてください。投稿には次のものを含める必要があります。</li> +</ol> + +<ul> + <li>「オブジェクトの基本1 の スキルテスト を行ったので評価して欲しい」などの説明的なタイトル。</li> + <li>あなたがすでに試したことの詳細、そしてあなたが私たちに何をしてほしいか、例えば行き詰まって助けが必要な場合、または評価が必要な場合。</li> + <li>オンラインの共有可能なエディターで、評価したい、または支援が必要な例へのリンク（上記のステップ1で説明）。これは入門するのに良い習慣です—あなたが彼らのコードを見ることができないならば、コーディング問題で誰かを助けることは非常に難しいです。</li> + <li>実際のタスクまたは評価ページへのリンク。サポートが必要な質問を見つけることができます。</li> +</ul> |