diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-14 11:06:51 +0900 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-09-14 11:06:51 +0900 |
commit | b8899e350326af3e53dfad89747761c1c13a3915 (patch) | |
tree | 3ed0d0d2fdbb49e7ff7fcdbcd45ba2fd205f07de /files/ja/learn | |
parent | 290d4f4c202b73e53eca3676d91a189f8097b396 (diff) | |
download | translated-content-b8899e350326af3e53dfad89747761c1c13a3915.tar.gz translated-content-b8899e350326af3e53dfad89747761c1c13a3915.tar.bz2 translated-content-b8899e350326af3e53dfad89747761c1c13a3915.zip |
Learn 以下の文書内のリンクURLを正規化 (#2356)
- /en-US へのリンクを /ja へのリンクに修正
- /ja が付いていないものに /ja を付加
- MDN内のリンクが完全URLの場合、 /ja/docs からのURLに修正
Diffstat (limited to 'files/ja/learn')
130 files changed, 720 insertions, 720 deletions
diff --git a/files/ja/learn/accessibility/accessibility_troubleshooting/index.html b/files/ja/learn/accessibility/accessibility_troubleshooting/index.html index a43b4a509b..853d204cc1 100644 --- a/files/ja/learn/accessibility/accessibility_troubleshooting/index.html +++ b/files/ja/learn/accessibility/accessibility_troubleshooting/index.html @@ -120,10 +120,10 @@ translation_of: Learn/Accessibility/Accessibility_troubleshooting <ul> <li><a href="/ja/docs/Learn/Accessibility/What_is_accessibility">アクセシビリティとは?</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの基礎</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティ成功事例</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics" rel="nofollow">WAI-ARIA の基本</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/Multimedia" rel="nofollow">アクセシブルなマルチメディア</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/Mobile" rel="nofollow">モバイルアクセシビリティ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/Accessibility_troubleshooting" rel="nofollow">アクセシビリティのトラブルシューティング</a></li> + <li><a href="/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの基礎</a></li> + <li><a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティ成功事例</a></li> + <li><a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics" rel="nofollow">WAI-ARIA の基本</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Multimedia" rel="nofollow">アクセシブルなマルチメディア</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Mobile" rel="nofollow">モバイルアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Accessibility_troubleshooting" rel="nofollow">アクセシビリティのトラブルシューティング</a></li> </ul> diff --git a/files/ja/learn/accessibility/html/index.html b/files/ja/learn/accessibility/html/index.html index efcb7b9c1d..e0d08c0fc0 100644 --- a/files/ja/learn/accessibility/html/index.html +++ b/files/ja/learn/accessibility/html/index.html @@ -357,7 +357,7 @@ translation_of: Learn/Accessibility/HTML <span class="punctuation token">}</span> <span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> -<p>ここでは、キーボード上でいつボタンが押されたのかを検出するために、<code>document</code> オブジェクトにリスナーを追加しています。どのボタンが押されたのかを、イベント・オブジェクトの <code><a href="https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/keyCode">keyCode</a></code> プロパティを介して調べています。 [訳注: 以上の二つの文の「ボタン」はキーボード上のキーのことのようです。また、<code>keyCode</code> プロパティは非推奨になっています。]もしエンターキー / リターンキーに合致するキーコードだったら、<code>document.activeElement.onclick()</code> を用い、ボタンの <code>onclick</code> ハンドラーに記憶されている関数を実行します [訳注: この文の「ボタン」は <code><div></code> ボタンのことのようです]。<code><a href="https://developer.mozilla.org/ja/docs/Web/API/Document/activeElement">activeElement</a></code> は、ページ上で現在フォーカスの当たっている要素を教えてくれます。</p> +<p>ここでは、キーボード上でいつボタンが押されたのかを検出するために、<code>document</code> オブジェクトにリスナーを追加しています。どのボタンが押されたのかを、イベント・オブジェクトの <code><a href="/ja/docs/Web/API/KeyboardEvent/keyCode">keyCode</a></code> プロパティを介して調べています。 [訳注: 以上の二つの文の「ボタン」はキーボード上のキーのことのようです。また、<code>keyCode</code> プロパティは非推奨になっています。]もしエンターキー / リターンキーに合致するキーコードだったら、<code>document.activeElement.onclick()</code> を用い、ボタンの <code>onclick</code> ハンドラーに記憶されている関数を実行します [訳注: この文の「ボタン」は <code><div></code> ボタンのことのようです]。<code><a href="/ja/docs/Web/API/Document/activeElement">activeElement</a></code> は、ページ上で現在フォーカスの当たっている要素を教えてくれます。</p> <div class="note"> <p><strong>注</strong>: 自分の独自のイベントハンドラーを、イベントハンドラー・プロパティ (たとえば <code>onclick</code>) を介して設定した場合にのみ、この技法がうまくいくだろうということに留意すべきです。<code>addEventListener</code> だと、うまくいきません。</p> diff --git a/files/ja/learn/accessibility/what_is_accessibility/index.html b/files/ja/learn/accessibility/what_is_accessibility/index.html index e1edbafaee..4812e98bcf 100644 --- a/files/ja/learn/accessibility/what_is_accessibility/index.html +++ b/files/ja/learn/accessibility/what_is_accessibility/index.html @@ -122,8 +122,8 @@ translation_of: Learn/Accessibility/What_is_accessibility <h3 id="注記">注記</h3> <ul> - <li><a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility">認知的なアクセシビリティ</a>をもってデザインするのは良い習慣になります。どんな人にも利益になるでしょう。</li> - <li>知的障碍者の多くは身体的な障碍も持っています。ウェブサイトは W3Cの<a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web コンテンツアクセシビリティガイドライン</a>と、その中の<a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility#Guidelines">認知的アクセシビリティガイドライン</a>に従う必要があります。</li> + <li><a href="/ja/docs/Web/Accessibility/Cognitive_accessibility">認知的なアクセシビリティ</a>をもってデザインするのは良い習慣になります。どんな人にも利益になるでしょう。</li> + <li>知的障碍者の多くは身体的な障碍も持っています。ウェブサイトは W3Cの<a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web コンテンツアクセシビリティガイドライン</a>と、その中の<a href="/ja/docs/Web/Accessibility/Cognitive_accessibility#Guidelines">認知的アクセシビリティガイドライン</a>に従う必要があります。</li> <li>W3Cの <a href="https://www.w3.org/WAI/GL/task-forces/coga/">認知と学習障碍者のアクセシビリティタスクフォース</a>では認知障碍者のためのウェブアクセシビリティガイドラインを制作しています。</li> <li>WebAIM の<a href="https://webaim.org/articles/cognitive/">認知のページ</a>には関連する情報やリソースがあります<a name="_GoBack"></a>.</li> <li>アメリカ疾病予防管理センターの見積もりでは、2018年以降、4人に1人の米国市民には障碍があり、その中で、<a href="https://www.cdc.gov/media/releases/2018/p0816-disability.html">若い人には認知障碍が最もよく見られます。</a></li> diff --git a/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html index 57245cc7a3..0927434fad 100644 --- a/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html +++ b/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html @@ -33,7 +33,7 @@ translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_pr <h2 id="アクティブラーニング">アクティブラーニング</h2> -<p><em>アクティブラーニングはまだありません。 <a href="/en-US/docs/MDN/Getting_started">貢献をご検討ください</a>。</em></p> +<p><em>アクティブラーニングはまだありません。 <a href="/ja/docs/MDN/Getting_started">貢献をご検討ください</a>。</em></p> <h2 id="より深く掘り下げる">より深く掘り下げる</h2> diff --git a/files/ja/learn/common_questions/common_web_layouts/index.html b/files/ja/learn/common_questions/common_web_layouts/index.html index 88fc618791..2aef5e786e 100644 --- a/files/ja/learn/common_questions/common_web_layouts/index.html +++ b/files/ja/learn/common_questions/common_web_layouts/index.html @@ -13,7 +13,7 @@ translation_of: Learn/Common_questions/Common_web_layouts <tbody> <tr> <th scope="row">Prerequisites:</th> - <td>Make sure you've already thought about <a href="/en-US/Learn/Thinking_before_coding">what you want to accomplish</a> with your web project.</td> + <td>Make sure you've already thought about <a href="/ja/Learn/Thinking_before_coding">what you want to accomplish</a> with your web project.</td> </tr> <tr> <th scope="row">Objective:</th> @@ -63,7 +63,7 @@ translation_of: Learn/Common_questions/Common_web_layouts <h2 id="Active_learning">Active learning</h2> -<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> +<p><em>There is no active learning available yet. <a href="/ja/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> <h2 id="Deeper_dive">Deeper dive</h2> diff --git a/files/ja/learn/common_questions/design_for_all_types_of_users/index.html b/files/ja/learn/common_questions/design_for_all_types_of_users/index.html index 7c3da5fc1e..b6b6407e3d 100644 --- a/files/ja/learn/common_questions/design_for_all_types_of_users/index.html +++ b/files/ja/learn/common_questions/design_for_all_types_of_users/index.html @@ -13,7 +13,7 @@ translation_of: Learn/Common_questions/Design_for_all_types_of_users <tbody> <tr> <th scope="row">前提条件</th> - <td>あなたはすでに<a href="/en-US/Learn/What_is_accessibility">アクセシビリティとは何か?</a>を読んでいますか?,ここではアクセシビリティについて詳細にカバーしていませんので</td> + <td>あなたはすでに<a href="/ja/Learn/What_is_accessibility">アクセシビリティとは何か?</a>を読んでいますか?,ここではアクセシビリティについて詳細にカバーしていませんので</td> </tr> <tr> <th scope="row">目的</th> @@ -28,7 +28,7 @@ translation_of: Learn/Common_questions/Design_for_all_types_of_users <h2 id="アクティブラーニング">アクティブラーニング</h2> -<p><em>まだ、アクティブラーニングがありません。 <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> +<p><em>まだ、アクティブラーニングがありません。 <a href="/ja/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> <h2 id="深く掘っていく">深く掘っていく</h2> diff --git a/files/ja/learn/common_questions/how_does_the_internet_work/index.html b/files/ja/learn/common_questions/how_does_the_internet_work/index.html index 73899c4026..7a55f7fe86 100644 --- a/files/ja/learn/common_questions/how_does_the_internet_work/index.html +++ b/files/ja/learn/common_questions/how_does_the_internet_work/index.html @@ -17,7 +17,7 @@ translation_of: Learn/Common_questions/How_does_the_Internet_work <tbody> <tr> <th scope="row">前提条件:</th> - <td>ありませんが、最初に<a href="/docs/Learn/Thinking_before_coding">プロジェクトの目標を設定すること</a>の記事を先に読むことをおすすめします。</td> + <td>ありませんが、最初に<a href="/ja/docs/Learn/Thinking_before_coding">プロジェクトの目標を設定すること</a>の記事を先に読むことをおすすめします。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/common_questions/how_much_does_it_cost/index.html b/files/ja/learn/common_questions/how_much_does_it_cost/index.html index d931cb0900..7ab38a1d62 100644 --- a/files/ja/learn/common_questions/how_much_does_it_cost/index.html +++ b/files/ja/learn/common_questions/how_much_does_it_cost/index.html @@ -52,7 +52,7 @@ translation_of: Learn/Common_questions/How_much_does_it_cost <h3 id="パブリッシングツール">パブリッシングツール</h3> -<p>You also need a way to upload files: from your hard drive to a distant web server. To do that you should use a publishing tool such as an (S)<a href="/en-US/docs/Glossary/FTP">FTP client</a>, <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a>, or <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Git/GitHub</a>.</p> +<p>You also need a way to upload files: from your hard drive to a distant web server. To do that you should use a publishing tool such as an (S)<a href="/ja/docs/Glossary/FTP">FTP client</a>, <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a>, or <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Git/GitHub</a>.</p> <p>Each operating system includes an (S)FTP client, as part of its file manager. Windows Explorer, Nautilus (a common Linux file manager), and the Mac Finder all include this functionality. However, people often choose dedicated (S)FTP clients to display local or remote directories side-by-side and store server passwords.</p> @@ -147,9 +147,9 @@ translation_of: Learn/Common_questions/How_much_does_it_cost <h2 id="Next_steps">Next steps</h2> -<p>Now that you understand what kind of money your website may cost you, it's time to start designing that website and <a href="/en-US/docs/Learn/Set_up_a_basic_working_environment">setting up your work environment</a>.</p> +<p>Now that you understand what kind of money your website may cost you, it's time to start designing that website and <a href="/ja/docs/Learn/Set_up_a_basic_working_environment">setting up your work environment</a>.</p> <ul> - <li>Read on about <a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">how to choose and install a text editor</a>.</li> - <li>If you're more focused on design, take a look at the <a href="/en-US/Learn/Anatomy_of_a_web_page">anatomy of a web page</a>.</li> + <li>Read on about <a href="/ja/docs/Learn/Choose,_Install_and_set_up_a_text_editor">how to choose and install a text editor</a>.</li> + <li>If you're more focused on design, take a look at the <a href="/ja/Learn/Anatomy_of_a_web_page">anatomy of a web page</a>.</li> </ul> diff --git a/files/ja/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/ja/learn/common_questions/pages_sites_servers_and_search_engines/index.html index 34646a106f..b633c513b9 100644 --- a/files/ja/learn/common_questions/pages_sites_servers_and_search_engines/index.html +++ b/files/ja/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -115,6 +115,6 @@ translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines <h2 id="Next_steps" name="Next_steps">次の段階</h2> <ul> - <li>より深く掘り下げる: <a href="/docs/Learn/What_is_a_web_server">ウェブサーバーって何?</a></li> + <li>より深く掘り下げる: <a href="/ja/docs/Learn/What_is_a_web_server">ウェブサーバーって何?</a></li> <li>ウェブページがどのようにウェブサイトにリンクされているかを見る: <a href="/ja/docs/Learn/Common_questions/What_are_hyperlinks">ウェブのリンクを理解する</a></li> </ul> diff --git a/files/ja/learn/common_questions/thinking_before_coding/index.html b/files/ja/learn/common_questions/thinking_before_coding/index.html index ec555fe4c4..8d9629600b 100644 --- a/files/ja/learn/common_questions/thinking_before_coding/index.html +++ b/files/ja/learn/common_questions/thinking_before_coding/index.html @@ -40,7 +40,7 @@ translation_of: Learn/Common_questions/Thinking_before_coding <h2 id="アクティブラーニング">アクティブラーニング</h2> -<p><em>アクティブラーニングはまだありません。<a href="https://developer.mozilla.org/ja/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> +<p><em>アクティブラーニングはまだありません。<a href="/ja/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> <h2 id="より深いダイビング">より深いダイビング</h2> diff --git a/files/ja/learn/common_questions/what_are_browser_developer_tools/index.html b/files/ja/learn/common_questions/what_are_browser_developer_tools/index.html index 4e3fe1667b..98fe5326a8 100644 --- a/files/ja/learn/common_questions/what_are_browser_developer_tools/index.html +++ b/files/ja/learn/common_questions/what_are_browser_developer_tools/index.html @@ -19,7 +19,7 @@ translation_of: Learn/Common_questions/What_are_browser_developer_tools </div> <div class="note"> -<p><strong>注</strong>: 下のサンプルを実行していく前に、<a href="/en-US/Learn/Getting_started_with_the_web">Web入門</a>の記事の中で作りあげる、<a href="http://mdn.github.io/beginner-html-site-scripted/">初心者向けウェブサイトの例</a>を開いてください。後ほどこれを使って説明します。</p> +<p><strong>注</strong>: 下のサンプルを実行していく前に、<a href="/ja/Learn/Getting_started_with_the_web">Web入門</a>の記事の中で作りあげる、<a href="http://mdn.github.io/beginner-html-site-scripted/">初心者向けウェブサイトの例</a>を開いてください。後ほどこれを使って説明します。</p> </div> <h2 id="How_to_open_the_devtools_in_your_browser" name="How_to_open_the_devtools_in_your_browser">ブラウザ開発者ツールの開き方</h2> @@ -168,7 +168,7 @@ document.querySelector('h1').appendChild(myImage);</pre> <p>Find more out about the JavaScript console in different browsers:</p> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Firefox Web Console</a></li> + <li><a href="/ja/docs/Tools/Web_Console">Firefox Web Console</a></li> <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255006%28v=vs.85%29.aspx">IE JavaScript console</a></li> <li><a href="https://developer.chrome.com/devtools/docs/console">Chrome JavaScript Console</a> (Opera's inspector works the same as this)</li> <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1">Safari Console</a></li> @@ -177,6 +177,6 @@ document.querySelector('h1').appendChild(myImage);</pre> <h2 id="あわせて参照">あわせて参照</h2> <ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a></li> </ul> diff --git a/files/ja/learn/common_questions/what_is_a_web_server/index.html b/files/ja/learn/common_questions/what_is_a_web_server/index.html index 1278ee5d38..bd7ba00222 100644 --- a/files/ja/learn/common_questions/what_is_a_web_server/index.html +++ b/files/ja/learn/common_questions/what_is_a_web_server/index.html @@ -82,7 +82,7 @@ translation_of: Learn/Common_questions/What_is_a_web_server <dd>サーバもクライアントも以前の通信を覚えていません。例えば、 HTTP 単独では、サーバは入力したパスワードや、処理中のどのステップにいるかを覚えていることはできません。このような仕事をするには、アプリケーションサーバが必要になります。 (以降の記事で様々な技術を説明します。)</dd> </dl> -<p>HTTP はクライアントとサーバがどのように通信するかについての明確なルールを提供しています。 HTTP 自体については、後で<a href="https://developer.mozilla.org/ja/docs/Web/HTTP">技術記事</a>で説明します。これからは、以下のようなことに気を付けてください。</p> +<p>HTTP はクライアントとサーバがどのように通信するかについての明確なルールを提供しています。 HTTP 自体については、後で<a href="/ja/docs/Web/HTTP">技術記事</a>で説明します。これからは、以下のようなことに気を付けてください。</p> <ul> <li><em>クライアント</em>だけが HTTP リクエストを作成することができ、<em>サーバ</em>だけに送ることができます。サーバは<em>クライアント</em>の HTTP リクエストに<em>返答</em>することだけができます。</li> diff --git a/files/ja/learn/common_questions/what_is_accessibility/index.html b/files/ja/learn/common_questions/what_is_accessibility/index.html index 2790e3bcd2..d4ed71e2ce 100644 --- a/files/ja/learn/common_questions/what_is_accessibility/index.html +++ b/files/ja/learn/common_questions/what_is_accessibility/index.html @@ -26,7 +26,7 @@ translation_of: Learn/Common_questions/What_is_accessibility <h2 id="能動的学習">能動的学習</h2> -<p><em>まだ可能な能動的学習がありません。 <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> +<p><em>まだ可能な能動的学習がありません。 <a href="/ja/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> <h2 id="深く掘っていく">深く掘っていく</h2> @@ -85,6 +85,6 @@ translation_of: Learn/Common_questions/What_is_accessibility <p>アクセスビリティはウェブデザインや技術構造の両方にインパクトを与えることができます。</p> <ul> - <li>私たちはデザインの観点から, <a href="/en-US/docs/Learn/Design_for_all_types_of_users_101">すべてのタイプのユーザーのためのデザイン</a>の勉強を提案する。</li> - <li>もし、技術的な側面の興味を持ったら、 <a href="/en-US/docs/Learn/Using_images">ウェブページにおける埋め込みイメージ</a>の方法を勉強することができる。</li> + <li>私たちはデザインの観点から, <a href="/ja/docs/Learn/Design_for_all_types_of_users_101">すべてのタイプのユーザーのためのデザイン</a>の勉強を提案する。</li> + <li>もし、技術的な側面の興味を持ったら、 <a href="/ja/docs/Learn/Using_images">ウェブページにおける埋め込みイメージ</a>の方法を勉強することができる。</li> </ul> diff --git a/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.html index f0883a265c..485c7b0d6a 100644 --- a/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.html +++ b/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -22,7 +22,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> @@ -45,7 +45,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <h3 id="Background_colors" name="Background_colors">背景色</h3> -<p> {{cssxref("background-color")}} プロパティは、要素の背景色を定義します。このプロパティは、有効な<a href="/en-US/docs/Web/CSS/color_value"><color></a>値を受け入れます。<code>background-color</code>は、要素の <a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model#Parts_of_a_box"><strong>Content box</strong>, <strong>Padding box</strong></a> の範囲でコンテンツの下に広がります。</p> +<p> {{cssxref("background-color")}} プロパティは、要素の背景色を定義します。このプロパティは、有効な<a href="/ja/docs/Web/CSS/color_value"><color></a>値を受け入れます。<code>background-color</code>は、要素の <a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model#Parts_of_a_box"><strong>Content box</strong>, <strong>Padding box</strong></a> の範囲でコンテンツの下に広がります。</p> <p>次の例では、さまざまな色の値値を使用して、ボックス(<code>.box</code>)、見出し(<code>h2</code>)、および {{htmlelement("span")}} 要素に背景色を指定しています。</p> diff --git a/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html index 324308ee1f..a8285aa680 100644 --- a/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -22,7 +22,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> @@ -302,7 +302,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance <h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> -<p>この記事で多くを網羅しましたが、最も重要な情報を覚えていますか?次に移る前に、この情報を保持しているかを検証するテストがあります — <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks">Test your skills: the Cascade</a>を見てください。</p> +<p>この記事で多くを網羅しましたが、最も重要な情報を覚えていますか?次に移る前に、この情報を保持しているかを検証するテストがあります — <a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_tasks">Test your skills: the Cascade</a>を見てください。</p> <h2 id="Whats_next" name="Whats_next">次のステップ</h2> diff --git a/files/ja/learn/css/building_blocks/debugging_css/index.html b/files/ja/learn/css/building_blocks/debugging_css/index.html index a66917e645..7df0fa407d 100644 --- a/files/ja/learn/css/building_blocks/debugging_css/index.html +++ b/files/ja/learn/css/building_blocks/debugging_css/index.html @@ -19,7 +19,7 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/building_blocks/handling_different_text_directions/index.html b/files/ja/learn/css/building_blocks/handling_different_text_directions/index.html index e0d2961d20..af0f9f0823 100644 --- a/files/ja/learn/css/building_blocks/handling_different_text_directions/index.html +++ b/files/ja/learn/css/building_blocks/handling_different_text_directions/index.html @@ -19,7 +19,7 @@ translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/building_blocks/images_media_form_elements/index.html b/files/ja/learn/css/building_blocks/images_media_form_elements/index.html index f21577f7d5..bd3fa8d358 100644 --- a/files/ja/learn/css/building_blocks/images_media_form_elements/index.html +++ b/files/ja/learn/css/building_blocks/images_media_form_elements/index.html @@ -19,7 +19,7 @@ translation_of: Learn/CSS/Building_blocks/Images_media_form_elements <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/building_blocks/organizing/index.html b/files/ja/learn/css/building_blocks/organizing/index.html index f1508b0edb..c199105dd3 100644 --- a/files/ja/learn/css/building_blocks/organizing/index.html +++ b/files/ja/learn/css/building_blocks/organizing/index.html @@ -23,7 +23,7 @@ translation_of: Learn/CSS/Building_blocks/Organizing <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/building_blocks/overflowing_content/index.html b/files/ja/learn/css/building_blocks/overflowing_content/index.html index 06bc30293c..52a6a71046 100644 --- a/files/ja/learn/css/building_blocks/overflowing_content/index.html +++ b/files/ja/learn/css/building_blocks/overflowing_content/index.html @@ -18,7 +18,7 @@ translation_of: Learn/CSS/Building_blocks/Overflowing_content <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> @@ -99,7 +99,7 @@ translation_of: Learn/CSS/Building_blocks/Overflowing_content <h2 id="あなたのスキルをテストしてみてください!">あなたのスキルをテストしてみてください!</h2> -<p>このレッスンで吸収すべきことはたくさんあります! あなたは最も重要な情報を覚えていますか? あなたの理解度を確認するには、<a href="/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Test your skills: overflow</a> を参照してください。</p> +<p>このレッスンで吸収すべきことはたくさんあります! あなたは最も重要な情報を覚えていますか? あなたの理解度を確認するには、<a href="/ja/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Test your skills: overflow</a> を参照してください。</p> <h2 id="Summary" name="Summary">まとめ</h2> diff --git a/files/ja/learn/css/building_blocks/selectors/combinators/index.html b/files/ja/learn/css/building_blocks/selectors/combinators/index.html index 309d54b4cc..1daad128ee 100644 --- a/files/ja/learn/css/building_blocks/selectors/combinators/index.html +++ b/files/ja/learn/css/building_blocks/selectors/combinators/index.html @@ -17,7 +17,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Combinators <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> @@ -85,7 +85,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Combinators <h2 id="あなたのスキルをテストしてみてください!">あなたのスキルをテストしてみてください!</h2> -<p>この記事では多くのことを取り上げましたが、最も重要な情報を覚えていますか?先に進む前に、この情報を保持しているかどうかを確認するためのテストがいくつかあります - あなたのスキルをテストするを参照してください。<a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a> を参照してください。</p> +<p>この記事では多くのことを取り上げましたが、最も重要な情報を覚えていますか?先に進む前に、この情報を保持しているかどうかを確認するためのテストがいくつかあります - あなたのスキルをテストするを参照してください。<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a> を参照してください。</p> <h2 id="Moving_on" name="Moving_on">先へ</h2> diff --git a/files/ja/learn/css/building_blocks/selectors/index.html b/files/ja/learn/css/building_blocks/selectors/index.html index 4ca0ff88db..2d861d36fa 100644 --- a/files/ja/learn/css/building_blocks/selectors/index.html +++ b/files/ja/learn/css/building_blocks/selectors/index.html @@ -20,7 +20,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>) および CSS に関するアイデア (<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>) に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>) および CSS に関するアイデア (<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>) に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html index ea84d45c2b..18f1be6cc0 100644 --- a/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html +++ b/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -11,7 +11,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピュータリテラシー、<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">インストールされている基本的なソフトウェア</a><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">、ファイルの操作</a>に関する基本的な知識、HTMLの基本(<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTMLの概要を</a>学ぶ)、CSSのしくみ(<a href="/en-US/docs/Learn/CSS/First_steps">CSSの最初のステップを</a>学ぶ)。</td> + <td>基本的なコンピュータリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">インストールされている基本的なソフトウェア</a><a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">、ファイルの操作</a>に関する基本的な知識、HTMLの基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTMLの概要を</a>学ぶ)、CSSのしくみ(<a href="/ja/docs/Learn/CSS/First_steps">CSSの最初のステップを</a>学ぶ)。</td> </tr> <tr> <th scope="row">目的:</th> @@ -41,9 +41,9 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el <p>すべての疑似クラスは、この同じ方法で動作します。特定の状態にあるドキュメントの一部をターゲットにして、HTMLにクラスを追加したかのように動作します。MDNの他の例をいくつか見てみましょう。</p> <ul> - <li><code><a href="/en-US/docs/Web/CSS/:last-child">:last-child</a></code></li> - <li><code><a href="/en-US/docs/Web/CSS/:only-child">:only-child</a></code></li> - <li><code><a href="/en-US/docs/Web/CSS/:invalid">:invalid</a></code></li> + <li><code><a href="/ja/docs/Web/CSS/:last-child">:last-child</a></code></li> + <li><code><a href="/ja/docs/Web/CSS/:only-child">:only-child</a></code></li> + <li><code><a href="/ja/docs/Web/CSS/:invalid">:invalid</a></code></li> </ul> <h3 id="ユーザーアクション疑似クラス">ユーザーアクション疑似クラス</h3> @@ -51,8 +51,8 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el <p>一部の疑似クラスは、ユーザーが何らかの方法でドキュメントを操作したときにのみ適用されます。これらの<strong>ユーザーアクションの</strong>疑似クラスは、<strong>動的疑似クラス</strong>と呼ばれることもあり、ユーザーが要素を操作したときに、要素にクラスが追加されたかのように動作します。例は次のとおりです。</p> <ul> - <li><code><a href="/en-US/docs/Web/CSS/:hover">:hover</a></code> — 上記の通り; これは、ユーザーが要素(通常はリンク)の上にポインターを移動した場合にのみ適用されます。</li> - <li><code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> — ユーザーがキーボードコントロールを使用して要素にフォーカスした場合にのみ適用されます。</li> + <li><code><a href="/ja/docs/Web/CSS/:hover">:hover</a></code> — 上記の通り; これは、ユーザーが要素(通常はリンク)の上にポインターを移動した場合にのみ適用されます。</li> + <li><code><a href="/ja/docs/Web/CSS/:focus">:focus</a></code> — ユーザーがキーボードコントロールを使用して要素にフォーカスした場合にのみ適用されます。</li> </ul> <p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p> @@ -88,7 +88,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el <h2 id="beforeおよび_afterを使用したコンテンツの生成">:: beforeおよび:: afterを使用したコンテンツの生成</h2> -<p>CSSを使用してコンテンツをドキュメントに挿入するための <code><a href="/en-US/docs/Web/CSS/content">content</a></code> プロパティと共に使用される特別な疑似要素がいくつかあります。</p> +<p>CSSを使用してコンテンツをドキュメントに挿入するための <code><a href="/ja/docs/Web/CSS/content">content</a></code> プロパティと共に使用される特別な疑似要素がいくつかあります。</p> <p>以下のライブ例のように、これらを使用してテキストの文字列を挿入できます。{{cssxref("content")}} プロパティのテキスト値を変更してみて、出力でそれを確認してください。 <code>::before</code> 疑似要素を <code>::after</code> に変更して、要素の最初ではなく最後に挿入されたテキストを表示することもできます。</p> @@ -132,7 +132,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el </tr> <tr> <td>{{cssxref(":blank")}}</td> - <td>入力値が空の<a href="/en-US/docs/Web/HTML/Element/input"><code><input></code> 要素に</a>一致します。</td> + <td>入力値が空の<a href="/ja/docs/Web/HTML/Element/input"><code><input></code> 要素に</a>一致します。</td> </tr> <tr> <td>{{cssxref(":checked")}}</td> @@ -148,7 +148,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el </tr> <tr> <td>{{cssxref(":dir")}}</td> - <td>方向性(HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> 属性またはCSS <code><a href="/en-US/docs/Web/CSS/direction">direction</a></code> プロパティの値)に基づいて要素を選択します。</td> + <td>方向性(HTML <code><a href="/ja/docs/Web/HTML/Global_attributes/dir">dir</a></code> 属性またはCSS <code><a href="/ja/docs/Web/CSS/direction">direction</a></code> プロパティの値)に基づいて要素を選択します。</td> </tr> <tr> <td>{{cssxref(":disabled")}}</td> @@ -164,7 +164,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el </tr> <tr> <td>{{cssxref(":first")}}</td> - <td><a href="/en-US/docs/Web/CSS/Paged_Media">ページ媒体</a>では、最初のページと一致します。</td> + <td><a href="/ja/docs/Web/CSS/Paged_Media">ページ媒体</a>では、最初のページと一致します。</td> </tr> <tr> <td>{{cssxref(":first-child")}}</td> @@ -196,7 +196,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el </tr> <tr> <td>{{cssxref(":indeterminate")}}</td> - <td>値が不確定な状態のUI要素、通常は<a href="/en-US/docs/Web/HTML/Element/input/checkbox">チェックボックスに</a>一致し<a href="/en-US/docs/Web/HTML/Element/input/checkbox">ます</a>。</td> + <td>値が不確定な状態のUI要素、通常は<a href="/ja/docs/Web/HTML/Element/input/checkbox">チェックボックスに</a>一致し<a href="/ja/docs/Web/HTML/Element/input/checkbox">ます</a>。</td> </tr> <tr> <td>{{cssxref(":in-range")}}</td> @@ -208,7 +208,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el </tr> <tr> <td>{{cssxref(":lang")}}</td> - <td>言語(HTML <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a>属性の値)に基づいて要素を<a href="/en-US/docs/Web/HTML/Global_attributes/lang">照合し</a>ます。</td> + <td>言語(HTML <a href="/ja/docs/Web/HTML/Global_attributes/lang">lang</a>属性の値)に基づいて要素を<a href="/ja/docs/Web/HTML/Global_attributes/lang">照合し</a>ます。</td> </tr> <tr> <td>{{cssxref(":last-child")}}</td> @@ -220,7 +220,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el </tr> <tr> <td>{{cssxref(":left")}}</td> - <td><a href="/en-US/docs/Web/CSS/CSS_Pages">ページ媒体</a>では、左側のページと一致します。</td> + <td><a href="/ja/docs/Web/CSS/CSS_Pages">ページ媒体</a>では、左側のページと一致します。</td> </tr> <tr> <td>{{cssxref(":link")}}</td> @@ -300,7 +300,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el </tr> <tr> <td>{{cssxref(":right")}}</td> - <td><a href="/en-US/docs/Web/CSS/CSS_Pages">ページ媒体</a>では、右側のページに一致します。</td> + <td><a href="/ja/docs/Web/CSS/CSS_Pages">ページ媒体</a>では、右側のページに一致します。</td> </tr> <tr> <td>{{cssxref(":root")}}</td> @@ -375,23 +375,23 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el <h2 id="このモジュールでは">このモジュールでは</h2> <ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSSセレクター</a> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSSセレクター</a> <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">タイプ、クラス、IDセレクター</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクター</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">疑似クラスと疑似要素</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">コンビネーター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">タイプ、クラス、IDセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">疑似クラスと疑似要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">コンビネーター</a></li> </ul> </li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">異なるテキスト方向の処理</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">あふれるコンテンツ</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">値と単位</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSSでのアイテムのサイズ変更</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像、メディア、フォーム要素</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">スタイリングテーブル</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSSのデバッグ</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSSの整理</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">異なるテキスト方向の処理</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">あふれるコンテンツ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSSでのアイテムのサイズ変更</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像、メディア、フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">スタイリングテーブル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSSのデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSSの整理</a></li> </ol> diff --git a/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html index 8f1bbbfaad..1d5f42f94b 100644 --- a/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html +++ b/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -20,7 +20,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/building_blocks/sizing_items_in_css/index.html b/files/ja/learn/css/building_blocks/sizing_items_in_css/index.html index 80909093b3..37e1e4912e 100644 --- a/files/ja/learn/css/building_blocks/sizing_items_in_css/index.html +++ b/files/ja/learn/css/building_blocks/sizing_items_in_css/index.html @@ -21,7 +21,7 @@ translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS に関するアイデア(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/building_blocks/values_and_units/index.html b/files/ja/learn/css/building_blocks/values_and_units/index.html index 52afc03922..0e398e2d64 100644 --- a/files/ja/learn/css/building_blocks/values_and_units/index.html +++ b/files/ja/learn/css/building_blocks/values_and_units/index.html @@ -24,7 +24,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS の動作概念(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)および CSS の動作概念(<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>)に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/css_layout/media_queries/index.html b/files/ja/learn/css/css_layout/media_queries/index.html index 6cfb1366b1..f1e90c3f90 100644 --- a/files/ja/learn/css/css_layout/media_queries/index.html +++ b/files/ja/learn/css/css_layout/media_queries/index.html @@ -358,13 +358,13 @@ article { <pre class="brush: html notranslate"><meta name="viewport" content="width=device-width,initial-scale=1"></pre> -<p>This is the <a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a> — it exists as a way control how mobile browsers render content. This is needed because by default, most mobile browsers lie about their viewport width. Non-responsive sites commonly look really bad when rendered in a narrow viewport, so mobile browsers usually render the site with a viewport width wider than the real device width by default (usually 960 pixels), and then shrink the rendered result so that it fits in the display.</p> +<p>This is the <a href="/ja/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a> — it exists as a way control how mobile browsers render content. This is needed because by default, most mobile browsers lie about their viewport width. Non-responsive sites commonly look really bad when rendered in a narrow viewport, so mobile browsers usually render the site with a viewport width wider than the real device width by default (usually 960 pixels), and then shrink the rendered result so that it fits in the display.</p> <p>This is all well and good, but it means that responsive sites are not going to work as expected. If the viewport width is reported as 960 pixels, then mobile layouts (for example created using a media query of <code>@media screen and (max-width: 600px) { ... }</code>) are not going to render as expected.</p> <p>To remedy this, including a viewport meta tag like the one above on your page tells the browser "don't render the content with a 960 pixel viewport — render it using the real device width instead, and set a default initial scale level for better consistency." The media queries will then kick in as expected.</p> -<p>There are a number of other options you can put inside the <code>content</code> attribute of the viewport meta tag — see <a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a> for more details.</p> +<p>There are a number of other options you can put inside the <code>content</code> attribute of the viewport meta tag — see <a href="/ja/docs/Mozilla/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a> for more details.</p> <h2 id="Do_you_really_need_a_media_query" name="Do_you_really_need_a_media_query">メディアクエリーが本当に必要ですか?</h2> @@ -415,7 +415,7 @@ article { <h2 id="Test_your_skills!">Test your skills!</h2> -<p>You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/CSS/CSS_layout/rwd_skills">Test your skills: Responsive Web Design</a>.</p> +<p>You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see <a href="/ja/docs/Learn/CSS/CSS_layout/rwd_skills">Test your skills: Responsive Web Design</a>.</p> <h2 id="Summary" name="Summary">まとめ</h2> diff --git a/files/ja/learn/css/css_layout/supporting_older_browsers/index.html b/files/ja/learn/css/css_layout/supporting_older_browsers/index.html index 93feda2cf0..ffb678ca38 100644 --- a/files/ja/learn/css/css_layout/supporting_older_browsers/index.html +++ b/files/ja/learn/css/css_layout/supporting_older_browsers/index.html @@ -207,7 +207,7 @@ translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers <h2 id="Testing_older_browsers" name="Testing_older_browsers">古いブラウザーをテストする</h2> -<p>フレックスボックスとグリッドをサポートしているブラウザーの大多数では、古いブラウザーをテストするのはかなり難しいかもしれません。 1つの方法は、<a href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザーテスト</a>のモジュールに詳述されているように、Sauce Labs のようなオンラインテストツールを使うことです。</p> +<p>フレックスボックスとグリッドをサポートしているブラウザーの大多数では、古いブラウザーをテストするのはかなり難しいかもしれません。 1つの方法は、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザーテスト</a>のモジュールに詳述されているように、Sauce Labs のようなオンラインテストツールを使うことです。</p> <p>また、仮想マシンをダウンロードしてインストールし、自分のコンピュータ上の封じ込められた環境で古いバージョンのブラウザーを実行することもできます。 古いバージョンの Internet Explorer にアクセスできることは特に便利で、そのために、マイクロソフトは<a href="https://developer.microsoft.com/ja/microsoft-edge/tools/vms/">さまざまな仮想マシンを無料でダウンロード</a>(英語)できるようにしました。 これらは、Mac、Windows、Linux の各オペレーティングシステムで利用可能で、Windows コンピュータを使用していなくても、古い Windows ブラウザーや最新の Windows ブラウザーでテストするのに最適な方法です。</p> diff --git a/files/ja/learn/css/first_steps/getting_started/index.html b/files/ja/learn/css/first_steps/getting_started/index.html index e11d48443c..54cd8436cf 100644 --- a/files/ja/learn/css/first_steps/getting_started/index.html +++ b/files/ja/learn/css/first_steps/getting_started/index.html @@ -22,7 +22,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">ソフトウェアのインストール</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの働き方</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML序論</a>を学んでいること。)</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">ソフトウェアのインストール</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの働き方</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML序論</a>を学んでいること。)</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/first_steps/how_css_is_structured/index.html b/files/ja/learn/css/first_steps/how_css_is_structured/index.html index a9e2ae7130..a842228e13 100644 --- a/files/ja/learn/css/first_steps/how_css_is_structured/index.html +++ b/files/ja/learn/css/first_steps/how_css_is_structured/index.html @@ -324,7 +324,7 @@ p { <h2 id="rules" name="rules">アット規則</h2> -<p>CSS の<a href="/en-US/docs/Web/CSS/At-rule">アット規則</a> は、 CSS が実行すること、またはそれがどのように動作するべきかの指示を提供します。いくつかのアット規則は、キーワードと値だけのシンプルなものです。例えば、 <code>@import</code> はスタイルシートを別の CSS スタイルシートにインポートします。</p> +<p>CSS の<a href="/ja/docs/Web/CSS/At-rule">アット規則</a> は、 CSS が実行すること、またはそれがどのように動作するべきかの指示を提供します。いくつかのアット規則は、キーワードと値だけのシンプルなものです。例えば、 <code>@import</code> はスタイルシートを別の CSS スタイルシートにインポートします。</p> <pre class="brush: css notranslate">@import 'styles2.css';</pre> diff --git a/files/ja/learn/css/first_steps/how_css_works/index.html b/files/ja/learn/css/first_steps/how_css_works/index.html index 6044a3c29a..25179efb6b 100644 --- a/files/ja/learn/css/first_steps/how_css_works/index.html +++ b/files/ja/learn/css/first_steps/how_css_works/index.html @@ -17,7 +17,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、 <a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされていること</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの操作方法</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a>を学習のこと)。</td> + <td>基本的なコンピューターリテラシー、 <a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされていること</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの操作方法</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a>を学習のこと)。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/first_steps/index.html b/files/ja/learn/css/first_steps/index.html index c0042ea515..b22dc4d0dd 100644 --- a/files/ja/learn/css/first_steps/index.html +++ b/files/ja/learn/css/first_steps/index.html @@ -19,7 +19,7 @@ translation_of: Learn/CSS/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> @@ -28,7 +28,7 @@ translation_of: Learn/CSS/First_steps <ol> <li>コンピューターの使い方と (ウェブを見たりコンテンツを消費したりといった)ウェブの受動的な使い方に関する基本的な知識に慣れ親しんでいること。</li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>で説明されている基本的な作業環境と、<a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い方</a>で説明されているファイルの作り方や管理の仕方について理解していること。</li> + <li><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>で説明されている基本的な作業環境と、<a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い方</a>で説明されているファイルの作り方や管理の仕方について理解していること。</li> <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>で説明されている HTML についての基礎知識に慣れ親しんでいること。</li> </ol> @@ -41,7 +41,7 @@ translation_of: Learn/CSS/First_steps <p>このモジュールには、CSS についてすべての基本的なことがらと、いくつかのスキルをテストできる次の記事が含まれています。</p> <dl> - <dt><a href="https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か?</a></dt> + <dt><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か?</a></dt> <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets; カスケーティングスタイルシート) は見栄えのよいウェブページを作ることができますが、背後ではどのように動いているのでしょうか?この記事では CSS について、簡単なコードの例とこの言語の主要な項目を説明します。</dd> <dt><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></dt> <dd>この記事では、簡単な HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。</dd> diff --git a/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html b/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html index 05d56a0fb1..c1b3a1c889 100644 --- a/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html +++ b/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html @@ -16,7 +16,7 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge <tbody> <tr> <th scope="row">前提条件:</th> - <td>基礎コンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル操作</a>の基礎知識 HTML の基礎 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の入門</a>で学ぶ)、CSS の基礎(このモジュールの残り)</td> + <td>基礎コンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル操作</a>の基礎知識 HTML の基礎 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の入門</a>で学ぶ)、CSS の基礎(このモジュールの残り)</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/first_steps/what_is_css/index.html b/files/ja/learn/css/first_steps/what_is_css/index.html index 0d7d6f3cd3..0a2665c9c3 100644 --- a/files/ja/learn/css/first_steps/what_is_css/index.html +++ b/files/ja/learn/css/first_steps/what_is_css/index.html @@ -22,7 +22,7 @@ translation_of: Learn/CSS/First_steps/What_is_CSS <tr> <th scope="row">前提条件:</th> <td> - <p>基本的なコンピューターリテラシー、 <a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされていること</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの操作方法</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML概論</a>を学習のこと)。</p> + <p>基本的なコンピューターリテラシー、 <a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされていること</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの操作方法</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML概論</a>を学習のこと)。</p> </td> </tr> <tr> diff --git a/files/ja/learn/css/howto/css_faq/index.html b/files/ja/learn/css/howto/css_faq/index.html index fd76929d99..b7be110d8c 100644 --- a/files/ja/learn/css/howto/css_faq/index.html +++ b/files/ja/learn/css/howto/css_faq/index.html @@ -73,7 +73,7 @@ original_slug: Web/CSS/Common_CSS_Questions </ul> <div class="note"> -<p><strong>注</strong>: 詳しくは <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">Selectors</a> もご覧ください。</p> +<p><strong>注</strong>: 詳しくは <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors">Selectors</a> もご覧ください。</p> </div> <h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value">プロパティの既定値に戻すにはどうすればよいのか?</h2> diff --git a/files/ja/learn/css/index.html b/files/ja/learn/css/index.html index 9c04c66285..100165c81f 100644 --- a/files/ja/learn/css/index.html +++ b/files/ja/learn/css/index.html @@ -27,19 +27,19 @@ translation_of: Learn/CSS <h2 id="Learning_pathway" name="Learning_pathway">学習の道のり</h2> -<p>CSS に挑戦する前に HTML の基礎を学習しておくべきです。まず、<a href="/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a> に取り組むことを推奨します — その後に、以下のことについて学んでください:</p> +<p>CSS に挑戦する前に HTML の基礎を学習しておくべきです。まず、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a> に取り組むことを推奨します — その後に、以下のことについて学んでください:</p> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps">CSS 入門</a> から始まる CSS モジュール</li> - <li>より高度な <a href="/Learn/HTML#Modules">HTML モジュール</a></li> - <li><a href="/docs/Learn/JavaScript">JavaScript</a> と、動的な機能をウェブページに追加する方法</li> + <li><a href="/ja/docs/Learn/CSS/First_steps">CSS 入門</a> から始まる CSS モジュール</li> + <li>より高度な <a href="/ja/docs/Learn/HTML#Modules">HTML モジュール</a></li> + <li><a href="/ja/docs/Learn/JavaScript">JavaScript</a> と、動的な機能をウェブページに追加する方法</li> </ul> <p>HTML の基本のキが理解できたら、HTML と CSS の 2 つのトピックスを行き来しながらふたつを同時に学習することを推奨します。なぜなら、CSS を理解すると HTML を勉強するのが更に興味深くまたもっと楽しくなり、また HTML を知ることなくして CSS を学習することはできないからです。</p> -<p>またこのトピックを開始する前に、コンピューターの基本的な使い方と、ウェブを受動的に使用すること (つまり、ウェブコンテンツを消費すること) に慣れている必要があります。 <a href="/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアをインストールする</a> に詳しく書かれているような基本的な環境を持っており、 <a href="/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a> に詳しく書かれているようなファイルの作成・管理方法を理解している必要があります — なおこれらについては初心者向けの記事集である<a href="/docs/Learn/Getting_started_with_the_web">ウェブ入門</a>のなかに入っています。</p> +<p>またこのトピックを開始する前に、コンピューターの基本的な使い方と、ウェブを受動的に使用すること (つまり、ウェブコンテンツを消費すること) に慣れている必要があります。 <a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアをインストールする</a> に詳しく書かれているような基本的な環境を持っており、 <a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a> に詳しく書かれているようなファイルの作成・管理方法を理解している必要があります — なおこれらについては初心者向けの記事集である<a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a>のなかに入っています。</p> -<p>このトピックに取り組む前に <a href="/docs/Learn/Getting_started_with_the_web">ウェブ入門</a> を読むと良いでしょう。ただ、このウェブ入門のなかの<a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a>の記事で紹介されていることの多くは、<a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a> でもカバーされているのでこれは必須ではありません。</p> +<p>このトピックに取り組む前に <a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a> を読むと良いでしょう。ただ、このウェブ入門のなかの<a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a>の記事で紹介されていることの多くは、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a> でもカバーされているのでこれは必須ではありません。</p> <h2 id="Modules" name="Modules">モジュール</h2> diff --git a/files/ja/learn/css/styling_text/index.html b/files/ja/learn/css/styling_text/index.html index 6bcfb0a722..91e37dca31 100644 --- a/files/ja/learn/css/styling_text/index.html +++ b/files/ja/learn/css/styling_text/index.html @@ -35,13 +35,13 @@ translation_of: Learn/CSS/Styling_text <p>このモジュールには以下の記事が含まれていて、HTML のテキストコンテンツの装飾の背後にあるすべての重要事項を説明しています。</p> <dl> - <dt><a href="/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></dt> + <dt><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></dt> <dd>この記事では、フォントの太さ、ファミリーとスタイル、フォントの一括指定、テキストの配置とその他のエフェクト、ラインと文字の間隔の設定など、テキストとフォントの装飾のすべての基本について詳しく説明します。</dd> - <dt><a href="/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></dt> + <dt><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></dt> <dd>リストは他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。この記事はすべてを説明しています。</dd> - <dt><a href="/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></dt> + <dt><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></dt> <dd>リンクを装飾するときは、擬似クラスを使用してリンク状態を効果的に装飾する方法と、ナビゲーションメニューやタブなどの一般的なさまざまなインターフェイス機能で使用するためのリンクの装飾方法を理解することが重要です。この記事では、これらすべてのトピックを見ていきます。</dd> - <dt><a href="/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></dt> + <dt><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></dt> <dd>ここでは、ウェブフォントを詳しく探ります — これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様でカスタムなテキストの装飾を可能にします。</dd> </dl> @@ -50,6 +50,6 @@ translation_of: Learn/CSS/Styling_text <p>以下の評価では、上記のガイドで説明されているテキストの装飾のテクニックについての理解をテストします。</p> <dl> - <dt><a href="/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></dt> + <dt><a href="/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></dt> <dd>この評価では、コミュニティスクールのホームページのテキストを装飾してもらい、テキストの装飾についての理解をテストします。</dd> </dl> diff --git a/files/ja/learn/css/styling_text/styling_lists/index.html b/files/ja/learn/css/styling_text/styling_lists/index.html index 3a0ea57b6f..3df18d08fd 100644 --- a/files/ja/learn/css/styling_text/styling_lists/index.html +++ b/files/ja/learn/css/styling_text/styling_lists/index.html @@ -175,7 +175,7 @@ dt { list-style-image: url(star.svg); }</pre> -<p>ただし、このプロパティは、行頭記号の位置、サイズなどを制御するという点では少し制限があります。 {{cssxref("background")}} プロパティファミリーを使用するほうが得策です。 これについては、<a href="/en-US/docs/Learn/CSS/Building_blocks">ボックスの装飾</a>モジュールで詳しく説明します。とりあえず、その例をご紹介しましょう。</p> +<p>ただし、このプロパティは、行頭記号の位置、サイズなどを制御するという点では少し制限があります。 {{cssxref("background")}} プロパティファミリーを使用するほうが得策です。 これについては、<a href="/ja/docs/Learn/CSS/Building_blocks">ボックスの装飾</a>モジュールで詳しく説明します。とりあえず、その例をご紹介しましょう。</p> <p>完成した例では、 (既に上で見たものの上に) 次のように順序なしリストを装飾しました。</p> diff --git a/files/ja/learn/forms/form_validation/index.html b/files/ja/learn/forms/form_validation/index.html index c167a03576..ff82bde83d 100644 --- a/files/ja/learn/forms/form_validation/index.html +++ b/files/ja/learn/forms/form_validation/index.html @@ -824,16 +824,16 @@ addEvent(form, "submit", function () { <h2 id="In_this_module" name="In_this_module">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> <h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> diff --git a/files/ja/learn/forms/how_to_structure_a_web_form/index.html b/files/ja/learn/forms/how_to_structure_a_web_form/index.html index 3bdc3b5f28..54b9b83285 100644 --- a/files/ja/learn/forms/how_to_structure_a_web_form/index.html +++ b/files/ja/learn/forms/how_to_structure_a_web_form/index.html @@ -24,7 +24,7 @@ original_slug: Learn/Forms/How_to_structure_an_HTML_form <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシーと、<a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の基本的な理解</a>。</td> + <td>基本的なコンピューターリテラシーと、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の基本的な理解</a>。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/forms/html5_input_types/index.html b/files/ja/learn/forms/html5_input_types/index.html index d56da894aa..a55e406e87 100644 --- a/files/ja/learn/forms/html5_input_types/index.html +++ b/files/ja/learn/forms/html5_input_types/index.html @@ -32,7 +32,7 @@ translation_of: Learn/Forms/HTML5_input_types </table> <div class="blockIndicator note"> -<p><strong>注</strong>: この記事のたいていの昨日はブラウザーを超えて広くサポートされています。例外は注記しておきます。ブラウザーサポートについての詳細は、<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element#Forms">HTML フォーム要素のリファレンス</a>、特に <a href="/ja/docs/Web/HTML/Element/input"><input> タイプ</a>リファレンスを見てください。</p> +<p><strong>注</strong>: この記事のたいていの昨日はブラウザーを超えて広くサポートされています。例外は注記しておきます。ブラウザーサポートについての詳細は、<a href="/ja/docs/Web/HTML/Element#Forms">HTML フォーム要素のリファレンス</a>、特に <a href="/ja/docs/Web/HTML/Element/input"><input> タイプ</a>リファレンスを見てください。</p> </div> <p>HTML フォームコントロールの見た目はデザイナーの仕様により全く異なるため、ウェブ開発者はときどき独自のフォームコントロールを作成します。これは上級のチュートリアル — <a href="/ja/docs/Learn/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a> — で扱います。</p> @@ -268,16 +268,16 @@ price.addEventListener('input', function() { <h2 id="In_this_module" name="In_this_module">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> <h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> diff --git a/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html b/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html index 70a487b2d2..a8be702f94 100644 --- a/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html +++ b/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html @@ -128,7 +128,7 @@ input[type="button"] { <p>一般に、フォームコントロールの既定の外観は変更しない方が良いと考えられています。というのも、 1 つの CSS プロパティの値を変更すると、一部の入力型は変更されますが、他の入力型は変更されないからです。例えば、 <code>input { font-size: 2rem; }</code> と宣言した場合、 <code>number</code>、<code>date</code>、<code>text</code> には影響がありますが、 <code>color</code> や <code>range</code> には影響しません。プロパティを変更すると、予期せぬ形でウィジェットの外観に影響を与えることがあります。例えば、 <code>[value] { background-color: #ccc; }</code> は、 <code>value</code> 属性を持つすべての {{HTMLElement("input")}} を対象としていますが、 {{HTMLElement("meter")}} の背景色や境界線の角の丸めを変更すると、ブラウザーによって異なる予期せぬ結果になる可能性があります。 {{cssxref('appearance', 'appearance: none;')}} と宣言してブラウザーのスタイルを削除することもできますが、一般的には目的を達成できません。すべてのスタイルが失われ、訪問者が慣れ親しんだ既定のルック&フィールが削除されるからです。</p> -<p>まとめるとすると、フォームコントロールのウィジェットに CSS でスタイル付けすることで、予測できない副作用が発生することがあります。だからやめましょう。 <a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">フォームウィジェット向けプロパティ実装状況一覧</a>の記事の複雑さからもわかるように、非常に難しいのです。テキスト要素に多少の調整 (サイズやフォントの色など) を行うことはまだ可能でも、必ず副作用が発生します。最良の方法は、 HTML フォームウィジェットにスタイルをまったく適用しないことです。しかし、周囲のアイテムになら、どれでも適用することはできます。また、どうしてもフォームウィジェットの既定のスタイルを変更しなければならない場合は、スタイルガイドを定義して、すべてのフォームコントロールの一貫性を確保し、ユーザーの使い勝手を損なわないようにしてください。また、 <a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">JavaScript でのウィジェットの再構築</a>など、難しいテクニックを検討することもできます。しかし、その場合は、<a href="https://www.smashingmagazine.com/2011/11/03/but-the-client-wants-ie-6-support/" rel="external">そのような愚かな要求をするクライアントに請求すること</a>をためらってはいけません。</p> +<p>まとめるとすると、フォームコントロールのウィジェットに CSS でスタイル付けすることで、予測できない副作用が発生することがあります。だからやめましょう。 <a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">フォームウィジェット向けプロパティ実装状況一覧</a>の記事の複雑さからもわかるように、非常に難しいのです。テキスト要素に多少の調整 (サイズやフォントの色など) を行うことはまだ可能でも、必ず副作用が発生します。最良の方法は、 HTML フォームウィジェットにスタイルをまったく適用しないことです。しかし、周囲のアイテムになら、どれでも適用することはできます。また、どうしてもフォームウィジェットの既定のスタイルを変更しなければならない場合は、スタイルガイドを定義して、すべてのフォームコントロールの一貫性を確保し、ユーザーの使い勝手を損なわないようにしてください。また、 <a href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls">JavaScript でのウィジェットの再構築</a>など、難しいテクニックを検討することもできます。しかし、その場合は、<a href="https://www.smashingmagazine.com/2011/11/03/but-the-client-wants-ie-6-support/" rel="external">そのような愚かな要求をするクライアントに請求すること</a>をためらってはいけません。</p> <h2 id="Feature_detection_and_polyfills"">機能検出とポリフィル</h2> diff --git a/files/ja/learn/forms/index.html b/files/ja/learn/forms/index.html index 40e686438a..0149ed2e1b 100644 --- a/files/ja/learn/forms/index.html +++ b/files/ja/learn/forms/index.html @@ -75,7 +75,7 @@ translation_of: Learn/Forms <dl> <dt><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームコントロールの作成方法</a></dt> <dd>場合によってはネイティブのフォームウィジェットが必要となるものを提供していないことがあるでしょう。例えばスタイリングや機能で。この場合、生の HTML から自分自身のフォームウィジェットを作る必要があります。この記事ではその方法と考慮すべき点を、実際のケーススタディと一緒に説明します。</dd> - <dt><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></dt> + <dt><a href="/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></dt> <dd>この記事では、標準フォームの送信ではなく、カスタム JavaScript 内で HTTP リクエストを組み立てて送る方法を見ます。またそうしたい理由と、そうする意味も見ていきます(<a href="/ja/docs/Web/API/FormData/Using_FormData_Objects">FormData オブジェクトの使用</a>もご覧ください)。</dd> </dl> diff --git a/files/ja/learn/forms/other_form_controls/index.html b/files/ja/learn/forms/other_form_controls/index.html index 28be191eb4..78677f21c7 100644 --- a/files/ja/learn/forms/other_form_controls/index.html +++ b/files/ja/learn/forms/other_form_controls/index.html @@ -312,16 +312,16 @@ translation_of: Learn/Forms/Other_form_controls <h2 id="In_this_module" name="In_this_module">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> <h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> diff --git a/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html index ed70a2587b..410d21a252 100644 --- a/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html +++ b/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html @@ -1010,7 +1010,7 @@ translation_of: Learn/Forms/Property_compatibility_table_for_form_controls <h3 id="Datalist" name="Datalist">Datalist</h3> -<p> <code>{{htmlelement("datalist")}}</code> and <code>{{htmlelement("input")}}</code> 要素と <a href="/en-US/docs/Web/HTML/Attributes/list"><code>list</code> 属性</a>を見てください。</p> +<p> <code>{{htmlelement("datalist")}}</code> and <code>{{htmlelement("input")}}</code> 要素と <a href="/ja/docs/Web/HTML/Attributes/list"><code>list</code> 属性</a>を見てください。</p> <table> <thead> @@ -2009,9 +2009,9 @@ translation_of: Learn/Forms/Property_compatibility_table_for_form_controls <h3 id="上級トピック">上級トピック</h3> <ul> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> </ul> diff --git a/files/ja/learn/forms/sending_and_retrieving_form_data/index.html b/files/ja/learn/forms/sending_and_retrieving_form_data/index.html index deee070329..5ce2709ade 100644 --- a/files/ja/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/ja/learn/forms/sending_and_retrieving_form_data/index.html @@ -320,16 +320,16 @@ if __name__ == "__main__": <h2 id="In_this_module" name="In_this_module">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> <h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> diff --git a/files/ja/learn/forms/styling_web_forms/index.html b/files/ja/learn/forms/styling_web_forms/index.html index a549329e48..1403848da7 100644 --- a/files/ja/learn/forms/styling_web_forms/index.html +++ b/files/ja/learn/forms/styling_web_forms/index.html @@ -205,7 +205,7 @@ legend { <p>ここからがおもしろいところです! コードを書き始める前に、ここでは 3 つの追加要素が必要です:</p> <ol> - <li>はがきの<a href="https://developer.mozilla.org/files/4151/background.jpg" title="The postcard background">背景</a> — この画像をダウンロードして作業している HTML ファイルと同じディレクトリーに保存します。</li> + <li>はがきの<a href="/files/4151/background.jpg" title="The postcard background">背景</a> — この画像をダウンロードして作業している HTML ファイルと同じディレクトリーに保存します。</li> <li>タイプライター風フォント: <a href="http://www.fontsquirrel.com/fonts/Secret-Typewriter" rel="external">fontsquirrel.com の "Secret Typewriter" </a> — TTF ファイルを上記と同じディレクトリーにダウンロードします。</li> <li>手書き風フォント: <a href="http://www.fontsquirrel.com/fonts/Journal" rel="external">fontsquirrel.com の "Journal" </a> — TTF ファイルを上記と同じディレクトリーにダウンロードします。</li> </ol> @@ -216,7 +216,7 @@ legend { <li>fontsquirrel <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a> に移動します。</li> <li>フォームを使って、両方のフォントファイルをアップロードして webfont キットを生成します。キットをコンピューターにダウンロードします。</li> <li>zip ファイルを展開します。</li> - <li>展開した中身には 2 つの <code>.woff</code> ファイルと 2 つの <code>.woff2</code> ファイルがあります。このファイルを、前と同じ fonts というディレクトリーにコピーします。各フォントの 2 つのファイルはブラウザー互換性を最大化するのに使います; より詳しい情報は <a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a> の記事を見てください。</li> + <li>展開した中身には 2 つの <code>.woff</code> ファイルと 2 つの <code>.woff2</code> ファイルがあります。このファイルを、前と同じ fonts というディレクトリーにコピーします。各フォントの 2 つのファイルはブラウザー互換性を最大化するのに使います; より詳しい情報は <a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a> の記事を見てください。</li> </ol> <h3 id="The_CSS" name="The_CSS">CSS</h3> @@ -364,7 +364,7 @@ button:focus { <h2 id="スキルを試しましょう!"><strong>スキルを試しましょう!</strong></h2> -<p>この記事の終わりまで到達しました。しかし、肝要な点を思い起こせるでしょうか?次に進む前に、テストによって知識の定着を試すことができます——<a href="/en-US/docs/Learn/Forms/Test_your_skills:_Styling_basics">スキルテスト:スタイリングの基本</a>をご覧ください。</p> +<p>この記事の終わりまで到達しました。しかし、肝要な点を思い起こせるでしょうか?次に進む前に、テストによって知識の定着を試すことができます——<a href="/ja/docs/Learn/Forms/Test_your_skills:_Styling_basics">スキルテスト:スタイリングの基本</a>をご覧ください。</p> <h2 id="Conclusion" name="Conclusion">まとめ</h2> @@ -386,7 +386,7 @@ button:focus { <li><a href="/ja/docs/Learn/Forms/Advanced_form_styling">フォームへの高度なスタイル設定</a></li> <li><a href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> <li><a href="/ja/docs/Learn/Forms/Form_validation">フォームデータの検証</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> <h3 class="highlight-spanned" id="Advanced_Topics" name="Advanced_Topics"><span class="highlight-span">上級トピック</span></h3> diff --git a/files/ja/learn/forms/ui_pseudo-classes/index.html b/files/ja/learn/forms/ui_pseudo-classes/index.html index 5c1bbda5cf..41426b5074 100644 --- a/files/ja/learn/forms/ui_pseudo-classes/index.html +++ b/files/ja/learn/forms/ui_pseudo-classes/index.html @@ -589,7 +589,7 @@ input:default ~ span::after { <h2 id="Test_your_skills!">Test your skills!</h2> -<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/Forms/Test_your_skills:_Advanced_styling">Test your skills: Advanced styling</a>.</p> +<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/ja/docs/Learn/Forms/Test_your_skills:_Advanced_styling">Test your skills: Advanced styling</a>.</p> <h2 id="Summary" name="Summary">まとめ</h2> @@ -600,16 +600,16 @@ input:default ~ span::after { <h2 id="In_this_module" name="In_this_module">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> <h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> diff --git a/files/ja/learn/forms/your_first_form/index.html b/files/ja/learn/forms/your_first_form/index.html index 24e638b9e1..a5878e3ce8 100644 --- a/files/ja/learn/forms/your_first_form/index.html +++ b/files/ja/learn/forms/your_first_form/index.html @@ -275,7 +275,7 @@ button { ... </pre> -<p>この例では、フォームはそれぞれ "<code>user_name</code>"、"<code>user_email</code>"、"<code>user_message</code>" と名付けられた 3 つのデータを送信します。これらのデータは URL "<code>/my-handling-form-page</code>" へ、<a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Methods/POST">HTTP <code>POST</code></a> メソッドで送信します。</p> +<p>この例では、フォームはそれぞれ "<code>user_name</code>"、"<code>user_email</code>"、"<code>user_message</code>" と名付けられた 3 つのデータを送信します。これらのデータは URL "<code>/my-handling-form-page</code>" へ、<a href="/ja/docs/Web/HTTP/Methods/POST">HTTP <code>POST</code></a> メソッドで送信します。</p> <p>サーバー側では URL "<code>/my-handling-form-page</code>" のスクリプトが、HTTP リクエストに埋め込まれた 3 つのキーおよび値のアイテムリストとしてデータを受け取ります。スクリプトがデータを処理する方法は、あなた次第です。各サーバーサイド言語 (PHP、Python、Ruby、Java、C# など) は、これらのデータを扱う仕組みを持っています。これは本ガイドで踏み込んでいく範囲を超えますが、詳しく知りたい場合は<a href="/ja/docs/HTML/Forms/Sending_and_retrieving_form_data" title="HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信と取得</a>の記事にサンプルを載せていますのでご覧ください。</p> diff --git a/files/ja/learn/front-end_web_developer/index.html b/files/ja/learn/front-end_web_developer/index.html index 4889d72df8..60f4eb1d61 100644 --- a/files/ja/learn/front-end_web_developer/index.html +++ b/files/ja/learn/front-end_web_developer/index.html @@ -28,13 +28,13 @@ translation_of: Learn/Front-end_web_developer <p>このコースを始めるにあたり前提知識は必要ありません。必要なのはモダンなブラウザが動作するコンピュータ、インターネット接続、学びたいという意欲だけです。</p> -<p>フロントエンドウェブ開発が自分に適しているかわからなく、易しい説明が必要な場合はこの時間がかかる完全なコースを始める前に、<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">ウェブサイト学習の最初のステップ</a>を読んでください。</p> +<p>フロントエンドウェブ開発が自分に適しているかわからなく、易しい説明が必要な場合はこの時間がかかる完全なコースを始める前に、<a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブサイト学習の最初のステップ</a>を読んでください。</p> <h2 id="学習につまずいたら">学習につまずいたら</h2> <p>私たちは、フロントエンドウェブ開発の学習が少しでもやさしくなるよう努力してきました。それでも、何か理解できないことあったり、コードが動かなかったりして、学習につまずくことがあるでしょう。</p> -<p>落ち着いて下さい。プロの開発者でも初心者でも、誰にだって学習でつまづくことはあります。<a href="/en-US/docs/Learn/Learning_and_getting_help">学習とヘルプ(English)</a> では情報を検索する際のヒントなど一連の有益な情報を提供しています。依然として学習につまずいているなら <a href="https://discourse.mozilla.org/c/mdn/learn/">Discourse forum</a> で気軽に質問して見て下さい。</p> +<p>落ち着いて下さい。プロの開発者でも初心者でも、誰にだって学習でつまづくことはあります。<a href="/ja/docs/Learn/Learning_and_getting_help">学習とヘルプ(English)</a> では情報を検索する際のヒントなど一連の有益な情報を提供しています。依然として学習につまずいているなら <a href="https://discourse.mozilla.org/c/mdn/learn/">Discourse forum</a> で気軽に質問して見て下さい。</p> <p>さあ、始めましょう。幸運を!</p> @@ -55,9 +55,9 @@ translation_of: Learn/Front-end_web_developer <p>中心となるモジュール</p> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software"> </a>— 基本的なツールのステップアップ (15 分で読めます)</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">標準的なウェブとウェブのバックグラウンド</a> (45 分で読めます)</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Learning_and_getting_help">学習とヘルプ(English)</a> (45 分で読めます)</li> + <li><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software"> </a>— 基本的なツールのステップアップ (15 分で読めます)</li> + <li><a href="/ja/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">標準的なウェブとウェブのバックグラウンド</a> (45 分で読めます)</li> + <li><a href="/ja/docs/Learn/Learning_and_getting_help">学習とヘルプ(English)</a> (45 分で読めます)</li> </ul> <h3 id="HTML(意味付けと構造)">HTML(意味付けと構造)</h3> @@ -75,9 +75,9 @@ translation_of: Learn/Front-end_web_developer <h4 id="中心となるモジュール">中心となるモジュール</h4> <ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML の紹介</a> (15–20 時間の学習)</li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">動的コンテンツ(映像や音楽)の埋め込み</a> (15–20 時間の学習)</li> - <li><a href="/en-US/docs/Learn/HTML/Tables">HTML の表</a> (5–10 時間の学習)</li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の紹介</a> (15–20 時間の学習)</li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">動的コンテンツ(映像や音楽)の埋め込み</a> (15–20 時間の学習)</li> + <li><a href="/ja/docs/Learn/HTML/Tables">HTML の表</a> (5–10 時間の学習)</li> </ul> <h3 id="CSS(スタイルとレイアウト)">CSS(スタイルとレイアウト)</h3> @@ -86,7 +86,7 @@ translation_of: Learn/Front-end_web_developer <h4 id="前提知識_4">前提知識</h4> -<p>CSS の学習を始める前に HTML の基本的な知識を身につけておくことを推奨します。少なくとも <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML の紹介</a> は読んでおきましょう。</p> +<p>CSS の学習を始める前に HTML の基本的な知識を身につけておくことを推奨します。少なくとも <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の紹介</a> は読んでおきましょう。</p> <h4 id="学習を進めるための条件_3">学習を進めるための条件</h4> @@ -162,8 +162,8 @@ translation_of: Learn/Front-end_web_developer <h4 id="中心となるモジュール_5">中心となるモジュール</h4> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross-browser testing</a> (25–30 時間の学習)</li> - <li><a href="/en-US/docs/Learn/Accessibility">Accessibility</a> (20–25 時間の学習)</li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross-browser testing</a> (25–30 時間の学習)</li> + <li><a href="/ja/docs/Learn/Accessibility">Accessibility</a> (20–25 時間の学習)</li> </ul> <h3 id="モダンなツール">モダンなツール</h3> @@ -181,10 +181,10 @@ translation_of: Learn/Front-end_web_developer <h4 id="中心となるモジュール_6">中心となるモジュール</h4> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git and GitHub</a> (5 時間の記事)</li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Understanding client-side web development tools</a> (20–25 時間の記事)</li> + <li><a href="/ja/docs/Learn/Tools_and_testing/GitHub">Git and GitHub</a> (5 時間の記事)</li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Understanding client-side web development tools</a> (20–25 時間の記事)</li> <li> - <p><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Understanding client-side JavaScript frameworks</a> (30-60 時間の学習)</p> + <p><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Understanding client-side JavaScript frameworks</a> (30-60 時間の学習)</p> </li> </ul> diff --git a/files/ja/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/ja/learn/getting_started_with_the_web/dealing_with_files/index.html index cdc3e3a336..9a209a83c4 100644 --- a/files/ja/learn/getting_started_with_the_web/dealing_with_files/index.html +++ b/files/ja/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -17,7 +17,7 @@ translation_of: Learn/Getting_started_with_the_web/Dealing_with_files <div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div> <div class="summary"> -<p>Web サイトは、テキストコンテンツ、コード、スタイルシート、メディアコンテンツなど、多くのファイルで構成されています。Web サイトを構築するときは、これらのファイルをローカルコンピュータ上の合理的な構造に組み立て、互いに呼び出すことができるようにして、最終的に<a href="/Learn/Getting_started_with_the_web/Publishing_your_website">サーバにアップロード</a>する前に、すべてのコンテンツを正しいものにする必要があります。<em>ファイルの扱い</em>では、Web サイトに合理的なファイル構造を設定できるように、注意すべきいくつかの問題について説明します。</p> +<p>Web サイトは、テキストコンテンツ、コード、スタイルシート、メディアコンテンツなど、多くのファイルで構成されています。Web サイトを構築するときは、これらのファイルをローカルコンピュータ上の合理的な構造に組み立て、互いに呼び出すことができるようにして、最終的に<a href="/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website">サーバにアップロード</a>する前に、すべてのコンテンツを正しいものにする必要があります。<em>ファイルの扱い</em>では、Web サイトに合理的なファイル構造を設定できるように、注意すべきいくつかの問題について説明します。</p> </div> <h2 id="Where_should_your_website_live_on_your_computer" name="Where_should_your_website_live_on_your_computer">コンピュータ上で Web サイトがあるべき場所</h2> diff --git a/files/ja/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/ja/learn/getting_started_with_the_web/installing_basic_software/index.html index f8432d7d97..ae288951e3 100644 --- a/files/ja/learn/getting_started_with_the_web/installing_basic_software/index.html +++ b/files/ja/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -62,7 +62,7 @@ translation_of: Learn/Getting_started_with_the_web/Installing_basic_software <h3 id="Installing_a_local_web_server" name="Installing_a_local_web_server">ローカルの Web サーバーのインストール</h3> -<p>いくつかの例では、動作を成功させるのに Web サーバーでの実行が必要です。<a href="https://developer.mozilla.org/ja/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> <p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/ja/learn/html/index.html b/files/ja/learn/html/index.html index fa11f9e2b9..9b06c50ce2 100644 --- a/files/ja/learn/html/index.html +++ b/files/ja/learn/html/index.html @@ -21,35 +21,35 @@ translation_of: Learn/HTML <h2 id="Learning_pathway" name="Learning_pathway">学習経路</h2> -<p>HTML 学習を学びの旅の起点にすることが理想的です。<a href="/docs/Web/Guide/HTML/Introduction">HTML 概論</a>を読んでみましょう。さらに学びたいと思ったなら、次は以下のような内容に移ることになるでしょう。</p> +<p>HTML 学習を学びの旅の起点にすることが理想的です。<a href="/ja/docs/Web/Guide/HTML/Introduction">HTML 概論</a>を読んでみましょう。さらに学びたいと思ったなら、次は以下のような内容に移ることになるでしょう。</p> <ul> - <li><a href="/docs/Learn/CSS">CSS</a>、またそれを用いて、どうやって HTML の様式を整えるか。(例えば、文字の様式やサイズを適用したり、線で囲んだり、影をつけたり、ページをカラムでレイアウトしたり、アニメをつけたりすることができます。)</li> - <li><a href="/docs/Learn/JavaScript">JavaScript</a>、またそれを用いて、ウェブページをいかにして動的な機能を付け加えるか。(例えば、地図上にあなたの位置をプロットしたり、UI エレメントをボタン操作で、現れるようにしたり、隠すようにしたり、コンピュータ上にユーザーのデータを保存したり、その他いろいろなことができます。)</li> + <li><a href="/ja/docs/Learn/CSS">CSS</a>、またそれを用いて、どうやって HTML の様式を整えるか。(例えば、文字の様式やサイズを適用したり、線で囲んだり、影をつけたり、ページをカラムでレイアウトしたり、アニメをつけたりすることができます。)</li> + <li><a href="/ja/docs/Learn/JavaScript">JavaScript</a>、またそれを用いて、ウェブページをいかにして動的な機能を付け加えるか。(例えば、地図上にあなたの位置をプロットしたり、UI エレメントをボタン操作で、現れるようにしたり、隠すようにしたり、コンピュータ上にユーザーのデータを保存したり、その他いろいろなことができます。)</li> </ul> -<p>このトピックを開始する前に、最低限コンピュータを利用することに慣れておくべきでしょう。また、ウェブを受け手の側から、利用すること(つまり、ただ見たり、コンテンツを消費したりすること)にも慣れておくべきでしょう。また基本的な作業環境のセットアップもしておくべきでしょう。細かい話は、 <a href="/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアをインストールする</a>や、 <a href="/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルを扱う</a>に書かれています。今あげた二つの内容は、<a href="/docs/Learn/Getting_started_with_the_web">Web 入門</a>という初心者向けの章に含まれています。</p> +<p>このトピックを開始する前に、最低限コンピュータを利用することに慣れておくべきでしょう。また、ウェブを受け手の側から、利用すること(つまり、ただ見たり、コンテンツを消費したりすること)にも慣れておくべきでしょう。また基本的な作業環境のセットアップもしておくべきでしょう。細かい話は、 <a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアをインストールする</a>や、 <a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルを扱う</a>に書かれています。今あげた二つの内容は、<a href="/ja/docs/Learn/Getting_started_with_the_web">Web 入門</a>という初心者向けの章に含まれています。</p> -<p>今回のトピックに入る前に、 <a href="/docs/Learn/Getting_started_with_the_web">ウェブ入門</a>を一読しておくことをお薦めします。けれども、絶対にそうしておく必要があるというわけではありません。 <a href="/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基礎</a>の記事でカバーされている大体の内容は、 <a href="/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a>の記事でもカバーされています。ただこちらのほうが、より詳細な記事になっています。</p> +<p>今回のトピックに入る前に、 <a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a>を一読しておくことをお薦めします。けれども、絶対にそうしておく必要があるというわけではありません。 <a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基礎</a>の記事でカバーされている大体の内容は、 <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a>の記事でもカバーされています。ただこちらのほうが、より詳細な記事になっています。</p> <h2 id="Modules" name="Modules">モジュール</h2> <p>このトピックは、以下の内容を含んでいます。そして、それらは、学んでいくのに好ましい順番で並んでいます。上から順番に学んでいくのが望ましいでしょう。</p> <dl> - <dt><a href="/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a></dt> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a></dt> <dd>この章では、土台作りをします。ここで、あなたはHTMLの重要な概念や構文に慣れたり、HTML を文章に適用していくのを見たり、どうやってハイパーリンクができるのか、HTML がウェブページを作るためにどのように利用されるのかを学ぶことになります。</dd> - <dt><a href="/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアと埋め込み</a></dt> + <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアと埋め込み</a></dt> <dd>この章では、 HTML を使ってどうやったら、あなたのウェブページにマルチメディアを導入できるかを学びます。画像を取り込むためのいくつかのやり方、ビデオや音声、さらに、ウェブページそのものを埋め込む方法もここで学びます。</dd> - <dt><a href="/docs/Learn/HTML/Tables">HTML 表</a></dt> + <dt><a href="/ja/docs/Learn/HTML/Tables">HTML 表</a></dt> <dd>ウェブページ上の表形式のデータを理解しやすく{{glossary("Accessibility", "アクセスしやすい")}}方法で表現することは難しいことです。このモジュールでは、基本的な表のマークアップと、キャプションやサマリーの実装などのより複雑な機能をカバーしています。</dd> - <dt><a href="/docs/Learn/HTML/Forms">HTML フォーム</a></dt> + <dt><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></dt> <dd>フォームはウェブのとても重要な部分です。これらはウェブサイトとのやりとりに必要な多くの機能を提供します。登録とログイン、フィードバックの送信、商品の購入などが含まれます。このモジュールでは、フォームのクライアント側部分の作成を始めます。</dd> </dl> <h2 id="Solving_common_HTML_problems" name="Solving_common_HTML_problems">よくある HTML の問題の解決</h2> -<p><a href="/docs/Learn/HTML/Howto">共通の問題解決に HTML を使う</a> 「基本的な問題を解決するために HTML を使う」では、ウェブページを作った時に出てくる一般的な問題をどうやって解決するかを説明するためのコンテンツのセクションへのリンクを提示します。タイトルの扱い方や、画像やビデオを加えたり、コンテンツを強調したり、基本的なフォームを作ったりします。</p> +<p><a href="/ja/docs/Learn/HTML/Howto">共通の問題解決に HTML を使う</a> 「基本的な問題を解決するために HTML を使う」では、ウェブページを作った時に出てくる一般的な問題をどうやって解決するかを説明するためのコンテンツのセクションへのリンクを提示します。タイトルの扱い方や、画像やビデオを加えたり、コンテンツを強調したり、基本的なフォームを作ったりします。</p> <h2 id="See_also" name="See_also">関連情報</h2> diff --git a/files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.html index 0ceb370e9e..88b84975b4 100644 --- a/files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ b/files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -18,7 +18,7 @@ translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting <div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div> -<p class="summary">テキストの書式設定のための HTML には他にも多くの要素がありますが、これは <a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a> には書かれていません。この記事で説明されている要素はあまり知られていませんが、知っていると役に立ちます。(これはまだいかなる意味でも完全なリストではありません)。ここでは、注釈、説明リスト、コンピューターコードとその他の関連テキスト、下付き文字と上付き文字、連絡先情報などのマーキングについて学習します。</p> +<p class="summary">テキストの書式設定のための HTML には他にも多くの要素がありますが、これは <a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a> には書かれていません。この記事で説明されている要素はあまり知られていませんが、知っていると役に立ちます。(これはまだいかなる意味でも完全なリストではありません)。ここでは、注釈、説明リスト、コンピューターコードとその他の関連テキスト、下付き文字と上付き文字、連絡先情報などのマーキングについて学習します。</p> <table class="learn-box standard-table"> <tbody> diff --git a/files/ja/learn/html/introduction_to_html/debugging_html/index.html b/files/ja/learn/html/introduction_to_html/debugging_html/index.html index 24c4e6c4d3..d69d476ed3 100644 --- a/files/ja/learn/html/introduction_to_html/debugging_html/index.html +++ b/files/ja/learn/html/introduction_to_html/debugging_html/index.html @@ -173,13 +173,13 @@ translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> </ul> diff --git a/files/ja/learn/html/introduction_to_html/getting_started/index.html b/files/ja/learn/html/introduction_to_html/getting_started/index.html index 6cfcea234e..606d87f393 100644 --- a/files/ja/learn/html/introduction_to_html/getting_started/index.html +++ b/files/ja/learn/html/introduction_to_html/getting_started/index.html @@ -23,7 +23,7 @@ translation_of: Learn/HTML/Introduction_to_HTML/Getting_started <tbody> <tr> <th scope="row">前提条件:</th> - <td>基礎的なコンピュータリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル取扱い</a>の基礎理解。</td> + <td>基礎的なコンピュータリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル取扱い</a>の基礎理解。</td> </tr> <tr> <th scope="row">目的:</th> @@ -217,7 +217,7 @@ textarea<span class="punctuation token">.</span>onkeyup <span class="operator to <p>fourth</p><p>fifth</p><p>sixth</p> </pre> -<p>{{htmlelement("em")}} 要素はインライン要素なので、以下で確認できるように、最初の 3 つの要素は同じ行で他の要素と互いにスペースを空けずにたたずんでいます。一方で、{{htmlelement("p")}} 要素はブロックレベル要素なので、各要素はその上下にスペースを伴った新たな行で表示されます (この間隔はブラウザーが段落に対して適用するデフォルトの <a href="/docs/Learn/CSS/Introduction_to_CSS">CSS のスタイル</a>によるものです)。</p> +<p>{{htmlelement("em")}} 要素はインライン要素なので、以下で確認できるように、最初の 3 つの要素は同じ行で他の要素と互いにスペースを空けずにたたずんでいます。一方で、{{htmlelement("p")}} 要素はブロックレベル要素なので、各要素はその上下にスペースを伴った新たな行で表示されます (この間隔はブラウザーが段落に対して適用するデフォルトの <a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS のスタイル</a>によるものです)。</p> <p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p> @@ -226,11 +226,11 @@ textarea<span class="punctuation token">.</span>onkeyup <span class="operator to </div> <div class="note"> -<p><strong>注意</strong>: このトピックで使っている “ブロック” と “インライン” の用語は <a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS ボックスのタイプ</a>と同じ名前で混同するでしょう。既定ではこれらは関係ありますが、CSS の表示タイプの変更は要素のカテゴリーを変更しませんし、どの要素が入っているべきでどの要素に入れられるべきかにも影響しません。HTML5 でこの用語が落とされた理由は、このとてもよくある混同を防ぐためです。</p> +<p><strong>注意</strong>: このトピックで使っている “ブロック” と “インライン” の用語は <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS ボックスのタイプ</a>と同じ名前で混同するでしょう。既定ではこれらは関係ありますが、CSS の表示タイプの変更は要素のカテゴリーを変更しませんし、どの要素が入っているべきでどの要素に入れられるべきかにも影響しません。HTML5 でこの用語が落とされた理由は、このとてもよくある混同を防ぐためです。</p> </div> <div class="note"> -<p><strong>注意</strong>: ブロックレベル要素とインライン要素のリストを含む有用なリファレンスページがあります — <a href="/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a>と<a href="/docs/Web/HTML/Inline_elements">インライン要素</a>をご覧ください。</p> +<p><strong>注意</strong>: ブロックレベル要素とインライン要素のリストを含む有用なリファレンスページがあります — <a href="/ja/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a>と<a href="/ja/docs/Web/HTML/Inline_elements">インライン要素</a>をご覧ください。</p> </div> <h3 id="Empty_elements" name="Empty_elements">空要素</h3> @@ -526,8 +526,8 @@ textarea<span class="punctuation token">.</span>onkeyup <span class="operator to <li>{{htmlelement("body")}} 要素の開始タグ以降にページのメインタイトルを書きます。このメインタイトルは <code><h1></code> 開始タグと <code></h1></code> 終了タグで囲みます。ちなみにこれは <code>head</code> 要素の中に記述する <code>title</code> 要素とは異なります。実際にやってみると理解できると思います。フォームで編集する場合はすでに <code>body</code> 要素の中なので、コードの先頭にメインタイトルを記述する形になります。</li> <li>すでに<code><p></code>要素が記述されていますので、その段落を好きな内容にしてみましょう。また、新しい段落を好きなように追加してみましょう。</li> <li>段落 (<code><p></code>要素) 内で重要な言葉は <code><strong></code> 開始タグと <code></strong></code> 終了タグで囲んで太字で強調しましょう。 </li> - <li><a href="https://developer.mozilla.org/ja/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">この記事の前半あたり</a>で説明したリンクを段落のどれかに張ってみましょう。</li> - <li><a href="https://developer.mozilla.org/ja/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">この記事の前半あたり</a>で説明した方法を使って、段落の下に画像を挿入しましょう。説明では Firefox のロゴ画像を使用しましたが、他の画像を持ってくることにチャレンジしてもいいと思います。自分のコンピューターの中のファイルやウェブ上のどこか他の場所にある画像リンクといったものです。</li> + <li><a href="/ja/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">この記事の前半あたり</a>で説明したリンクを段落のどれかに張ってみましょう。</li> + <li><a href="/ja/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">この記事の前半あたり</a>で説明した方法を使って、段落の下に画像を挿入しましょう。説明では Firefox のロゴ画像を使用しましたが、他の画像を持ってくることにチャレンジしてもいいと思います。自分のコンピューターの中のファイルやウェブ上のどこか他の場所にある画像リンクといったものです。</li> </ul> <p>間違えた場合は <em>Reset</em> ボタンを押すことで元に戻すことができます。分からない場合は Show solution ボタンを押して答えを見てみましょう。</p> @@ -774,13 +774,13 @@ textarea<span class="punctuation token">.</span>onkeyup <span class="operator to <h2 id="In_this_module" name="In_this_module">このモジュール内</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Head とは?HTML のメタデータ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクを作成する</a></li> - <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting" rel="nofollow">上級のテキスト整形</a></li> - <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure" rel="nofollow">ドキュメントとウェブサイトの構造</a></li> - <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML" rel="nofollow">HTML をデバッグする</a></li> - <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter" rel="nofollow">手紙をマークアップする</a></li> - <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content" rel="nofollow">コンテンツページを構造化する</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Head とは?HTML のメタデータ</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクを作成する</a></li> + <li><a class="new" href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting" rel="nofollow">上級のテキスト整形</a></li> + <li><a class="new" href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure" rel="nofollow">ドキュメントとウェブサイトの構造</a></li> + <li><a class="new" href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML" rel="nofollow">HTML をデバッグする</a></li> + <li><a class="new" href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter" rel="nofollow">手紙をマークアップする</a></li> + <li><a class="new" href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content" rel="nofollow">コンテンツページを構造化する</a></li> </ul> diff --git a/files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.html index 055a2afb5d..18dac36362 100644 --- a/files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.html +++ b/files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -93,13 +93,13 @@ translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> </ul> diff --git a/files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.html index b434a3fea4..cda4e6dce0 100644 --- a/files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.html +++ b/files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -95,13 +95,13 @@ translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> </ul> diff --git a/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html index 7fb1f1101f..cc6c302386 100644 --- a/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ b/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -138,7 +138,7 @@ started with developing web sites and applications."></pre> <p>description は検索エンジンの結果ページにも使われます。練習でこれを見ていきましょう。</p> <ol> - <li><a href="https://developer.mozilla.org/ja/">Mozilla Developer Network のフロントページ</a>に移動します。</li> + <li><a href="/ja/">Mozilla Developer Network のフロントページ</a>に移動します。</li> <li>ページのソースを見ます (ページ上で右クリックまたは <kbd>Ctrl</kbd> を押しながらクリックして、コンテキストメニューからページのソースを表示を選びます)。</li> <li>description の meta タグを見てみます。それはこのようなものです。 <pre class="brush: html notranslate"><meta name="description" content="The MDN Web Docs site diff --git a/files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html index 3431a47258..a9da4a7f7b 100644 --- a/files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html +++ b/files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -158,7 +158,7 @@ background-size: contain;</code></pre> <h3 id="How_to_include_SVG_code_inside_your_HTML" name="How_to_include_SVG_code_inside_your_HTML">HTML の中に SVG コードを組み込む方法</h3> -<p>テキストエディターで SVG ファイルを開き、 SVG コードをコピーして HTML 文書に貼り付けることもできます。 これは、<strong>SVG をインラインにする</strong>、または <strong>SVG をインライン化する</strong>とも呼ばれます。 SVG コードスニペットは、{{svgelement("svg")}} タグで始まり、 <code><a href="/en-US/docs/Web/SVG/Element/svg"><svg></svg></a></code> タグで終わることを確認してください (これら以外のものは含めないでください)。文書に貼り付けることのできる簡単な例を次に示します。</p> +<p>テキストエディターで SVG ファイルを開き、 SVG コードをコピーして HTML 文書に貼り付けることもできます。 これは、<strong>SVG をインラインにする</strong>、または <strong>SVG をインライン化する</strong>とも呼ばれます。 SVG コードスニペットは、{{svgelement("svg")}} タグで始まり、 <code><a href="/ja/docs/Web/SVG/Element/svg"><svg></svg></a></code> タグで終わることを確認してください (これら以外のものは含めないでください)。文書に貼り付けることのできる簡単な例を次に示します。</p> <pre class="brush: html notranslate"><svg width="300" height="200"> <rect width="100%" height="100%" fill="green" /> diff --git a/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index 205d7b7027..68119aa7c0 100644 --- a/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -246,7 +246,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p><img alt='再生、停止、音量、キャプションのオン/オフなどのスタンドコントロールを備えたビデオプレーヤー。 動画の再生には、槍のような武器を持つ男のシーンが表示され、キャプションには "Esta hoja tiene pasado oscuro." と表示されます。' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> -<p>詳しくは、<a href="https://developer.mozilla.org/ja/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">HTML5 動画にキャプションと字幕を追加する</a>をご覧ください。Github には Ian Devlin によって書かれた<a href="http://iandevlin.github.io/mdn/video-player-with-captions/">この記事の例</a>があります (<a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">ソースコード</a>も参照してください)。この例では、JavaScript を使用してさまざまな字幕を選択できるようにしています。字幕をオンにするには、[CC] ボタンを押して、英語、ドイツ語、スペイン語のオプションを選択する必要があります。</p> +<p>詳しくは、<a href="/ja/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">HTML5 動画にキャプションと字幕を追加する</a>をご覧ください。Github には Ian Devlin によって書かれた<a href="http://iandevlin.github.io/mdn/video-player-with-captions/">この記事の例</a>があります (<a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">ソースコード</a>も参照してください)。この例では、JavaScript を使用してさまざまな字幕を選択できるようにしています。字幕をオンにするには、[CC] ボタンを押して、英語、ドイツ語、スペイン語のオプションを選択する必要があります。</p> <div class="note"> <p><strong>メモ</strong>: テキストトラックは検索エンジンが特にテキスト上で成功するため、{{glossary("SEO")}} にも役立ちます。テキストトラックを使用すると、検索エンジンは動画の途中地点に直接リンクすることもできます。</p> @@ -281,7 +281,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <li>{{htmlelement("video")}}</li> <li>{{htmlelement("source")}}</li> <li>{{htmlelement("track")}}</li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">HTML5 の動画へのキャプションと字幕の追加</a></li> + <li><a href="/ja/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">HTML5 の動画へのキャプションと字幕の追加</a></li> <li><a href="/ja/docs/Web/Guide/Audio_and_video_delivery">音声と動画の配信</a>: HTML と JavaScript を使用して音声と動画をWebページに配置することに関する詳細。</li> <li><a href="/ja/docs/Web/Guide/Audio_and_video_manipulation">音声と動画の加工</a>: JavaScript を使用して音声や動画を操作する方法について詳しく説明します (たとえばフィルタを追加するなど)。</li> <li><a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">マルチメディアを翻訳する</a>ための自動オプション。(英語)</li> diff --git a/files/ja/learn/html/tables/basics/index.html b/files/ja/learn/html/tables/basics/index.html index ec37b6ad39..e08aeb43da 100644 --- a/files/ja/learn/html/tables/basics/index.html +++ b/files/ja/learn/html/tables/basics/index.html @@ -361,7 +361,7 @@ translation_of: Learn/HTML/Tables/Basics <ol> <li>まず、あなたのローカルマシンの新しいディレクトリに <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> ファイルのローカルコピーを作ります。HTML には、上で見たのと同じ Dogs の例が含まれています。</li> - <li>テーブルのヘッダを視覚的にも意味的にもヘッダとして認識させるには、<strong><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> 要素を使用します ('th' は 'table header' を表します)。これは <code><td></code> とまったく同じように機能しますが、通常のセルではなくヘッダーを表す点が異なります。HTML を開き、テーブルのヘッダを囲む全ての <code><td></code> 要素を <code><th></code> 要素に変更してください。</li> + <li>テーブルのヘッダを視覚的にも意味的にもヘッダとして認識させるには、<strong><code><a href="/ja/docs/Web/HTML/Element/th"><th></a></code></strong> 要素を使用します ('th' は 'table header' を表します)。これは <code><td></code> とまったく同じように機能しますが、通常のセルではなくヘッダーを表す点が異なります。HTML を開き、テーブルのヘッダを囲む全ての <code><td></code> 要素を <code><th></code> 要素に変更してください。</li> <li>HTML を保存してブラウザにロードすると、ヘッダーがヘッダーらしく見えます。</li> </ol> @@ -459,7 +459,7 @@ translation_of: Learn/HTML/Tables/Basics <h2 id="Providing_common_styling_to_columns" name="Providing_common_styling_to_columns">列への共通のスタイル付け</h2> <p><span class="tlid-translation translation" lang="ja"><span title="">先に進む前に、この記事で最後に紹介する機能があります。</span><br> - <span title="">HTML では、データの列全体のスタイル情報を1か所にまとめて定義することができます</span></span> — <strong><code><a href="/ja/docs/Web/HTML/Element/col"><col></a></code></strong> <span class="tlid-translation translation" lang="ja"><span title="">要素と</span></span> <strong><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong> <span class="tlid-translation translation" lang="ja"><span title="">要素です。</span><span title="">列にスタイルを指定するのは少々面倒で非効率的な場合があるためです。列内の</span></span> <code><td></code> <span class="tlid-translation translation" lang="ja"><span title="">や</span></span> <code><th></code> <span class="tlid-translation translation" lang="ja"><span title="">ごとにスタイル情報を指定するか、</span></span>{{cssxref(":nth-child()")}}<span class="tlid-translation translation" lang="ja"><span title=""> などの複雑なセレクタを使用する必要があります。</span></span></p> + <span title="">HTML では、データの列全体のスタイル情報を1か所にまとめて定義することができます</span></span> — <strong><code><a href="/ja/docs/Web/HTML/Element/col"><col></a></code></strong> <span class="tlid-translation translation" lang="ja"><span title="">要素と</span></span> <strong><code><a href="/ja/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong> <span class="tlid-translation translation" lang="ja"><span title="">要素です。</span><span title="">列にスタイルを指定するのは少々面倒で非効率的な場合があるためです。列内の</span></span> <code><td></code> <span class="tlid-translation translation" lang="ja"><span title="">や</span></span> <code><th></code> <span class="tlid-translation translation" lang="ja"><span title="">ごとにスタイル情報を指定するか、</span></span>{{cssxref(":nth-child()")}}<span class="tlid-translation translation" lang="ja"><span title=""> などの複雑なセレクタを使用する必要があります。</span></span></p> <p>次の簡単な例を見てください。</p> 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> diff --git a/files/ja/learn/performance/business_case_for_performance/index.html b/files/ja/learn/performance/business_case_for_performance/index.html index 106a517a8f..6b4fef087c 100644 --- a/files/ja/learn/performance/business_case_for_performance/index.html +++ b/files/ja/learn/performance/business_case_for_performance/index.html @@ -72,12 +72,12 @@ translation_of: Learn/Performance/business_case_for_performance <li><a href="/ja/docs/Learn/Performance/What_is_web_performance">ウェブパフォーマンスとは何ですか?</a></li> <li><a href="/ja/docs/Learn/Performance/Perceived_performance">ユーザーはパフォーマンスをどのように知覚しますか?</a></li> <li><a href="/ja/docs/Learn/Performance/Measuring_performance">パフォーマンスの測定</a></li> - <li><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images</a></li> - <li><a href="/en-US/docs/Learn/Performance/video">Multimedia: video</a></li> - <li><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li> - <li><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></li> - <li><a href="/en-US/docs/Learn/Performance/CSS">CSS performance features</a></li> - <li><a href="/en-US/docs/Learn/Performance/Fonts">Fonts and performance</a></li> - <li><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></li> + <li><a href="/ja/docs/Learn/Performance/Multimedia">Multimedia: images</a></li> + <li><a href="/ja/docs/Learn/Performance/video">Multimedia: video</a></li> + <li><a href="/ja/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li> + <li><a href="/ja/docs/Learn/Performance/HTML">HTML performance features</a></li> + <li><a href="/ja/docs/Learn/Performance/CSS">CSS performance features</a></li> + <li><a href="/ja/docs/Learn/Performance/Fonts">Fonts and performance</a></li> + <li><a href="/ja/docs/Learn/Performance/Mobile">Mobile performance</a></li> <li><a href="/ja/docs/Learn/Performance/business_case_for_performance">パフォーマンスに光をあてる</a></li> </ul> diff --git a/files/ja/learn/performance/measuring_performance/index.html b/files/ja/learn/performance/measuring_performance/index.html index f70a9cfa20..3f4985423c 100644 --- a/files/ja/learn/performance/measuring_performance/index.html +++ b/files/ja/learn/performance/measuring_performance/index.html @@ -21,7 +21,7 @@ translation_of: Learn/Performance/Measuring_performance <tbody> <tr> <th scope="row">前提:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/en-US/docs/Learn/Getting_started_with_the_web">クライアントサイドのウェブ技術</a>の基本的な知識</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/ja/docs/Learn/Getting_started_with_the_web">クライアントサイドのウェブ技術</a>の基本的な知識</td> </tr> <tr> <th scope="row">目的:</th> @@ -94,12 +94,12 @@ translation_of: Learn/Performance/Measuring_performance <li><a href="/ja/docs/Learn/Performance/What_is_web_performance">ウェブパフォーマンスとは何か</a></li> <li><a href="/ja/docs/Learn/Performance/Perceived_performance">ユーザーはパフォーマンスをどのように知覚するか</a></li> <li><a href="/ja/docs/Learn/Performance/Measuring_performance">パフォーマンスの測定</a></li> - <li><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images</a></li> - <li><a href="/en-US/docs/Learn/Performance/video">Multimedia: video</a></li> - <li><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li> - <li><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></li> - <li><a href="/en-US/docs/Learn/Performance/CSS">CSS performance features</a></li> - <li><a href="/en-US/docs/Learn/Performance/Fonts">Fonts and performance</a></li> - <li><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></li> + <li><a href="/ja/docs/Learn/Performance/Multimedia">Multimedia: images</a></li> + <li><a href="/ja/docs/Learn/Performance/video">Multimedia: video</a></li> + <li><a href="/ja/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li> + <li><a href="/ja/docs/Learn/Performance/HTML">HTML performance features</a></li> + <li><a href="/ja/docs/Learn/Performance/CSS">CSS performance features</a></li> + <li><a href="/ja/docs/Learn/Performance/Fonts">Fonts and performance</a></li> + <li><a href="/ja/docs/Learn/Performance/Mobile">Mobile performance</a></li> <li><a href="/ja/docs/Learn/Performance/business_case_for_performance">パフォーマスに光をあてる</a></li> </ul> diff --git a/files/ja/learn/performance/perceived_performance/index.html b/files/ja/learn/performance/perceived_performance/index.html index 8af223ce2e..fceb427902 100644 --- a/files/ja/learn/performance/perceived_performance/index.html +++ b/files/ja/learn/performance/perceived_performance/index.html @@ -18,7 +18,7 @@ translation_of: Learn/Performance/perceived_performance <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/ja/docs/Learn/Getting_started_with_the_web">クライアントサイドのウェブ技術</a>の基本的な知識</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/ja/docs/Learn/Getting_started_with_the_web">クライアントサイドのウェブ技術</a>の基本的な知識</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/performance/web_performance_basics/index.html b/files/ja/learn/performance/web_performance_basics/index.html index 276e2f2e04..02ea575063 100644 --- a/files/ja/learn/performance/web_performance_basics/index.html +++ b/files/ja/learn/performance/web_performance_basics/index.html @@ -12,23 +12,23 @@ translation_of: Learn/Performance/Web_Performance_Basics <h2 id="Best_practices">Best practices</h2> <ul> - <li>Start with learning the <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path">critical rendering path</a> of the browser. Knowing this will help you understand how to improve the performance of the site.</li> - <li>Using <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Controlling_resource_delivery_with_resource_hints">resource hints</a> such as <code>rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload</code></li> + <li>Start with learning the <a href="/ja/docs/Web/Performance/Critical_rendering_path">critical rendering path</a> of the browser. Knowing this will help you understand how to improve the performance of the site.</li> + <li>Using <a href="/ja/docs/Web/Performance/Controlling_resource_delivery_with_resource_hints">resource hints</a> such as <code>rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload</code></li> <li>Keep the size of Javascript to a <a href="https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4">minimum</a>. Only use as much Javascript as needed for the current page.</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/CSS_performance">CSS</a> performance factors</li> - <li>Use <a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/HTTP2">HTTP/2</a> on your server (or CDN).</li> + <li><a href="/ja/docs/Learn/Performance/CSS_performance">CSS</a> performance factors</li> + <li>Use <a href="/ja/docs/Learn/Performance/HTTP2">HTTP/2</a> on your server (or CDN).</li> <li>Use a CDN for resources which can reduce load times significantly.</li> <li>Compress your resources using <a href="https://www.gnu.org/software/gzip/" rel="nofollow noopener">gzip</a>, <a href="https://github.com/google/brotli" rel="nofollow noopener">Brotli</a>, and <a href="https://github.com/google/zopfli" rel="nofollow noopener">Zopfli</a>.</li> <li>Image optimization (use CSS animation, or SVG if possible).</li> <li>Lazy loading parts of your application outside the viewport. If you do, have a backup plan for SEO (e.g render full page for bot traffic); for example, by using the {{htmlattrxref("loading", "img")}} attribute on the {{HTMLElement("img")}} element</li> - <li>It is also crucial to realize what is really important to your users. It might not be absolute timing, but <a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/perceived_performance">user perception</a>.</li> + <li>It is also crucial to realize what is really important to your users. It might not be absolute timing, but <a href="/ja/docs/Learn/Performance/perceived_performance">user perception</a>.</li> </ul> <h2 id="Quick_Wins">Quick Wins</h2> <h3 id="CSS">CSS</h3> -<p>Web performance is all about user experience and perceived performance. As we learned in the <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path">critical rendering path</a> document, linking CSS with a tradional link tag with rel="stylesheet" is synchronous and blocks rendering. Optimize the rendering of your page by removing blocking CSS.</p> +<p>Web performance is all about user experience and perceived performance. As we learned in the <a href="/ja/docs/Web/Performance/Critical_rendering_path">critical rendering path</a> document, linking CSS with a tradional link tag with rel="stylesheet" is synchronous and blocks rendering. Optimize the rendering of your page by removing blocking CSS.</p> <p>To load CSS asynchronously one can simpy set the media type to print and then change to all once loaded. The following snippet includes an onload attribute, requiring Javascript, so it is important to include a noscript tag with a traditional fallback.</p> @@ -45,13 +45,13 @@ translation_of: Learn/Performance/Web_Performance_Basics <h3 id="Javascript">Javascript</h3> -<p>Avoid Javascript blocking by using the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script">async</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script">defer</a> attributes, or link javascript assets after the page's DOM elements. Javascript only block rendering for elements that appear after the script tag in the DOM tree.</p> +<p>Avoid Javascript blocking by using the <a href="/ja/docs/Web/HTML/Element/script">async</a> or <a href="/ja/docs/Web/HTML/Element/script">defer</a> attributes, or link javascript assets after the page's DOM elements. Javascript only block rendering for elements that appear after the script tag in the DOM tree.</p> <h3 id="Web_Fonts">Web Fonts</h3> <p>EOT and TTF formats are not compressed by default. Apply compression such as GZIP or Brotli for these file types. Use WOFF and WOFF2. These formats have compression built in.</p> -<p>Within @font-face use font-display: swap. By using font display swap the browser will not block rendering and will use the backup system fonts that are defined. Optimiize <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight">font weight</a> to match the web font as closely as possible.</p> +<p>Within @font-face use font-display: swap. By using font display swap the browser will not block rendering and will use the backup system fonts that are defined. Optimiize <a href="/ja/docs/Web/CSS/font-weight">font weight</a> to match the web font as closely as possible.</p> <h4 id="Icon_web_fonts">Icon web fonts</h4> @@ -60,19 +60,19 @@ translation_of: Learn/Performance/Web_Performance_Basics <h2 id="Tools">Tools</h2> <ul> - <li>Learn to use the <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance">Firefox Dev Tools</a> to profile your site.</li> + <li>Learn to use the <a href="/ja/docs/Tools/Performance">Firefox Dev Tools</a> to profile your site.</li> <li><a href="https://developers.google.com/speed/docs/insights/v5/about">Pagespeed Insights</a> can analyze your page and give some general hints to improve performance.</li> <li><a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> can give you a detailed breakdown of many aspects of your site including performance, SEO and accessibility.</li> <li>Test your page's speed using <a href="http://webpagetest.org/">Webpagetest.org</a>, where you can use different real device types and locations.</li> <li>Try the <a href="https://developers.google.com/web/tools/chrome-user-experience-report">Chrome User Experience Report</a> which quantifies real user metrics.</li> - <li>Define a<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Performance_budget"> performance budget.</a></li> + <li>Define a<a href="/ja/docs/Web/Performance/Performance_budget"> performance budget.</a></li> </ul> <h3 id="APIs">APIs</h3> <ul> <li>Gather user metrics using <a href="https://github.com/akamai/boomerang">https://github.com/akamai/boomerang</a></li> - <li>Or directly gather with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/performance">window.performance.timing</a></li> + <li>Or directly gather with <a href="/ja/docs/Web/API/Window/performance">window.performance.timing</a></li> </ul> <h3 id="Things_not_to_do_bad_practices">Things not to do (bad practices)</h3> diff --git a/files/ja/learn/performance/what_is_web_performance/index.html b/files/ja/learn/performance/what_is_web_performance/index.html index 27dc13b688..a130006b2a 100644 --- a/files/ja/learn/performance/what_is_web_performance/index.html +++ b/files/ja/learn/performance/what_is_web_performance/index.html @@ -31,7 +31,7 @@ translation_of: Learn/Performance/What_is_web_performance </tbody> </table> -<p><em>* 次の記事で扱う主観的な<a href="/en-US/docs/Learn/Performance/Perceived_performance">知覚パフォーマンス</a>の対義語</em></p> +<p><em>* 次の記事で扱う主観的な<a href="/ja/docs/Learn/Performance/Perceived_performance">知覚パフォーマンス</a>の対義語</em></p> <h2 id="What_is_web_performance">ウェブパフォーマンスとは何か</h2> diff --git a/files/ja/learn/server-side/django/development_environment/index.html b/files/ja/learn/server-side/django/development_environment/index.html index ac824323ea..a7b594cf09 100644 --- a/files/ja/learn/server-side/django/development_environment/index.html +++ b/files/ja/learn/server-side/django/development_environment/index.html @@ -190,7 +190,7 @@ translation_of: Learn/Server-side/Django/development_environment <h2 id="Python仮想環境内でのDjangoの使用">Python仮想環境内でのDjangoの使用</h2> -<p>仮想環境を作成するために使用するライブラリは、 <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> (LinuxとmacOS X)と<a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a>(Windows)です。これらはどちらも<a href="https://developer.mozilla.org/en-US/docs/Python/Virtualenv">virtualenv</a>ツールを使用します。ラッパーツールは、すべてのプラットフォーム上のインターフェイスを管理するための一貫したインターフェイスを作成します。</p> +<p>仮想環境を作成するために使用するライブラリは、 <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> (LinuxとmacOS X)と<a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a>(Windows)です。これらはどちらも<a href="/ja/docs/Python/Virtualenv">virtualenv</a>ツールを使用します。ラッパーツールは、すべてのプラットフォーム上のインターフェイスを管理するための一貫したインターフェイスを作成します。</p> <h3 id="仮想環境ソフトウェアのインストール">仮想環境ソフトウェアのインストール</h3> diff --git a/files/ja/learn/server-side/django/introduction/index.html b/files/ja/learn/server-side/django/introduction/index.html index 882c54bb56..8f22a74408 100644 --- a/files/ja/learn/server-side/django/introduction/index.html +++ b/files/ja/learn/server-side/django/introduction/index.html @@ -18,7 +18,7 @@ translation_of: Learn/Server-side/Django/Introduction <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシーを持っていること。<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイドウェブプログラミング</a> の一般的な理解、特に<a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">ウェブサイトにおけるクライントとサーバーのやりとりの仕組み</a>を理解していること。</td> + <td>基本的なコンピューターリテラシーを持っていること。<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイドウェブプログラミング</a> の一般的な理解、特に<a href="/ja/docs/Learn/Server-side/First_steps/Client-Server_overview">ウェブサイトにおけるクライントとサーバーのやりとりの仕組み</a>を理解していること。</td> </tr> <tr> <th scope="row">目的:</th> @@ -45,7 +45,7 @@ translation_of: Learn/Server-side/Django/Introduction <br> <em>パスワードハッシュは、送信されたパスワードから <a href="https://ja.wikipedia.org/wiki/%E6%9A%97%E5%8F%B7%E5%AD%A6%E7%9A%84%E3%83%8F%E3%83%83%E3%82%B7%E3%83%A5%E9%96%A2%E6%95%B0">暗号化ハッシュ関数</a>を介して生成された固定長の値です。 Djangoは入力されたパスワードが正しいかどうかを、ハッシュ関数を介した値と保存されたハッシュ値を比較することでチェックできます。これは "一方向性" の機能であり、もし保存されているハッシュ値が侵害されても、攻撃者が元のパスワードを解読するのは困難です。</em><br> <br> - Djangoは、SQLインジェクション、クロスサイトスクリプティング(XSS)、クロスサイトリクエストフォージェリ(CSRF)、クリックジャッキングなどの多くの脆弱性に対する保護が有効です(これらの攻撃についての詳細は、 <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">ウェブサイトのセキュリティ</a> を参照してください)。</dd> + Djangoは、SQLインジェクション、クロスサイトスクリプティング(XSS)、クロスサイトリクエストフォージェリ(CSRF)、クリックジャッキングなどの多くの脆弱性に対する保護が有効です(これらの攻撃についての詳細は、 <a href="/ja/docs/Learn/Server-side/First_steps/Website_security">ウェブサイトのセキュリティ</a> を参照してください)。</dd> <dt>スケーラブル</dt> <dd>Djangoはコンポーネントベースの “<a href="https://ja.wikipedia.org/wiki/%E3%82%B7%E3%82%A7%E3%82%A2%E3%83%BC%E3%83%89%E3%83%BB%E3%83%8A%E3%83%83%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%BB%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3">シェアードナッシング</a>” アーキテクチャを採用しています(アーキテクチャの各部分は他と独立しており、必要に応じて置き換え、変更できます)。異なる部分を明確に分離しているため、キャッシュサーバー、データベースサーバー、アプリケーションサーバーの各ハードウェアをそれぞれ追加することによって、トラフィックの増加に合わせてスケールできるようになっています。いくつかの最も忙しいサイトは、ニーズを満たすためにDjangoを適切にスケールさせています(InstagramやDisqusなど)</dd> <dt>メンテナンス可能</dt> @@ -100,7 +100,7 @@ translation_of: Learn/Server-side/Django/Introduction </ul> <div class="note"> -<p><strong>ノート</strong>: Djangoはこの構成を "モデルビューテンプレート(Model View Template, MVT)" アーキテクチャと呼んでいます。これは <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Model View Controller</a> アーキテクチャとよく似ています。 </p> +<p><strong>ノート</strong>: Djangoはこの構成を "モデルビューテンプレート(Model View Template, MVT)" アーキテクチャと呼んでいます。これは <a href="/ja/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Model View Controller</a> アーキテクチャとよく似ています。 </p> </div> <ul> diff --git a/files/ja/learn/server-side/django/models/index.html b/files/ja/learn/server-side/django/models/index.html index fb3952f6b9..33db071e52 100644 --- a/files/ja/learn/server-side/django/models/index.html +++ b/files/ja/learn/server-side/django/models/index.html @@ -13,7 +13,7 @@ translation_of: Learn/Server-side/Django/Models <tbody> <tr> <th scope="row">前提条件:</th> - <td><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django チュートリアル Part 2: Web サイトの骨組み作成</a>.</td> + <td><a href="/ja/docs/Learn/Server-side/Django/skeleton_website">Django チュートリアル Part 2: Web サイトの骨組み作成</a>.</td> </tr> <tr> <th scope="row">目標:</th> @@ -26,7 +26,7 @@ translation_of: Learn/Server-side/Django/Models <p>Django web applications access and manage data through Python objects referred to as models. Models define the <em>structure</em> of stored data, including the field <em>types</em> and possibly also their maximum size, default values, selection list options, help text for documentation, label text for forms, etc. The definition of the model is independent of the underlying database — you can choose one of several as part of your project settings. Once you've chosen what database you want to use, you don't need to talk to it directly at all — you just write your model structure and other code, and Django handles all the dirty work of communicating with the database for you.</p> -<p>This tutorial shows how to define and access the models for the <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary website</a> example.</p> +<p>This tutorial shows how to define and access the models for the <a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary website</a> example.</p> <h2 id="Designing_the_LocalLibrary_models">Designing the LocalLibrary models</h2> @@ -443,19 +443,19 @@ python3 manage.py migrate</code></pre> <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> </ul> diff --git a/files/ja/learn/server-side/django/skeleton_website/index.html b/files/ja/learn/server-side/django/skeleton_website/index.html index 0d76ae46eb..f56181d038 100644 --- a/files/ja/learn/server-side/django/skeleton_website/index.html +++ b/files/ja/learn/server-side/django/skeleton_website/index.html @@ -21,7 +21,7 @@ translation_of: Learn/Server-side/Django/skeleton_website <tbody> <tr> <th scope="row">前提条件:</th> - <td><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Django 開発環境の設定</a>。<a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Djangoチュートリアル</a>を確認してください。</td> + <td><a href="/ja/docs/Learn/Server-side/Django/development_environment">Django 開発環境の設定</a>。<a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Djangoチュートリアル</a>を確認してください。</td> </tr> <tr> <th scope="row">目的:</th> @@ -47,7 +47,7 @@ translation_of: Learn/Server-side/Django/skeleton_website <li><span style="line-height: 1.5;">url/path マッパーはそれらのアプリケーションを</span>結びつけます。</li> </ol> -<p><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library website</a> のために、ウェブサイトフォルダとプロジェクトフォルダは<em>locallibrary</em> という名前をつけます。また、1つのアプリケーションは<em>catalog</em>という名前をつけます。 したがって、最上位のフォルダ構成は以下のようになります。:</p> +<p><a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library website</a> のために、ウェブサイトフォルダとプロジェクトフォルダは<em>locallibrary</em> という名前をつけます。また、1つのアプリケーションは<em>catalog</em>という名前をつけます。 したがって、最上位のフォルダ構成は以下のようになります。:</p> <pre class="brush: bash"><em>locallibrary/ # Website folder</em> <strong>manage.py </strong># Script to run Django tools for this project (created using django-admin) @@ -59,7 +59,7 @@ translation_of: Learn/Server-side/Django/skeleton_website <h2 id="プロジェクトの作成">プロジェクトの作成</h2> -<p>始めにコマンドプロンプトまたはターミナルを開いて、(先に自分が仮想環境(<a href="/en-US/docs/Learn/Server-side/Django/development_environment#Using_a_virtual_environment">virtual environment</a>)にいることを確認して下さい)、Djangoアプリを格納したい場所へ移動します(ドキュメントフォルダの中など探しやすい場所にしましょう)。そして、新しいウェブサイトのフォルダ(この場合は<em> locallibrary</em>)<span style="line-height: 1.5;">を作りましょう。そして、cdコマンドでそのフォルダへ移動しましょう。</span></p> +<p>始めにコマンドプロンプトまたはターミナルを開いて、(先に自分が仮想環境(<a href="/ja/docs/Learn/Server-side/Django/development_environment#Using_a_virtual_environment">virtual environment</a>)にいることを確認して下さい)、Djangoアプリを格納したい場所へ移動します(ドキュメントフォルダの中など探しやすい場所にしましょう)。そして、新しいウェブサイトのフォルダ(この場合は<em> locallibrary</em>)<span style="line-height: 1.5;">を作りましょう。そして、cdコマンドでそのフォルダへ移動しましょう。</span></p> <pre class="brush: bash">mkdir locallibrary cd locallibrary</pre> @@ -154,7 +154,7 @@ cd locallibrary</pre> <p>追加した新しい行はアプリケーションの構成オブジェクト(<code>CatalogConfig</code>) を指定しており、それはアプリケーション作成時に<strong>/locallibrary/catalog/apps.py</strong> によって生成されています。</p> <div class="note"> -<p><strong>メモ</strong>: すでにたくさんの他の<code>INSTALLED_APPS</code> (<code>MIDDLEWARE</code>も同様。設定ファイルのさらに下の方にあります)が存在していることに気づいたでしょう。これらは、<a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django administration site</a> をサポートすること可能にし、その結果、Djangoが使用するたくさんの機能(セッション、認証など)をサポートします。</p> +<p><strong>メモ</strong>: すでにたくさんの他の<code>INSTALLED_APPS</code> (<code>MIDDLEWARE</code>も同様。設定ファイルのさらに下の方にあります)が存在していることに気づいたでしょう。これらは、<a href="/ja/docs/Learn/Server-side/Django/Admin_site">Django administration site</a> をサポートすること可能にし、その結果、Djangoが使用するたくさんの機能(セッション、認証など)をサポートします。</p> </div> <h2 id="データベースの指定">データベースの指定</h2> @@ -366,7 +366,7 @@ python3 manage.py migrate <p>You have now created a complete skeleton website project, which you can go on to populate with urls, models, views, and templates.</p> -<p>Now the skeleton for the <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library website</a> is complete and running, it's time to start writing the code that makes this website do what it is supposed to do. </p> +<p>Now the skeleton for the <a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library website</a> is complete and running, it's time to start writing the code that makes this website do what it is supposed to do. </p> <h2 id="参考文献">参考文献</h2> @@ -380,19 +380,19 @@ python3 manage.py migrate <h2 id="このモジュール内">このモジュール内</h2> <ul> - <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> </ul> diff --git a/files/ja/learn/server-side/django/web_application_security/index.html b/files/ja/learn/server-side/django/web_application_security/index.html index 496fac0fbd..238f39f416 100644 --- a/files/ja/learn/server-side/django/web_application_security/index.html +++ b/files/ja/learn/server-side/django/web_application_security/index.html @@ -7,13 +7,13 @@ translation_of: Learn/Server-side/Django/web_application_security <div>{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}</div> -<div>ユーザーのデータを守ることはWebデザインにおいて重要です。 以前、より一般的なセキュリティの脅威の一部を <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Webセキュリティ</a> の記事で説明しました— 本記事ではDjangoにビルトインされている保護機能がそのような脅威にどう対応しているか、より実践的な動きを見ながら説明していきます。</div> +<div>ユーザーのデータを守ることはWebデザインにおいて重要です。 以前、より一般的なセキュリティの脅威の一部を <a href="/ja/docs/Web/Security">Webセキュリティ</a> の記事で説明しました— 本記事ではDjangoにビルトインされている保護機能がそのような脅威にどう対応しているか、より実践的な動きを見ながら説明していきます。</div> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">前提条件:</th> - <td>Read the サーバーサイドプログラミングの "<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Webサイトセキュリティ</a>" の記事を読んでいること。Djangoチュートリアルを少なくとも <a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a> まで完了していること。</td> + <td>Read the サーバーサイドプログラミングの "<a href="/ja/docs/Learn/Server-side/First_steps/Website_security">Webサイトセキュリティ</a>" の記事を読んでいること。Djangoチュートリアルを少なくとも <a href="/ja/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a> まで完了していること。</td> </tr> <tr> <th scope="row">目標:</th> @@ -24,7 +24,7 @@ translation_of: Learn/Server-side/Django/web_application_security <h2 id="概要">概要</h2> -<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Website security</a> topic provides an overview of what website security means for server-side design, and some of the more common threats that you may need to protect against. One of the key messages in that article is that almost all attacks are successful when the web application trusts data from the browser.</p> +<p>The <a href="/ja/docs/Web/Security">Website security</a> topic provides an overview of what website security means for server-side design, and some of the more common threats that you may need to protect against. One of the key messages in that article is that almost all attacks are successful when the web application trusts data from the browser.</p> <div class="warning"> <p><strong>Important:</strong> The single most important lesson you can learn about website security is to <strong>never trust data from the browser</strong>. This includes <code>GET</code> request data in URL parameters, <code>POST</code> data, HTTP headers and cookies, user-uploaded files, etc. Always check and sanitize all incoming data. Always assume the worst.</p> @@ -34,13 +34,13 @@ translation_of: Learn/Server-side/Django/web_application_security <h2 id="Common_threatsprotections">Common threats/protections</h2> -<p>Rather than duplicate the Django documentation here, in this article we'll demonstrate just a few of the security features in the context of our Django <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> tutorial.</p> +<p>Rather than duplicate the Django documentation here, in this article we'll demonstrate just a few of the security features in the context of our Django <a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> tutorial.</p> <h3 id="Cross_site_scripting_(XSS)">Cross site scripting (XSS)</h3> <p>XSS is a term used to describe a class of attacks that allow an attacker to inject client-side scripts <em>through</em> the website into the browsers of other users. This is usually achieved by storing malicious scripts in the database where they can be retrieved and displayed to other users, or by getting users to click a link that will cause the attacker’s JavaScript to be executed by the user’s browser.</p> -<p>Django's template system protects you against the majority of XSS attacks by <a href="https://docs.djangoproject.com/en/2.0/ref/templates/language/#automatic-html-escaping">escaping specific characters</a> that are "dangerous" in HTML. We can demonstrate this by attempting to inject some JavaScript into our LocalLibrary website using the Create-author form we set up in <a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a>.</p> +<p>Django's template system protects you against the majority of XSS attacks by <a href="https://docs.djangoproject.com/en/2.0/ref/templates/language/#automatic-html-escaping">escaping specific characters</a> that are "dangerous" in HTML. We can demonstrate this by attempting to inject some JavaScript into our LocalLibrary website using the Create-author form we set up in <a href="/ja/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a>.</p> <ol> <li>Start the website using the development server (<code>python3 manage.py runserver</code>).</li> @@ -114,7 +114,7 @@ translation_of: Learn/Server-side/Django/web_application_security <dt>SQL injection protection</dt> <dd>SQL injection vulnerabilities enable malicious users to execute arbitrary SQL code on a database, allowing data to be accessed, modified, or deleted irrespective of the user's permissions. In almost every case you'll be accessing the database using Django’s querysets/models, so the resulting SQL will be properly escaped by the underlying database driver. If you do need to write raw queries or custom SQL then you'll need to explicitly think about preventing SQL injection.</dd> <dt>Clickjacking protection</dt> - <dd>In this attack a malicious user hijacks clicks meant for a visible top level site and routes them to a hidden page beneath. This technique might be used, for example, to display a legitimate bank site but capture the login credentials in an invisible <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="The HTML Inline Frame Element (<iframe>) represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head and a body or a head and a frameset, but not both a body and a frameset. However, an <iframe> can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window."><code><iframe></code></a> controlled by the attacker. Django contains <a href="https://docs.djangoproject.com/en/2.0/ref/clickjacking/#clickjacking-prevention">clickjacking protection</a> in the form of the <a href="https://docs.djangoproject.com/en/2.0/ref/middleware/#django.middleware.clickjacking.XFrameOptionsMiddleware" title="django.middleware.clickjacking.XFrameOptionsMiddleware"><code>X-Frame-Options middleware</code></a> which, in a supporting browser, can prevent a site from being rendered inside a frame.</dd> + <dd>In this attack a malicious user hijacks clicks meant for a visible top level site and routes them to a hidden page beneath. This technique might be used, for example, to display a legitimate bank site but capture the login credentials in an invisible <a href="/ja/docs/Web/HTML/Element/iframe" title="The HTML Inline Frame Element (<iframe>) represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head and a body or a head and a frameset, but not both a body and a frameset. However, an <iframe> can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window."><code><iframe></code></a> controlled by the attacker. Django contains <a href="https://docs.djangoproject.com/en/2.0/ref/clickjacking/#clickjacking-prevention">clickjacking protection</a> in the form of the <a href="https://docs.djangoproject.com/en/2.0/ref/middleware/#django.middleware.clickjacking.XFrameOptionsMiddleware" title="django.middleware.clickjacking.XFrameOptionsMiddleware"><code>X-Frame-Options middleware</code></a> which, in a supporting browser, can prevent a site from being rendered inside a frame.</dd> <dt>Enforcing SSL/HTTPS</dt> <dd>SSL/HTTPS can be enabled on the web server in order to encrypt all traffic between the site and browser, including authentication credentials that would otherwise be sent in plain text (enabling HTTPS is highly recommended). If HTTPS is enabled then Django provides a number of other protections you can use:</dd> </dl> @@ -142,15 +142,15 @@ translation_of: Learn/Server-side/Django/web_application_security <p>This has been a very brief foray into web security. We strongly recommend that you read <a href="https://docs.djangoproject.com/en/2.0/topics/security/">Security in Django</a> to gain a deeper understanding.</p> -<p>The next and final step in this module about Django is to complete the <a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">assessment task</a>.</p> +<p>The next and final step in this module about Django is to complete the <a href="/ja/docs/Learn/Server-side/Django/django_assessment_blog">assessment task</a>.</p> <h2 id="See_also">See also</h2> <ul> <li><a href="https://docs.djangoproject.com/en/2.0/topics/security/">Security in Django</a> (Django docs)</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Server side website security</a> (MDN)</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> (MDN)</li> - <li><a href="/en-US/docs/Web/Security/Securing_your_site">Securing your site</a> (MDN)</li> + <li><a href="/ja/docs/Web/Security">Server side website security</a> (MDN)</li> + <li><a href="/ja/docs/Web/Security">Web security</a> (MDN)</li> + <li><a href="/ja/docs/Web/Security/Securing_your_site">Securing your site</a> (MDN)</li> </ul> <p>{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}</p> @@ -160,21 +160,21 @@ translation_of: Learn/Server-side/Django/web_application_security <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> </ul> <p> </p> diff --git a/files/ja/learn/server-side/express_nodejs/deployment/index.html b/files/ja/learn/server-side/express_nodejs/deployment/index.html index 6f8b60f094..768095355b 100644 --- a/files/ja/learn/server-side/express_nodejs/deployment/index.html +++ b/files/ja/learn/server-side/express_nodejs/deployment/index.html @@ -35,7 +35,7 @@ translation_of: Learn/Server-side/Express_Nodejs/deployment <p>Once your site is finished (or finished "enough" to start public testing) you're going to need to host it somewhere more public and accessible than your personal development computer.</p> -<p>Up to now, you've been working in a <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">development environment</a>, using Express/Node as a web server to share your site to the local browser/network, and running your website with (insecure) development settings that expose debugging and other private information. Before you can host a website externally you're first going to have to:</p> +<p>Up to now, you've been working in a <a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">development environment</a>, using Express/Node as a web server to share your site to the local browser/network, and running your website with (insecure) development settings that expose debugging and other private information. Before you can host a website externally you're first going to have to:</p> <ul> <li>Choose an environment for hosting the Express app.</li> @@ -45,7 +45,7 @@ translation_of: Learn/Server-side/Express_Nodejs/deployment <p>This tutorial provides some guidance on your options for choosing a hosting site, a brief overview of what you need to do in order to get your Express app ready for production, and a worked example of how to install the LocalLibrary website onto the <a href="https://www.heroku.com/">Heroku</a> cloud hosting service.</p> -<p>Bear in mind that you don't have to use Heroku — there are other hosting services available. We've also provided a separate tutorial to show how to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Install LocalLibrary on PWS/Cloud Foundry</a>.</p> +<p>Bear in mind that you don't have to use Heroku — there are other hosting services available. We've also provided a separate tutorial to show how to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Install LocalLibrary on PWS/Cloud Foundry</a>.</p> <h2 id="What_is_a_production_environment">What is a production environment?</h2> @@ -97,7 +97,7 @@ translation_of: Learn/Server-side/Express_Nodejs/deployment <li>Whether the "free" tier you're relying on expires over time, and whether the cost of migrating to a more expensive tier means you would have been better off using some other service in the first place!</li> </ul> -<p>The good news when you're starting out is that there are quite a few sites that provide computing environments for "free", albeit with some conditions. For example, <a href="https://www.heroku.com/">Heroku</a> provides a free but resource-limited <em>PaaS</em> environment "forever", while <a href="http://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html">Amazon Web Services</a>, <a href="https://azure.microsoft.com/en-us/pricing/details/app-service/">Microsoft Azure</a>, and the open source option <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">PWS/Cloud Foundry</a> provide free credit when you first join.</p> +<p>The good news when you're starting out is that there are quite a few sites that provide computing environments for "free", albeit with some conditions. For example, <a href="https://www.heroku.com/">Heroku</a> provides a free but resource-limited <em>PaaS</em> environment "forever", while <a href="http://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html">Amazon Web Services</a>, <a href="https://azure.microsoft.com/en-us/pricing/details/app-service/">Microsoft Azure</a>, and the open source option <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">PWS/Cloud Foundry</a> provide free credit when you first join.</p> <p>Many providers also have a "basic" tier that provides more useful levels of computing power and fewer limitations. <a href="https://www.digitalocean.com/">Digital Ocean</a> is an example of a popular hosting provider that offers a relatively inexpensive basic computing tier (in the $5 per month lower range at time of writing).</p> @@ -382,7 +382,7 @@ v8.9.1</pre> <pre class="brush: bash">npm install </pre> -<p>Now run the site (see <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes">Testing the routes</a> for the relevant commands) and check that the site still behaves as you expect.</p> +<p>Now run the site (see <a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes">Testing the routes</a> for the relevant commands) and check that the site still behaves as you expect.</p> <h4 id="Save_changes_to_Github">Save changes to Github</h4> @@ -446,7 +446,7 @@ Setting NODE_ENV and restarting limitless-tor-18923... done, v13 NODE_ENV: production </pre> -<p>We should also use a separate database for production, setting its URI in the <strong>MONGODB_URI</strong> environment variable. You can set up a new database and database-user exactly <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose#Setting_up_the_MongoDB_database">as we did originally</a>, and get its URI. You can set the URI as shown (obviously, using your own URI!)</p> +<p>We should also use a separate database for production, setting its URI in the <strong>MONGODB_URI</strong> environment variable. You can set up a new database and database-user exactly <a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose#Setting_up_the_MongoDB_database">as we did originally</a>, and get its URI. You can set the URI as shown (obviously, using your own URI!)</p> <pre class="brush: bash">>heroku config:set <strong>MONGODB_URI</strong>='mongodb://your_user:your_password@ds139278.mlab.com:39278/local_library_production' Setting MONGODB_URI and restarting limitless-tor-18923... done, v13 @@ -513,13 +513,13 @@ heroku ps #Display dyno status <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/development_environment/index.html b/files/ja/learn/server-side/express_nodejs/development_environment/index.html index 7bfa26bb88..47c9aa76ce 100644 --- a/files/ja/learn/server-side/express_nodejs/development_environment/index.html +++ b/files/ja/learn/server-side/express_nodejs/development_environment/index.html @@ -46,7 +46,7 @@ translation_of: Learn/Server-side/Express_Nodejs/development_environment <p><em>Node</em> と <em>NPM</em> パッケージマネージャーは、準備されたバイナリパッケージ、インストーラー、オペレーティングシステムのパッケージマネージャー、またはソースから一緒にインストールされます (次のセクションを参照)。 <em>Express</em> は、<em>NPM</em> によって、個々の <em>Express</em> ウェブアプリケーションの依存関係として (テンプレートエンジン、データベースドライバー、認証ミドルウェア、静的ファイルを提供するためのミドルウェアなどの他のライブラリと共に) インストールされます。</p> -<p><em>NPM</em> は <a href="https://developer.mozilla.org/ja/docs/Glossary/MVC">MVC パターン</a>に従ったスケルトンの <em>Express</em> ウェブアプリケーションを作成するための便利なツールである <em>Express Application Generator</em>を (グローバルに) インストールするためにも使用できます。Express を使用するアプリを作成したり、同じアーキテクチャ上のレイアウトや依存関係を持つ Express アプリを構築したりするためにこのツールを使用する必要はないため、アプリケーションジェネレーターはオプションです。ただし、使い始めるのがはるかに簡単になり、モジュール式のアプリケーション構造が促進されるため、これを使用します。</p> +<p><em>NPM</em> は <a href="/ja/docs/Glossary/MVC">MVC パターン</a>に従ったスケルトンの <em>Express</em> ウェブアプリケーションを作成するための便利なツールである <em>Express Application Generator</em>を (グローバルに) インストールするためにも使用できます。Express を使用するアプリを作成したり、同じアーキテクチャ上のレイアウトや依存関係を持つ Express アプリを構築したりするためにこのツールを使用する必要はないため、アプリケーションジェネレーターはオプションです。ただし、使い始めるのがはるかに簡単になり、モジュール式のアプリケーション構造が促進されるため、これを使用します。</p> <div class="note"> <p><strong>メモ:</strong> 他のウェブフレームワークとは異なり、開発環境には独立した開発用の ウェブサーバーは含まれていません。<em>Node/Express</em> では、ウェブアプリケーションが独自のウェブサーバーを作成して実行します。</p> @@ -398,13 +398,13 @@ DEBUG=helloworld:* npm start <h2 id="このモジュールの中">このモジュールの中</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラー</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラー</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.html index 5c4acc7193..6598ed7e3d 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.html @@ -84,6 +84,6 @@ block content <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to final subarticle of part 5 : <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge">BookInstance detail page and challenge</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to final subarticle of part 5 : <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge">BookInstance detail page and challenge</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html index f738902bfb..363c25ea64 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html @@ -53,12 +53,12 @@ block content <p><img alt="Author List Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14468/LocalLibary_Express_Author_List.png" style="display: block; height: 453px; margin: 0px auto; width: 1200px;"></p> <div class="note"> -<p><strong>Note:</strong> The appearance of the author <em>lifespan </em>dates is ugly! You can improve this using the <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data#date_formatting">same approach</a> as we used for the <code>BookInstance</code> list (adding the virtual property for the lifespan to the <code>Author</code> model). This time, however, there are missing dates, and references to nonexistent properties are ignored unless strict mode is in effect. <code>moment()</code> returns the current time, and you don't want missing dates to be formatted as if they were today. One way to deal with this is to define the body of the function that returns a formatted date so it returns a blank string unless the date actually exists. For example:</p> +<p><strong>Note:</strong> The appearance of the author <em>lifespan </em>dates is ugly! You can improve this using the <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data#date_formatting">same approach</a> as we used for the <code>BookInstance</code> list (adding the virtual property for the lifespan to the <code>Author</code> model). This time, however, there are missing dates, and references to nonexistent properties are ignored unless strict mode is in effect. <code>moment()</code> returns the current time, and you don't want missing dates to be formatted as if they were today. One way to deal with this is to define the body of the function that returns a formatted date so it returns a blank string unless the date actually exists. For example:</p> <p><code>return this.date_of_birth ? moment(this.date_of_birth).format('YYYY-MM-DD') : '';</code></p> </div> -<h2 id="Genre_list_page—challenge!Edit">Genre list page—challenge!<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data$edit#Genre_list_page—challenge!" rel="nofollow, noindex"><span>Edit</span></a></h2> +<h2 id="Genre_list_page—challenge!Edit">Genre list page—challenge!<a class="button section-edit only-icon" href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data$edit#Genre_list_page—challenge!" rel="nofollow, noindex"><span>Edit</span></a></h2> <p>In this section you should implement your own genre list page. The page should display a list of all genres in the database, with each genre linked to its associated detail page. A screenshot of the expected result is shown below.</p> @@ -80,6 +80,6 @@ block content <h2 id="Next_steps">Next steps</h2> -<p>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</p> +<p>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</p> -<p>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page">Genre detail page</a>.</p> +<p>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page">Genre detail page</a>.</p> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.html index f2080e6109..0655111870 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.html @@ -107,6 +107,6 @@ block content <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page">Author detail page</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page">Author detail page</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html index 4dfc9c5a5e..ec3737a832 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html @@ -56,13 +56,13 @@ block content <h2 class="highlight-spanned" id="What_does_it_look_like"><span class="highlight-span">What does it look like?</span></h2> -<p>Run the application (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes">Testing the routes</a> for the relevant commands) and open your browser to <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. Then select the <em>All books </em>link. If everything is set up correctly, your site should look something like the following screenshot.</p> +<p>Run the application (see <a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes">Testing the routes</a> for the relevant commands) and open your browser to <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. Then select the <em>All books </em>link. If everything is set up correctly, your site should look something like the following screenshot.</p> <p><img alt="Book List Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14464/LocalLibary_Express_Book_List.png" style="border-style: solid; border-width: 1px; display: block; height: 387px; margin: 0px auto; width: 918px;"></p> <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page">BookInstance list page</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page">BookInstance list page</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.html index 3c6cace6a5..6ec61cb4ea 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.html @@ -87,5 +87,5 @@ block content <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html index 9bc7ee305f..f196628b07 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html @@ -64,6 +64,6 @@ block content <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment">Date formatting using moment</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment">Date formatting using moment</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html index 58851991b5..be96007add 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html @@ -53,8 +53,8 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page">Author list page and Genre list page challenge</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page">Author list page and Genre list page challenge</a>.</li> </ul> <p> </p> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html index 0639f79bc3..807f896ed5 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html @@ -132,6 +132,6 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to the next subarticle of Part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer">Template primer</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of Part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer">Template primer</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html index 40770c5ef2..2edc3229bc 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html @@ -57,7 +57,7 @@ exports.genre_detail = function(req, res, next) { }</strong> </pre> -<p>The message will then propagate through to our error handling code (this was set up when we <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website#error_handling">generated the app skeleton</a> - for more information see <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Handling_errors">Handling Errors</a>).</p> +<p>The message will then propagate through to our error handling code (this was set up when we <a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website#error_handling">generated the app skeleton</a> - for more information see <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction#Handling_errors">Handling Errors</a>).</p> </div> <p>The rendered view is <strong>genre_detail</strong> and it is passed variables for the <code>title</code>, <code>genre</code> and the list of books in this genre (<code>genre_books</code>).</p> @@ -116,6 +116,6 @@ block content <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page">Book detail page</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page">Book detail page</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/home_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/home_page/index.html index 3e2f337370..74a74b3109 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/home_page/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/home_page/index.html @@ -9,7 +9,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Home_page <h2 id="Route">Route</h2> -<p>We created our index page routes in a <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">previous tutorial.</a> As a reminder, all the route functions are defined in <strong>/routes/catalog.js</strong>:</p> +<p>We created our index page routes in a <a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">previous tutorial.</a> As a reminder, all the route functions are defined in <strong>/routes/catalog.js</strong>:</p> <pre class="brush: js ">// GET catalog home page. router.get('/', book_controller.index); //This actually maps to /catalog/ because we import the route with a /catalog prefix</pre> @@ -27,7 +27,7 @@ router.get('/', book_controller.index); //This actually maps to /catalog/ becau <p>The index controller function needs to fetch information about how many <code>Book</code>, <code>BookInstance</code>, available <code>BookInstance</code>, <code>Author</code>, and <code>Genre</code> records we have in the database, render this data in a template to create an HTML page, and then return it in an HTTP response.</p> <div class="note"> -<p><strong>Note:</strong> We use the <code><a class="external external-icon" href="http://mongoosejs.com/docs/api.html#model_Model.countDocuments" rel="noopener">countDocuments()</a></code> method to get the number of instances of each model. This is called on a model with an optional set of conditions to match against in the first argument and a callback in the second argument (as discussed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Using a Database (with Mongoose)</a>, and you can also return a <code>Query</code> and then execute it with a callback later. The callback will be returned when the database returns the count, with an error value (or <code>null</code>) as the first parameter and the count of records (or null if there was an error) as the second parameter.</p> +<p><strong>Note:</strong> We use the <code><a class="external external-icon" href="http://mongoosejs.com/docs/api.html#model_Model.countDocuments" rel="noopener">countDocuments()</a></code> method to get the number of instances of each model. This is called on a model with an optional set of conditions to match against in the first argument and a callback in the second argument (as discussed in <a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Using a Database (with Mongoose)</a>, and you can also return a <code>Query</code> and then execute it with a callback later. The callback will be returned when the database returns the count, with an error value (or <code>null</code>) as the first parameter and the count of records (or null if there was an error) as the second parameter.</p> <pre class="brush: js ">SomeModel.countDocuments({ a_model_field: 'match_value' }, function (err, count) { // ... do something if there is an err @@ -128,6 +128,6 @@ block content <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page">Book list page</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page">Book list page</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/index.html index 5726b6c0e1..3877cc76f3 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/index.html @@ -80,13 +80,13 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html index a97c536eb2..91d52ad66f 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html @@ -49,7 +49,7 @@ html(lang='en') <p>The template uses (and includes) JavaScript and CSS from <a class="external external-icon" href="http://getbootstrap.com/" rel="noopener">Bootstrap</a> to improve the layout and presentation of the HTML page. Using Bootstrap or another client-side web framework is a quick way to create an attractive page that can scale well on different browser sizes, and it also allows us to deal with the page presentation without having to get into any of the details—we just want to focus on the server-side code here!</p> -<p>The layout should be fairly obvious if you've read our above <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data#Template_primer">Template primer</a>. Note the use of <code>block content</code> as a placeholder for where the content for our individual pages will be placed.</p> +<p>The layout should be fairly obvious if you've read our above <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data#Template_primer">Template primer</a>. Note the use of <code>block content</code> as a placeholder for where the content for our individual pages will be placed.</p> <p>The base template also references a local css file (<strong>style.css</strong>) that provides a little additional styling. Open <strong>/public/stylesheets/style.css</strong> and replace its content with the following CSS code:</p> @@ -64,6 +64,6 @@ html(lang='en') <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Home_page">Home page</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Home_page">Home page</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/template_primer/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/template_primer/index.html index a68921a6a7..f8029cb236 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/template_primer/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/template_primer/index.html @@ -17,7 +17,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer <h2 class="highlight-spanned" id="Template_configuration"><span class="highlight-span">Template configuration</span></h2> -<p>The <em>LocalLibrary</em> was configured to use <a class="external external-icon" href="https://pugjs.org/api/getting-started.html" rel="noopener">Pug</a> when we <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">created the skeleton website</a>. You should see the pug module included as a dependency in the website's <strong>package.json</strong> file, and the following configuration settings in the <strong>app.js</strong> file. The settings tell us that we're using pug as the view engine, and that <em>Express</em> should search for templates in the <strong>/views</strong> subdirectory.</p> +<p>The <em>LocalLibrary</em> was configured to use <a class="external external-icon" href="https://pugjs.org/api/getting-started.html" rel="noopener">Pug</a> when we <a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">created the skeleton website</a>. You should see the pug module included as a dependency in the website's <strong>package.json</strong> file, and the following configuration settings in the <strong>app.js</strong> file. The settings tell us that we're using pug as the view engine, and that <em>Express</em> should search for templates in the <strong>/views</strong> subdirectory.</p> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// View engine setup.</span> app<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span><span class="string token">'views'</span><span class="punctuation token">,</span> path<span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span>__dirname<span class="punctuation token">,</span> <span class="string token">'views'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> @@ -121,7 +121,7 @@ else <p>Across a site, it is usual for all pages to have a common structure, including standard HTML markup for the head, footer, navigation, etc. Rather than forcing developers to duplicate this "boilerplate" in every page, <em>Pug</em> allows you to declare a base template and then extend it, replacing just the bits that are different for each specific page.</p> -<p>For example, the base template <strong>layout.pug</strong> created in our <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">skeleton project</a> looks like this:</p> +<p>For example, the base template <strong>layout.pug</strong> created in our <a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">skeleton project</a> looks like this:</p> <pre class="brush: html line-numbers language-html"><code class="language-html">doctype html html @@ -144,6 +144,6 @@ block content <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template">The LocalLibrary base template</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template">The LocalLibrary base template</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/forms/index.html b/files/ja/learn/server-side/express_nodejs/forms/index.html index ea3d378895..bf47160aaf 100644 --- a/files/ja/learn/server-side/express_nodejs/forms/index.html +++ b/files/ja/learn/server-side/express_nodejs/forms/index.html @@ -185,7 +185,7 @@ sanitizeBody('date').toDate(),</pre> <p>In order to implement our form handling code, we will need two routes that have the same URL pattern. The first (<code>GET</code>) route is used to display a new empty form for creating the object. The second route (<code>POST</code>) is used for validating data entered by the user, and then saving the information and redirecting to the detail page (if the data is valid) or redisplaying the form with errors (if the data is invalid).</p> -<p>We have already created the routes for all our model's create pages in <strong>/routes/catalog.js</strong> (in a <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">previous tutorial</a>). For example, the genre routes are shown below:</p> +<p>We have already created the routes for all our model's create pages in <strong>/routes/catalog.js</strong> (in a <a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">previous tutorial</a>). For example, the genre routes are shown below:</p> <pre class="brush: js notranslate">// GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id). router.get('/genre/create', genre_controller.genre_create_get); @@ -199,12 +199,12 @@ router.post('/genre/create', genre_controller.genre_create_post); <p>The following sub articles will take us through the process of adding the required forms to our example application. You need to read and work through each one in turn, before moving on to the next one.</p> <ol> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_genre_form">Create Genre form</a> — Defining a page to create <code>Genre</code> objects.</li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_author_form">Create Author form</a> — Defining a page to create <code>Author</code> objects.</li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_book_form">Create Book form</a> — Defining a page/form to create <code>Book</code> objects.</li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_BookInstance_form">Create BookInstance form</a> — Defining a page/form to create <code>BookInstance</code> objects.</li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Delete_author_form">Delete Author form</a> — Defining a page to delete <code>Author</code> objects.</li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Update_Book_form">Update Book form</a> — Defining page to update <code>Book</code> objects.</li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms/Create_genre_form">Create Genre form</a> — Defining a page to create <code>Genre</code> objects.</li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms/Create_author_form">Create Author form</a> — Defining a page to create <code>Author</code> objects.</li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms/Create_book_form">Create Book form</a> — Defining a page/form to create <code>Book</code> objects.</li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms/Create_BookInstance_form">Create BookInstance form</a> — Defining a page/form to create <code>BookInstance</code> objects.</li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms/Delete_author_form">Delete Author form</a> — Defining a page to delete <code>Author</code> objects.</li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms/Update_Book_form">Update Book form</a> — Defining page to update <code>Book</code> objects.</li> </ol> <h2 id="Challenge_yourself">Challenge yourself</h2> @@ -251,13 +251,13 @@ router.post('/genre/create', genre_controller.genre_create_post); <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/index.html b/files/ja/learn/server-side/express_nodejs/index.html index a7ddf93fe5..a858409c44 100644 --- a/files/ja/learn/server-side/express_nodejs/index.html +++ b/files/ja/learn/server-side/express_nodejs/index.html @@ -27,7 +27,7 @@ translation_of: Learn/Server-side/Express_Nodejs <p>このモジュールを始める前に、サーバーサイドのウェブプログラミングとウェブフレームワークが何かを理解する必要があります。理想的なのは<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイドのウェブサイトプログラミングの第一歩</a>モジュールのトピックを読むことです。プログラミングの概念と <a href="/ja/docs/Web/JavaScript">JavaScript</a> の一般的な知識があることを強くお勧めしますが、中核となる概念を理解するために不可欠ではありません。</p> <div class="note"> -<p><strong>メモ</strong>: このウェブサイトには、クライアントサイド開発のコンテキストで JavaScript を学習するための多くの有用なリソースがあります。<a href="/docs/Web/JavaScript">JavaScript</a>、<a href="/docs/Web/JavaScript/Guide">JavaScript ガイド</a>、<a href="/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a>、<a href="/docs/Learn/JavaScript">JavaScript </a>(学習)。JavaScript のコアとなる言語と概念は、Node.js でのサーバーサイド開発と同じであり、この資料は関連性があります。Node.js は、ブラウザーレス環境で役立つ機能をサポートするための<a href="https://nodejs.org/dist/latest-v10.x/docs/api/">追加の API</a> を提供します (たとえば、HTTP サーバーを作成してファイルシステムにアクセスするため。ただし、ブラウザーおよび DOM を操作するための JavaScript API はサポートしません)。</p> +<p><strong>メモ</strong>: このウェブサイトには、クライアントサイド開発のコンテキストで JavaScript を学習するための多くの有用なリソースがあります。<a href="/ja/docs/Web/JavaScript">JavaScript</a>、<a href="/ja/docs/Web/JavaScript/Guide">JavaScript ガイド</a>、<a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a>、<a href="/ja/docs/Learn/JavaScript">JavaScript </a>(学習)。JavaScript のコアとなる言語と概念は、Node.js でのサーバーサイド開発と同じであり、この資料は関連性があります。Node.js は、ブラウザーレス環境で役立つ機能をサポートするための<a href="https://nodejs.org/dist/latest-v10.x/docs/api/">追加の API</a> を提供します (たとえば、HTTP サーバーを作成してファイルシステムにアクセスするため。ただし、ブラウザーおよび DOM を操作するための JavaScript API はサポートしません)。</p> <p>このガイドは Node.js と Express を使った作業についての情報を提供します。インターネットや本には他にもたくさんの優れたリソースがあります。これらのうち一部は <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) と <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora) からリンクされています。</p> </div> diff --git a/files/ja/learn/server-side/express_nodejs/introduction/index.html b/files/ja/learn/server-side/express_nodejs/introduction/index.html index c194cff772..3957d95df4 100644 --- a/files/ja/learn/server-side/express_nodejs/introduction/index.html +++ b/files/ja/learn/server-side/express_nodejs/introduction/index.html @@ -34,7 +34,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Introduction <h2 id="Node_の紹介"><span class="short_text" id="result_box" lang="ja"><span>Node の紹介</span></span></h2> -<p><a href="https://nodejs.org/">Node</a><span class="short_text" id="result_box" lang="ja"><span> (正式には Node.js) </span></span><span id="result_box" lang="ja"><span>はオープンソースのクロスプラットフォーム、実行環境で、開発者はあらゆるサーバーサイドのツールやアプリケーションを <a href="ja/docs/Glossary/JavaScript">JavaScript</a> で作成することができます。この実行環境はブラウザーコンテキスト外での使用 (すなわち、コンピューターまたはサーバー OS 上での直接実行) を目的としています。そのため、クライアントサイドではブラウザー固有の JavaScript API が省略され、HTTP やファイルシステムライブラリを含む従来の OS API がサポートされます</span></span><span lang="ja"><span>。</span></span></p> +<p><a href="https://nodejs.org/">Node</a><span class="short_text" id="result_box" lang="ja"><span> (正式には Node.js) </span></span><span id="result_box" lang="ja"><span>はオープンソースのクロスプラットフォーム、実行環境で、開発者はあらゆるサーバーサイドのツールやアプリケーションを <a href="/ja/docs/Glossary/JavaScript">JavaScript</a> で作成することができます。この実行環境はブラウザーコンテキスト外での使用 (すなわち、コンピューターまたはサーバー OS 上での直接実行) を目的としています。そのため、クライアントサイドではブラウザー固有の JavaScript API が省略され、HTTP やファイルシステムライブラリを含む従来の OS API がサポートされます</span></span><span lang="ja"><span>。</span></span></p> <p>ウェブサーバー開発の観点から Node には多くの利点があります。</p> diff --git a/files/ja/learn/server-side/express_nodejs/mongoose/index.html b/files/ja/learn/server-side/express_nodejs/mongoose/index.html index e6eecb4496..5d3b3dccc9 100644 --- a/files/ja/learn/server-side/express_nodejs/mongoose/index.html +++ b/files/ja/learn/server-side/express_nodejs/mongoose/index.html @@ -569,7 +569,7 @@ SomeModel.find(callback_function);</code></pre> <h2 id="Install_Mongoose">Install Mongoose</h2> -<p>Open a command prompt and navigate to the directory where you created your <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">skeleton Local Library website</a>. Enter the following command to install Mongoose (and its dependencies) and add it to your <strong>package.json</strong> file, unless you have already done so when reading the <a href="#Installing_Mongoose_and_MongoDB">Mongoose Primer</a> above.</p> +<p>Open a command prompt and navigate to the directory where you created your <a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">skeleton Local Library website</a>. Enter the following command to install Mongoose (and its dependencies) and add it to your <strong>package.json</strong> file, unless you have already done so when reading the <a href="#Installing_Mongoose_and_MongoDB">Mongoose Primer</a> above.</p> <pre class="brush: bash notranslate">npm install mongoose </pre> @@ -787,13 +787,13 @@ module.exports = mongoose.model('BookInstance', BookInstanceSchema);</pre> <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/routes/index.html b/files/ja/learn/server-side/express_nodejs/routes/index.html index bb3e21898b..3ee8532a09 100644 --- a/files/ja/learn/server-side/express_nodejs/routes/index.html +++ b/files/ja/learn/server-side/express_nodejs/routes/index.html @@ -24,7 +24,7 @@ translation_of: Learn/Server-side/Express_Nodejs/routes <h2 id="Overview">Overview</h2> -<p>In the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">last tutorial article</a> we defined <em>Mongoose</em> models to interact with the database, and used a (standalone) script to create some initial library records. We can now write the code to present that information to users. The first thing we need to do is determine what information we want to be able to display in our pages, and then define appropriate URLs for returning those resources. Then we're going to need to create the routes (URL handlers) and views (templates) to display those pages.</p> +<p>In the <a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">last tutorial article</a> we defined <em>Mongoose</em> models to interact with the database, and used a (standalone) script to create some initial library records. We can now write the code to present that information to users. The first thing we need to do is determine what information we want to be able to display in our pages, and then define appropriate URLs for returning those resources. Then we're going to need to create the routes (URL handlers) and views (templates) to display those pages.</p> <p>The diagram below is provided as a reminder of the main flow of data and things that need to be implemented when handling an HTTP request/response. In addition to the views and routes the diagram shows "controllers" — functions that separate out the code to route requests from the code that actually processes requests.</p> @@ -49,7 +49,7 @@ translation_of: Learn/Server-side/Express_Nodejs/routes <p>There are several ways to create routes. For this tutorial we're going to use the <code><a href="http://expressjs.com/en/guide/routing.html#express-router">express.Router</a></code> middleware as it allows us to group the route handlers for a particular part of a site together and access them using a common route-prefix. We'll keep all our library-related routes in a "catalog" module, and, if we add routes for handling user accounts or other functions, we can keep them grouped separately.</p> <div class="note"> -<p><strong>Note:</strong> We discussed Express application routes briefly in our <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Creating_route_handlers">Express Introduction > Creating route handlers</a>. Other than providing better support for modularization (as discussed in the first subsection below), using <em>Router</em> is very similar to defining routes directly on the <em>Express application object</em>.</p> +<p><strong>Note:</strong> We discussed Express application routes briefly in our <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction#Creating_route_handlers">Express Introduction > Creating route handlers</a>. Other than providing better support for modularization (as discussed in the first subsection below), using <em>Router</em> is very similar to defining routes directly on the <em>Express application object</em>.</p> </div> <p>The rest of this section provides an overview of how the <code>Router</code> can be used to define the routes.</p> @@ -103,7 +103,7 @@ app.use('/wiki', wiki);</code></pre> <p>The callback takes three arguments (usually named as shown: <code>req</code>, <code>res</code>, <code>next</code>), that will contain the HTTP Request object, HTTP response, and the <em>next</em> function in the middleware chain.</p> <div class="note"> -<p><strong>Note:</strong> Router functions are <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware">Express middleware</a>, which means that they must either complete (respond to) the request or call the <code>next</code> function in the chain. In the case above we complete the request using <code>send()</code>, so the <code>next</code> argument is not used (and we choose not to specify it).</p> +<p><strong>Note:</strong> Router functions are <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware">Express middleware</a>, which means that they must either complete (respond to) the request or call the <code>next</code> function in the chain. In the case above we complete the request using <code>send()</code>, so the <code>next</code> argument is not used (and we choose not to specify it).</p> <p>The router function above takes a single callback, but you can specify as many callback arguments as you want, or an array of callback functions. Each function is part of the middleware chain, and will be called in the order it is added to the chain (unless a preceding function completes the request).</p> </div> @@ -135,7 +135,7 @@ app.use('/wiki', wiki);</code></pre> <li>() : Grouping match on a set of characters to perform another operation on. E.g. <code>'/ab(cd)?e'</code> will peform a ? match on (cd) —it will match <code>abe</code> and <code>abcde</code>.</li> </ul> -<p>The route paths can also be JavaScript <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expressions</a>. For example, the route path below will match <code>catfish </code>and <code>dogfish</code>, but not <code>catflap</code>, <code>catfishhead</code>, and so on. Note that the path for a regular expression uses regular expression syntax (it is not a quoted string as in the previous cases).</p> +<p>The route paths can also be JavaScript <a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">regular expressions</a>. For example, the route path below will match <code>catfish </code>and <code>dogfish</code>, but not <code>catflap</code>, <code>catfishhead</code>, and so on. Note that the path for a regular expression uses regular expression syntax (it is not a quoted string as in the previous cases).</p> <pre class="brush: js"><code>app.get(/.*fish$/, function (req, res) { ... @@ -587,7 +587,7 @@ SET DEBUG=express-locallibrary-tutorial:* & npm start DEBUG=express-locallibrary-tutorial:* npm start</code> </pre> </li> - <li>If you previously set up <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">nodemon</a>, you can instead use: + <li>If you previously set up <a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">nodemon</a>, you can instead use: <pre><code>// Windows SET DEBUG=express-locallibrary-tutorial:* & npm <strong>run devstart</strong> @@ -628,13 +628,13 @@ SET DEBUG=express-locallibrary-tutorial:* & npm <strong>run devstart</strong <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/skeleton_website/index.html b/files/ja/learn/server-side/express_nodejs/skeleton_website/index.html index 5b0acfecd2..574ffd2076 100644 --- a/files/ja/learn/server-side/express_nodejs/skeleton_website/index.html +++ b/files/ja/learn/server-side/express_nodejs/skeleton_website/index.html @@ -500,13 +500,13 @@ block content <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.html b/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.html index 9e4dc43e1e..b76f22d669 100644 --- a/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.html +++ b/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.html @@ -86,13 +86,13 @@ translation_of: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website <h2 id="このモジュールの中">このモジュールの中</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> </ul> diff --git a/files/ja/learn/server-side/index.html b/files/ja/learn/server-side/index.html index 728f2c0fac..3439f2c209 100644 --- a/files/ja/learn/server-side/index.html +++ b/files/ja/learn/server-side/index.html @@ -54,6 +54,6 @@ translation_of: Learn/Server-side <h2 id="あわせて参照">あわせて参照</h2> <dl> - <dt><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Node_server_without_framework">フレームワークなしの Node サーバ</a></dt> + <dt><a href="/ja/docs/Learn/Server-side/Node_server_without_framework">フレームワークなしの Node サーバ</a></dt> <dd>この記事では、フレームワークを使用せずに、Node.jsだけで構築された単純な静的ファイルサーバを紹介します。</dd> </dl> diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.html index f49b505c56..a11d87f743 100644 --- a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.html +++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.html @@ -28,20 +28,20 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks <p class="summary">その後、異なるフレームワークの選択の要点をカバーするチュートリアルをいくつか提供し、あなたが自分自身でより深く学び始めるのに十分なコンテキストと親しみやすさを提供します。アクセシビリティなどのウェブプラットフォームの基本的なベストプラクティスを忘れずに、実用的な方法でフレームワークについて学んでいただきたいと思います。</p> -<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Get started now, with "Introduction to client-side frameworks"</a></strong></p> +<p class="summary"><strong><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Get started now, with "Introduction to client-side frameworks"</a></strong></p> <h2 id="Prerequisites">Prerequisites</h2> -<p>You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and especially <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</p> +<p>You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — <a href="/ja/docs/Learn/HTML">HTML</a>, <a href="/ja/docs/Learn/CSS">CSS</a>, and especially <a href="/ja/docs/Learn/JavaScript">JavaScript</a>.</p> <p>Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.</p> <h2 id="Introductory_guides">Introductory guides</h2> <dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction to client-side frameworks</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction to client-side frameworks</a></dt> <dd>We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Framework main features</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Framework main features</a></dt> <dd>Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them.</dd> </dl> @@ -54,19 +54,19 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks </div> <dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Getting started with React</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Getting started with React</a></dt> <dd>In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Beginning our React todo list</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Beginning our React todo list</a></dt> <dd>Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic <code>App</code> component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Componentizing our React app</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Componentizing our React app</a></dt> <dd>At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article, we will show you a sensible way to break our app up into components.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. React interactivity: Events and state</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. React interactivity: Events and state</a></dt> <dd>With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. React interactivity: Editing, filtering, conditional rendering</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. React interactivity: Editing, filtering, conditional rendering</a></dt> <dd>As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibility in React</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibility in React</a></dt> <dd>In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screen reader users.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. React resources</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. React resources</a></dt> <dd>Our final article provides you with a list of React resources that you can use to go further in your learning.</dd> </dl> @@ -79,17 +79,17 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks </div> <dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Getting started with Ember</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Getting started with Ember</a></dt> <dd>In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Ember app structure and componentization</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Ember app structure and componentization</a></dt> <dd>In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Ember interactivity: Events, classes and state</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Ember interactivity: Events, classes and state</a></dt> <dd>At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Ember Interactivity: Footer functionality, conditional rendering</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Ember Interactivity: Footer functionality, conditional rendering</a></dt> <dd>Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routing in Ember</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routing in Ember</a></dt> <dd>In this article we learn about routing or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ember resources and troubleshooting</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ember resources and troubleshooting</a></dt> <dd>Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.</dd> </dl> @@ -102,23 +102,23 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks </div> <dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Getting started with Vue</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Getting started with Vue</a></dt> <dd>Now let's introduce Vue, the third of our frameworks. In this article, we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Creating our first Vue component</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Creating our first Vue component</a></dt> <dd>Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props and saving data state.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendering a list of Vue components</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendering a list of Vue components</a></dt> <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">At this point we've got a fully working component; we're now ready to add multiple <code>ToDoItem</code> components to our App. In this article we'll look at adding a set of todo item data to our <code>App.vue</code> component, which we'll then loop through and display inside <code>ToDoItem</code> components using the <code>v-for</code> directive. </span></dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Adding a new todo form: Vue events, methods, and models</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Adding a new todo form: Vue events, methods, and models</a></dt> <dd>We now have sample data in place and a loop that takes each bit of data and renders it inside a <code>ToDoItem</code> in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that, we'll need a text <code><input></code>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styling Vue components with CSS</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styling Vue components with CSS</a></dt> <dd>The time has finally come to make our app look a bit nicer. In this article, we'll explore the different ways of styling Vue components with CSS.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Using Vue computed properties</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Using Vue computed properties</a></dt> <dd>In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods but only re-run when one of their dependencies changes.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Vue conditional rendering: editing existing todos</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Vue conditional rendering: editing existing todos</a></dt> <dd>Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely <code>v-if</code> and <code>v-else</code> — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Focus management with Vue refs</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Focus management with Vue refs</a></dt> <dd>We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Vue resources</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Vue resources</a></dt> <dd>Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.</dd> </dl> diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html index 5114539cca..9aa91534c3 100644 --- a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html +++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html @@ -95,7 +95,7 @@ translation_of: >- <p>React を使用する方法はたくさんありますが、前述のように、コマンドラインインターフェイス (CLI) ツールの create-react-app を使用します。これにより、いくつかのパッケージをインストールしていくつかを作成することにより、React アプリケーションの開発プロセスをスムーズにします。</p> -<p><code><a href="/en-US/docs/Web/HTML/Element/script"><script></a></code> を HTML ファイルにコピーすることで <a href="https://reactjs.org/docs/add-react-to-a-website.html">create-react-app なしでウェブサイトに React を追加する</a>ことは可能ですが、create-react-app CLI は、React アプリケーションの一般的な始め方です。これを使うことで、アプリの作成に集中でき、セットアップに煩わされなくなります。</p> +<p><code><a href="/ja/docs/Web/HTML/Element/script"><script></a></code> を HTML ファイルにコピーすることで <a href="https://reactjs.org/docs/add-react-to-a-website.html">create-react-app なしでウェブサイトに React を追加する</a>ことは可能ですが、create-react-app CLI は、React アプリケーションの一般的な始め方です。これを使うことで、アプリの作成に集中でき、セットアップに煩わされなくなります。</p> <h3 id="Requirements" name="Requirements">必要条件</h3> diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html index 7facbcb5ef..2fea62562a 100644 --- a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html +++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html @@ -22,7 +22,7 @@ translation_of: >- <tr> <th scope="row">前提条件:</th> <td> - <p><a href="/en-US/docs/Learn/HTML">HTML</a> 、<a href="/en-US/docs/Learn/CSS">CSS</a> 、<a href="/en-US/docs/Learn/JavaScript">JavaScript</a> の基本的な知識を持っていること。また <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">ターミナル/コマンドライン</a> に関する知識を持っていること。</p> + <p><a href="/ja/docs/Learn/HTML">HTML</a> 、<a href="/ja/docs/Learn/CSS">CSS</a> 、<a href="/ja/docs/Learn/JavaScript">JavaScript</a> の基本的な知識を持っていること。また <a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">ターミナル/コマンドライン</a> に関する知識を持っていること。</p> </td> </tr> <tr> @@ -181,7 +181,7 @@ cd ..</pre> ); }</pre> -<p>次に <code>public/index.html</code> を開いて、<code><a href="/en-US/docs/Web/HTML/Element/title"><title></a></code>要素のテキストを <code>TodoMatic</code> に変更します。こうすることでアプリ上部の <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1></a></code> と一致します。</p> +<p>次に <code>public/index.html</code> を開いて、<code><a href="/ja/docs/Web/HTML/Element/title"><title></a></code>要素のテキストを <code>TodoMatic</code> に変更します。こうすることでアプリ上部の <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1></a></code> と一致します。</p> <pre class="brush: html"><title>TodoMatic</title></pre> @@ -192,10 +192,10 @@ cd ..</pre> <p>まだ見た目が整っていなくて、機能もしていませんが、一旦問題はありません。すぐにスタイルを設定します。まず現在の JSX と、それがユーザーストーリーにどのように対応しているかを考えてみます。</p> <ul> - <li>新しいタスクを書き込むための <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code> 要素と、フォームを送信するためのボタンを備えた <code><a href="/en-US/docs/Web/HTML/Element/form"><form></a></code> 要素があります。</li> + <li>新しいタスクを書き込むための <code><a href="/ja/docs/Web/HTML/Element/input/text"><input type="text"></a></code> 要素と、フォームを送信するためのボタンを備えた <code><a href="/ja/docs/Web/HTML/Element/form"><form></a></code> 要素があります。</li> <li>タスクのフィルタリングに使用するためのボタンが並んでいます。</li> <li>残っているタスクの数を示す見出しがあります。</li> - <li>3つのタスクがあり、順序付けられていないリストとして配置されています。それぞれのタスクはリストアイテム(<code><a href="/en-US/docs/Web/HTML/Element/li"><li></a></code>)であり、タスクを編集および削除するためのボタンと、完了したことをチェックするためのチェックボックスがあります。</li> + <li>3つのタスクがあり、順序付けられていないリストとして配置されています。それぞれのタスクはリストアイテム(<code><a href="/ja/docs/Web/HTML/Element/li"><li></a></code>)であり、タスクを編集および削除するためのボタンと、完了したことをチェックするためのチェックボックスがあります。</li> </ul> <p>フォームはタスクを作成するためのもので、ボタンはタスクをフィルタリングするためのもの、また見出しとリストはタスクを読むためのものです。今のところタスクを編集するための UI は分かりづらいですが、そちらについては後でコードを書き足していきます。</p> @@ -214,7 +214,7 @@ cd ..</pre> <p><code>visually-hidden</code> というクラスについては、CSS を記述していないので、まだ意味はありません。ただし、スタイルを設定すると、このクラスの要素はすべて目の見えるユーザーからは隠され、スクリーンリーダーのユーザーは引き続き使用できるようになります。これらの単語は、目の見えるユーザーには必要ありません。視覚的な文脈を持たないスクリーンリーダーのユーザーに、ボタンが何をするのかという情報を提供するためにあります。</p> -<p>さらに下には <code><a href="/en-US/docs/Web/HTML/Element/ul"><ul></a></code> 要素があります:</p> +<p>さらに下には <code><a href="/ja/docs/Web/HTML/Element/ul"><ul></a></code> 要素があります:</p> <pre class="brush: html"><ul role="list" @@ -552,40 +552,40 @@ body { <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> <li>React <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> </ul> </li> <li>Ember <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> </ul> </li> <li>Vue <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> </ul> </li> </ul> diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html index 4277a7ba9d..7a6278b124 100644 --- a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html +++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html @@ -22,7 +22,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge <tr> <th scope="row">前提条件:</th> <td> - <p>Familiarity with the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages, knowledge of the <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.</p> + <p>Familiarity with the core <a href="/ja/docs/Learn/HTML">HTML</a>, <a href="/ja/docs/Learn/CSS">CSS</a>, and <a href="/ja/docs/Learn/JavaScript">JavaScript</a> languages, knowledge of the <a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.</p> <p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p> </td> @@ -36,7 +36,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge <h2 id="より明確な_Vue">より明確な Vue</h2> -<p>Vue is a modern JavaScript framework that provides useful facilities for progressive enhancement — unlike many other frameworks, you can use Vue to enhance existing HTML. This lets you use Vue as a drop-in replacement for a library like <a href="/en-US/docs/Glossary/jQuery">JQuery</a>.</p> +<p>Vue is a modern JavaScript framework that provides useful facilities for progressive enhancement — unlike many other frameworks, you can use Vue to enhance existing HTML. This lets you use Vue as a drop-in replacement for a library like <a href="/ja/docs/Glossary/jQuery">JQuery</a>.</p> <p>That being said, you can also use Vue to write entire Single Page Applications (SPAs). This allows you to create markup managed entirely by Vue, which can improve developer experience and performance when dealing with complex applications. It also allows you to take advantage of libraries for client-side routing and state management when you need to. Additionally, Vue takes a "middle ground" approach to tooling like client-side routing and state management. While the Vue core team maintains suggested libraries for these functions, they are not directly bundled into Vue. This allows you to select a different routing/state management library if they better fit your application.</p> @@ -47,7 +47,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge <h2 id="取り付け">取り付け</h2> -<p>To use Vue in an existing site, you can drop one of the following <code><a href="/en-US/docs/Web/HTML/Element/script"><script></a></code> elements onto a page. This allows you to start using Vue on existing sites, which is why Vue prides itself on being a progressive framework. This is a great option when migrating an existing project using a library like JQuery to Vue. With this method, you can use a lot of the core features of Vue, such as the attributes, custom components, and data-management.</p> +<p>To use Vue in an existing site, you can drop one of the following <code><a href="/ja/docs/Web/HTML/Element/script"><script></a></code> elements onto a page. This allows you to start using Vue on existing sites, which is why Vue prides itself on being a progressive framework. This is a great option when migrating an existing project using a library like JQuery to Vue. With this method, you can use a lot of the core features of Vue, such as the attributes, custom components, and data-management.</p> <ul> <li> @@ -70,7 +70,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge </ol> <div class="blockIndicator note"> -<p><strong>Note</strong>: If you don't have the above installed, find out <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#Adding_powerups">more about installing npm and Node.js</a> here.</p> +<p><strong>Note</strong>: If you don't have the above installed, find out <a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#Adding_powerups">more about installing npm and Node.js</a> here.</p> </div> <p>To install the CLI, run the following command in your terminal:</p> @@ -205,7 +205,7 @@ export default { <h2 id="いくつかの変更を加える">いくつかの変更を加える</h2> -<p>Let's make our first change to the app — we’ll delete the Vue logo. Open the <code>App.vue</code> file, and delete the <code><a href="/en-US/docs/Web/HTML/Element/img"><img></a></code> element from the template section:</p> +<p>Let's make our first change to the app — we’ll delete the Vue logo. Open the <code>App.vue</code> file, and delete the <code><a href="/ja/docs/Web/HTML/Element/img"><img></a></code> element from the template section:</p> <pre class="brush: html notranslate"><span class="author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90z8h7gz67ziz76zcz77zz80zz71zncfz69zz69ziaz82zz71zz72zhz77zz122zz90z14mcyd"><img alt="Vue logo" src="./assets/logo.png"></span></pre> @@ -250,52 +250,52 @@ export default { <h2 id="このモジュールでは">このモジュールでは</h2> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> <li>React <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> </ul> </li> <li>Ember <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> </ul> </li> <li>Vue <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> </ul> </li> <li>Svelte <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li> </ul> </li> </ul> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html index 98bf8d9394..abbfe4fa7e 100644 --- a/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html @@ -227,7 +227,7 @@ npm install --save-dev @babel/core <li>Add <code>'js'</code> as an item inside the array in the <code>default</code> task.</li> </ol> -<p>Here we grab our <code>main.js</code> file, run <code>jshint</code> on it and output the results to the terminal using <code>jshint.reporter</code>; we then pass the file to babel, which converts it to old style syntax and outputs the result into the <code>build</code> directory. Our original code included a <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">fat arrow function</a>, which babel has modified into an old style function.</p> +<p>Here we grab our <code>main.js</code> file, run <code>jshint</code> on it and output the results to the terminal using <code>jshint.reporter</code>; we then pass the file to babel, which converts it to old style syntax and outputs the result into the <code>build</code> directory. Our original code included a <a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">fat arrow function</a>, which babel has modified into an old style function.</p> <h4 id="Further_ideas">Further ideas</h4> @@ -607,14 +607,14 @@ function getSessionDetails(session){ <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> </ul> <p> </p> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html index 62e21f35a2..86ed9a69cb 100644 --- a/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html @@ -85,7 +85,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS <p>Other popular editors have similar linting packages available. For example, see:</p> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/www.sublimelinter.com/">SublimeLinter</a> for Sublime Text</li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/www.sublimelinter.com/">SublimeLinter</a> for Sublime Text</li> <li><a href="https://sourceforge.net/projects/notepad-linter/">Notepad++ linter</a></li> </ul> @@ -109,7 +109,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS <h3 id="Older_browsers_not_supporting_modern_features">Older browsers not supporting modern features</h3> -<p>This is a common problem, especially when you need to support old browsers (such as old IE versions) or you are using features that are implemented using CSS prefixes. In general, most core HTML and CSS functionality (such as basic HTML elements, CSS basic colors and text styling) works across most browsers you'll want to support; more problems are uncovered when you start wanting to use newer features such as <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">HTML5 video/audio</a>, or even more nascent, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout">CSS Grids</a> or <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#-webkit-background-clip_text">-webkit-background-clip: text</a>.</p> +<p>This is a common problem, especially when you need to support old browsers (such as old IE versions) or you are using features that are implemented using CSS prefixes. In general, most core HTML and CSS functionality (such as basic HTML elements, CSS basic colors and text styling) works across most browsers you'll want to support; more problems are uncovered when you start wanting to use newer features such as <a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, or <a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">HTML5 video/audio</a>, or even more nascent, <a href="/ja/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout">CSS Grids</a> or <a href="/ja/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#-webkit-background-clip_text">-webkit-background-clip: text</a>.</p> <p>Once you've identified a list of potential problem technologies you will be using, it is a good idea to research what browsers they are supported in, and what related techniques are useful. See {{anch("Finding help")}} below.</p> @@ -123,7 +123,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS <p><strong>Note</strong>: See {{anch("IE conditional comments")}} for the best way to do this.</p> </div> -<p>More complex elements like HTML <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video"><video></a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio"><audio></a></code>, and <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas"><canvas></a></code> (and other features besides) have natural mechanisms for fallbacks to be added, which work on the same principle as described above. You can add fallback content in between the opening and closing tags, and non-supporting browsers will effectively ignore the outer element and run the nested content.</p> +<p>More complex elements like HTML <code><a href="/ja/docs/Web/HTML/Element/video"><video></a></code>, <code><a href="/ja/docs/Web/HTML/Element/audio"><audio></a></code>, and <code><a href="/ja/docs/Web/HTML/Element/canvas"><canvas></a></code> (and other features besides) have natural mechanisms for fallbacks to be added, which work on the same principle as described above. You can add fallback content in between the opening and closing tags, and non-supporting browsers will effectively ignore the outer element and run the nested content.</p> <p>For example:</p> @@ -143,13 +143,13 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/tears-of-steel-battle-clip-medium.mp4<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Download MP4<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>video</span><span class="punctuation token">></span></span></code></pre> -<p>This example (taken from <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>) includes not only a Flash video fallback for older IE versions, but also a simple link allowing you to download the video if even the Flash player doesn't work, so at least the user can still access the video.</p> +<p>This example (taken from <a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>) includes not only a Flash video fallback for older IE versions, but also a simple link allowing you to download the video if even the Flash player doesn't work, so at least the user can still access the video.</p> <div class="note"> <p><strong>Note</strong>: 3rd party libraries like <a href="http://videojs.com/">Video.js</a> and <a href="https://www.jwplayer.com/">JW Player</a> use such fallback mechanisms to provide cross-browser support.</p> </div> -<p>HTML5 form elements also exhibit fallback qualities — HTML5 introduced some special <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"><input></a></code> types for inputting specific information into forms, such as times, dates, colors, numbers, etc. These are very useful, particularly on mobile platforms, where providing a pain-free way of entering data is very important for the user experience. Supporting platforms provide special UI widgets when these input types are used, such as a calendar widget for entering dates.</p> +<p>HTML5 form elements also exhibit fallback qualities — HTML5 introduced some special <code><a href="/ja/docs/Web/HTML/Element/input"><input></a></code> types for inputting specific information into forms, such as times, dates, colors, numbers, etc. These are very useful, particularly on mobile platforms, where providing a pain-free way of entering data is very important for the user experience. Supporting platforms provide special UI widgets when these input types are used, such as a calendar widget for entering dates.</p> <p>The following example shows date and time inputs:</p> @@ -252,14 +252,14 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS inset <span class="number token">-1</span><span class="token unit">px</span> <span class="number token">-1</span><span class="token unit">px</span> <span class="number token">3</span><span class="token unit">px</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span></code></pre> -<p>Here we are providing an <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()">RGBA</a> {{cssxref("background-color")}} that changes opacity on hover to give the user a hint that the button is interactive, and some semi-transparent inset {{cssxref("box-shadow")}} shades to give the button a bit of texture and depth. The trouble is that RGBA colors and box shadows don't work in IE versions older than 9 — in older versions the background just wouldn't show up at all so the text would be unreadable, no good at all!</p> +<p>Here we are providing an <a href="/ja/docs/Web/CSS/color_value#rgba()">RGBA</a> {{cssxref("background-color")}} that changes opacity on hover to give the user a hint that the button is interactive, and some semi-transparent inset {{cssxref("box-shadow")}} shades to give the button a bit of texture and depth. The trouble is that RGBA colors and box shadows don't work in IE versions older than 9 — in older versions the background just wouldn't show up at all so the text would be unreadable, no good at all!</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14135/unreadable-button.png" style="display: block; margin: 0 auto;"></p> <p>To sort this out, we have added a second <code>background-color</code> declaration, which just specifies a hex color — this is supported way back in really old browsers, and acts as a fallback if the modern shiny features don't work. What happens is a browser visiting this page first applies the first <code>background-color</code> value; when it gets to the second <code>background-color</code> declaration, it will override the initial value with this value if it supports RGBA colors. If not, it will just ignore the entire declaration and move on.</p> <div class="note"> -<p><strong>Note</strong>: The same is true for other CSS features like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face">@font-face</a></code> and <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports">@supports</a></code> blocks — if they are not supported, the browser just ignores them.</p> +<p><strong>Note</strong>: The same is true for other CSS features like <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, <code><a href="/ja/docs/Web/CSS/@font-face">@font-face</a></code> and <code><a href="/ja/docs/Web/CSS/@supports">@supports</a></code> blocks — if they are not supported, the browser just ignores them.</p> </div> <h4 id="IE_conditional_comments">IE conditional comments</h4> @@ -292,7 +292,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS <h4 id="Selector_support">Selector support</h4> -<p>Of course, no CSS features will apply at all if you don't use the right <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">selectors</a> to select the element you want to style! If you just write a selector incorrectly so the styling isn't as expected in any browser, you'll just need to troubleshoot and work out what is wrong with your selector. We find that it is helpful to inspect the element you are trying to style using your browser's dev tools, then look at the DOM tree breadcrumb trail that DOM inspectors tend to provide to see if your selector makes sense compared to it.</p> +<p>Of course, no CSS features will apply at all if you don't use the right <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors">selectors</a> to select the element you want to style! If you just write a selector incorrectly so the styling isn't as expected in any browser, you'll just need to troubleshoot and work out what is wrong with your selector. We find that it is helpful to inspect the element you are trying to style using your browser's dev tools, then look at the DOM tree breadcrumb trail that DOM inspectors tend to provide to see if your selector makes sense compared to it.</p> <p>For example, in the Firefox dev tools, you get this kind of output at the bottom of the DOM inspector:</p> @@ -304,7 +304,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS <p>(The <code>date</code> form input isn't directly inside the <code><form></code>; you'd be better off using a general descendant selector instead of a child selector).</p> -<p>However, another issue that appears in versions of IE older than 9 is that none of the newer selectors (mainly pseudo-classes and pseudo-elements like <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type">:nth-of-type</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not">:not</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::selection">::selection</a></code>, etc.) work. If you want to use these in your CSS and you need to support older IE versions, a good move is to use Keith Clark's <a href="http://selectivizr.com/">Selectivizr</a> library — this is a small JavaScript library that works on top of an existing JavaScript library like <a href="http://jquery.com/">jQuery</a> or <a href="http://mootools.net/">MooTools</a>.</p> +<p>However, another issue that appears in versions of IE older than 9 is that none of the newer selectors (mainly pseudo-classes and pseudo-elements like <code><a href="/ja/docs/Web/CSS/:nth-of-type">:nth-of-type</a></code>, <code><a href="/ja/docs/Web/CSS/:not">:not</a></code>, <code><a href="/ja/docs/Web/CSS/::selection">::selection</a></code>, etc.) work. If you want to use these in your CSS and you need to support older IE versions, a good move is to use Keith Clark's <a href="http://selectivizr.com/">Selectivizr</a> library — this is a small JavaScript library that works on top of an existing JavaScript library like <a href="http://jquery.com/">jQuery</a> or <a href="http://mootools.net/">MooTools</a>.</p> <ol> <li>To try this example, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/selectivizr-example-start.html">selectivizr-example-start.html</a>. If you look at this running live, you'll see that it contains two paragraphs, one of which is styled. We've selected the paragraph with <code>p:first-child</code>, which won't work in old versions of IE.</li> @@ -345,7 +345,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS <p>The first line shows a {{cssxref("transform")}} property with a <code>-webkit-</code> prefix — this was needed to make transforms work in Chrome, etc. until the feature was finalized and such browsers added a prefix-free version of the property (at the time of writing, Chrome supported both versions).</p> -<p>The last three lines show three different versions of the <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient">linear-gradient()</a></code> function, which is used to generate a linear gradient in the background of an element:</p> +<p>The last three lines show three different versions of the <code><a href="/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a></code> function, which is used to generate a linear gradient in the background of an element:</p> <ol> <li>The first one has a <code>-moz-</code> prefix, and shows a slightly older version of the syntax (Firefox)</li> @@ -370,7 +370,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS <ul> <li> </li> - <li>Now try to set a new value for the CSS property you are interested in on that element; you can do this using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style">style</a> property of the element, for example try typing these into the JavaScript console: + <li>Now try to set a new value for the CSS property you are interested in on that element; you can do this using the <a href="/ja/docs/Web/API/HTMLElement/style">style</a> property of the element, for example try typing these into the JavaScript console: <pre class="brush: js line-numbers language-js"><code class="language-js">test<span class="punctuation token">.</span>style<span class="punctuation token">.</span>transform <span class="operator token">=</span> <span class="string token">'rotate(90deg)'</span> test<span class="punctuation token">.</span>style<span class="punctuation token">.</span>webkitTransform <span class="operator token">=</span> <span class="string token">'rotate(90deg)'</span></code></pre> </li> @@ -443,13 +443,13 @@ test<span class="punctuation token">.</span>style<span class="punctuation token" <h4 id="Support_for_new_layout_features">Support for new layout features</h4> -<p>Much of the layout work on the web today is done using <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a> — this is because floats are well-supported (way back to IE4, albeit with a number of bugs that would also need to be investigated if you were to try to support IE that far back). However, they are not really meant for layout purposes — using floats the way we do is really a hack — and they do have some serious limitations (e.g. see <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Why_Flexbox">Why Flexbox?</a>)</p> +<p>Much of the layout work on the web today is done using <a href="/ja/docs/Learn/CSS/CSS_layout/Floats">floats</a> — this is because floats are well-supported (way back to IE4, albeit with a number of bugs that would also need to be investigated if you were to try to support IE that far back). However, they are not really meant for layout purposes — using floats the way we do is really a hack — and they do have some serious limitations (e.g. see <a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox#Why_Flexbox">Why Flexbox?</a>)</p> -<p>More recently, dedicated layout mechanisms have appeared, like <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> and <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout">CSS Grids</a>, which make common layout tasks far easier and remove such shortcomings. These however are not as well-supported in browsers:</p> +<p>More recently, dedicated layout mechanisms have appeared, like <a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> and <a href="/ja/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout">CSS Grids</a>, which make common layout tasks far easier and remove such shortcomings. These however are not as well-supported in browsers:</p> <ul> <li>CSS grids are very new; at the time of writing, they were only <a href="http://gridbyexample.com/browsers/">supported</a> in the very newest versions of modern browsers.</li> - <li>Flexbox is <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Cross_browser_compatibility">well-supported</a> in modern browsers, but provides problems in older browsers. IE 9 doesn't support it at all, and IE 10 and old versions of iOS/desktop Safari respectively support incompatible old versions of the flexbox spec. This results in some interesting browser prefix juggling if you want to try to use flexbox across all these browsers (see <a href="https://dev.opera.com/articles/advanced-cross-browser-flexbox/">Advanced Cross-Browser Flexbox</a> to get an idea).</li> + <li>Flexbox is <a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox#Cross_browser_compatibility">well-supported</a> in modern browsers, but provides problems in older browsers. IE 9 doesn't support it at all, and IE 10 and old versions of iOS/desktop Safari respectively support incompatible old versions of the flexbox spec. This results in some interesting browser prefix juggling if you want to try to use flexbox across all these browsers (see <a href="https://dev.opera.com/articles/advanced-cross-browser-flexbox/">Advanced Cross-Browser Flexbox</a> to get an idea).</li> </ul> <p>Layout features aren't as easy to provide graceful fallbacks for than simple colors, shadows, or gradients. If layout properties are ignored, your entire design will likely fall to pieces. Because of this, you need to use feature detection to detect whether visiting browsers support those layout features, and selectively apply different layouts depending on the result (we will cover feature detection in detail in a later article).</p> @@ -457,14 +457,14 @@ test<span class="punctuation token">.</span>style<span class="punctuation token" <p>For example, you could apply a flexbox layout to modern browsers, then instead apply a floated layout to older browsers that don't support flexbox.</p> <div class="note"> -<p><strong>Note</strong>: There is a fairly new feature in CSS called <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports">@supports</a></code>, which allows you to implement native feature detection tests.</p> +<p><strong>Note</strong>: There is a fairly new feature in CSS called <code><a href="/ja/docs/Web/CSS/@supports">@supports</a></code>, which allows you to implement native feature detection tests.</p> </div> <h4 id="Responsive_design_problems">Responsive design problems</h4> -<p>Responsive design is the practice of creating web layouts that change to suit different device form factors — for example different screen widths, orientations (portrait or landscape), or resolutions. A desktop layout for example will look terrible when viewed on a mobile device, so you need to provide a suitable mobile layout using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries">media queries</a>, and make sure it is applied correctly using <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>. You can find a detailed account of such practices in <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a>.</p> +<p>Responsive design is the practice of creating web layouts that change to suit different device form factors — for example different screen widths, orientations (portrait or landscape), or resolutions. A desktop layout for example will look terrible when viewed on a mobile device, so you need to provide a suitable mobile layout using <a href="/ja/docs/Web/CSS/Media_Queries">media queries</a>, and make sure it is applied correctly using <a href="/ja/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>. You can find a detailed account of such practices in <a href="/ja/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a>.</p> -<p>Resolution is a big issue too — for example, mobile devices are less likely to need big heavy images than desktop computers, and are more likely to have slower internet connections and possibly even expensive data plans that make wasted bandwidth more of a problem. In addition, different devices can have a range of different resolutions, meaning that smaller images could appear pixellated. There are a number of techniques that allow you to work around such problems, from simple <a href="https://developer.mozilla.org/en-US/Apps/Progressive/Responsive/Mobile_first">mobile first media queries</a>, to more complex <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes">responsive image techniques</a>.</p> +<p>Resolution is a big issue too — for example, mobile devices are less likely to need big heavy images than desktop computers, and are more likely to have slower internet connections and possibly even expensive data plans that make wasted bandwidth more of a problem. In addition, different devices can have a range of different resolutions, meaning that smaller images could appear pixellated. There are a number of techniques that allow you to work around such problems, from simple <a href="/ja/Apps/Progressive/Responsive/Mobile_first">mobile first media queries</a>, to more complex <a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes">responsive image techniques</a>.</p> <p>Another difficulty that can present problems is browser support for the features that make the above techniques possible. media queries are not supported in IE 8 or less, so if you want to use a mobile first layout and have the desktop layout then apply to old IE versions, you'll have to apply a media query {{glossary("polyfill")}} to your page, like <a href="https://code.google.com/archive/p/css3-mediaqueries-js/">css3-mediaqueries-js</a>, or <a href="https://github.com/scottjehl/Respond">Respond.js</a>.</p> @@ -477,9 +477,9 @@ test<span class="punctuation token">.</span>style<span class="punctuation token" <p>To use the Mozilla Developer Network (MDN), most people do a search engine search of the technology they are trying to find information on, plus the term "mdn", for example "mdn HTML5 video". MDN contains several useful types of content:</p> <ul> - <li>Reference material with browser support information for client-side web technologies, e.g. the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video"><video> reference page</a>.</li> - <li>Other supporting reference material, e.g. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats">Media formats supported by the HTML audio and video elements</a>.</li> - <li>Useful tutorials that solve specific problems, for example <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>.</li> + <li>Reference material with browser support information for client-side web technologies, e.g. the <a href="/ja/docs/Web/HTML/Element/video"><video> reference page</a>.</li> + <li>Other supporting reference material, e.g. <a href="/ja/docs/Web/HTML/Supported_media_formats">Media formats supported by the HTML audio and video elements</a>.</li> + <li>Useful tutorials that solve specific problems, for example <a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>.</li> </ul> <p><a href="http://caniuse.com/">caniuse.com</a> provides support information, along with a few useful external resource links. For example, see <a href="http://caniuse.com/#search=video">http://caniuse.com/#search=video</a> (you just have to enter the feature you are searching for into the text box).</p> @@ -497,12 +497,12 @@ test<span class="punctuation token">.</span>style<span class="punctuation token" <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> </ul> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.html index 3e0e2e7834..3111d63b0e 100644 --- a/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.html +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.html @@ -50,7 +50,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction <p>その一方で、サイトが視力のあるユーザーにとって動作していても、視覚障がいのあるユーザーにとって、スクリーンリーダーアプリケーションがそこにある情報を読み取れないため完全にアクセスできない場合は、OKではありません。</p> -<p>2つ目に、「受け入れられる数のウェブブラウザ間で」と言った時、世界中のブラウザの 100% の意味ではありません — これは不可能です。ユーザーが使うブラウザや端末の情報を呼び出すことができます (このシリーズの2つ目の記事で見ていきましょう — <a href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all">Gotta test 'em all?</a>を見てください)が、すべてを保証することはできません。ウェブ開発者としては、ある範囲のブラウザと端末にてコードが完全に動作することをサイトオーナーと同意しておく必要があります。しかしそれを超えて、その他のブラウザでコンテンツを使う機会をできるだけ与えられるよう防衛的なコードを書いておく必要があります。</p> +<p>2つ目に、「受け入れられる数のウェブブラウザ間で」と言った時、世界中のブラウザの 100% の意味ではありません — これは不可能です。ユーザーが使うブラウザや端末の情報を呼び出すことができます (このシリーズの2つ目の記事で見ていきましょう — <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all">Gotta test 'em all?</a>を見てください)が、すべてを保証することはできません。ウェブ開発者としては、ある範囲のブラウザと端末にてコードが完全に動作することをサイトオーナーと同意しておく必要があります。しかしそれを超えて、その他のブラウザでコンテンツを使う機会をできるだけ与えられるよう防衛的なコードを書いておく必要があります。</p> <div class="note"> <p><strong>注</strong>: このモジュールの後の方でも、防衛的なコードをカバーします。</p> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.html index 12c8f274d6..2ee7e93ba0 100644 --- a/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.html +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.html @@ -104,7 +104,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript <p>You can then point these tools at JavaScript files you want to lint, for example:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14171/js-hint-commandline.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;">You can also use these tools with a task runner/build tool such as <a href="http://gulpjs.com/">Gulp</a> or <a href="https://webpack.github.io/">Webpack</a> to automatically lint your JavaScript during development. (see <a href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Using_a_task_runner_to_automate_testing_tools">Using a task runner to automate testing tools</a> in a later article.) See <a href="http://eslint.org/docs/user-guide/integrations">ESLint integrations</a> for ESLint options; JSHint is supported out of the box by Grunt, and also has other integrations available, e.g. <a href="https://github.com/webpack/jshint-loader">JSHint loader for Webpack</a>.</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/14171/js-hint-commandline.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;">You can also use these tools with a task runner/build tool such as <a href="http://gulpjs.com/">Gulp</a> or <a href="https://webpack.github.io/">Webpack</a> to automatically lint your JavaScript during development. (see <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Using_a_task_runner_to_automate_testing_tools">Using a task runner to automate testing tools</a> in a later article.) See <a href="http://eslint.org/docs/user-guide/integrations">ESLint integrations</a> for ESLint options; JSHint is supported out of the box by Grunt, and also has other integrations available, e.g. <a href="https://github.com/webpack/jshint-loader">JSHint loader for Webpack</a>.</p> <div class="note"> <p><strong>注</strong>: ESLint takes a bit more setup and configuration than JSHint, but it is more powerful too.</p> @@ -210,7 +210,7 @@ showHeroes(superHeroes);</pre> </ol> <div class="note"> -<p><strong>注</strong>: We'd like you to try fixing this problem yourself. To give you a clue, you can either <a href="/ja/docs/Web/API/XMLHttpRequest/responseType">tell the XMLHttpRequest object explicitly to return JSON format</a>, or <a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/JSON#Converting_between_objects_and_text">convert the returned text to JSON</a> after the response arrives. If you get stuck, consult our <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fixed-ajax.html">fixed-ajax.html</a> example.</p> +<p><strong>注</strong>: We'd like you to try fixing this problem yourself. To give you a clue, you can either <a href="/ja/docs/Web/API/XMLHttpRequest/responseType">tell the XMLHttpRequest object explicitly to return JSON format</a>, or <a href="/ja/docs/Learn/JavaScript/Objects/JSON#Converting_between_objects_and_text">convert the returned text to JSON</a> after the response arrives. If you get stuck, consult our <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fixed-ajax.html">fixed-ajax.html</a> example.</p> </div> <div class="note"> @@ -252,7 +252,7 @@ showHeroes(superHeroes);</pre> <p>For example:</p> <ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> are a great new feature for performing asynchronous operations and making sure those operations are complete before code that relies on their results is used for something else. As an example, the <a href="https://developer.mozilla.org/ja/docs/Web/API/GlobalFetch/fetch">Fetch API</a> (a modern equivalent to <a href="/ja/docs/Web/API/XMLHttpRequest">XMLHTTPRequest</a>) uses promises to fetch resources across the network and make sure that the response has been returned before they are used (for example, displaying an image inside an {{htmlelement("img")}} element). They are not supported in IE at all but are supported across all modern browsers.</li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> are a great new feature for performing asynchronous operations and making sure those operations are complete before code that relies on their results is used for something else. As an example, the <a href="/ja/docs/Web/API/GlobalFetch/fetch">Fetch API</a> (a modern equivalent to <a href="/ja/docs/Web/API/XMLHttpRequest">XMLHTTPRequest</a>) uses promises to fetch resources across the network and make sure that the response has been returned before they are used (for example, displaying an image inside an {{htmlelement("img")}} element). They are not supported in IE at all but are supported across all modern browsers.</li> <li>Arrow functions provide a shorter, more convenient syntax for writing <a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions">anonymous functions</a>, which also has other advantages (see <a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a>). For a quick example, see <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html">arrow-function.html</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/arrow-function.html">source code</a> also). Arrow functions are supported across all modern browsers, except for IE and Safari.</li> <li>Declaring <a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> at the top of your JavaScript code causes it to be parsed with a stricter set of rules, meaning that more warnings and errors will be thrown, and some things will be disallowed that would otherwise be acceptable. It is arguably a good idea to use strict mode, as it makes for better, more efficient code, however it has limited/patchy support across browsers (see <a href="/ja/docs/Web/JavaScript/Reference/Strict_mode#Strict_mode_in_browsers">Strict mode in browsers</a>).</li> <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">Typed arrays</a> allow JavaScript code to access and manipulate raw binary data, which is necessary as browser APIs for example start to manipulate streams of raw video and audio data. These are available in IE10 and above, and all modern browsers.</li> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html index 06f93804ce..8f36e7e65b 100644 --- a/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html @@ -50,7 +50,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Your_own_automatio <h3 id="Setting_up_Selenium_in_Node" name="Setting_up_Selenium_in_Node">Node で Selenium のセットアップ</h3> <ol> - <li>まず、最後の章の <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Setting_up_Node_and_npm">Setting up Node and npm</a> で説明しているように、新しいnpmプロジェクトをセットアップします。<code>selenium-test</code>のように違うものを呼んでください。</li> + <li>まず、最後の章の <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Setting_up_Node_and_npm">Setting up Node and npm</a> で説明しているように、新しいnpmプロジェクトをセットアップします。<code>selenium-test</code>のように違うものを呼んでください。</li> <li>次に私たちはNodeの内部からSeleniumが機能するようにフレームワークをインストールする必要があります。 更新頻度が高く、よく改善されるため、私たちは<a href="https://www.npmjs.com/package/selenium-webdriver">selenium-webdriver</a>を選択します。もしも他の選択をするならば<a href="http://webdriver.io/">webdriver.io</a> と <a href="http://nightwatchjs.org/">nightwatch.js</a> もいい選択です。selenium-webdriverをインストールするため, プロジェクトフォルダの下で以下のコマンドを走らせます:</li> <li> <pre class="brush: bash"><code>npm install selenium-webdriver</code></pre> |