どうしてブラウザから世界中のWebページ（htmlファイル）を見られるの？【番外編】

木下雄策

2016.03.10

こんにちは。エンジニア特化型Q&Aサイト「teratail」のDevRel担当をしている、外部ライターの木下です。非エンジニア目線で書くWebプログラミング超入門記事、今回は番外編です。

第1回から第3回にかけて、「HTML/CSSを使ってブラウザに自己紹介ページを表示する」というのをおこなってきました。「ブラウザは、『●●.html』というファイルの中に書かれていることを読み込んで、画面に表示する」という役割がだいぶ掴めてきたと思います。しかし、そろそろ次のような疑問が湧いてきませんか？

「ふむふむ、自分のPCの中に置いてある「●●.html」ってファイルを表示するのはなんとなく分かった。でも、いつもブラウザで見ているのは、世界中に公開されているページだ……。なぜ自分のPCの中には存在しないファイルを表示できるんだ……？！」

……と。Webの世界に日常から慣れているみなさまなら、「インターネットで世界中と繋がっているからでしょ～」くらいの感覚で分かっているかもしれません。ですが、ここらへんの「なんとなく」のイメージは、今後Webプログラミングの学習を進めていくうえでの理解度に響いてきますので、もう少し具体的なイメージに落としこんでみましょう！　ということで今回は、世界中のファイルを自分のパソコンから見られる仕組みをまとめます！

URLは住所だ！……ってどういうこと？

「ブラウザは、『●●.html』というファイルの中に書いてあることを読み込んで画面に表示する」ということを第1回で説明しました。もう少し正確に言うと、「HTMLとCSS、JavaScriptで書かれたファイルを読み込んで、その中の書いてある内容を指示通りに表示する」ということです。

逆に言うと、それ以外のプログラミング言語で書いたものですとブラウザは読み込めません。ブラウザは基本的に「HTMLとCSS、JavaScriptしか読み込めないんです！」　重要なので2回言っておきます！

ブラウザの役割のイメージは下図です。

3.5-1.png

ではブラウザは、「どこ」にあるファイルを表示するのでしょうか？

ブラウザが表示するファイルは「URL」が示している

「どこ？」を示すものがURLです。ブラウザの左上の細い枠に書いてある「http://～」から始まるやつです。よく「URLは住所だ！」と言われているのですが、そんなことを言われてもよく分からないので、実例を通して見ていきましょう。

第3回でブラウザが表示した画面のURLを見てみます。「file:///C:/Users/y-kinoshita/Desktop/profile.html」って書いてますね。これはどういう意味なのでしょう？　その答え（超ザックリバージョン）が下図です。

3.5-2.png

上の図のブラウザに表示されているURL「file:///C:/Users/y-kinoshita/Desktop/profile.html」は、とてもざっくりと言うと「y-kinoshitaというコンピュータの中の、デスクトップにある、profile.htmlってファイルを読み込んで表示していますよ」という意味です。

なんとなくURLのイメージはつきましたか？

もう少しだけ細かく説明すると、下図のようになります（画面はWindowsです）。Windowsの方はご自分のパソコンで「click!!」と書かれているところを順にクリックしてみてください。

3.5-3.png

では図に沿って説明します。

「file:///C:/Users/y-kinoshita/Desktop/profile.html」というのは、

「『file:///C:』というこのパソコンのハードディスクってとこ（いろんなものを保存しておく場所）の中に、『ユーザー（Users）』というフォルダがあって、さらにその中に『y-kinoshita』というフォルダがあって、さらにその中に『デスクトップ（Desktop）』があって、さらにその中にある『profile.html』ってファイルですよ」

ということを示しています。そのため、このURLを変えることで、自分のPCの中のいろんな場所にあるファイルへアクセスできます。

例えば、「file:///C:/Users/y-kinoshita/Documents/programing/profile.html」でしたらどうでしょう？

「『このパソコン（file:///C:）』の中の、『ユーザー（Users）』の中の、『y-kinoshita』の中の『ドキュメント（Document）』の中の『programing』ってフォルダの中の、profile.html」

という意味ですね。「URLは住所だ！」というイメージが具体的になりましたか？

ちなみに、このようにURLを見て「●●の中に●●ってフォルダがあって、さらにその中に●●てフォルダがあって……」という感覚は後々重要になってくるので覚えておきましょう。「このサイトの構成はこうなっているんだな～」というのがわかり、だんだんWebでURL見るのが楽しくなります。

隣の人のファイルをブラウザで表示するにはどうしたらいい？

さて、「自分のPCのURLを変更すると、いろんな場所にあるファイルにアクセスできる」というイメージが湧いてきたかと思います。

