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と考えても大丈夫です。
  

• HTMLとは
  情報を表現する文書フォーマットです。これはとても身近ですね。

• これら３つの関係性
  
  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の構文

⚪︎簡単な例
http://blog.example.jp/entries/1

• URIスキーム・・・http
  利用するプロトコルを示します。ftp通信なら「ftp://」となります。
• ホスト名・・・blog.example.jp
  サーバーの名前とサーバーに属するグループ名を合わせた総称がホスト名になります。みなさんがよく見る「www」はサーバー名にあたります。
  ドメイン名かIPアドレスを用いり、インターネット上で必ず一意になります
• パス・・・/entries/1
  ファイルやフォルダ等の住所。

⚪︎少しわざとらしい複雑な例
http://yohei:[e-mail]:8000/seach?q=test&debug=true#n10

• URIスキーム・・・http
  URIスキームとはリソースを取得するための手段。
  最後は「:」で区切る。
• ユーザー情報・・・yohei:pass
  このリソースにアクセスする時に利用するユーザー名とパスワード。
  「//」で始まり、ユーザー名とパスワードは「:」で区切ります。
  ユーザー情報の後ろは「@」で区切ります。
• ホスト名・・・blog.example.jp
• ポート番号・・・8000
  HTTPのデフォルトは８０番と決まっている　
  ポートとは、プログラムを識別するための番号です。
  通信にあたって必ずどこかの扉（ポート）を通る。
• パス・・・/seach
  最後は「?」で区切る。
• クエリパラメータ・・・q=test&debug=true
  サーバーに情報を送るためにURLの末尾につけ足す文字列（変数）のことです。
  複数のパラメーターをつけたい場合は「&」を使用します。
  検索キーワードを渡すときや、動的にURIを生成するときに利用します。
• URIフラグメント・・・#n10
  ページ内のリンク先位置 (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を扱うエンジニアにとって、とても重要かつ基礎知識になるので知っておくと今後に役立つこと間違いなしです！
最後まで読んでいただきありがとうございました！