【スライド30枚超】ビジネスマン必見Web基礎知識まとめ

こちらのNoteではこれから就活をされている方・普段技術に接することが少ない社会人の方に、これさえ見ればざっくり今のITがわかるように設計しました。

本Noteはスライドだけでは説明できない部分をテキストにて詳しく解説したものになります。スライドのみ見たい方のためにいかにスライドの総編を貼っておきます。

良ければフォローのほどよろしくお願いします。
<概要>

＜解説＞

①WEBサイトの動く仕組みについて

パソコン同士は、インターネットを通じてつながっています。そして、各PCでは自分が欲しい情報を持っている他のPCからインターネットを通じて受け取りすることが出来ます。

この時、ほしいデータを依頼する側のことをクライアントサイドと呼び、データが保管してある側のことをサーバーサイドと呼びます。クライアントはサーバーに対してほしい情報を発信することが出来ます。これをリクエストと呼びます。それに対応してサーバーでは持っている情報をクライアントに送り返します。これをレスポンスと呼びます。

付け加えると、ご存知の通りPCは数字しか認識をすることが出来ません。（厳密には０と１のみです）実は、普段自分たちがワード等で書いている文字も文字コード（UTF-8などが有名）とよばれる変換を用いて数字としてPCの中では認識されています。

WebサイトのURLの場合、これに該当するのがIPアドレスと呼ばれるものです。IPアドレスとは、通信先の相手を識別するための番号でありスライドのような数字です。こちらも、文字コードのようにURLとＩＰアドレスを紐づける変換を行って実際にサーバー上には届きます。この一連の変換のことを名前解決と呼びます。クライアントがリクエストをする際に一度DNSサーバーというサーバーが名前解決をしWebサーバーに渡します。

＜要約＞
・WEBサイトを見るときPCではクライアントからインターネットを通じサーバーとやり取りしている。
・ほしい情報を送る行為をリクエスト、情報を返すことをレスポンスと呼ぶ
・リクエストをする際には名前解決を行ってる。

②サーバーとは

サーバーとは、リクエストに対していつでもレスポンスを返すように設定されたコンピューターのことです。（誤解を恐れずいうのであれば、電源が常についている画面のないパソコンです。）私たちが持っているPCも設定をすればサーバーにできます。

リクエストの種類に応じて様々なサーバーがあります。

例）
・WEBサーバー：リクエストに対してHTML,CSS,JavaScriptなどの情報を返す役割
・APサーバー：JavaやPHPなどで作成されたアプリケーションを実行して動的コンテンツを生成する役割
・DBサーバー：データの保存や更新、バックアップなどを行う役割

などがあります。

これらが相互に連携しあうことで、レスポンスを返しています。

＜要約＞
・サーバーじゃずっと起動したままリクエストが来るのを待ち、リクエストが来たらレスポンスを返す。
・サーバーにはさまざまな種類があり相互にやり取りをしてクライアントにレスポンスを返す

③クライアントとは

一般にPCはハードウェアとソフトウェア。
ソフトウェアはさらにアプリとOSの二つに分けることが出来ます。

この章ではそれぞれの役割についてみていきます。

ハードウェア：コンピューターを物理的に構成する機器の総称のこと。具体的にはマウスやキーボード、ディスプレイなどです。

ソフトウェア：コンピュータに命令を出すための情報であるコンピュータ・プログラムのこと。ノートンであったりAdobeなどが当てはまります。

さらにソフトウェアは、OSとアプリに分けることが出来ます。

OS：さまざまなアプリケーションソフトを動かすための最も基本的なソフトウェアのこと。基本的には、Windows,Mac.Linax
アプリ：ある特定の機能や目的のために開発・使用されるソフトウェアで、コンピュータの操作自体のためのものではないもののこと。例としては、Gmail,Word,LINEなどが当てはまります。

簡単に言うと、OSが「基盤」、アプリは「＋α」といった形です。

良いたとえかどうかわかりませんが、教育で例えると、

OSは義務教育である初等中等教育のこと。
アプリは高等教育以上のこと。（高校以上は行くのが強制ではないし、大学は専門に分かれて勉強をします）

といった形です。

＜要約＞
・PCには階層構造がある。
・大きく分けるとハードウェアとソフトウェアがある。
・ソフトウェアはさらにOSとアプリに分けられる。
・基本ソフトをOSと呼び、ユーザーは必要に応じてアプリをインストールして使うことが出来る

④CUIとGUIとは

テレビを見ていると時々、黒の画面で怪しげな操作をしているハッカーをみたことがありませんか？(笑)

この章では、ソレについて解説していきます。

結論、怪しげな操作の正体は文字によってパソコンを操作しているだけだったんです。これはCUI（Character-based User Interface）といいエンジニアの中では一般的なパソコン操作です。普段私たちが使うのはGUI（Graphical User Interface)とよび、ドラック＆ドロップで操作しています。GUIは直感的にすごくわかりやすいですが、何かを開発する際にはCUIがよい場合もあったりします。

CUIのメリット
・処理の自動化がしやすい
・容量が軽い
・操作の記録を残しやすい
・コピペして複数人で共有しやすい

補足ですが、CUIではエラーがよく出ます。初めてプログラミングをすると、何が何だか分からないエラーが多々出て戸惑うのが常ですが一つ一つ検索し意味を理解していくことでスキルが上達していくとよく言われます。

＜要約＞
・エンジニアでは、よくCUIが用いられる
・CUIとは文字でパソコンを操作すること。
・CUIにはGUIにはない様々な開発メリットがある。

⑤プログラミング言語とは

プログラミング言語は、CUIを代表する例の一つ。
人工的に作られた言語なので人工言語という。

様々な種類の言語があるが、
主に、A何を扱うのか　B人間寄りかPC寄りかで大きく分けれる

A何を扱うのか
デザイン/クライアントサイド/サーバーサイド/OSなどなど
B人間寄りかPCよりか
（低級）機械語/アセンブリ言語/C言語/Python（高級）　などなど

＜要約＞
・プログラミング言語はCUIの代表例
・様々な言語がある。
・初心者には高級言語がおすすめ

⑥HTML/CSS/JavaScript

HTML,CSS,JavaScriptはサーバーからレスポンスとして返され、クライアントサイドで読まれる言語。

・HTML：サイトの構成を決める役割
・CSS：サイトの装飾を決める役割
・JavaScript：動作を決める役割

がそれぞれある。

GoogleCromeの検証モードから生のコードを見ることが出来る

＜さいごに＞
参照