Webとは

# Webとは
こちらは「Webを支える技術」を読んで、学んだことをまとめました。
今まで当たり前に使っていたWebを知る、いい機会になれば嬉しいです！

## 「web」とは何か

#### Webとは
「ブラウザからHTTPというプロトコルを使ってサーバーへリクエストを送信し、何らかの処理結果をブラウザへレスポンスする」という仕組みで成り立っています。
        
#### Webの用途は３種類
1. Webサイト
１番身近なもの。
Googleのような検索サイトからAmazonのようなショッピングサイト、Instagramのような写真、動画投稿などさまざまなサービスを提供しています。
みなさんも今までで一度は利用したことがあると思います。
            
2. UIとしてのWeb
 UI（User Interface）とは、**ユーザーとサービスの接点**のこと。
Webサイトでいうと、サイトの見た目や使いやすさのこと
見た目だけではなく、レイアウトや画像、文字のフォント、メニューやボタンの操作性などユーザーが目にするもの・操作するものを言います。
身近なもので言うと、デバイスの設定画面やプリンタなどはブラウザを利用して設定しているのでUIとしてのWebと言えます。
（プリンタの画面もWebだったと驚きですね🤔）
                
3. APIとしてのWeb
API（Application Programming Interface）とは、**アプリケーションorソフトウェアと何かを繋ぐもの**です。
**UIが人間向けのインターフェイス**なら**APIはプログラム向けのインターフェイス**です。
身近なもので言うと、LINEはチャットツールだけでなく、LINE予約システムやLINE Payと連携しています。
Amazon APIは、アマゾンで出品されている中古商品の最安値、中古価格を自動で算出してくれます。
これは、私たちとアプリが繋がっていると言うよりは、アプリケーション同士が繋がっていますよね。
                
#### Webの構成
主に、**HTTP・URI・HTML**で構成され、Webを支える最も基本的な技術です。
+ HTTPとは
「Hyper Text Transfer Protocol」の略です。 
 Webサーバとクライアントが、 リソースの情報をやりとりする時に使われる**通信手順(プロトコル)** を意味します。　
簡単にいうとHTTPというプロトコルを使って、**情報の受け渡しを行います**。
            
+ URIとは
URL・・・Web上の住所
URN・・・Web上の名前
これらの外枠、**大きい概念で言うとURI**になります。
ですが、URI＝URLと考えても大丈夫です。
![スクリーンショット 2023-03-01 19.16.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3269349/cb8782d7-d3d5-df28-f6d8-9c61523a54c6.png)

+ HTMLとは
**情報を表現する文書フォーマット**です。これはとても身近ですね。
            
+ これら３つの関係性
![スクリーンショット 2023-03-01 19.27.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3269349/7a6a5445-d9a9-7fa8-a131-eeb51513f582.png)
HTMLはHTTPでやり取りされます。（HTTPで情報を送受信します）
HTMLリンクはURIを利用します。（全てのリソースにはURIがあります）
HTTPはURIで操作対象を指定します。（HTTPを使って指定されたURIのリソースを取得します）
            
    
## webアプリはどのようにブラウザに表示されるのか
**URI**、**HTTP**、**HTML**、**JSON**を使って表現するなら
①**URI**で欲しいリソースを指定する
②それを**HTTP**というプロトコルを使ってサーバーへリクエストする　
③サーバーが指定されたリソースを**HTTP**を使ってレスポンスする　　
④ブラウザに**HTML**が表示される　
⑤アプリで、情報を入力したりボタンを押したりするのに合わせて動的に表示を変更することも可能
この裏側は、フロントエンド（ブラウザ上）でJavascriptが動き、バックエンド（Laravel等）にリクエストを送ることで情報の受け渡しが行われる
その後バックエンドで処理をしたものをまたフロントエンドに返すことで動的に表示変更を行なっている　
    
これら４つを以下でもう少し深く触れていきます。　　
    

## URIについて

#### URIとは
一言で言うと**リソースがある場所**です。
上記でも触れたようにURLとURNをまとめた外枠の表現がURIになります。
URLよりも、より多くの情報が載っています。
**Web上に存在する全てのリソースは全てURIで指し示すことができ、HTTPで操作することができます**。
        