では、今度はあなたが作ったそのファイルを隣のBさんが「俺のPCのブラウザで表示したいぜ！」と言ってきたらどうしましょうか？　2人のPCをケーブルなどで繋がない限り、BさんのPCからAさんのPCの中に置いてあるprofile.htmlにはアクセスはできません。

3.5-4.png

もし2人のPCをなんとか繋いで、BさんがAさんのファイルを見られたとしても、今度は他のCさんやDさんも「自分のブラウザで表示させたい！」と言い出すかもしれませんし、さらには福岡にいるFさんが「俺のパソコンでも見たいっちゃけど見れんと？」とか、はたまたアメリカにいるMさんまでも「Hey, A!! I wanna see your “profile.html” with my computer!!」なんて言ってきたら……。

困りますね。どうしたらいいのでしょう？

データセンターにあるレンタルサーバを借りよう

結論から言うと「レンタルサーバ」というものを借りて、そこに置いてしまえばいいんです。レンタルサーバとは、月額などで借りられる「世界中のPCとインターネットが繋がっている、たくさんのファイルが置ける場所」と一旦思ってください。

イメージは次の図のような感じです。レンタルサーバには誰でもアクセスできます。緑の矢印がインターネットで繋がっていることを示します。

3.5-6.png

容量がとても大きい、巨大なコンピュータがあると思ってください。そこの一部を借りることを「レンタルサーバを借りる」と言います。

ちなみに、コンピュータがどれほど巨大なのかと言うと、本物を写真で見たほうが早いと思うので、下記の記事を見てみてください。ちょっと古い記事ですが、Facebook社のデータセンターの写真です。大きすぎてテンション上がります！

・Facebook最新の自社サーバとデータセンターの写真や仕様が満載、高度なサーバ効率化技術を公開する「Open Compute Project」開始
http://gigazine.net/news/20110408_facebook_opencompute/

このコンピュータ郡を格納した施設を「データセンタ」と言います。

上記ページで見られるデータセンターはFacebook社のものです。特に貸出しはされていないと思うので、厳密には「レンタル」サーバではないですが、このような感じでひたすらコンピュータが並んでいる場所があり、その中の1、2個を借りるよというイメージです。

またレンタルサーバは、さくらインターネット社などが有名です。月額129円～と、かなりお手頃な価格から借りられるので、気になる方はぜひ試してみてください。

レンタルサーバにファイルを置くと世界中に公開できる

3.5-7.png

ということで、Aさんはみんなに自分が作ったprofile.htmlを見てもらうため、レンタルサーバを借ることにしました。「梅インターネット社（仮名）」の「http://www.ume.ne.jp/Asan」というURLが示す場所を借りたとします。

3.5-8.png

そして、借りたレンタルサーバに自分が作ったprofile.htmlをインターネットを経由して転送し、預けます。

3.5-9.png

BさんはAさんのプロフィールページを見るため、Aさんの借りたレンタルサーバの中にあるprofile.htmlにアクセスします。

3.5-10.png

「アクセスします」というのは、具体的には上記のようにブラウザに直接URLを打ち込むということです。

3.5-11.png

すると「http://www.ume.ne.jp/Asan」というURLを辿って、行き着いた先にあるprofile.htmlをブラウザが読み込んでくれて、その中身を表示してくれます。

3.5-12.png

もちろんBさん以外もアクセスできるので、誰でもAさんの自己紹介ページを閲覧できます。

3.5-13.png

さらにレンタルサーバは、インターネットを通じて日本中のPCと繋がっているので、福岡にいるFさんや北海道にいるHさんも閲覧できます。

3.5-14.png

そしてさらに、世界中の人々だって見ることができます。まさにwww（World Wide Web：世界中に張り巡らされた蜘蛛の巣）ですね！

ちなみに今回の内容は、下記スライドにてザックリとまとめているので、ザッと復習したいときはぜひご活用してください。世界中のインターネットを物理的につないでいる「海底ケーブル」などにも少し触れています。（海をまたいで、国と国が物理的にケーブルで繋がっているなんてテンション上がりますよね！）

・どうしてブラウザから世界中のWebページが見れるの？
http://www.slideshare.net/YusakuKinoshita/web-58228596

また、レンタルサーバを借りたあと、自分のPCからレンタルサーバにファイルを転送するにはファイル転送用のソフトが必要です。WindowsだとWinSCPが有名です。Macだったら、Cyberduckとかですね。「ファイル転送　Windows」や「ファイル転送　Mac」といったワードで検索すると情報がでてきます。

あと、今日話した内容はネットワークの話の超超超………基礎なので、ネットワークのことをもっと知りたいという方には、下記の本がオススメです。分かりやすすぎる上に、ストーリーもおもしろいので、個人的には最近読んだ本の中で一番テンション上がったやつです。