画面とブラウザの役割｜PC・ブラウザ・ファイルの基本

このページはプロモーション（広告）を含みます。

PC・ブラウザ・ファイルの基本（初級・読む20分＋演習25分）

この授業のゴール

• PC・OS・ブラウザ・Webページ・自分のデータの5層を区別し、どの層に何があるか説明できる
• URLを scheme・host・path・query・fragment に分けて読める
• 学習アプリのノートがどこに自動保存されるかを説明し、再読込で確かめられる
• 「保存済み」の表示と、ダウンロードしたファイルの違いを区別できる

仕事でどう使うか

データ分析や機械学習の仕事は、ほぼすべてブラウザ（またはブラウザで動く道具）の上で始まります。画面のどこに何があり、自分の作業がどこに残るのかを知らないと、「昨日書いた分析メモが消えた」「別のPCで開けない」という事故が起きます。

この授業の目的は、操作の暗記ではなく「何がどこにあるか」の地図を持つことです。

前提

この授業は最初の授業です。前提知識は要りません。診断テストを省略して始めても問題ありません。途中でやめたときは、このページを開き直すと、学習位置とノートが戻ります（その仕組みは本文で確認します）。

使う言葉を先に並べます。本文で順に説明するので、今は覚えなくて構いません。

• OS（Operating System：基本ソフト）：PCやスマートフォンを動かす土台。Windows、macOS、Linux、iOS、Androidなど
• ブラウザ：Webページを受け取って表示するアプリ。Chrome、Edge、Safari、Firefoxなど
• URL（Uniform Resource Locator：Web上の場所を表す文字列）

この教材のコードは画面内で実行できます。実行 ボタンを押すと、ブラウザの中の小さなPython環境が動きます。

身近な状況：昨日のノートが見つからない

Aさんは、学習アプリのノート欄に「購入率の分母は来店者」と書いて、昨日の学習を終えました。今日、別のPCで同じアプリを開くと、ノート欄は空でした。Aさんは「消えた」と思いましたが、実際には消えていません。昨日のPCのブラウザの中に残っています。

この食い違いは、画面の裏にある層を区別すると説明できます。

Aさんのノートは、第3層（ブラウザ内の記録）に入っていました。別のPCは別のブラウザなので、その記録は見えません。画面は同じでも、中身が保存されている場所は別です。

直感的な説明：ブラウザは「窓口」である

ブラウザを銀行の窓口にたとえます。

1. あなたが窓口（アドレスバー）に「この場所の資料をください」と頼みます。
2. 窓口は、遠くの倉庫（サーバー：Webページを配る側のコンピューター）に問い合わせます。
3. 倉庫から資料（HTML、画像、プログラム）が届き、窓口がそれを整えて画面に表示します。
4. あなたが何かを入力すると、その入力は窓口の手元メモ（ブラウザ内の記録）に残ります。倉庫には送られないことがあります。

この学習アプリのノートは、手順4の「手元メモ」に当たります。教材そのもの（文章や練習問題）は誰が開いても同じで公開されていますが、あなたのノートや学習位置はあなたのブラウザにだけあります。

たとえの限界：実際には、入力を倉庫に送るアプリも多くあります（オンラインの表計算など）。どちらの方式かはアプリごとに違うので、「保存済み」と出たときはどこに保存されたのかを確認する習慣をつけます。

正確な定義：URL とブラウザ内の記録

URL は次の部品でできています。

Pythonの urllib.parse.urlparse(url) は、URL（文字列 str）を受け取り、これらの部品を持つ結果オブジェクトを返します。p.scheme、p.hostname、p.path、p.query、p.fragment で各部品（すべて文字列）を取り出せます。

from urllib.parse import urlparse
url = "https://learn.example.test/lessons/ON01-L01?tab=note#summary"
p = urlparse(url)
print("scheme  :", p.scheme)
print("host    :", p.hostname)
print("path    :", p.path)
print("query   :", p.query)
print("fragment:", p.fragment)

出力は順に https、learn.example.test、/lessons/ON01-L01、tab=note、summary です。

ブラウザ内の記録は、原則として「どのサイトか」（scheme と host とポート番号の組、これをオリジンと呼びます）ごとに分けて保管されます。同じブラウザでも、オリジンが違えば別の引き出しです。さらに、ブラウザの種類・プロファイル（利用者ごとの設定の単位）・PCが違えば、記録は共有されません。

段階付き例題：ノートを書いて、再読込で確かめる

問題：ノート欄に「購入率の分母は来店者」と入力し、この記録が今回の保存方式で残ることを確かめる。

ステップ1：入力する（入力）。ノート欄をクリックし、短文を入力する。