#### URIの構文
⚪︎簡単な例
<font color=red>http://</font><font color=#edbe02>blog.example.jp</font><font color=#02c0e6>/entries/1</font>
            
+ <font color=red>**URIスキーム・・・http**</font>
利用する**プロトコルを示します**。ftp通信なら「ftp://」となります。
+ <font color=#edbe02>**ホスト名・・・blog.example.jp**</font>
**サーバーの名前**と**サーバーに属するグループ名**を合わせた総称が**ホスト名**になります。みなさんがよく見る「www」はサーバー名にあたります。
ドメイン名かIPアドレスを用いり、インターネット上で必ず一意になります
+ <font color=#02c0e6>**パス・・・/entries/1**</font>
ファイルやフォルダ等の住所。
                
⚪︎少しわざとらしい複雑な例
 <font color=red>http://</font><font color=#fa7900>yohei:pass@</font><font color=#edbe02>blog.example.jp</font><font color=green>:8000</font><font color=#02c0e6>/seach?</font><font color=purple>q=test&debug=true</font><font color=#fa00d9>#n10</font>
+ <font color=red> **URIスキーム・・・http**</font>
URIスキームとはリソースを取得するための手段。
最後は「:」で区切る。
+ <font color=#fa7900>**ユーザー情報・・・yohei:pass**</font>
このリソースにアクセスする時に利用するユーザー名とパスワード。
「//」で始まり、ユーザー名とパスワードは「:」で区切ります。
ユーザー情報の後ろは「@」で区切ります。
+ <font color=#edbe02>**ホスト名・・・blog.example.jp**</font>
+ <font color=green>**ポート番号・・・8000**</font>
HTTPのデフォルトは８０番と決まっている　
ポートとは、**プログラムを識別するための番号です。**
通信にあたって必ずどこかの扉（ポート）を通る。
+ <font color=#02c0e6>**パス・・・/seach**</font>
最後は「?」で区切る。
+ <font color=purple>**クエリパラメータ・・・q=test&debug=true**</font>
**サーバーに情報を送るためにURLの末尾につけ足す文字列（変数）のことです。**
複数のパラメーターをつけたい場合は「&」を使用します。
検索キーワードを渡すときや、動的にURIを生成するときに利用します。
+ <font color=#fa00d9>**URIフラグメント・・・#n10**</font>
**ページ内のリンク先位置 (id属性) を指定する**
「#」を用いて指定します。
                
#### URIの設計
Webサービスが発表された当時、URIが変更されることは日常茶飯事でした。
ブックマークしていたサイトが突然見れなくなる、苦労して作ったサイトが１年後にはリンク切れが起こり、
not foundになるなど、大きな問題がありました。
そこで、これら問題をなくそうと”URIは変わらないべきである。変わらないURIこそが最上のURIである”と言う主張を元に作られたルールがあります。
（みなさんもブックマークしていたお気に入りのサイトがいきなりなくなったら悲しいですよね😢）
        
1.プログラミング言語に依存した拡張子やパスは含めない
+ http://example.jp/cgi-bin/login.pl
このようなURIには２つの依存箇所があります。
①cgi-binというパス
②.plという拡張子
昔はよくある構造でしたが今は、CGIがあまり使われなくなったことと
実装言語の選択肢が増えたことであまり見かけなくなりました。
「.pl」はPerl言語のファイルを指します
昔はよく動的なサイトを作るためにこの２つが使用されていました。
「CGIといえばPerl」だったみたいです。
例えばPerlではなくPHPで書きたいとなった場合、URIを変える必要があるのでアウトです。
                
+ http://example.jp/servlet/LoginServlet
Javaの例です。
「servlet」は特定のサーブレットコンテナのデフォルトパスで、システムをサーブレットからPHPに変えた途端に変更になります。
また「LoginServlet」と言うファイル名を大文字と小文字にするのはJavaの文化ですが、PerlやRubyは小文字の文化です。
（Javaの話は私もよくわかりませんが、言語によって大文字小文字が影響してしまうみたいです）
             
