diff options
Diffstat (limited to 'files/ja/learn/javascript')
26 files changed, 139 insertions, 139 deletions
diff --git a/files/ja/learn/javascript/asynchronous/index.html b/files/ja/learn/javascript/asynchronous/index.html index f3b1c62242..adac4c607a 100644 --- a/files/ja/learn/javascript/asynchronous/index.html +++ b/files/ja/learn/javascript/asynchronous/index.html @@ -19,7 +19,7 @@ translation_of: Learn/JavaScript/Asynchronous <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> +<p>非同期プログラミングの概念に慣れていない場合は、間違いなくこのモジュールの <a href="/ja/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a> から始めるべきです。慣れている場合は、<a href="/ja/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> @@ -28,19 +28,19 @@ translation_of: Learn/JavaScript/Asynchronous <h2 id="ガイド">ガイド</h2> <dl> - <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></dt> + <dt><a href="/ja/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> + <dt><a href="/ja/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> + <dt><a href="/ja/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> + <dt><a href="/ja/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> + <dt><a href="/ja/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> + <dt><a href="/ja/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></dt> <dd>このモジュールの最後に、別のコーディングテクニックとこれまで議論してきた機能を考察します。そして、推奨事項とよくある落とし穴への注意とともに、どれを・いつ・どこで使うのが適切なのかを検討します。</dd> </dl> diff --git a/files/ja/learn/javascript/building_blocks/events/index.html b/files/ja/learn/javascript/building_blocks/events/index.html index 6f2d31df5f..58aba9ea1c 100644 --- a/files/ja/learn/javascript/building_blocks/events/index.html +++ b/files/ja/learn/javascript/building_blocks/events/index.html @@ -137,7 +137,7 @@ btn.onclick = bgChange;</pre> <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> +<p>いくつかのイベントはとても汎用的なのでほとんどどこでも使えます(例えば onlick ハンドラはほぼ全ての要素に登録できます)が、いくつかはもっと限定的で、特定の状況でしか使えません(例えば <a href="/ja/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay </a> は{{htmlelement("video")}}のような特定の要素でのみ意味を持ちます)。</p> <h3 id="インラインイベントハンドラー_—_使っちゃだめ">インラインイベントハンドラー — 使っちゃだめ</h3> diff --git a/files/ja/learn/javascript/building_blocks/functions/index.html b/files/ja/learn/javascript/building_blocks/functions/index.html index a6901fcec8..6abfcb5ddb 100644 --- a/files/ja/learn/javascript/building_blocks/functions/index.html +++ b/files/ja/learn/javascript/building_blocks/functions/index.html @@ -29,7 +29,7 @@ translation_of: Learn/JavaScript/Building_blocks/Functions <tbody> <tr> <th scope="row">前提知識:</th> - <td>基本的なコンピューターの知識、HTML と CSS への理解、<a href="/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>。</td> + <td>基本的なコンピューターの知識、HTML と CSS への理解、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>。</td> </tr> <tr> <th scope="row">目的:</th> @@ -79,15 +79,15 @@ console.log(madeAString); <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> +<p>ブラウザー関数のいくつかは JavaScript言語の核に含まれない事を心に留めておいてください — いくつかはブラウザー API の一部として定義されていて、もっと多くの機能を提供すべくデフォルトの言語の上で構築されています(詳しくは<a href="/ja/docs/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="/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> +<p>このコースのここまででもたくさんのカスタム関数を見てきました — ブラウザーの内部でではなくあなたのコードの中で定義された関数です。独自の名前の直後にカッコがついてるものを見かけたら、それはカスタム関数を使っているという事です。<a href="/ja/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); @@ -267,7 +267,7 @@ function greeting() { <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> + どちらも、"<a href="/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; @@ -320,7 +320,7 @@ b();</pre> </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> +<p><strong>注</strong>: <a href="/ja/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> というエラーは、あなたが遭遇する最も一般的なエラーの 1 つです。このエラーが発生し、問題の変数が定義されていると確信できる場合は、変数のスコープを確認してください。</p> </div> <ul> diff --git a/files/ja/learn/javascript/building_blocks/index.html b/files/ja/learn/javascript/building_blocks/index.html index 74ec4ff45f..35f4123acc 100644 --- a/files/ja/learn/javascript/building_blocks/index.html +++ b/files/ja/learn/javascript/building_blocks/index.html @@ -23,7 +23,7 @@ translation_of: Learn/JavaScript/Building_blocks <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> +<p>このモジュールを始める前に、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML</a> や <a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS </a>の基本に慣れておくべきです。また前のモジュールの <a href="/ja/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> diff --git a/files/ja/learn/javascript/building_blocks/looping_code/index.html b/files/ja/learn/javascript/building_blocks/looping_code/index.html index f9ee6f813d..cbab38e2f9 100644 --- a/files/ja/learn/javascript/building_blocks/looping_code/index.html +++ b/files/ja/learn/javascript/building_blocks/looping_code/index.html @@ -27,7 +27,7 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターの知識および HTML と CSS への理解、<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>。</td> + <td>基本的なコンピューターの知識および HTML と CSS への理解、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/javascript/building_blocks/return_values/index.html b/files/ja/learn/javascript/building_blocks/return_values/index.html index b8d15d4144..ccc22498de 100644 --- a/files/ja/learn/javascript/building_blocks/return_values/index.html +++ b/files/ja/learn/javascript/building_blocks/return_values/index.html @@ -182,7 +182,7 @@ function factorial(num) { <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="/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> 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 index 44f7c8b035..7a47966ea1 100644 --- 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 @@ -48,9 +48,9 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data <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>上述の問題を解決すべく、Web ページから細かいデータ (<a href="/ja/docs/Web/HTML">HTML</a>、{{glossary("XML")}}、<a href="/ja/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> +<p>これは {{domxref("XMLHttpRequest")}} や、最近では <a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> の利用によって実現されます。これらの技術は、Web ページがサーバにある特定のリソースを直接 <a href="/ja/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> @@ -78,7 +78,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data <h2 id="基本的な_Ajax_リクエスト">基本的な Ajax リクエスト</h2> -<p>{{domxref("XMLHttpRequest")}} と <a href="/docs/Web/API/Fetch_API">Fetch</a> それぞれを使って、そのようなリクエストをどうやるのか見ていきましょう。それらの例では、いくつかの異なるテキストファイルから取り出したデータをリクエストし、コンテンツ領域に埋め込みます。</p> +<p>{{domxref("XMLHttpRequest")}} と <a href="/ja/docs/Web/API/Fetch_API">Fetch</a> それぞれを使って、そのようなリクエストをどうやるのか見ていきましょう。それらの例では、いくつかの異なるテキストファイルから取り出したデータをリクエストし、コンテンツ領域に埋め込みます。</p> <p>この一連のファイルは疑似データベースとして働きます。実際のアプリケーションでは、PHP や Python、Node のようなサーバサイド言語を使ってデータベースから取り出したデータをリクエストする場合が多いでしょう。ですがここでは簡単にしておき、クライアント側のパートに集中します。</p> @@ -156,9 +156,9 @@ verseChoose.value = 'Verse 1';</pre> <h3 id="サーバからあなたの例題を送らせる">サーバからあなたの例題を送らせる</h3> -<p>今時のブラウザ (Chrome も含まれます) は、ローカルファイルとして例題を実行しても XHR リクエストを行ないません。これはセキュリティの制限によるものです (Web のセキュリティにより詳しくは <a href="/docs/Learn/Server-side/First_steps/Website_security">Webサイトのセキュリティ</a>を読んで下さい)。</p> +<p>今時のブラウザ (Chrome も含まれます) は、ローカルファイルとして例題を実行しても XHR リクエストを行ないません。これはセキュリティの制限によるものです (Web のセキュリティにより詳しくは <a href="/ja/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> +<p>これをどうにかするため、例題をローカルの Web サーバを使って実行しなければなりません。どうやるのかは、 <a href="/ja/docs/Learn/Common_questions/set_up_a_local_testing_server">テスト用のローカルサーバを設定するにはどうすればいい?</a> を読んで下さい。</p> <h3 id="Fetch">Fetch</h3> @@ -251,7 +251,7 @@ myFetch.then(function(response) { }); }</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>レスポンスオブジェクトには {{domxref("Body.text","text()")}} メソッドがあって、これはレスポンスボディにある生データを受けて、プレインテキスト(これが私たちの必要とする形式です)、に変換します。このメソッドもプロミス(これは結果となるテキスト文字列で解決します)を返すので、ここでまた別の {{jsxref("Promise.then",".then()")}} を使い、この内部で、テキスト文字列を使って私たちがやりたい事を行うための別の関数を定義します。私たちがやるのは、ただ詩用の {{htmlelement("pre")}} 要素の <code><a href="/ja/docs/Web/API/Node/textContent">textContent</a></code> プロパティをテキスト文字列と同じに設定だけなので、これはとても単純です。</p> <p>これも覚えておく価値があります、それぞれのブロックの結果を次のブロックに渡していくように、直接複数のプロミスブロック(<code>.then()</code>ブロック以外の種類もあります)を次から次へと連鎖する事ができます、あたかも鎖を下にたどっていくように。このおかげで、プロミスはとても強力なのです。</p> @@ -263,7 +263,7 @@ myFetch.then(function(response) { poemDisplay.textContent = text; });</pre> -<p>多くの開発者はこの書き方の方が好きです、なぜなら平らで、間違いなく長大なプロミス連鎖も読みやすいからです — それぞれのプロミスが、前のやつの内側に来る(これは扱いづらくなる場合があります)のではなく、前のやつから順々に続いています。違うのは <code><a href="/docs/Learn/JavaScript/Building_blocks/Return_values">return</a></code> 文を response.text() の前に書いて、それが出した結果を次の鎖に渡すようにしなければならないところだけです。</p> +<p>多くの開発者はこの書き方の方が好きです、なぜなら平らで、間違いなく長大なプロミス連鎖も読みやすいからです — それぞれのプロミスが、前のやつの内側に来る(これは扱いづらくなる場合があります)のではなく、前のやつから順々に続いています。違うのは <code><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">return</a></code> 文を response.text() の前に書いて、それが出した結果を次の鎖に渡すようにしなければならないところだけです。</p> <h3 id="どっちの機構を使うべき">どっちの機構を使うべき?</h3> diff --git a/files/ja/learn/javascript/client-side_web_apis/index.html b/files/ja/learn/javascript/client-side_web_apis/index.html index 0675ea4da0..2335c02956 100644 --- a/files/ja/learn/javascript/client-side_web_apis/index.html +++ b/files/ja/learn/javascript/client-side_web_apis/index.html @@ -23,9 +23,9 @@ translation_of: Learn/JavaScript/Client-side_web_APIs <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>このモジュールをよく理解するためには、ここまでの一連のJavaScriptに関するモジュール (<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>) の学習をすませているべきです。これらのモジュールでは大抵簡単な 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> +<p><a href="/ja/docs/Learn/HTML">HTML</a> と <a href="/ja/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> @@ -43,7 +43,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs <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> + <dd>ブラウザにはグラフィックを描くためのとても強力なツールがいくつか組込まれています。<a href="/ja/docs/Web/SVG">SVG</a>(Scalable Vector Graphics)言語から、HTMLの{{htmlelement("canvas")}}キャンバス要素に描画するためのAPIまで (<a href="/ja/docs/Web/API/Canvas_API">キャンバスAPI</a> や <a href="/ja/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> 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 index f685066a4d..51db397a58 100644 --- a/files/ja/learn/javascript/client-side_web_apis/introduction/index.html +++ b/files/ja/learn/javascript/client-side_web_apis/introduction/index.html @@ -24,7 +24,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction <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="/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>).</td> + <td>基本的なコンピューターの知識および利用能力、<a href="/ja/docs/Learn/HTML">HTML</a> と <a href="/ja/docs/Learn/CSS">CSS</a> の基本的な理解、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>).</td> </tr> <tr> <th scope="row">目的:</th> @@ -54,7 +54,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction <p>クライアントサイド API では、実際非常にたくさんのAPIが使えます — それらは JavaScript 言語本体の一部ではなく、あなたにスーパーパワーを与えるべく JavaScript 言語のコアの上に築かれた代物です。それらはおおよそ二つのカテゴリに分けられます:</p> <ul> - <li><strong>ブラウザー API</strong> は Web ブラウザーに組込まれていて、ブラウザーやコンピューターの環境の情報を取得し、これを使って役に立つややこしい事を行えるようにするものです。 例えば <a href="/en-US/docs/Web/API/Geolocation_API">Geolocation API</a> は位置情報を取得するための簡単な JavaScript 構造を提供するので、例えばグーグルマップにあなたの居場所を表示するような事ができます。裏で実際にはブラウザーは低レベル (例えば C++) の複雑なコードをいくつか使ってデバイスの GPS 機器 (あるいは位置情報を得られる他のなんだか) と通信し、位置情報を取得し、コードから利用できるようにブラウザー環境に情報を戻しています。ですがここでもこの複雑な事柄は API で抽象化され隠蔽されます。</li> + <li><strong>ブラウザー API</strong> は Web ブラウザーに組込まれていて、ブラウザーやコンピューターの環境の情報を取得し、これを使って役に立つややこしい事を行えるようにするものです。 例えば <a href="/ja/docs/Web/API/Geolocation_API">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> @@ -71,10 +71,10 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction <p>ここまででクライアントサイド API とは何か、JavaScript 言語とどう関係しているのかお話しました。もっとはっきりさせるために一度おさらいして、ついでに他の JavaScript ツールがどう関係してくるのかもお話しましょう:</p> <ul> - <li>JavaScript — ブラウザーに組込まれた高レベルスクリプト言語で、Web ページやアプリに機能を実装するのに使えます。<a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Node</a> のようなブラウザー以外の他のプログラミング環境でも使えるのは覚えておいて下さい。</li> + <li>JavaScript — ブラウザーに組込まれた高レベルスクリプト言語で、Web ページやアプリに機能を実装するのに使えます。<a href="/ja/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 ライブラリ — 多くは、<a href="/ja/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> @@ -88,9 +88,9 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction <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="/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="/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> で Web ページの一部を書き換える事はとてもよく行なわれます。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました — 在庫一覧や新しいお話一覧を書き換えたい時に、サーバからページ全体をリロードする事なしにさくっとできたら、サイトやアプリはずっと反応よく素早く感じられます。これを可能にした API には <a href="/ja/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="/ja/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="/ja/docs/Web/API/Canvas_API"> Canvas</a> と <a href="/ja/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="/en-US/docs/Web/Guide/Audio_and_video_delivery">動画と音声の API</a></strong> {{domxref("HTMLMediaElement")}}や <a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> や <a href="/ja/docs/Web/API/WebRTC_API">WebRTC</a> のような API を使うと、 マルチメディアを使ってとても面白い事ができます。音声や動画再生のための独自のコントロールUIの作成、字幕やサブタイトルのような音声トラックをビデオと一緒に表示したり、Web カメラの画像を取り込んで操作し、上述のキャンバスに表示したり Web カンファレンスに参加している他の誰かのコンピューター上に表示したり、音声トラックにイフェクト(ゲイン、ディストーション、音場効果など)をかけたりできます。</li> + <li><strong><a href="/ja/docs/Web/Guide/Audio_and_video_delivery">動画と音声の API</a></strong> {{domxref("HTMLMediaElement")}}や <a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> や <a href="/ja/docs/Web/API/WebRTC_API">WebRTC</a> のような API を使うと、 マルチメディアを使ってとても面白い事ができます。音声や動画再生のための独自のコントロールUIの作成、字幕やサブタイトルのような音声トラックをビデオと一緒に表示したり、Web カメラの画像を取り込んで操作し、上述のキャンバスに表示したり Web カンファレンスに参加している他の誰かのコンピューター上に表示したり、音声トラックにイフェクト(ゲイン、ディストーション、音場効果など)をかけたりできます。</li> <li><strong>デバイス API</strong> は基本的に Web アプリで使えるような形で、今時のハードウェアデバイスのデータを操作したり取得する API です。デバイスの位置データにアクセスして地図上にあなたの居場所を書くような位置情報 API についてはすでにお話しました。他の例にはシステム通知を使って Web アプリに役に立つアップデートがあるのを知らせたり(<a href="/ja/docs/Web/API/Notifications_API">Notifications API</a> を参照)、ハードウェアを振動させたり(<a href="/ja/docs/Web/API/Vibration_API">Vibration API</a> を参照)などがあります。</li> <li><strong>クライアント側でのデータ保持 API </strong>は今多くのブラウザーに普及しつつあります。— クライアント側にデータを保存できると、ページを移動しても状態を保存したり、たとえデバイスがオフラインでも動作するようなアプリを作成したいような場合、とても役に立ちます。いくつもの選択肢があり、例えば <a href="/ja/docs/Web/API/Web_Storage_API">Web Storage API</a> を使ったキーバリューストアや、 <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a> を使ったもっと複雑なテーブル型データ保存などです。</li> </ul> @@ -242,7 +242,7 @@ const ctx = canvas.getContext('2d');</pre> <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>別の例として、<code><a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> オブジェクトのインスタンス (一つ一つがサーバから何らかの新しいリソースを取得しようとするHTTPリクエストを表わします) にはとてもたくさんのイベントが付随しており、たとえば <code>load</code> イベントは発火したリソースに対する正常なレスポンスが返ってきて、それが使えるようになった時点で発火します。</p> <p>次のコードはこれをどう使うのか示す簡単な例です:</p> @@ -274,7 +274,7 @@ request.onload = function() { <p><img alt="" src="notification-permission.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> -<p>Web Audio および {{domxref("HTMLMediaElement")}} API には、<a href="/en-US/docs/Web/API/Web_Audio_API/Best_practices#autoplay_policy">自動再生 (autoplay) ポリシー</a> と呼ばれるセキュリティ機構が適用されます。これは、基本的に、ページの読み込み時に音声を自動的に再生できないことを意味します。ユーザーに次のことを許可する必要があります。ボタンのようなコントロールを介して音声再生を開始します。これは、音声の自動再生は通常非常に煩わしいものであり、ユーザーにそれを課すべきではないためです。</p> +<p>Web Audio および {{domxref("HTMLMediaElement")}} API には、<a href="/ja/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> @@ -289,7 +289,7 @@ request.onload = function() { <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/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> 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 index b0c69f9d62..cc24830ba5 100644 --- 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 @@ -44,7 +44,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents <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("Window")}} オブジェクトで表わされます。このオブジェクトに備わるメソッドを使って、ウィンドウの大きさを調べたり ({{domxref("Window.innerWidth")}} と {{domxref("Window.innerHeight")}} を参照)、ウィンドウに読み込まれる文書を操作したり、その文書に関係するデータをクライアント側(例えばローカルデータベースや他のデータ保存機構)で保存したり、現在のウィンドウに対して<a href="/ja/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> @@ -112,7 +112,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents </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>JavaScript あるあるですが、要素を選んで変数に保存する方法にはいろんなやり方があることを頭に入れておいて下さい。{{domxref("Document.querySelector()")}} を使うのが推奨される今風のやり方ですが、これは CSS セレクタと同じ方法で要素を選別できるからです。上記の <code>querySelector()</code> 呼び出しでは文書に現われる最初の {{htmlelement("a")}} がマッチします。もし複数の要素を選択し処理したいのであれば {{domxref("Document.querySelectorAll()")}} を使うことができて、これはセレクタとマッチする全ての要素にマッチし、それらへの参照を {{domxref("NodeList")}} と呼ばれる<a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a>のようなオブジェクトに保存します。</p> <p>要素への参照を得るための、次のような古いやり方もあります:</p> @@ -190,7 +190,7 @@ 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> からパラグラフを見ると、言うまでもなく上の行がドキュメントのインラインスタイルに追加されているはずです: + <li>ページをリロードすると指定のパラグラフにスタイルが適用されているはずです。ブラウザーの <a href="/ja/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> @@ -282,15 +282,15 @@ div.style.height = winHeight + 'px';</pre> <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>ボタンがクリックされた時の応答として走らせる <a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数</a> を作成します。</li> + <li>関数本体は、input 要素の現在の <a href="/ja/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> + <li>最後に、<code><a href="/ja/docs/Web/API/HTMLElement/focus">focus()</a></code>メソッドを使って input 要素にフォーカスし、次の買い物リスト商品をすぐに入力できるようにします。</li> </ol> <div class="note"> @@ -312,7 +312,7 @@ div.style.height = winHeight + 'px';</pre> <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> +<p>(私共の <a href="/ja/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> @@ -320,13 +320,13 @@ div.style.height = winHeight + 'px';</pre> <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> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">ウェブ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/third_party_apis/index.html b/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html index f1573f8af8..c5451b0186 100644 --- 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 @@ -262,7 +262,7 @@ function fetchResults(e) { </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> +<p><strong>Note</strong>: この例では初歩的なフォームデータの検証を行っています — 検索語フィールドは、フォームを送信する前に入力しなければなりません (<code>required</code> 属性を使用して達成されます)。日付フィールドには <code>pattern</code> 属性が指定されており、値が 8 個の数字 (<code>pattern="[0-9]{8}"</code>) で構成されていないと送信されません。これらがどのように機能するかについての詳細は <a href="/ja/docs/Learn/HTML/Forms/Form_validation">Form data validation</a> を参照してください。</p> </div> <h3 id="API_からデータを要求する">API からデータを要求する</h3> 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 index 09e6e27ca7..bcc0c856c3 100644 --- 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 @@ -23,7 +23,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs <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> + <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> @@ -34,7 +34,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs <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> +<p>The {{htmlelement("video")}} and {{htmlelement("audio")}} elements allow us to embed video and audio into web pages. As we showed in <a href="/ja/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"> @@ -160,7 +160,7 @@ button:before { <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 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="/ja/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> @@ -267,7 +267,7 @@ controls.style.visibility = 'visible';</pre> } }</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>Here we use an <code><a href="/ja/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> @@ -277,7 +277,7 @@ controls.style.visibility = 'visible';</pre> <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> + <p>Next, let's add functionality to handle stopping the video. Add the following <code><a href="/ja/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); @@ -307,7 +307,7 @@ media.addEventListener('ended', stopMedia); <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> + <p>First of all, add the following two <code><a href="/ja/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); @@ -473,7 +473,7 @@ clearInterval(intervalFwd); <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> + <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="/ja/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) @@ -485,11 +485,11 @@ clearInterval(intervalFwd); <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><a href="/ja/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="/ja/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="/ja/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="/ja/docs/Web/API/Canvas_API">Canvas API</a>, <a href="/ja/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> + <li><a href="/ja/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> @@ -497,11 +497,11 @@ clearInterval(intervalFwd); <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/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/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 index 3a76770630..b4b0064a9b 100644 --- a/files/ja/learn/javascript/first_steps/a_first_splash/index.html +++ b/files/ja/learn/javascript/first_steps/a_first_splash/index.html @@ -237,7 +237,7 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash <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="/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">以降の記事</a>で見ます) 。定数は変更しない値を保持するのに、 <code>const</code> キーワードといっしょに使います。この場合では、定数をユーザーインターフェイスのパーツへの参照を保存するのに使っていて、一部の内部のテキストは変わるかも知れませんが、参照されるHTML要素は同じままです。</p> +<p>上記のコードはプログラムが使用するデータを保持する変数と定数をセットアップしています。変数とは基本的には値 (数字や文字など) の入れ物です。 <code>let</code> (か <code>var</code>) キーワードに続いて変数の名前を書くことで、変数を作成します (これらのキーワードの違いは<a href="/ja/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">以降の記事</a>で見ます) 。定数は変更しない値を保持するのに、 <code>const</code> キーワードといっしょに使います。この場合では、定数をユーザーインターフェイスのパーツへの参照を保存するのに使っていて、一部の内部のテキストは変わるかも知れませんが、参照されるHTML要素は同じままです。</p> <p>等号記号 ( <code>=</code> ) に続いて、与えたい値を書いて、変数や定数に値を代入できます。</p> @@ -260,7 +260,7 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash </ul> <div class="note"> -<p><strong>注記</strong>: 変数や定数についてはこのコースの間に、<a href="https://developer.mozilla.org/ja/docs/user:chrisdavidmills/variables">次の記事</a>を始めとして何度も出てきます。</p> +<p><strong>注記</strong>: 変数や定数についてはこのコースの間に、<a href="/ja/docs/user:chrisdavidmills/variables">次の記事</a>を始めとして何度も出てきます。</p> </div> <h3 id="Functions" name="Functions">関数</h3> @@ -282,7 +282,7 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash <p><kbd>Return</kbd>/<kbd>Enter</kbd> を押した後で、"ここはプレースホルダです"という警告が表示されましたね。呼び出すと、いつでも警告が表示される関数を定義することができました。</p> <div class="note"> -<p><strong>注記</strong>: 関数についても<a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">このコースの後の方で</a>詳しく学びます。</p> +<p><strong>注記</strong>: 関数についても<a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">このコースの後の方で</a>詳しく学びます。</p> </div> <h3 id="Operators" name="Operators">演算子</h3> @@ -334,7 +334,7 @@ hello; let greeting = name + hello; greeting;</pre> -<p>累算<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">代入演算子</a>と呼ばれるもっと短い書き方もあります。すでにある文字列に、さらに文字を追加した結果を返したい場合などに使います。例えば、</p> +<p>累算<a href="/ja/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">代入演算子</a>と呼ばれるもっと短い書き方もあります。すでにある文字列に、さらに文字を追加した結果を返したい場合などに使います。例えば、</p> <pre class="brush: js notranslate">name += 'が、こんにちは！と言っています。';</pre> @@ -598,13 +598,13 @@ guesses.style.boxShadow = '3px 3px 6px black';</pre> <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> + <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 index 26c69c3475..bd83655354 100644 --- a/files/ja/learn/javascript/first_steps/index.html +++ b/files/ja/learn/javascript/first_steps/index.html @@ -28,7 +28,7 @@ translation_of: Learn/JavaScript/First_steps <p>私たちはあなたがあなたの目標に向かって取り組むために必要なすべての重要な情報を含むコースをまとめました。</p> -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">始めましょう</a></p> +<p><a class="cta primary" href="/ja/docs/Learn/Front-end_web_developer">始めましょう</a></p> </div> <h2 id="Prerequisites" name="Prerequisites">前提条件</h2> @@ -36,7 +36,7 @@ translation_of: Learn/JavaScript/First_steps <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/Getting_started_with_the_web">Web 入門</a> (<a href="/ja/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> diff --git a/files/ja/learn/javascript/first_steps/math/index.html b/files/ja/learn/javascript/first_steps/math/index.html index df0a2af55f..867eca58ef 100644 --- a/files/ja/learn/javascript/first_steps/math/index.html +++ b/files/ja/learn/javascript/first_steps/math/index.html @@ -88,7 +88,7 @@ typeof myFloat;</pre> <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">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> @@ -457,13 +457,13 @@ function updateBtn() { <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> + <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 index d4b850bd6d..ab9a0e1a2a 100644 --- a/files/ja/learn/javascript/first_steps/strings/index.html +++ b/files/ja/learn/javascript/first_steps/strings/index.html @@ -217,7 +217,7 @@ I gave it a score of ${ score/highestScore * 100 }%.`;</pre> <h2 id="あなたのスキルをテストしてください！">あなたのスキルをテストしてください！</h2> -<p>この記事の最後に到達しましたが、最も重要な情報を覚えていますか？ 先に進む前に、この情報を記憶していることを確認するためのいくつかの<a href="/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings">テスト</a>を見つけることができます。これには次の記事の知識も必要なので、最初にそれを読むことをお勧めします。</p> +<p>この記事の最後に到達しましたが、最も重要な情報を覚えていますか？ 先に進む前に、この情報を記憶していることを確認するためのいくつかの<a href="/ja/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings">テスト</a>を見つけることができます。これには次の記事の知識も必要なので、最初にそれを読むことをお勧めします。</p> <h2 id="Conclusion" name="Conclusion">結論</h2> @@ -228,13 +228,13 @@ I gave it a score of ${ score/highestScore * 100 }%.`;</pre> <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> + <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/useful_string_methods/index.html b/files/ja/learn/javascript/first_steps/useful_string_methods/index.html index c18f846d20..bfd2cea2c1 100644 --- a/files/ja/learn/javascript/first_steps/useful_string_methods/index.html +++ b/files/ja/learn/javascript/first_steps/useful_string_methods/index.html @@ -668,13 +668,13 @@ textarea.onkeyup = function(){ <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> + <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/variables/index.html b/files/ja/learn/javascript/first_steps/variables/index.html index 1ed288aa84..a8424263a1 100644 --- a/files/ja/learn/javascript/first_steps/variables/index.html +++ b/files/ja/learn/javascript/first_steps/variables/index.html @@ -330,13 +330,13 @@ daysInWeek <span class="operator token">=</span> </code><span class="message-bod <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> + <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/howto/index.html b/files/ja/learn/javascript/howto/index.html index 528ce80fe4..9609cff261 100644 --- a/files/ja/learn/javascript/howto/index.html +++ b/files/ja/learn/javascript/howto/index.html @@ -149,8 +149,8 @@ translation_of: Learn/JavaScript/Howto <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#Updating_a_variable">変数の値を変更するには</a>(<a href="/ja/docs/Learn/JavaScript/First_steps/Math#Assignment_operators">代入演算子</a>についても参照してください)</li> + <li><a href="/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> @@ -161,7 +161,7 @@ translation_of: Learn/JavaScript/Howto <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> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math#Comparison_operators">JavaScript で値を比較するには</a>(どちらが大きいか、ある値が別の値と等しいか、など)</li> </ul> <h3 id="Strings" name="Strings">文字列</h3> @@ -210,14 +210,14 @@ translation_of: Learn/JavaScript/Howto <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> + <li><a href="/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#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> @@ -253,7 +253,7 @@ translation_of: Learn/JavaScript/Howto <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#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> diff --git a/files/ja/learn/javascript/index.html b/files/ja/learn/javascript/index.html index 2094a48052..540199941e 100644 --- a/files/ja/learn/javascript/index.html +++ b/files/ja/learn/javascript/index.html @@ -21,12 +21,12 @@ translation_of: Learn/JavaScript <p>目標に向かって頑張るために必要な情報をまとめたコースをご用意しました。</p> -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> +<p><a class="cta primary" href="/ja/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> +<p><span id="result_box" lang="ja"><span>JavaScript は </span></span><a href="/ja/docs/Learn/HTML">HTML </a><span lang="ja"><span>や </span></span><a href="/ja/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> diff --git a/files/ja/learn/javascript/objects/index.html b/files/ja/learn/javascript/objects/index.html index 3985137adb..4c93a83608 100644 --- a/files/ja/learn/javascript/objects/index.html +++ b/files/ja/learn/javascript/objects/index.html @@ -20,7 +20,7 @@ translation_of: Learn/JavaScript/Objects <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>このモジュールを始める前に、 HTML と CSS にいくらか精通している必要があります。JavaScript を始める前に <a href="/ja/docs/Web/Guide/HTML/Introduction">HTML 入門</a>と <a href="/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> diff --git a/files/ja/learn/javascript/objects/inheritance/index.html b/files/ja/learn/javascript/objects/inheritance/index.html index c408100d19..2964fbe786 100644 --- a/files/ja/learn/javascript/objects/inheritance/index.html +++ b/files/ja/learn/javascript/objects/inheritance/index.html @@ -25,7 +25,7 @@ translation_of: Learn/JavaScript/Objects/Inheritance <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> + <td>基本的なコンピュータの知識および利用能力、HTML と CSS への基本的な理解、JavaScript の基本 (<a href="/ja/docs/Learn/JavaScript/First_steps">第一歩</a>と<a href="/ja/docs/Learn/JavaScript/Building_blocks">構成要素</a>を参照) と OOJS の基本 (<a href="/ja/docs/Learn/JavaScript/Objects/Basics">オブジェクト入門</a>) に慣れている。</td> </tr> <tr> <th scope="row">目的:</th> @@ -278,7 +278,7 @@ leia<span class="punctuation token">.</span><span class="function token">farewel 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> +<p><a href="/ja/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> @@ -381,7 +381,7 @@ console<span class="punctuation token">.</span><span class="function token">log< <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> +<p>この記事はここまでですが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストがいくつかあります - <a href="/ja/docs/Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript">あなたのスキルをテストする: オブジェクト指向 JavaScript</a> を参照してください。</p> <h2 id="Summary" name="Summary">まとめ</h2> diff --git a/files/ja/learn/javascript/objects/json/index.html b/files/ja/learn/javascript/objects/json/index.html index c72a38744b..f6287d46d6 100644 --- a/files/ja/learn/javascript/objects/json/index.html +++ b/files/ja/learn/javascript/objects/json/index.html @@ -24,7 +24,7 @@ translation_of: Learn/JavaScript/Objects/JSON <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> + <td>基礎的なコンピュータの知識、HTML と CSS への基本的な理解、基礎的な JavaScript の理解 (<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照) とオブジェクト指向JavaScript の基本 (<a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript オブジェクトの基本</a>を参照)。</td> </tr> <tr> <th scope="row">目的:</th> @@ -37,7 +37,7 @@ translation_of: Learn/JavaScript/Objects/JSON <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> +<p>JSON は文字列です。ですので、ネットワークを通してデータを転送したい場合に便利です。JSON データへアクセスしたい場合は、JavaScript オブジェクトへ変換する必要があります。JavaScript には JSON と JavaScript オブジェクトを相互に変換できるメソッドを持った <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> というグローバルなオブジェクトがあるので、その変換は大きな問題ではありません。</p> <div class="note"> <p><strong>注記</strong>: 文字列をネイティブオブジェクトへ変換することは<em>デシリアライゼーション (deserialization)</em> と呼ばれており、ネイティブオブジェクトをネットワークを通して転送できように文字列へ変換することは<em>シリアライゼーション (serialization) </em>と呼ばれています。</p> @@ -91,7 +91,7 @@ translation_of: Learn/JavaScript/Objects/JSON ] }'</pre> -<p>もし、この文字列を JavaScript プログラムへ読み込んだ場合(例えば、例えば変数<code>superHeroes</code> へ代入する)、<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a>の節で見たのと同様に ドットや角括弧を使ってデータへアクセスすることができます。例としては以下のようになります。</p> +<p>もし、この文字列を JavaScript プログラムへ読み込んだ場合(例えば、例えば変数<code>superHeroes</code> へ代入する)、<a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a>の節で見たのと同様に ドットや角括弧を使ってデータへアクセスすることができます。例としては以下のようになります。</p> <pre class="brush: js notranslate">superHeroes.homeTown superHeroes['active']</pre> @@ -335,10 +335,10 @@ myString</pre> <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="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON リファレンス</a></li> + <li><a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest オブジェクトリファレンス</a></li> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の利用</a></li> + <li><a href="/ja/docs/Web/HTTP/Methods">HTTP リクエストメソッド</a></li> <li><a href="http://json.org/">ECMA のオフィシャル JSON Web サイト</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 index af94a8eede..baa6d98964 100644 --- a/files/ja/learn/javascript/objects/object_building_practice/index.html +++ b/files/ja/learn/javascript/objects/object_building_practice/index.html @@ -24,7 +24,7 @@ translation_of: Learn/JavaScript/Objects/Object_building_practice <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> + <td>基礎的なコンピューターの知識、HTML と CSS への基本的な理解、基礎的な JavaScript の理解 (<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照) とオブジェクト指向JavaScript の基本 (<a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript オブジェクトの基本</a>を参照)。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/javascript/objects/object_prototypes/index.html b/files/ja/learn/javascript/objects/object_prototypes/index.html index af08b53692..f955783416 100644 --- a/files/ja/learn/javascript/objects/object_prototypes/index.html +++ b/files/ja/learn/javascript/objects/object_prototypes/index.html @@ -143,7 +143,7 @@ translation_of: Learn/JavaScript/Objects/Object_prototypes <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> +<p><code>myString</code>が最初から、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split">split()</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">indexOf()</a></code>、<code><a href="/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> 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 index d284729df3..e869504561 100644 --- 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 @@ -5,7 +5,7 @@ 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> +<p>このスキルテストの目的は、<a href="/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> |