diff options
Diffstat (limited to 'files/ja/learn/common_questions/what_is_a_url/index.html')
| -rw-r--r-- | files/ja/learn/common_questions/what_is_a_url/index.html | 159 |
1 files changed, 159 insertions, 0 deletions
diff --git a/files/ja/learn/common_questions/what_is_a_url/index.html b/files/ja/learn/common_questions/what_is_a_url/index.html new file mode 100644 index 0000000000..433ead1fa4 --- /dev/null +++ b/files/ja/learn/common_questions/what_is_a_url/index.html @@ -0,0 +1,159 @@ +--- +title: URL とは何か +slug: Learn/Common_questions/What_is_a_URL +tags: + - Infrastructure + - URL + - urls + - インフラ + - リソース + - 初心者 +translation_of: Learn/Common_questions/What_is_a_URL +--- +<div class="summary"> +<p>この記事では Uniform Resource Locators (URL) について説明し、その内容と構造を説明します。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>まず<a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットの仕組み</a>、<a href="/ja/docs/Learn/Common_questions/What_is_a_web_server">ウェブサーバーとは何か</a>、および <a href="/ja/docs/Learn/Common_questions/What_are_hyperlinks">ウェブ上のリンクの背後にある概念</a>を知る必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>URL の内容とウェブ上での URL の仕組みを学習します。</td> + </tr> + </tbody> +</table> + +<h2 id="Summary" name="Summary">概要</h2> + +<p><span class="seoSummary"><strong><dfn>URL</dfn></strong> は{{Glossary("Hypertext", "ハイパーテキスト")}}や {{Glossary("HTTP")}} とともに、ウェブの重要な概念の一つです。{{Glossary("Browser", "ブラウザー")}}がウェブ上の公開されたリソースを取得するために使用するメカニズムです。</span></p> + +<p><strong>URL</strong> は <em>Uniform Resource Locator</em> の略です。URL はウェブ上の特定の一意のリソースのアドレスにすぎません。理論的には、それぞれ有効な URL は一意のリソースを指しています。そのようなリソースは HTML ページ、 CSS 文書、画像などである可能性があります。実際には一部例外もあります。最も一般的なものは、もはや存在しないリソースや移動したリソースを指す URL です。URL で表されるリソースと URL 自体はウェブサーバーによって処理されるため、ウェブサーバーの所有者がそのリソースとその関連 URL を慎重に管理する必要があります。</p> + +<h2 id="Active_Learning" name="Active_Learning">アクティブラーニング</h2> + +<p><em>アクティブラーニングはまだありません。<a href="/ja/docs/MDN/Getting_started">協力してください</a>。</em></p> + +<h2 id="Deeper_dive" name="Deeper_dive">より深く</h2> + +<h3 id="Basics_anatomy_of_a_URL" name="Basics_anatomy_of_a_URL">基本: URL の解剖</h3> + +<p>URL の例を次に示します。</p> + +<pre>https://developer.mozilla.org +https://developer.mozilla.org/en-US/docs/Learn/ +https://developer.mozilla.org/en-US/search?q=URL</pre> + +<p>これらの URL のいずれかをブラウザーのアドレスバーに入力して、関連するページ (リソース) をロードするように指示することができます。</p> + +<p>URL はさまざまな部分で構成されていますが、必須のものと任意のものもあります。次の URL を使用して最も重要な部分を見てみましょう。</p> + +<pre>http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument</pre> + +<dl> + <dt><img alt="プロトコル" src="https://mdn.mozillademos.org/files/15766/mdn-url-protocol@x2_update.png" style="height: 70px; width: 440px;"></dt> + <dd><code>http</code> はプロトコルです。 URL の最初の部分は、ブラウザーが使用するプロトコルを示します。プロトコルとは、コンピューターネットワークを介してデータを交換または転送するための設定方法です。通常、ウェブサイトの場合は HTTP プロトコルまたはそのセキュアバージョンの HTTPS です。ウェブにはこれらの2つのうちの1つが必要ですが、ブラウザーは <code>mailto:</code> (メールクライアントを開くため) や <code>ftp:</code> などの他のプロトコルを扱う方法も知っていますので、そのようなプロトコルを見ても驚かないでください。</dd> + <dt><img alt="ドメイン名" src="https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>www.example.com</code> はドメイン名です。リクエストされるウェブサーバーを示します。他にも {{Glossary("IP address", "IP アドレス")}} を直接使用することも可能ですが、あまり便利ではないため、ウェブ上では頻繁に使用されることはありません。</dd> + <dt><img alt="ポート番号" src="https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>:80</code> はポート番号です。これはウェブサーバー上のリソースにアクセスするために使用される技術的な「ゲート」を示します。ウェブサーバーが HTTP プロトコルの標準ポート (HTTP の場合は80、 HTTPS の場合は443) を使用してそのリソースへのアクセスを許可する場合、通常は省略されます。それ以外の場合は必須です。</dd> + <dt><img alt="ファイルへのパス" src="https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>/path/to/myfile.html</code> は、ウェブサーバー上のリソースへのパスです。初期のウェブでは、このようなパスはウェブサーバー上の物理的なファイルの場所を表していました。今日ではほとんどの場合、物理的なものではなくウェブサーバーによって処理される抽象的なものです。</dd> + <dt><img alt="引数" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>?key1=value1&key2=value2</code> は、ウェブサーバーに提供される追加の引数です。これらの引数は <code>&</code> 記号で区切られたキー/値のペアのリストです。ウェブサーバーは、リソースを返す前にこれらの引数を使用して追加の処理を行うことができます。各ウェブサーバーには引数に関する独自のルールがありますので、特定のウェブサーバーが引数を処理するかどうかを確認する確実な方法は、ウェブサーバーの所有者に問い合わせることだけです。</dd> + <dt><img alt="アンカー" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>#SomewhereInTheDocument</code> は、リソース自体の別の部分へのアンカーです。アンカーはリソース内の一種の「ブックマーク」を表し、ブラウザーにそのブックマークされた場所にあるコンテンツを表示するための指示を与えます。たとえば、 HTML 文書では、ブラウザーはアンカーが定義されている位置までスクロールします。ビデオやオーディオ文書では、ブラウザーはアンカーが表す時刻に移動しようとします。 <strong>#</strong> の後の部分は<strong>フラグメント識別子</strong>とも呼ばれ、リクエストとともにサーバーに送信されることはありません。</dd> +</dl> + +<p>{{Note('URL に関する<a href="https://ja.wikipedia.org/wiki/Uniform_Resource_Locator">他の部分と規則</a>もありますが、それらは通常のユーザーやウェブ開発者には関係ありません。これについて心配する必要はありません。完全に機能する URL を構築して使用するためにそれらを知る必要はありません。')}}</p> + +<p>URL を通常の郵送先住所のように考えるといいかもしれません。<em>プロトコル</em>は、使用したい郵便サービスを表し、<em>ドメイン名</em>は都市または町であり、<em>ポート番号</em>は郵便番号のようなものです。<em>パス</em>は郵便物が配信される建物を表します。<em>引数</em>は建物内の部屋番号などの追加情報を表します。最後に、<em>アンカー</em>は郵便物の宛先に当たる実際の人物を表します。</p> + +<h3 id="How_to_use_URLs" name="How_to_use_URLs">URL の使い方</h3> + +<p>ブラウザーのアドレスバーの中に正しく URL を入力すれば、それに対応するリソースを得ることができます。しかし、これは氷山の一角にすぎません。</p> + +<p><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">後で説明する</a> {{Glossary("HTML")}} 言語では、 URL を幅広く使用しています。</p> + +<ul> + <li>{{HTMLElement("a")}} 要素により、他の文書へのリンクを生成する</li> + <li>{{HTMLElement("link")}} や {{HTMLElement("script")}} のような様々な要素を介して、文書を関連するリソースと結びつける</li> + <li>画像 ({{HTMLElement("img")}} 要素による)、動画 ({{HTMLElement("video")}} 要素による)、音声と音楽 ({{HTMLElement("audio")}} 要素による) などのメディアを表示する</li> + <li>{{HTMLElement("iframe")}} 要素により、他の HTML 文書を表示する</li> +</ul> + +<div class="note"> +<p><strong>メモ:</strong> <code><script></code>, <code><audio></code>, <code><img></code>, <code><video></code> を使用する場合など、ページの一部としてリソースを読み込む URL を指定する場合は、HTTP と HTTPS の URL のみを使用してください。たとえば FTP を使用しても、特に安全になることはなく、、多くのブラウザーでは対応していません。</p> +</div> + +<p>{{Glossary("CSS")}} や {{Glossary("JavaScript")}} などの他の技術は、URL を広範囲に使用し、真にウェブの中核です。</p> + +<h3 id="Absolute_URLs_vs_relative_URLs" name="Absolute_URLs_vs_relative_URLs">絶対 URL と相対 URL</h3> + +<p>上記で見たものは<em>絶対 URL</em> と呼ばれていますが、<em>相対 URL</em> と呼ばれるものもあります。その違いが何を意味するのかをもっと詳しく調べてみましょう。</p> + +<p>URL の必須部分は、その URL が使用されているコンテキストによって大きく異なります。ブラウザーのアドレスバーでは、 URL にはコンテキストがありません。そのため、上で見たように、完全 (または<em>絶対</em>) URL を指定する必要があります。プロトコル (ブラウザーは既定で HTTP を使用します) やポート番号 (対象となるウェブサーバーが通常以外のポートを使用している場合にのみ必要) を含める必要はありませんが、 URL の他の部分はすべて必要です。</p> + +<p>HTML ページ内など、文書内で URL が使用されている場合は状況が少し異なります。ブラウザーはすでに文書自身の URL を持っているので、この情報を文書内で利用される URL の欠けている部分を補うために利用することができます。<em>絶対 URL</em> と<em>相対 URL</em> は、 URL の<em>パス</em>の部分を見るだけで区別することができます。 URL のパスの部分が "<code>/</code>" の文字で始まっていれば、ブラウザーは現在の文書で指定されているコンテキストを参照せずに、サーバーの最上位のルートからそのリソースを取得します。</p> + +<p>これを明確にするためにいくつかの例を見てみましょう。</p> + +<h4 id="Examples_of_absolute_URLs" name="Examples_of_absolute_URLs">絶対 URL の例</h4> + +<dl> + <dt>完全 URL (以前に使用したものと同じ)</dt> + <dd> + <pre>https://developer.mozilla.org/en-US/docs/Learn</pre> + </dd> + <dt>暗黙のプロトコル</dt> + <dd> + <pre>//developer.mozilla.org/en-US/docs/Learn</pre> + + <p>この場合、ブラウザーはその URL をホストしている文書を読み込むために使用されたものと同じプロトコルで、その URL を呼び出します。</p> + </dd> + <dt>暗黙のドメイン名</dt> + <dd> + <pre>/en-US/docs/Learn</pre> + + <p>これは、 HTML 文書内の絶対 URL の最も一般的な使用例です。ブラウザーは、その URL をホストしている文書を読み込むために使用されたものと同じプロトコルおよび同じドメイン名を使用します。<strong>メモ:</strong> プロトコルを省略せずにドメイン名だけ省略することはできません。</p> + </dd> +</dl> + +<h4 id="Examples_of_relative_URLs" name="Examples_of_relative_URLs">相対 URL の例</h4> + +<p>次の例をよく理解するために、これらの URL が <code>https://developer.mozilla.org/en-US/docs/Learn</code> という URL にある文書内から呼び出されると仮定しましょう。</p> + +<dl> + <dt>サブリソース</dt> + <dd> + <pre>Skills/Infrastructure/Understanding_URLs +</pre> + URL が <code>/</code> で始まっていないので、ブラウザーは現在のリソースを含んでいるディレクトリのサブディレクトリでその文書を見つけようとします。そのため、この例では本当に達したい URL である <code>https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs</code> に到達します。</dd> + <dt>ディレクトリツリーを遡る</dt> + <dd> + <pre>../CSS/display</pre> + + <p>この場合、 UNIX ファイルシステムの世界から継承された <code>../</code> の表記規則を使用して、ブラウザーに1つのディレクトリから上に移動したいことを伝えます。つまり、 <code>https://developer.mozilla.org/en-US/docs/Learn/../CSS/display</code> という URL にアクセスしたいわけで、これは <code>https://developer.mozilla.org/en-US/docs/CSS/display</code> のように単純化できます。</p> + </dd> +</dl> + +<h3 id="Semantic_URLs" name="Semantic_URLs">セマンティック URL</h3> + +<p>URL はとても技術的な香りがするにもかかわらず、人間が読めるウェブサイトの入口を表します。覚えることができ、誰でもブラウザーのアドレスバーに入力することができます。人々はウェブの中核にいるので、<a href="https://en.wikipedia.org/wiki/Semantic_URL"><em>セマンティック URL</em></a> と呼ばれるものを構築することがベストプラクティスと考えられています。セマンティック URL は、技術的な知識に関係なく、誰でも理解できる固有の意味を持つ単語を使用します。</p> + +<p>言語的セマンティックはもちろんコンピューターとは無関係です。おそらくランダムな文字を組み合わせたように見える URL を見たことがあるでしょう。しかし、人間が読める URL を作成することには多くの利点があります。</p> + +<ul> + <li>操作することがより簡単になります。</li> + <li>ウェブ上でどこにいるのか、何をしているのか、何を読んでいるのか、何と対話しているかといった観点のことが、ユーザーにとって明確になります。</li> + <li>検索エンジンによっては、関連するページを分類するためにこれらのセマンティックを使用することがあります。</li> +</ul> + +<h2 id="Next_steps" name="Next_steps">次のステップ</h2> + +<ul> + <li><a href="/ja/docs/Learn/Common_questions/What_is_a_domain_name">ドメイン名とは</a></li> +</ul> |