0
0

More than 3 years have passed since last update.

Webとは? 学習二日目

Posted at

お疲れさまです!takumiです!
簡単に学習できたWebってなんぞやってことに簡単に理解できたらなと思います。

ほんと学習ログなので間違いがあれば教えて下さい!

Webの知識を持つ必要性

・基本的な知識があると応用が効く
・新しい技術・概念が出てきても習得しやすい

特にRailsをこれからやりたい人はここを分かってないと大変になる・・・。
なので簡単でもいいので理解しときましょって話です。

Webとはなにか

【結論】
インターネットを通じてドキュメント・テキスト・画像などを閲覧・変更できる技術

・・・まぁ我々がよく使うイメージで問題ないと思います。

ブラウザでサイトが表示される仕組みの理解

まずブラウザはHTML/CSS/JavaScriptという静的ファイルを読み込んでいます。
なのでこの読み込んだファイルをどう表示するのかはブラウザによって違います。

これがWeb制作していると痛いほどわかりますね。
Chromeだけならいいんですけど、IEでは表示が崩れてしまっていたりするのはこういうことなんですね。

ではブラウザは静的ファイルをどこから受け取っているのでしょうか?
それが「サーバー」の役割です。
ブラウザ(ブラウザはクライアントとも呼ばれる)はサーバーからファイルをダウンロードして読み込んでいます。

このブラウザとサーバーのやり取りによって我々はサイトを閲覧できるのです。

HTTP

では、このブラウザとサーバーとのやり取りですがルールが存在します。
それがHTTPという手法になります。

ここでは代表的な4つのメソッドを紹介します。

GET
ブラウザが「データくれや!!!!」ってサーバーにリクエストを投げます。
サーバーはブラウザにデータをわたします。
一番スタンダードな通信方法だと思います。
これによって静的ファイルを読み込んでいるのですね。

とくに/はindex.htmlをくれとか、/about.phpではabout.htmlをくれとかここでサーバーとの
ルールを決めているんですね。

POST
ブラウザが「データを保存してくれや!!!!」ってサーバーにリクエストを投げます。
サーバーはデータを保存します。

PUT
ブラウザが「データを変更してくれや!!!!」ってサーバーにリクエストを投げます。
サーバーはデータを保存します。

DELETE
ブラウザが「データを削除してくれや!!!!」ってサーバーにリクエストを投げます。
サーバーはデータを保存します。

以上4つになります。
Twitterなんかもこれらを全て駆使しているので皆さんも使ったことがあると思います。
普段は意識しないと思いますが、裏側ではこのような通信が行われているのです。

このようにサイトを閲覧するときはブラウザがサーバーに様々なメソッドを投げつけて
それに対応するアクションをサーバーが行い、それらの結果をブラウザに出力したりしているんですね。
では、ブラウザはそのサーバーをどうやって特定しているのでしょうか?
サーバーはこの世界に無数にあります。
このQiitaもどこかのサーバーに管理されています。

IPアドレス、DNS

サーバーにはIPアドレスという住所のようなものが割り当てられています。
これを元にブラウザはサーバーを特定して、特定のやり取りをしています。

しかし、IPアドレスは数字の羅列です。
これらの数字を人間が直感的に扱っていくのは正直面倒です。
なので人間が直感的にわかりやすいようにドメインというものが用意されています。
Qiitaであれば「qiita.com」がドメインになります。
ここで登場するのはDNS(ドメインネームシステム)です。
DNSを利用することでドメインからIPアドレスを取得することが出来ます。

流れを抑えましょう

①ブラウザがDNSに「qiita.comのIP教えてくれや」ってドメインを投げつけます。
そうするとDNSが「x.xxx.xxxx」やでーみたいな感じで数字を教えてくれます。
②そのIPを元にサーバーに「/にGETリクエストや!!」をリクエストします。
その後、サーバーからレスポンスをもらい静的ファイルを読み込んで出力しているんですね。

・・・・ちょっとはイメージをつかめたでしょうか。
より分かったりしたらどんどん書いていこうと思います!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0