ステップ2：保存の表示を探す（処理）。画面のどこかに「保存済み」に当たる表示が出るのを待つ。表示の位置や文言は版によって異なるので、見つからないときは数秒待ってから画面全体を見る。

ステップ3：再読込する（処理）。ブラウザの再読込ボタン（丸い矢印）を押す。これは、ページを倉庫から受け取り直す操作です。

ステップ4：結果を見る（出力）。ノートの文と、学習していた授業の位置が戻っていれば、今回の自動保存は確認できたことになります。

ステップ5：意味を言葉にする（解釈）。確認できたのは「このPCの、このブラウザの、このURLで開いたとき」に戻る、ということだけです。

注意：CSVなどをダウンロードしても、ノートを保存した証拠にはなりません。ダウンロードは別の保存先（PCのフォルダ）にファイルを作る操作で、自動保存とは関係がないからです（保存・ダウンロード・アップロードで扱います）。

操作して理解する：オリジンごとに引き出しが違う

次のコードは、ブラウザ内の記録を辞書（キーと値の組を持つPythonのデータ。型は dict）で真似た小さな模型です。キーに「scheme と host の組」を使い、ノートを保管します。

from urllib.parse import urlparse

saved = {}   # 型: dict。キー = (scheme, host)、値 = ノートの文字列

def origin(url):
    p = urlparse(url)
    return (p.scheme, p.netloc)   # netloc は host（とポート）の部分

def write_note(url, text):
    saved[origin(url)] = text

def read_note(url):
    return saved.get(origin(url), "(空)")   # 無ければ "(空)"

write_note("https://learn.example.test/lessons/ON01-L01", "購入率の分母は来店者")
print(read_note("https://learn.example.test/lessons/ON01-L02"))
print(read_note("https://other.example.test/lessons/ON01-L01"))
print(read_note("http://learn.example.test/lessons/ON01-L01"))

出力は1行目が 購入率の分母は来店者、2行目と3行目が (空) です。

• 1行目：path が違っても、scheme と host が同じなので同じ引き出し。
• 2行目：host が違うので別の引き出し。
• 3行目：scheme が http に変わっただけで別の引き出し。

試してみる：write_note の URL の https を http に変えて実行すると、3行目だけが入力した文字になり、1行目が (空) に変わります。実際のブラウザも、ブックマークのURLが少し違うだけで「ノートが消えた」ように見えることがあります。ノートが見えないときは、まずURLの scheme と host を確認してください。

発展：記録が消える条件と、消えても困らない運用

ブラウザ内の記録は、次の場合に失われたり、見えなくなったりします。

• 利用者が「サイトデータの削除」「閲覧履歴の消去」を実行した
• プライベートウィンドウ（シークレットウィンドウ）で入力し、閉じた
• ブラウザの空き容量が不足し、ブラウザが古い記録を整理した
• 別のプロファイル・別のブラウザ・別のPCで開いた

これらはブラウザの仕様であり、アプリの不具合とは限りません。仕様の細部（容量の上限、整理の条件）はブラウザの種類と版で異なります。執筆時点（2026年）の一般的な説明であり、最新は各ブラウザの公式ヘルプで確認してください。

運用としては、大事なノートはファイルとして書き出して別の場所にも置くのが安全です。「ブラウザ内の記録」は便利な下書き置き場であり、唯一の保管場所にしないこと。この考え方は 保存・ダウンロード・アップロード の保存とダウンロード、エラー時の切り分けとバックアップ のバックアップにつながります。

また、https は通信の暗号化を意味しますが、ページの内容が安全であることまでは保証しません。安全確認は 文字コードと安全なファイル確認 で扱います。

よくある失敗

失敗1：別のPC（別のブラウザ）で開いて「消えた」と判断する

誤った判断：「昨日のPCで書いたノートが、今日のノートPCで空だった。サービスが消した。」

なぜ誤りか：ブラウザ内の記録はPCとブラウザごとに別です。次のように、保管場所が違うだけです。

saved = {
    ("昨日のPC", "Chrome"): "購入率の分母は来店者",
}
today = ("今日のノートPC", "Chrome")
print(saved.get(today, "(空)"))
print(saved.get(("昨日のPC", "Chrome"), "(空)"))

出力は (空) と 購入率の分母は来店者 です。直し方：書いたPCとブラウザで開き直す。複数の端末で使うなら、ノートをファイルに書き出して移す。

失敗2：プライベートウィンドウで入力して閉じる

誤った例：プライベートウィンドウでノートを書き、「保存済み」の表示を見て安心して閉じた。

