diff options
Diffstat (limited to 'files/ja/learn/html/introduction_to_html/debugging_html/index.html')
| -rw-r--r-- | files/ja/learn/html/introduction_to_html/debugging_html/index.html | 185 |
1 files changed, 185 insertions, 0 deletions
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 new file mode 100644 index 0000000000..24c4e6c4d3 --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/debugging_html/index.html @@ -0,0 +1,185 @@ +--- +title: HTML のデバッグ +slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML +tags: + - CodingScripting + - HTML + - エラー + - ガイド + - デバッグ + - バリデーション + - バリデーター + - ビギナー +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">HTML を書くことは良いですが、何か問題が生じた場合どうなります？また、コード内のどこにエラーがあるか見つけられますか？この記事では HTML 内のエラーの発見、および修正の手助けをしてくれるいくつかのツールを紹介します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>HTML の使い方、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML の始め方</a>や <a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a>、そして<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a>を網羅した例。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>HTML内の問題を見つけるためのデバッグ用ツールの基本的な使い方の学習。</td> + </tr> + </tbody> +</table> + +<h2 id="デバッグは怖くない">デバッグは怖くない</h2> + +<p>何かのコードを書いている時、エラーが起きる (何かしらの間違いを犯したため、コードが全く機能しない、あるいは望んでいた通りに動かない) その恐ろしい瞬間まで、通常は全く問題ありません。たとえば、以下は <a href="https://www.rust-lang.org/">Rust</a> 言語で書かれた単純なプログラムを {{glossary("compile")}} しようとしたときに報告されるエラーを示しています。<img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;">ここに、比較的分かりやすいエラーメッセージがあります。 — "閉じていない二重引用符文字列"。リストを見れば、おそらく論理的に <code>println!(Hello, world!");</code> に二重引用符がない可能性があるとわかるでしょう。しかし、プログラムが大きくなるにつれてエラーメッセージはすぐに複雑になり、解釈しにくくなります。簡単な場合でも、Rust について何も知らない人には少し威圧的に見えるかもしれません。</p> + +<p>デバッグを怖がる必要はありません — プログラミング言語やコードの作成、デバッグに慣れるための鍵は、言語とツールの両方に精通していることです。</p> + +<h2 id="HTML_とデバッグ">HTML とデバッグ</h2> + +<p>HTML は Rust ほど理解するのが複雑ではありません。ブラウザが解析して結果を表示するまで、HTML は別の形式にコンパイルされません (解釈されますが、コンパイルはされません)。そして HTML の {{glossary("element")}} 構文は、Rust、{{glossary("JavaScript")}}、または {{glossary("Python")}} のような "実際のプログラミング言語" よりはるかに理解しやすいです。ブラウザが HTML を解析する方法は、プログラミング言語の実行方法よりもはるかに<strong>寛容</strong>です。これは良いことと悪いことの両方です。</p> + +<h3 id="許容コード">許容コード</h3> + +<p>では寛容とはどういうことでしょうか。まあ、一般的にコードで何か間違ったことをするとき、出くわすことになる2つの主なタイプのエラーがあります：</p> + +<ul> + <li><strong>シンタックスエラー</strong>: 上記の Rust エラーのように、コード内のスペルミスで実際にはプログラムが実行されません。言語の構文に精通していて、エラーメッセージが何を意味するのか知っている限り、これらは通常修正が簡単です。</li> + <li><strong>ロジックエラー</strong>: これらは、シンタックスは実際には正しいのですが、コードが意図したものではないため、プログラムが正しく実行されないエラーです。エラーの原因を特定するためのエラーメッセージがないため、シンタックスエラーよりも修正が困難です。</li> +</ul> + +<p>HTML 自体は構文エラーに悩まされていません。ブラウザが構文解析エラーを許容して解析するからです。つまり、構文エラーがあってもページは表示されたままです。ブラウザには、誤って書かれたマークアップを解釈する方法を決定するための組み込みのルールがあるので、たとえそれが期待したものでなくても、実行することはできます。もちろん、これはまだ問題になる可能性があります。</p> + +<div class="note"> +<p><strong>メモ</strong>: Web の世界が最初に構築されたとき、HTML はそれほど厳格には解析されませんでした。これは、構文（シンタックス）が絶対的に正しいことを確認するよりも、人々がコンテンツを公開できることのほうが重要であると判断されたためです。当初から構文がより厳格に処理されていたとすれば、おそらく 現在のような Web は実現されなかったでしょう。</p> +</div> + +<h3 id="アクティブラーニング_許容コードの学習">アクティブラーニング: 許容コードの学習</h3> + +<p>HTML コードの寛容な性質を学習する時が来ました。</p> + +<ol> + <li>まず、<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example のデモ</a>をダウンロードしてローカルに保存します。このデモは、調査するために意図的にエラーを含むように書かれています (HTML マークアップは<strong>整形式ではない</strong>と言われており、<strong>整形式</strong>とは対照的です)。</li> + <li>次にブラウザで開きます。 このようなものを見るでしょう：<img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li> + <li>これはすぐには良く見えません。ソースコードを調べて、問題が解決できるかどうか確認しましょう (本文の内容だけが表示されます)。 + <pre class="brush: html notranslate"><h1>HTML debugging examples</h1> + +<p>What causes errors in HTML? + +<ul> + <li>Unclosed elements: If an element is <strong>not closed properly, + then its effect can spread to areas you didn't intend + + <li>Badly nested elements: Nesting elements properly is also very important + for code behaving correctly. <strong>strong <em>strong emphasised?</strong> + what is this?</em> + + <li>Unclosed attributes: Another common source of HTML problems. Let's + look at an example: <a href="https://www.mozilla.org/>link to Mozilla + homepage</a> +</ul></pre> + </li> + <li>問題を見てみましょう。 + <ul> + <li>{{htmlelement("p","paragraph")}} と {{htmlelement("li","list item")}} 要素には終了タグがありません。上の画像を見ると、ある要素がどこで終わり、別の要素が始まるべきかを推測するのは簡単なので、これはマークアップのレンダリングにあまり悪い影響を与えていないようです。</li> + <li>最初の {{htmlelement("strong")}} 要素には終了タグがありません。要素がどこで終了するのか分かりにくいので、もう少し問題があります。実際、残りのテキスト全体が強調されています。</li> + <li>このセクションはひどくネストされています： <code><strong>strong <em>strong emphasised?</strong> what is this?</em></code>。前の問題もあって、これがどのように解釈されたかを見分けるのは容易ではありません。</li> + <li>{{htmlattrxref("href","a")}} 属性値に、閉じ二重引用符がありません。これが最大の問題を引き起こしているようです。リンクはまったくレンダリングされていません。</li> + </ul> + </li> + <li>それでは、ソースコードのマークアップに対して、ブラウザがレンダリングしたマークアップを見てみましょう。これを行うには、ブラウザの開発者ツールを使用できます。ブラウザの開発者ツールの使い方に慣れていない場合は、<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">Discover browser developer tools</a> を数分確認してください。</li> + <li>DOM インスペクタでは、レンダリングされたマークアップがどのように見えるかを見ることができます。<img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li> + <li>DOM インスペクタを使用して、ブラウザが HTML エラーを修正しようとしている方法を確認するためにコードを詳しく調べてみましょう (もちろん Firefox で確認していますが、他のモダンなブラウザでも同じ結果が得られる<em>はず</em>です)。 + <ul> + <li>段落とリスト項目には終了タグが付けられています。</li> + <li>最初の <code><strong></code> 要素がどこで閉じられるべきかは明確ではないので、ブラウザはそれぞれ別々のテキストブロックをそれぞれの strong タグで、ドキュメントの一番下まで閉じています。</li> + <li>不正確なネスティングはブラウザによってこのように修正されました： + <pre class="brush: html notranslate"><strong>strong + <em>strong emphasised?</em> +</strong> +<em> what is this?</em></pre> + </li> + <li>二重引用符がないリンクは完全に削除されました。 最後のリスト項目は次のようになります。 + <pre class="brush: html notranslate"><li> + <strong>Unclosed attributes: Another common source of HTML problems. + Let's look at an example: </strong> +</li></pre> + </li> + </ul> + </li> +</ol> + +<h3 id="HTML_バリデーション">HTML バリデーション</h3> + +<p>上記の例から、HTML が整形式であることを本当に確認したいことがわかります。しかし、どうですか？上のような小さな例では、行を検索してエラーを見つけるのは簡単ですが、巨大で複雑な HTML 文書についてはどうでしょうか。</p> + +<p>最良の戦略は、HTML、CSS、およびその他の Web テクノロジを定義する仕様を管理する組織である W3C によって作成および管理されている <a href="https://validator.w3.org/">Markup Validation Service</a> を介して HTML ページを実行することです。この Web ページは入力として HTML ドキュメントを受け取り、それを通して、あなたの HTML の何が悪いのかを伝えるレポートを提供してくれます。</p> + +<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p> + +<p>検証する HTML を指定するには、Web アドレスを指定するか、HTML ファイルをアップロードするか、または HTML コードを直接入力します。</p> + +<h3 id="アクティブラーニング_HTML_ドキュメントの検証">アクティブラーニング: HTML ドキュメントの検証</h3> + +<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">サンプル文書</a>でこれを試してみましょう。</p> + +<ol> + <li>まず、<a href="https://validator.w3.org/">Markup Validation Service</a> を1つのブラウザタブに読み込みます (まだ読み込まれていない場合)。</li> + <li><a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a> タブに切り替えます。</li> + <li>本文だけでなく、すべてのサンプルドキュメントのコードをコピーして、Markup Validation Service に表示される大きなテキスト領域に貼り付けます。</li> + <li><em>Check</em> ボタンを押します</li> +</ol> + +<p>これでエラーと他の情報のリストを提供してくれるはずです。</p> + +<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p> + +<h4 id="エラーメッセージの解釈">エラーメッセージの解釈</h4> + +<p>エラーメッセージは通常役に立ちますが、あまり役に立たないこともあります。少し訓練すれば、これらを解釈してコードを修正する方法を考え出すことができます。エラーメッセージとその意味を見ていきましょう。各メッセージには行番号と列番号が付いているので、エラーを簡単に見つけることができます。</p> + +<ul> + <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): これらのメッセージは、要素が開いていて閉じる必要があることを示しています。終了タグは暗示されていますが、実際にはありません。行/列情報は、終了タグが実際にあるべき行の後の最初の行を指していますが、これは何が問題なのかを確認するのに十分な手掛かりです。</li> + <li>"Unclosed element <code>strong</code>": これは理解するのが本当に簡単です — {{htmlelement("strong")}} 要素は閉じられておらず、行/列情報はそれがどこにあるかを指し示しています。</li> + <li>"End tag <code>strong</code> violates nesting rules": これは間違って入れ子になった要素を指摘し、行/列情報はそれがどこにあるかを指摘します。</li> + <li>"End of file reached when inside an attribute value. Ignoring tag": これはかなり不可解です。ファイルの末尾が属性値の内側に表示されるため、おそらくファイルの末尾近くのどこかに適切に形成されていない属性値があるという事実を意味します。ブラウザがリンクをレンダリングしないという事実は、どの要素が問題になっているかについての良い手がかりを与えるはずです。</li> + <li>"End of file seen and there were open elements": これは少しあいまいですが、基本的には適切に閉じる必要がある開いている要素があるという事実を指します。行番号はファイルの最後の数行を指しており、このエラーメッセージには open 要素の例を示すコード行が付いています。 + <pre class="line-numbers language-html notranslate"><code class="language-html">example: <a href="https://www.mozilla.org/>link to Mozilla homepage<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>ul</span><span class="punctuation token">></span></span>↩ <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span>↩<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + + <div class="note"> + <p><strong>メモ</strong>: 閉じ引用符が抜けている属性は、文書の残りの部分が属性の内容として解釈されるため、open 要素になる可能性があります。</p> + </div> + </li> + <li> + <p>"Unclosed element <code>ul</code>": {{htmlelement("ul")}} 要素は正しく閉じられているので、これはあまり役に立ちません。閉じ引用符がないために {{htmlelement("a")}} 要素が閉じられないため、このエラーが発生します。</p> + </li> +</ul> + +<p>すべてのエラーメッセージが何を意味するのかわからない場合でも、心配しないでください<span> — </span>一度にいくつかのエラーを修正してみることをお勧めします。 それから、どんなエラーが残っているかを示すためにあなたの HTML を再検証することを試みてください。以前のエラーを修正すると他のエラーメッセージも消えてしまうことがあります。つまりはドミノ効果で、単一の問題が原因でいくつかのエラーが発生することがあるということです。</p> + +<p>出力に次のバナーが表示されたら、エラーがすべて解決したことがわかります。</p> + +<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="まとめ">まとめ</h2> + +<p>ここでは HTML のデバッグについて紹介しました。これは、後で CSS、JavaScript、およびその他の種類のコードのデバッグを始めるときに頼りになる便利なスキルです。<br> + また <span class="tlid-translation translation" lang="ja"><span title="">HTMLモジュールの学習に関する記事の紹介の終わりにもなります。今、あなたは私たちの評価で自分自身をテストすることに進むことができます。最初のものは以下にリンクされています。</span></span></p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> + +<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> +</ul> |