このように、ある特定の言語に依存した文字列をURIに含めるとその言語を変更した途端にそのURIは使えなくなってしまいます。
つまり、ファイルの中身や扱う言語が変わったとしても影響を受けない不変的なURIを作るべきなんですね。
            

2.メソッド名やセッションIDを含めない
+ http://example.jp/Login.do?action=showPage
showPageと言うメソッドがあります
メソッド名を変更するとURIが使えなくなってしまうのでアウト。
+ http://example.jp/home.jsp?jsessionid=12345
sessionid=12345と言うセッションIDがあります。
セッションIDは、よくログインする際に使われます。
ログイン後ブラウザがセッションIDを一時保持します。
そのIDをページ間で使い回すことによってログイン状態であるかを識別しています。
つまり、ログインしなおすとセッションIDが再発行され、URIのセッションIDと相違してしまいます。
なのでこちらもアウト。
                
3.URIはリソースを表現する名詞にする
+ http://example.jp/sample/people/show/123
このURIは、sampleアプリケーションのpeopleコントローラーのshowメソッドを意味しています。
123はデータベースのIDです。問題なのはshowメソッドです。
**HTTPはリソースに対してHTTPメソッドだけを適用します**。
どのリソースを取得するのかはURIでメソッドを使用して指定するのではなく**HTTPメソッドが指定します**。
URIにメソッドは使いません。
URIはリソースの場所を表す＝場所＝名詞
そのリソースに何をするかはHTTPメソッドが行う＝動作＝動詞
なのでURIメソッドとHTTPメソッドの関係は名詞と動詞です。
                
👇HTTPメソッドについては以下で詳しく説明しています。
これらのルールがありますが、最近のフレームワークでは
実装に依存したURIはデフォルトでは設定できない仕組みになっています。
安心ですね😮‍💨
        
+ 良いURI
http://example.jp/login
→良いURIとはとてもシンプル！！
            
+ もしURIを変更したい時
リダイレクトを行う。
リダイレクトとは、古いURIを新しいURIに転送するHTTPの仕組みのこと。
変更前：http://example.jp/old
変更後：http://example.jp/new
            
        
    
## HTTPについて
    
#### HTTPとは
HTTPというプロトコルを使って情報を取得したり、発注したりします。
簡単にいうと**情報の受け渡し**を行います。
HTTPの情報の確認の仕方はブラウザ右クリックで検証→Network→Headersの部分で見れます。
エンジニアならよく使うアレです🔍
        
#### HTTPの構成
スタートライン 
ヘッダ 
空行 
ボディ 

+ スタートライン・・・リクエストラインとも呼ばれる
HTTPメソッド、リクエストURL、プロトコルバージョン（HTTP/1.1）が書かれている。
+ ヘッダ・・・データの説明書。
データをどこに送るか、そのデータの補足情報が書かれている。
+ ボディ・・・リクエストに対する、サーバー応答の内容本文。
    
#### HTTPの仕組み
クライアントがサーバーに接続し、**リクエストを出してレスポンスを受け取ります**。
**クライアントで行われること**
①リクエストメッセージの構築
②リクエストメッセージの送信
③（レスポンスが返ってくるまで待機）
④レスポンスメッセージの受信
⑤レスポンスメッセージの解析
⑥クライアントの目的を達成するために必要な処理
        
**サーバーで行われること**
①（リクエストの待機）
②リクエストメッセージの受信
③リクエストメッセージの解析
④適切なアプリケーションプログラムへの処理の委譲
⑤アプリケーションプログラムから結果を取得
⑥レスポンスメッセージの構築
⑦レスポンスメッセージの送信
        
    
#### HTTPメソッド
HTTPメソッドとは、**対象となるリソースに対して「何をしたいか」を指示**する。
HTTPメソッドは８種類ある。主に使うのは５か６種類です。
| メソッド名 | 行うこと |
| --- | --- |
| GET | リソースの取得 |
| POST | 子リソースの作成、リソースデータの追加、その他の処理 |
| PUT | リソースの更新、作成 |
| DELETE | リソースの削除 |
| HEAD | リソースのヘッダー（メタデータ）の取得 |
| OPTIONS | リソースがサポートしているメソッドの取得 |
| TRACE | 自分宛にリクエストメッセージを返す（ループバック）試験 |
| CONNECT | プロキシ動作のトンネル接続への変更 |

