Angular Routing のクエリパラメータと URL のクエリストリングは別物であると知った
index.html#/auth?a=b の a=b は Angular 世界の「クエリパラメータ」、
index.html?a=b#/auth の a=b は RFC3986 に規定されている「クエリストリング」、
であることが解った。どっちも同じ形式だったので正直混同してました。
以下、ChatGPT に聞いた時のログ。
実際には聞いただけじゃなくて console.log(new URL('http://localhost/index.html/#/auth?a=b')) などをして確認して理解した。
Q:
http://local.com/aaa?x=1&y=2 の x=1&y=2 をなんと呼びますか？
A:
http://local.com/aaa?x=1&y=2 の x=1&y=2 は、クエリストリング (query string) と呼ばれます。クエリストリングは、URLの末尾に ? 以降に続く、キーと値のペアの集合で、& で区切られます。Webアプリケーションでクエリストリングを使用することで、ユーザーからの情報を収集し、それを処理して特定の操作を実行することができます。
Q:
その仕様の出典は？
A:
クエリストリングの仕様については、RFC 3986に規定されています。RFC 3986は、Uniform Resource Identifier (URI): Generic Syntaxというドキュメントで、URIの構文に関する規則を定義しています。URIは、Web上のリソースを識別するための識別子であり、URLもURIの一種です。RFC 3986は、URIの構文に関する標準化された仕様となっており、多くのWebブラウザやWebサーバーがこれに準拠しています。
Q:
該当箇所を引用して原文と日本語文を出して
A:
RFC 3986 でクエリストリングの仕様が規定されています。以下は、RFC 3986 の5.2章 "Query Component" からの引用です。
原文：
"The query component contains non-hierarchical data that, along with data in the path component (Section 3.3), serves to identify a resource within the scope of the URI's scheme and naming authority (if any)."
日本語訳：
"クエリー部分には、非階層的なデータが含まれており、パス部分（3.3章）のデータとともに、URIのスキームおよび命名機関（ある場合）の範囲内でリソースを識別するために使用されます。"
Q:
もっと詳しく引用して
A:
以下は、RFC 3986 の3.4章 "Query" に記載されている、クエリストリングの仕様に関する詳細な引用です。
原文：
"The query component contains non-hierarchical data that, along with data in the path component (Section 3.3), serves to identify a resource within the scope of the URI's scheme and naming authority (if any). The query component is indicated by the first question mark ("?") character and terminated by a number sign ("#") character or by the end of the URI."
日本語訳：
"クエリー部分には、非階層的なデータが含まれており、パス部分（3.3章）のデータとともに、URIのスキームおよび命名機関（ある場合）の範囲内でリソースを識別するために使用されます。クエリー部分は、最初の疑問符（"?"）文字で示され、番号記号（"#"）文字またはURIの終わりで終了します。"
Q:
一方で Angular における URL http://local.com/#aaa?x=1&y=2 の x=1&y=2 はなんと呼びますか？
A:
Angularにおいて、http://local.com/#aaa?x=1&y=2 の x=1&y=2 の部分は「ハッシュクエリストリング (hash query string)」または「フラグメントクエリストリング (fragment query string)」と呼ばれることがあります。
これは、Angularがシングルページアプリケーション（SPA）として実行される場合、アプリケーションの内部ルーティングに使用されるためです。ハッシュ記号 "#" 以降の部分は、通常のクエリストリングと同様に、キーと値のペアの集合で、& で区切られます。ハッシュクエリストリングは、WebブラウザのURL履歴には表示されないため、SPAでのルーティングに使用されることが多いです。
Q:
その仕様の出典は？
A:
ハッシュクエリストリングまたはフラグメントクエリストリングの仕様については、以下の2つの仕様が関連しています。
RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax
RFC 3986は、Uniform Resource Identifier (URI) の構文に関する規則を定義するドキュメントであり、URIの一部であるフラグメント（ハッシュ）に関する規則を定めています。具体的には、5.2章 "Fragment Component" にて、フラグメントの構文について規定されています。
HTML Living Standard
HTML Living Standard では、フラグメント識別子に関する規則が定められています。フラグメントは、HTMLドキュメント内の特定の要素を参照するために使用されます。HTML Living Standardの11.1.3章 "The fragment identifier" にて、フラグメントの構文について規定されています。
これらの仕様は、ハッシュクエリストリングの仕様を規定するために参考にされることがあります。
Q:
Angular での「ハッシュクエリストリング (hash query string)」または「フラグメントクエリストリング (fragment query string)」の仕様の出典は？
A:
Angularにおける「ハッシュクエリストリング (hash query string)」または「フラグメントクエリストリング (fragment query string)」の仕様について、明確な仕様書は存在しません。
ただし、Angularが使用するルーティング機能であるAngular Routerに関するドキュメントでは、ルーティングに使用されるURLの形式について説明されています。
具体的には、Angular Routerが使用するURLの形式には、以下の2つがあります。
Path-based URL
通常のURL形式で、ホスト名の後ろにパスを指定します。
例: http://example.com/products
Hash-based URL
ハッシュ記号 "#" でパスとクエリストリングを区切り、ルーティングに使用します。
例: http://example.com/#/products?id=123
このドキュメントでは、Hash-based URL について説明されており、クエリストリングを含む場合についても言及されていますが、明確な仕様書として規定されているわけではありません。
Q:
そのリンクを出して
A:
Angular Routerに関するドキュメントは、Angular公式のドキュメントに掲載されています。
以下がそのリンクです。
Q:
つまり Angular における #aaa?x=1&y=2 は RFC 3986 のクエリストリングではない、という解釈でよいか？
A:
はい、そのように解釈することができます。
AngularにおけるHash-based URLの形式は、RFC 3986に規定される通常のURIとは異なります。Hash-based URLの中のハッシュ(#)の後ろに続く部分は、HTTPリクエストに含まれず、フロントエンドでのクライアント側でのみ利用されます。したがって、Hash-based URLの中のクエリストリングも、RFC 3986に規定されるクエリストリングとは異なるものとなります。
ただし、Angularにおいては、Hash-based URL内にクエリストリングを含めることができます。これは、フロントエンドでのルーティング機能に使用される独自の形式であり、RFC 3986の仕様には基づいていません。
Q:
なるほどありがとう
A:
どういたしまして。他に何かお困りのことがあれば、遠慮なくお尋ねください。お力になれるよう、最善を尽くします。
Discussion