Webのしくみ

This theory is not essential to writing web code in the short term, but before long you'll really start to benefit from understanding what's happening in the background.

Webのコードを書くのに、この理論は必須ではありません。しかしやがて、あなたが本物の力を得るために、バッググランドで何が起きているのかを理解することから始めましょう。

クライアントとサーバー

Computers connected to the Web are called clients and servers. A simplified diagram of how they interact might look like this:

Webに接続されたコンピューターはクライアントとサーバーと呼ばれます。次の画像はこれらがどのように相互作用するかを示す概略図です。

• Clients are the typical Web user's Internet-connected devices (for example, your computer connected to your Wi-Fi, or your phone connected to your mobile network) and Web-accessing software available on those devices (usually a web browser like Firefox or Chrome).
• クライアントは一般的なWebユーザーが使うインターネットに接続されたデバイス（例えば、あなたのコンピューターはWi-Fiに接続されている、もしくは、あなたのスマホはモバイルネットワークに接続されている）そして、これらのデバイスが利用可能なWebにアクセスできるソフトウェアのこと（通常はFirefoxやChromeなどのWebブラウザ）。
• Servers are computers that store webpages, sites, or apps. When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user's web browser.
• サーバーはウェブページ、サイト、アプリを保存するコンピューターです。クライアントデバイスがウェブページにアクセスしたいときに、ウェブページのコピーをクライアントマシン上にサーバーからダウンロードして、あなたのウェブブラウザに表示する。

ツールボックスの他の部分

The client and server we've described above don't tell the whole story. There are many other parts involved, and we'll describe them below.

For now, let's imagine that the Web is a road. On one end of the road is the client, which is like your house. On the other end of the road is the server, which is a shop you want to buy something from.

In addition to the client and the server, we also need to say hello to:

• Your Internet connection: Allows you to send and receive data on the Web. It's basically like the street between your house and the shop.
• インターネット接続： これはウェブ上でデータの送受信をできるようにします。
• TCP/IP: Transmission Control Protocol and Internet Protocol are communication protocols that define how data should travel across the Web. This is like the transport mechanisms that let you to place an order, go to the shop, and buy your goods. In our example, this is like a car or a bike (or your own two feet).
• TCP/IP： Transmission Control Protocol and Internet Protocol の略です。これはどうやってウェブ上でデータを移動させるかというコミュニケーションの手順を定義したものです。手紙に宛先、郵便番号など決まった手順、形式で書かないと送ることができません。それはWebであっても同じということです。
• DNS: Domain Name System Servers are like an address book for websites. When you type a web address in your browser, the browser looks at the DNS before retrieving the website. The browser needs to find out which server the website lives on, so it can send HTTP messages to the right place (see below). This is like looking up the address of the shop so you can access it.
• DNS： Domain Name System Servers の略です。これはウェブサイトのアドレス帳のようなものです。ブラウザでウェブアドレスを入力すると、ブラウザがウェブサイトを検索する前にDNSから見つける。ブラウザはウェブサイトがどのサーバーに住んでいるか知る必要がある、そうすることでHTTPメッセージを正しい場所に送ることができる（HTTPについては下記参照）。
• HTTP: Hypertext Transfer Protocol is an application protocol that defines a language for clients and servers to speak to each other. This is like the language you use to order your goods.
• HTTP: Hypertext Transfer Protocol  の略です。これはクライアントとサーバーがお互いに喋るために言葉を定義するアプリケーションプロトコルです。
• Component files: A website is made up of many different files, which are like the different parts of the goods you buy from the shop. These files come in two main types:
  • Code files: Websites are built primarily from HTML, CSS, and JavaScript, though you'll meet other technologies a bit later.
  • Assets: This is a collective name for all the other stuff that makes up a website, such as images, music, video, Word documents, and PDFs.
• Component files:  ウェブサイトは多くの異なるファイルで構成されます。これらのファイルは主に二つのタイプに当てはまる。
  • Code files:  ウェブサイトは主にHTML、CSS、JavaScriptから作られる。しかしあなたは後で多くの他の技術と知ることになるでしょう。
  • Assets： これは画像、音楽、動画、ドキュメント、PDFといったウェブサイトを構成するコード以外のほか全ての材料の集合的な名前です。

So what happens, exactly?

When you type a web address into your browser (for our analogy that's like walking to the shop):

1. The browser goes to the DNS server and finds the real address of the server that the website lives on (you find the address of the shop).
2. The browser sends an HTTP request message to the server asking it to send a copy of the website to the client (you go to the shop and order your goods). This message, and all other data sent between the client and the server, is sent across your internet connection using TCP/IP.
3. Provided the server approves the client's request, the server sends the client a "200 OK" message, which means "Of course you can look at that website! Here it is", and then starts sending the website's files to the browser as a series of small chunks called data packets (the shop gives you your goods, and you bring them back to your house).
4. The browser assembles the small chunks into a complete website and displays it to you (the goods arrive at your door — new stuff, awesome!).

DNS explained

Real web addresses aren't the nice, memorable strings you type into your address bar to find your favorite websites. They are strings of numbers, like this: 63.245.217.105.

This is called an IP address, and it represents a unique location on the Web. However, it's not very easy to remember, is it? That's why Domain Name Servers were invented. These are special servers that match up a web address you type into your browser (like "mozilla.org") to the website's real (IP) address.

Websites can be reached directly via their IP addresses. Try going to the Mozilla website by typing 63.245.217.105 into the address bar on a new browser tab.

Packets explained

Earlier we used the term "packets" to describe the format in which the data is sent from server to client. What do we mean here? Basically, when data is sent across the Web, it is sent as thousands of small chunks, so that many different web users can download the same website at the same time. If web sites were sent as single big chunks, only one user could download one at a time, which obviously would make the Web very inefficient and not much fun to use.

See also

• How the Internet works
• HTTP — an Application-Level Protocol
• HTTP: Let’s GET It On!
• HTTP: Response Codes

Credit

Street photo: Street composing, by Kevin D.