１．はじめに
本ブログではUdemyのWeb Developer Bootcampを受講した中で、
学習した内容のアウトプットを兼ねてWeb開発の手法を記載していく。
２．概要
普段ブラウザを使用して情報を検索したり、動画を見たりゲームをしたりとWebに触れる機会はあると思う。
「Webを見る」「インターネットをする」などと言われているが処理上はどのような動きをしているのか、
「WEBサーバー」など聞いたことはあるが意味や役割は何か、について記載する。
３．本文
・Webサーバとクライアント
何かしらのサービスを提供する側と受ける側のことをそれぞれ「サーバ」「クライアント」と言う。
Webページの表示の場合、Webページの情報が保管されていて利用者やブラウザからのアクセスで
Webページの情報を提供する側を「Webサーバ」と呼ぶ。
反対に利用者やブラウザ側が「クライアント」である。
Webサイトの表示に関わらずDBサーバとそこにアクセスする端末、APサーバとアプリケーションを利用する端末なども
サーバとクライアントの関係であるが、今回はWebサーバとそれを表示する端末（表示するブラウザ）について説明していく。
・リクエストとレスポンス（HTTPリクエストとHTTPレスポンス）
ブラウザ上からWebページを見るための操作をすると「URLを入力し、Enterキーを押すと、画面が表示される」となるが
実際にはどのような動きになっているのだろうか。
ブラウザにURLを入力してEnter（リンクをクリックや検索ボタンを押すなども同様）すると指定のWebサーバに「リクエスト」が送信される。
このリクエストには「Webサーバの場所」「Webサーバの中でどの情報が欲しいか」などの情報が含まれており、
Webサーバ側はこのリクエストにこたえる形でWebページを構成する情報を返信してくれる。
この返信を「レスポンス」と呼ぶ。
つまり普段のWebサイト表示やWeb検索における「URLを入力し、Enterキーを押すと、画面が表示される」は
「URLでリクエスト→Webサーバからレスポンス→レスポンスの内容をブラウザで読み込んで表示」と言い換えらえる。
※また、このリクエストとレスポンスをWebサーバとやり取りする際にHTTPというプロトコル（データをやり取りする際のルール）
を使用して行われるため、それをHTTPリクエスト・HTTPレスポンスと呼ぶ
・リクエスト・レスポンスの内容
リクエストのには「URLの内容（Webサーバの場所や検索ワード）」「ブラウザの情報（ブラウザの種類やバージョンなど）」が含まれており
レスポンスの内容は上記内容を元にWebサーバが変身した「Webページを表示するための部品と設計図」となっている。
実際に今ブラウザに表示されている画面の部品と設計図になっているコードの内容は
その画面で右クリック→ページのソースを表示をクリックすることで確認できる。（画面はMicrosoftedge）
このようなWebページを表示するための部品と設計図であるレスポンスは主に「HTML」「CSS」「JavaScript」という3つの言語で作られている。
・フロントエンドとバックエンド
前項にてURLでリクエスト→Webサーバからレスポンス→レスポンスの内容をブラウザで読み込んで表示と書いたが、
少し細かく分類すると
①ブラウザからのリクエスト
②リクエストを元に表示するサイトの内容を決定する内部処理
③内部処理で決定した結果をHTML、CSS、JavaScriptの形にしてレスポンス
④ブラウザにてHTML、CSS、JavaScriptの内容を人間が見やすい形で表示
となる。
この中で①及び④のブラウザ側の処理を「フロントエンド」、②及び③のWebサーバ側の処理を「バックエンド」と呼ぶ。
フロントエンドで使用されるコードは前述のHTML、CSS、JavaScriptにほぼ絞られるが、
バックエンドで使用されるコードはJava,Python、C、JavaScriptなど多岐にわたる。
・HTMLCSSJSとは
フロントエンド側で使用されているコードは主に「HTML」「CSS」「JavaScript」と記載したが、それぞれの役割について説明する。
HTML:
「画面の中に何があるか」をHTMLにて作成する。
ページ全体の流れや、タイトル・見出し・本文などの区分け、画面に表示されている文字などが書かれている。
CSS：
「画面の中の項目の見た目」をCSSにて作成する。
ページ内の各項目のサイズ、色、背景色、グラデーションなど綺麗に見せるための設定が書かれている。
JavaScript：
「画面の中の動き」をJavaScriptにて作成する。
カーソルを合わせたらボタンが強調される、時間経過で表示される広告が切り替わる、通知、ブラウザゲームなど
動きのある部分の設定が書かれている。
・使用している・今後使用する開発環境について
Web Developer Bootcampの講義内で使用されている以下のブラウザおよびエディターを使用する。
Webブラウザ：GoogleChrome
エディター：VisualStudioCode
上記の2つがなければWeb開発ができないという意味ではなく、
個人や会社で使用頻度の高いブラウザやエディターであれば開発環境は何を使用しても構わない。
エディターに関してはテキストエディターでも開発は不可能ではない。
しかし、どちらも使用率が高く、エディターは補完機能やタグの色付けなど開発を行う上で利便性の高い機能がそろっているため、
可能であれば使用することをお勧めする。
４．感想
Webサイトを見るということについて基礎の基礎を理解することができた。
また、Web Developer Bootcampを進めるにあたって大雑把に1.5ヵ月という目標を立てたがここまでで丸一日経過してしまった。
到底目標に届かないので理解を疎かにしない程度にスピード感をもって進めていきたい。