はじめに

本記事を閲覧いただきありがとうございます。
都内でSEをしておりますhirokiです。

今回は表題にあるように「IT基本用語」について、重要なものをピックアップして解説して行こうと思っております。

私自身、２０２２年４月に未経験からWebエンジニアになって、１年以上が経過しております。
入社して間もない頃は、IT用語に一種アレルギー反応のようなものがあり、

何を言ってるのかわからない！！！理解できない！！！日本語で喋ってくれ！！日本語で！！！！

といった状態でした。
IT用語は初心者にとっては謎のカタカナ、横文字が押し寄せてきて、これが挫折の一要因にもなったりします。

ただ、私も今でこそ、以前よりは理解できるようになりましたが、まだまだ知らないことも多く、基礎用語に関しても深く理解できているかを問われると答えられるか怪しいところです。

そこで

Webエンジニアになって間もない方が、IT用語を理解するのに微力ながら役に立つ記事を書く。
自身の曖昧なIT基礎知識をアウトプットを通じて整理し、理解を深める。

の２点を軸にして記事を書き上げました。

今回は「プロになるためのWeb技術入門」を読んで、
Webアプリを作成する上で欠かせないIT用語、概念を解説していけたらと思っております。

今回解説するIT用語

今回解説す用語は以下のものになっています。

リクエストとレスポンス

プロトコル

IPアドレスとポート番号

ステートレス/ステートフル・プロトコル

クッキー

上記の用語はWebアプリケーションを開発する上では絶対に抑えておきたい基本用語になります。

それでは順番に解説していきます。

リクエストとレスポンス

リクエストとレスポンスとは
「手元PCと遠く離れたサーバーのインターネットを介したコミュニケーション」と思っておいていただければ大丈夫でしょう。

「リクエスト」と「レスポンス」はWebアプリケーションがどのような仕組みで動作しているのかを理解する上で一番基本的な用語になります。

そもそもWebアプリケーションとはどのようなものなのか、簡単に説明すると
「サーバーにより提供されるサービスをインターネットを介して、利用することができるサービス」というものになります。
ほんの一例ですが、有名な例を挙げるとAmazon、Facebook、twitterなどがこれにあたりますね。
私たちが、スマホやPCを利用する際に、インターネットが利用できなくなった途端に、ほとんど役割を果たせなくなるのを想像していただくと
Webアプリケーションは今や私たちの生活に欠かせないものとなっております。

では、そんなWebアプリはどのような仕組みで動いているのか、
まずは下の図をご確認ください。

仮に「Yahoo！」のトップページを自身のPCから利用するとしましょう。
ちなみにこのサービスを利用する側を 「クラアント」 と呼ぶのでついでに頭に入れておいていただければと思います。
Yahoo!のトップページを開く手順としては

① 検索エンジのURLに「https://www.yahoo.co.jp/」
　を打ち込み実行する
→yahooのサービスを提供しているサーバーに「Yahoo！のトップページを表示して！」という要求が送られる。

この一連の流れを リクエスト と呼びます。

② クライアント側からリクエストを受けたサーバーが、「Yahoo!のトップページを表示」するための情報を送り返し、クライアントPCにYahoo！のトップページが表示される。

このリクエストに対するサーバー側の動きを　レスポンス　と呼びます。

まとめ
リクエスト/レスポンスとは「手元PC(クライアント)と遠く離れたサーバーのインターネットを介したコミュニケーション」

プロトコル

結論から述べると、プロトコルとは

「PC同士の通信における約束事、ルール」のことを言います。

先ほど「クライアント」と「サーバー」のやり取り（リクエスト/レスポンス）を説明しましたが、
サーバーがやり取りするクライアントは１つだけではありません。
例えばAmazonは世界中のクライアントPCから利用されるサービスです。
そしてそれらのPCの性能やスペックはそれぞれ異なるものとなっているので、
クライアントとサーバーがやり取りする共通のルールを決めておかないと通信できないPCが出てきてしまいます。
この共通のルールがプロトコルと呼ばれています。

他のものに例えると、下図のように様々な国籍の人とビジネスでやり取りをすることを思い浮かべて見て下さい。

この際も使用すること言語は？チャットツールは何を使う？など、やり取りのルールを事前に決めておかないとスムーズにコミュニケーションを取ることができないし、場合によってはトラブルになったりすることもあり得ます。

今回の例の場合は

全員が英語を使えるので使用言語は英語とする
チャットツールはSlackを使用する
チャットに投稿する内容は、簡易的な連絡とし、込み入った内容の時はビデオ通話を使用する

など、ルールを決めておけば、円滑にやり取りすることができますよね？

PCでも同様に、

HTTP
→クライアントとサーバー間でHTTPによる通信をよりsecure（安全に）行うためのプロトコル。