上記でも説明しましたが、リソースに対して、これらのメソッドを使って何をしたいかを指定します。
URIが指定するのではありません。
        
#### ステータスコード
+ １００番代・・・**処理中**
そのままリクエストを継続するか、サーバーの指示に従ってプロトコルを更新して再送信する
+ ２００番代・・・**成功**
リクエスト成功を示す。これ出ると安心しますよね😆
+ ３００番代・・・**リダイレクト**
他のリソースのリダイレクトを示す。
このステータスが出た時は、レスポンスメッセージのLocationヘッダを見て新しいリソースへ接続する。
+ ４００番代・・・**クライアントエラー**
原因がクライアントのリクエストにある。エラー解消しない限り、正常な結果を返さない。
アクセス権限やアクセス禁止、ページの削除、URIのスペルミスなどがある時出てくるのがこれです。
+ ５００番代・・・**サーバーエラー**
原因がサーバー側にある。通信に問題がある、メンテナンス中などに出てくるのがこれです。
レンタルサーバーを契約しているなら契約が適正かどうかを見直す必要があります。
            
    
 ## HTMLとJSONについて
    
#### HTMLとは
**マークアップ言語（タグ）で文書の構造を表現するコンピュータ言語**です。
文書内の各部分に目印（タグ）をつけて、その部分がどんな要素なのかを
明確にすることで、コンピュータがその文書の構造を理解できるようになります。
HTMLになる前、昔はSGMLというものがありました。
しかしSGMLは複雑で処理プログラムが作りづらかったことから仕様をシンプルにしたXMLが発明されました。
そのXMLをベースに変えた仕様がXHTMLです。
エンジニアになるために”１番最初に触れた物がHTMLだった。”なんて人多いんではないでしょうか。私もHTMLでした😆
        
#### JSONとは
**プログラミング言語間でデータを受け渡し、** データオフォーマット（データ形式）のことを言います。
ちなみに「JavaScript Object Notation」の略です。
 例えば、Javascriptでデータをまとめ、まとめた情報をPHPやRubyに渡したいときJSONデータにして、情報を渡すことができます。
JSONなしでは言語が違うので情報を読み取ることができません。
また、特定のプログラミング言語に依存しません。
+ メリット
①テキストベースで軽い
昔はXMLが使われていたが重かった。
②解析しやすい
 ③Javascriptと相性がいい
            
+ 表現形式
JSONに組み込みで用意されているデータ型には６種類があります。            
⚪︎オブジェクト・・・名前と値の集合体。{}で囲みます。
⚪︎配列・・・値の集合体。［］で囲みます。
⚪︎文字列・・・文字。””で囲みます。
⚪︎数値・・・数字。
⚪︎ブーリアン・・・trueかfalse。小文字で書く。
⚪︎null・・・小文字で書く
Javascriptの基礎の書き方ですね。
他言語でも書き方は違くても言っていることは同じです。
            
+ 使い方
⚪︎Javascriptの場合
JSON.parse・・・JSONからデータを受け取り、 Javascriptに値を渡す
JSON.stringify・・・ Javascriptオブジェクトを取得し、JSON形式に変換
⚪︎PHPの場合
json_decode・・・JSONからデータを受け取り、PHPに値を渡す
json_encode・・・PHPオブジェクトを取得し、JSON形式に変換
⚪︎Pythonの場合
json.loads・・・JSONからデータを受け取り、Pythonに値を渡す
json.dump・・・Pythonオブジェクトを取得し、JSON形式に変換


## 最後に
少々長くなってしまいましたが、
今まで当たり前に使っていたWebについて少し深く知ることができたのではないでしょうか。
これらの知識はWebを扱うエンジニアにとって、とても重要かつ基礎知識になるので知っておくと今後に役立つこと間違いなしです！
最後まで読んでいただきありがとうございました！