LLM注意
Claude Opus 4.6のチャットさんとの勉強会まとめです。
アレコレ＝利点と面倒な（気をつけるべき）点
データを外に出すことの意義
要するに、「動きの仕組み本体」とは別にデータだけを出し入れできることの利点である。
プロの現場では 「関心の分離（separation of concerns）」 と呼ばれる考え方らしい。
つまり単語にされるほど有名、かつ大事ってことか！？
具体的な内容としては、以下。
- プログラム本体（ ロジック 、もしくは動きの仕組み）を触らずにデータだけを触ってバグったら確実にデータの所為だから、原因探しが早く済む。
- プログラム本体を触らずにデータの編集ができるから、プログラムを使い回して別データで運用できる（もしくは逆に、同じデータの形式にしておけば別プログラムで使い回せる）。
- 鯖缶的には、他のプログラムを配布元からもらってきて動かす時に、プログラムの変更は配布元に任せて、データのバックアップだけ頑張れば責任が取れるので、バックアップの大きさが少なくて済む。
では、そのデータを「取りに行く」とは？
何せ今までのHTMLファイルから放り出してしまうのである。
001-Webアプリとは・JavaScript周辺の基礎単語にてJavaScriptだけjsに放り出す……みたいなことが話に出ていたが、そこがロジック部分だとしても、更にデータを005-DOM操作、そしてイベント待ちで予習したように別形式で置いておける。
ここで、わざわざデータを「取りに行く」ことについて、クロードさんから「同じフォルダの中でも『取りに行く』（そしてその間待つ）」ことへの確認が入った。
こういう確認が飛んでくるということは、大きな意味が隠れているに違いないのである（超メタ発言）
ん、待てよ？
確か、006-番外編・OGP的なやつの取得って実は難敵な話が似たような話題……まさしくデータを取りに行く話だったような？
というわけで、取りに行くという話の中に、何処の誰が何処にある情報を取りに行く、その情報を求めている場所と情報置き場が「同じグループにあるから安全な取り引き」なのか「別のグループだけど安全協定結んでるからセーフ」なのか「別グループ、かつ無許可だからアウト」なのか判定しなきゃいけないのだろうと答えさせてもらった。
ここからが面倒な話のターンだった。
オリジンの壁、再び
そもそものオリジンの定義再確認
CORS（Cross-Origin Resource Sharing）の壁の話、そのままである。
JavaScriptの所属確認は、 プロトコル＋ドメイン＋ポートが完全一致 しているかどうか。
それ以上でも以下でもない。
同じPCの中かどうか、なんてことは、関係ないのである。
ドメインについてはPCやサービスの住所っぽいなぁというのが有名な話であるので、ちょっと今回は割愛するとしても……
ローカルサーバーを立てないとテストができない！？
まあ先ずは何故にエラーが出るのか考えてみよう
日頃、HTMLファイルを手打ちとかで作っている民ならば（そもそもの希少さ加減は横に置いておくとしても）、ファイルの確認としてダブルクリックしてブラウザで見ることもあるだろう。
すると、アドレスバーにはファイルのパスが並んでいることになる。
Google Chromeとかで開けたら、アドレスの前にわざわざ「ファイル」だなんて注釈までついてくる。
ところが、実はここにPC本体の住所がない。
ドメインもポートも分からない 、つまりオリジンの定義を満たしていないファイル扱いされてしまうのである。
いくらブラウザが「お前何処から来たんだ？」って所属を聞いてるのに「ドコってなぁに？」とか言われているに等しいこの状況、ブラウザからしたら不審極まりないファイルのJavaScriptを通せる訳がない。
そして出されるCORSエラー。
ローカルサーバーって？
外から決められたお作法（ プロトコル ）で接続すれば一定の答え（ファイルやプログラム）を返すのが サーバー 。
そして、その接続の手段というか、通行証の一環としてIPアドレスなりURLなりのアドレス（ ドメイン ）が提示されている。
おや？ つまりさっきスッポ抜けていた所属の話と繋がるぞ？
つまり自分のマシンで何となーくそのプロトコルとドメインを自己完結させればテストが出来るのでは……？
というわけで、 ローカルサーバー は、「形式的にはプログラムの納得する形の」「自分のマシンの中だけで完結する」内線番号的な住所を提供してくれる仕組みなのである。
せっかくなのでプロトコルとポートについて
プロトコルとは
プロトコルはそもそも英単語である。
直訳すると「 手順 」「 取り決め 」であり、世界共通で合意された通信のお作法を、ネットワーク世界ではプロトコルと呼んでいる。
クロードさんの挙げてくれたプロトコルの例は以下で、大体アドレスバーの先頭で分かるようになっているとのこと。
- http / https：Webページのやり取りに使う
- ftp：ファイル転送に使う（昔はよく使われた）
- ssh：リモートのサーバーに安全にログインするときに使う
- smtp / imap：メールの送受信
- file：ローカルファイルを直接指すときの印
なお、httpとhttpsは別のプロトコルである。
今となってはhttpで接続すると「暗号化されていません」とブラウザから警告が出されることから察せられる通り、通信の中身が外から見られるか、見られないかの差があり、それこそJavaScriptでhttpの側からhttpsの情報が変に抜けないように、別プロトコル＝同じドメインやポートでも別オリジン、とされているのだそうな。
ポートについて
こっちは概念だけなら簡単で、「同じドメイン（もしくはIPアドレス）の中にいる別々のプログラムに話しかけられるように割り振った入口」である。
複雑なのはポート番号の 暗黙の了解 の方。
また出た、暗黙。
暗黙の型変換 を見てから、もう暗黙って見るだけで警戒するように躾けられてしまったぜ……。
よく使われるプロトコルには「デフォルトで使うポート番号」の取り決めがあり、アドレスバーでは省略されていても、実際にはそのポートが叩かれているとのこと。
- http → 80番
- https → 443番
- ssh → 22番
- smtp → 25番
つまり実際のサイトの背後には、常に https://digital-garden.my-sky.blue:443みたいにポート番号が隠れているのである。
そしてデフォルトじゃないことをしたら、そのときはしっかりポート番号を示さないとアドレス違いとしてブラウザから見つけられない。
ローカル開発ではhttp://localhost:8000のようにポート番号を明示する案件が大量発生してるのだとか。
で、別ポートでは別プログラム（や、サービス）が走っている以上、それは最早「別のグループ」であり、別オリジン扱いとなる。
NOTE
ポート番号は0〜65535の範囲の整数で、0〜1023はwell-knownポートとして予約されている＝自由に使えるのは1024〜65535の範囲とのこと。
well-known ポート以外は、一般ユーザー権限で LISTEN できるらしい……というのは、まあ、今回とはまた別の、鯖缶的な雑学になるだろう。