FTP
→ネットワーク上のクライアントとサーバーの間でファイル転送を行うためのプロトコル

といった形で、詳しい説明は省略しますが、上記のような決まり事 （プロトコル） が存在し、PC間の通信を円滑に進められるようになっています。

まとめ
プロトコルとは「PC同士の通信における約束事、ルール」

IPアドレスとポート番号

結論から述べると
IPアドレスは「ネットに接続されらPCを特定するための番号」
ポート番号は「PC内で使用するサービスを特定するための番号」
ということができます。

AmazonやTwitterなどの世界中で使用されるWebアプリは、日々世界中のクライアントPCから送られてくる膨大な数のリクエストに対して、サーバー側でレスポンスを返さなくてはなりません。
その際、どのクライアントPCにレスポンスを送り返すのか、特定する情報が必要になってきます。
それが「IPアドレス」　です。
IPアドレスは192.168.0.1といったような形で、4組の数字で表され、それぞれ0〜255の256通りあり、４３億桁の数値が表せるようになっています。
言い換えると、PCの住所の役割で、サーバー側からのレスポンスを正しい場所のクライアントPCに届けるのに欠かせないものとなっております。
上記をイメージするために下図を参考にいただければと思います。

ここまで、サーバー側のレスポンスを正しい場所のクライアントPCに届ける方法を説明してきましたが、これで終わりではありません。
クライアントPCに届いたレスポンス情報はPC内の適切な場所に格納され、処理されなければいけません
クライアントPCの中でも「Amazonアプリを使う場所」「Google Chromeを使う場所」「Twitterを使う場所」といった形で、使用するサービスごとに場所が決められています。
なので、各Webアプリのサーバーから送られてきたレスポンスはそれぞれPC内の適切な箇所に送られなくてはならないということです。
このPC内の場所を特定する役割を果たすのが「ポート番号」です。
ポート番号は0〜65,536までの数字で表され、同じポート番号を複数のアプリケーションで使用することはできません。

ここまでの流れを郵便配達を例に説明すると
IPアドレスで配達物を届ける建物名までを特定し、ポート番号でその建物の部屋番号までを特定するいう形になります。（下図）

まとめ
IPアドレスとは「サーバーがレスポンスを送るクライアントPCを特定するための住所(建物)」
ポート番号とは「クライアントPC内のサービスを利用するための場所（建物の部屋番号）」

ステートフル/ステートレス

ステートフルとは「前回まで行っていたやり取りを維持する」ことで
ステートレスとは「前回まで行っていたやり取りを維持しない」ことです。

ショッピングアプリを例に説明すると

ステートフルなアプリは
マイページにログインし、ほしい商品をカートに入れてログアウトしてウィンドウを閉じたとします。
２日後に再びマイページにログインすると、前回カートに入れた商品を覚えている状態でカートに入れた商品の内容が保持されています。
逆にステートレスなアプリはほしい商品をカートに入れてログアウトしてウィンドウを閉じてしまうと、次ログインした時にはその内容が保持されず消えてしまっています。

言い換えると
ステートフルは一見様お断りの高級レストランでオーナーがお客さんの顔を覚えていて、お客さんの好みに応じておまかせで料理を提供してくれる形で
ステートフルはファストフードチェーン店の券売機のような形で、こちらの顔は覚えておらず、来店する度に自分で商品を選択する必要があります。

一見するとステートフルの方が良く見えるかもしれませんが、サーバーへの負荷が重くなるといったデメリットがあります。
一方でステートレスの場合は処理がシンプルなのでサーバーへの負担は軽くなります。
上記踏まえて、状況に応じて最適なものを使い分ける必要がありそうです。

まとめ
ステートフル/ステートレスとは「前回までのやり取りを覚えているか、いないか」のこと

クッキー

クッキーとは「前回までのやり取りを　一時的に保持する技術」のことです。
クッキーを用いることで、ステートレスなサービスにステートフルな機能を持たせることが可能になります。

具体的な例だと
twiiterのページにログアウトせずにウィンドウを閉じても、次ページを開いた時はログアウトせず、ログインしたままの状態が保持しているいった機能が挙げられます。

イメージするならば
前回までの話を覚えていられないから、一から説明しなければいけないA君に
その日話したことを小さいメモ帳の切れ端に書いて渡しておくといった形でしょうか。

まとめ
クッキーとは「前回までのやり取りを　一時的に保持する技術、ステートレスなサービスにステートフルな機能を持たせることができる」こと

終わりに

ここまで閲覧していただきありがとうございました！
自分でも本記事を書くことで、理解できてない箇所が判明したり、知識を体系化して整理することができたので今後に繋がる体験ができたと思っております。
また定期的に記事をアップいたしますので、その時は是非とも閲覧いただけば幸いです。