ブラウザとは・ブラウザの仕組み
３回目の投稿はブラウザについて。みんな当たり前にインターネット使ってるけど、ヘタすると名前すら知らないこともある。 webエンジニアだったらお世話になる機能も沢山あるので詳しくなっていて損はない。
ブラウザ
語源：英語のbrowse（見る）の名詞系からbrowser。正確にはwebブラウザ。
インターネットを経由して情報を閲覧するためのソフトウェア。いくつかの種類がある。代表的なのは下記。 - Google Chrome - Safari - Firefox - Microsoft Edge - Opera
それぞれ特徴があるけどプログラミングの時は動作確認などで複数のブラウザを使うことも多いので、いろいろインストールして使ってみるといいかも。 開発者だと基本的にはChrome使ってる人が多い印象。
参考サイト tone.ne.jp
ブラウザの仕組み
ブラウザがwebページを表示するまでに ブラウザの内部では何が起こっているのか。 webページを見たい時には
- URLをアドレスバーに入力する
- 検索エンジンで検索する
- リンクをクリックする
一般的なのはこの３つの方法だと思うが、この時ブラウザから出たリクエスト信号はHTTPヘッダーという自己紹介情報を持って飛んでいく。 そしてブラウザから出たリクエスト信号は、インターネットの世界に出ていき、DNSというシステムに聞き合わせながらインターネットを進み、目指すサーバーにたどり着く。
GET / HTTP/1.1
HTTPのバージョン1.1のルールで、Getという方法で「/」を見たい。
Mozilla/5.0 (iPhone; CPU iPhone OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1
私はiPhoneのSafariというブラウザなんですけど、怪しい者ではありませんので見せてほしいのですが……。
サーバーはブラウザへの返事をヘッダーという形でつけておき、データを送り出す。
HTTP/1.1 200 OK
覚えておきたいステータスコード
- 200 ok
- 404 Not Found リクエストされたURLが見当たらない
- 403 Forbidden そのファイルはアクセスが禁止されている！
- 304 Not Modified 前に見た時から変わっていない
参考サイト ここが一番分かりやすかった webtan.impress.co.jp
ここはものすごく詳しく書いてある www.html5rocks.com
合わせて知っておきたい知識
origin
オリジンとは、リソース自身のURLの「スキーム」「ホスト」「ポート」の3つの組み合わせを「origin(オリジン)」と呼ぶ。似たものにdomain(ドメイン)がある。
例
ドメイン (domain): fksgshota.hatenablog.com
オリジン (origin): https://fksgshota.hatenablog.com:3000
参考サイト aloerina01.github.io
HTTPとは
２回目の投稿はHTTPについて。この先も〜プロトコルはよく聞くし、インターネット通信の基本的なところなので知っておきたい。
HTTP
正式名称：Hyper Text Transfer Protocol（ハイパーテキストトランスファープロトコル）
ホームページ内の文字や画像などのデータを、サーバと通信相手（ホームページ閲覧者）との間で通信するための 通信規約（プロトコル）。 PCやスマートフォンなどインターネットを利用している環境が異なる場合も、共通の通信規約を定めることで、同じ手順でホームページのデータをやりとりできる。
HTTPS
正式名称：Hyper Text Transfer Protocol Secure（ハイパーテキストトランスファープロトコルセキュア）
SSLを利用したhttp通信です。SSL（Secure Socket Layer）とは「通信内容を秘匿する暗号機能」「通信相手の真正性」「通信データが改ざんされていないか検知する機能」の3つの機能を持った通信規約（プロトコル）です。この2つに共通している「Secure」は直訳すると”安全な” “危険のない”という意味です。要するに、httpsとはhttpにセキュリティ機能を追加したものです。
参考サイト ms.repica.jp
インターネットの仕組み
Twitterで流れてきた@TetsuKinomuraさんが和訳されたプログラミング学習ロードマップ。
しつこいですが、これはほんっっとに質の高いロードマップだから知って欲しい。
— 木之村 哲 Tetsu Kinomura (@TetsuKinomura) March 27, 2020
せっかく和訳したのにあんまり反響なくて悲しいです笑#プログラミング #ロードマップ pic.twitter.com/VCJvLG5lp3
これが良さそうだったので、上から順番に学習と記録を兼ねて書いていこうと思います。 忘れた時に自分のブログならすぐに見に来れますしね。
超基礎的なところからですが、復習と知らない知識を炙り出していくのが目的。
大抵のことは僕がまとめるより他の方が分かりやすくまとめているので、大事そうなところをピックアップしながら淡々といきましょう。
インターネットとは？
語源：個々のnet(LAN)の間(inter)をつなぐものだからinternet
インターネットとは、全世界を接続しているコンピュータネットワークのことを言います。複数のコンピュータをケーブルや無線で繋ぎ、お互いに情報をやりとりできるような仕組みになっています。
インターネットの語源は「ネットワークとネットワークを接続すること」です。世界中を接続しているネットワークも、細かく見れば複数のコンピュータネットワークを相互接続した形となっています。
自宅や会社、大学などに存在する1つ1つのネットワーク（LAN）が、更に外側に位置するネットワーク（WAN）に繋がっています。
個人ユーザーは、ISP（プロバイダ）を介してIPアドレスを発行してもらい、インターネットへアクセス出来る仕組みとなっています。
IPアドレスとは？
正規名称：Internet Protocol address
IPにおいてパケットを送受信する機器を判別するための番号。ネットワーク上の住所みたいなもの。
グローバルIPアドレスとローカルIPアドレスの２種類がある。
IPアドレスはインターネット上の住所のようなものです。
Webサイトやアプリなど全てにIPアドレスが割り当てられており、通信の行き来が管理されています。
IPアドレスは、インターネット上のコンテンツにアクセスする際にも必要となります。SNSなどで発信する際も、このIPアドレスの情報は付随されて発信されます。
参考サイト naruhodo-wifi.com
上記のサイトがかなり分かりやすくまとめてくれているので、そちらを読み進めていけば理解が深まります。
Terminalの基礎知識
フィヨルドブートキャンプのプラクティスにて黒い画面(Terminal)の各種コマンドと基礎知識について学習しました。
学習サイト：dont-be-afraid-kuroigamen
コマンド参考：Linuxコマンドは単語の意味を理解するとグッと身近なものになる
homebrew参考：homebrewとは何者か。仕組みについて調べてみた
基本的な使い方自体は知っていたのですが、改めて正式名称や仕組みについて学ぶことができてさらに理解が深まりました。
$ open .これで今いるディレクトリを開けるなんて早く知りたかった事実。。。
毎回Finderから開く度にめんどくさいなぁと思っていました。
それとPATHの通し方についても解説されていて
$ export PATH=$PATH:~/bin
今までコピペで使っていたものが自分の中に仕組みとして入ってきた気がします。
自動化が大好きな僕としては、コマンドをまとめたファイルの使用も今後活用していきたいです。
また、ふんわりとしか分かっていなかったiTermとzshについても理解できてスッキリしました。
今後プログラミングをしていく上で絶対に使用するスキルなので極めていきたいです。