なぜ誤りか：プライベートウィンドウは、閉じると中で作られた記録を破棄する仕組みです。「保存済み」の表示は、そのウィンドウが開いている間は保存されているという意味にしかなりません。

直し方：記録を残したい作業は通常のウィンドウで行う。やむを得ずプライベートウィンドウを使うときは、閉じる前にファイルへ書き出す。確認は「閉じて、通常ウィンドウで開き直し、戻るか」で行います。

失敗3：「保存済み」の表示を見ずに閉じる／ダウンロードで保存したと思う

誤った例（1）：入力した直後にタブを閉じた。自動保存が間に合わなかった可能性があります。入力後は表示を待ち、再読込して確かめます。

誤った例（2）：ノートの代わりに、教材CSVをダウンロードして「保存した」と報告した。

note_in_browser = "購入率の分母は来店者"
downloads_folder = ["ab_test.csv"]          # ダウンロードしたファイル
print("ノートはファイルにあるか:", any("note" in f for f in downloads_folder))
print("ノートはブラウザ内にあるか:", bool(note_in_browser))

出力は False と True です。CSVはデータのファイルで、ノートの文は入っていません。直し方：「何を」「どこに」保存したのかをセットで言う（例：ノートの文をブラウザ内に自動保存、CSVはダウンロードフォルダ）。

まとめ

• 画面の裏には、PC・OS・ブラウザ・Webページ・自分のデータの5層がある。何がどの層にあるかを言えるようにする。
• この学習アプリの自動保存はブラウザ内の記録で、PCのフォルダのファイルとは保存先が違う。
• ブラウザ内の記録は、ブラウザ・プロファイル・PC・オリジン（scheme と host の組）ごとに別の引き出しになる。
• 確認の基本は「入力→保存済みの表示→再読込→戻ったか」。確認できたのは同じ条件の範囲だけ。
• 大事なものはファイルに書き出して別の場所にも置く。保存したと言うときは「何を・どこに」を添える。

用語

ブラウザ（web browser）

Webページを受け取って画面に表示するアプリ。入力内容を自分の端末内に記録することもある。

URL（Uniform Resource Locator）

Web上の場所を表す文字列。scheme、host、path、query、fragment などの部品でできている。

オリジン（origin）

scheme・host・ポート番号の組。ブラウザ内の記録は、オリジンごとに別々に保管される。

サーバー（server）

Webページやデータを配る側のコンピューター。

ブラウザ内の記録（browser storage）

ブラウザが利用者の端末の中に保管する小さなデータ。サイトデータの削除などで消える。

よくある質問

なぜブラウザの仕組みまで知る必要があるのですか？

仕事で使うほぼすべての道具がブラウザ上で動くからです。入力した内容がブラウザ内にあるのか、サーバーにあるのか、ファイルにあるのかを区別できないと、「消えた」と慌てたり、情報管理のルールを守れなかったりします。

ブラウザとOSの違いは何ですか？

OS（Windowsなど）はPC全体を動かす基本ソフトで、ファイルやフォルダを管理します。ブラウザはOSの上で動く1つのアプリです。ブラウザ内の記録はブラウザが管理し、ダウンロードしたファイルはOSのフォルダに置かれます。

「保存済み」と出たのに消えるのはなぜですか？

「保存済み」は「ある場所に保存した」という意味で、その場所が永続とは限りません。プライベートウィンドウ、サイトデータの削除、別のブラウザなど、場所が変わると見えなくなります。何を・どこに保存したかをセットで確認してください。

別のブラウザ（EdgeとChromeなど）でも同じノートを見られますか？

見られません。ブラウザごとに記録が別だからです。複数の端末やブラウザで使いたい場合は、ノートをファイルとして書き出して移します（保存・ダウンロード・アップロード）。

スマートフォンでも同じように動きますか？

基本の考え方は同じですが、スマートフォンのブラウザは別のブラウザなので、PCのノートは見えません。閲覧は携帯でもできますが、ファイルの取り込みが必要な作業は、PCで行うほうが確実です。

https なら安全と考えてよいですか？

いいえ。https は通信が暗号化されていることを示すだけで、そのサイトの運営者が信頼できること、配っているファイルが安全なことまでは保証しません。ファイルの安全確認は 文字コードと安全なファイル確認 で扱います。

確認問題

次に学ぶこと

次は クリック・入力・選択・コピー で、クリック・入力・選択・コピーという基本操作を、間違えにくい手順で整理します。保存とダウンロードの違いは 保存・ダウンロード・アップロード で詳しく扱います。

この授業の確認問題だけでモジュールの習得とはしません。ON01 の総合テストと、CSVを使った自力課題で判定します。