[アウトプット用]　初心者が押さえるべきWEB用語集

# オリジナルのWEB用語集

作成経緯として、プログラミングを学習して専門用語と衝突し何となくの理解や知識が浅はかである知識の理解を深めるのが狙い:writing_hand_tone2:

この発信の期待効果として、

* __人に教えるスキルを習得__
* __記憶力の定着__
* __頭の中が言語化され理解度UPを図る__
* __備忘録としての有効活用__


# WEB用語集　説明書
* 作者の躓き・理解の浅い分野のアウトプットリスト（初心者に教えるように心掛ける）
* アルファベット・５０音順
* 随時更新とする

# 更新履歴
8/23 DX,DOM,XML
8/24 CUI,GUI,ER図
8/25 ユーザーインターフェース
8/26 IPアドレス,ポート番号,TCPとUDP
8/27 ECMAScript,サーバサイドスクリプト,JSON
9/1  フレームワーク
9/2  Webサーバー
9/3 データーベース,クエリ
9/4 キャッシュサーバー,キャッシュ、同期通信、Ajax

#Ajax(Asynchronous JavaScript + XML)
導入背景:同期通信の欠点を補うために導入された技術。

__メリット__

__Ajax通信なら通信中でもユーザーを待たせないのが利点__
 > AjaxではWebブラウザの代わりにWebブラウザ上で動くJavascriptが通信を行うため、Javascriptの機能を使った非同期通信が可能となる。内容として、Webサーバーからのレスポンシブを待つ間もクライアント側であるJavascriptがレスポンシブに左右されない箇所のHTMLを更新したり、ユーザーからの入力を受け付けることが可能。非同期通信を行うことで、レスポンス待ちの有効活用ができ、ページの更新がより早くなる。

__サーバーへの負担軽減__
> AjaxではWebブラウザ上でクライアントサイド・スクリプトで動くJavascriptが直接Webサーバーと通信を行い、取得したデーターを用いて、表示するHTMLを更新する。データーのやりとりはXMLが用いられ、JavascriptはDOMを使ってXMLやHTMLを操作する。HTMLそのものをやり取りするのではなく、更新に必要なデータのみをやり取りするため、送信するデータ量は同期通信の時よりも少なくなり、サーバーへの負担が抑えられる。

# API
APIとはAppilication Programming Interfaceの略で、アプリケーションの機器を外部から利用できるようにする仕組みのこと。

豆知識:frowning2:　
企業同士がAPIを使ってサービスを連携することで生まれる新しい経済圏をAPIエコノミーを呼ぶ。

# BPR
BPRとはBusiness Process Reengineeringの略で、業務プロセスを再設計し、ITを十分に活用し、企業の構造を抜本的に変革すること。

# BPM
BPRとはBusiness Process Managementの略で,PDCAの流れで継続的に業務プロセスを改善すること。

# BYOD
BYODとはBring Your Own Deviceの略で,従業員が個人所有の端末を、許可を得て業務に使用すること。

# Cookie
アクセスしたブラウザに,WEBサーバーからの情報を一時的に保存する仕組み。ユーザの情報、訪問回数などを保存可能。保存された情報はクロスサイトスクリプティングやスパイウェアによって盗まれる恐れもある:imp:

#CUI
CUIとはCharacter User Interfaceの略で,キーボードを入力して何かしらのコマンドを入力して動作をコンピューターに指示する。Macをお使いの方はターミナルを起動するとこのような画面が表示されます。これがまさにCUIです![スクリーンショット 2021-08-24 20.06.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1572216/1b30ef7b-14ee-4043-9fdd-f37206b2e731.png)


#CSS
CSSとはCascading Style Sheetsの略で、HTMLで記述された文章にレイアウトスタイルを装飾できる。身近で例えるなら、洋服ですね:person_frowning_tone2:HTMLを人の体に例えると、一方、CSSは洋服などの装飾品の役割をします。CSSを活用することで文字の大きさ、色、フォントを変更することができる。

#CSV形式
拡張子「.csv」　CSVファイルは互換性が高い。文字、数値データをカンマで区切り、レコード間は改行は区切って記録する。

#DX
DXとはDigital Transformationの略で,デジタルトランスフォーメーション。進化したIT技術を浸透させることで、人々の生活をより良いものへと変革させるという概念のことです。

# DOM
DOMとはDocument Object Modelの略で、HTMLやXMLなどのマークアップ言語で書かれた文章で書かれた文章の書く要素を自由に操作する仕組み。HTML要素はツルに連なったサツマイモみたいな構造になっています。この構想だと情報を抜き取るのに面倒だったりします。そこでDOMで要素のIDを指定することで目的の要素を一発で抜き取ることができます。イメージとしては下記のイラストです。![_imohori-01 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1572216/2f72b85c-28fa-a822-d108-f77cc3857cb0.png)

# ECMAScript
Ecma Internationalのもとで標準化手続きが行われているJavaScriptの規格。現在では一般的にJavaScriptというとECMAScriptのことを指し、多くのWEBブラウザはECMAScriptに対応している。

# ER図
ER図とはEntity-Relationship Diagramの略で、業務で利用するデータの構造を分析して、データ間の関係を明らかにするする際に用いる。データ構造には”実体”と”実体間の関係”という概念で視覚的に表した図です。実体間の関連は、以下の４つです。

![スクリーンショット 2021-08-24 19.09.15（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1572216/b42115e6-f35e-3efa-0e2f-19767af5b2db.png)
例えで、生徒がどのクラスに所属しているかをER図で表現してみましょう！この場合は、実体は「生徒」と「クラス」になります。
![スクリーンショット 2021-08-24 19.38.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1572216/84b78ba5-2962-41f2-7984-74b4d072c09c.png)

# GUI

GUIとはGraphical User Interfaceの略で、コンピュータへ出す命令や指示等を、ユーザが画面上で視覚的に捉えて行動を指定できるもので、CUIに比べ、直感的に操作できるのが特長![スクリーンショット 2021-08-24 19.59.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1572216/bfee910b-34e1-8317-b696-49d71c55104e.png)

# IPアドレス
インターネットに接続されたコンピュータを特定し、データの行き先を管理する為に利用されているのが識別番号。インターネットにおいてIPアドレスは世界で一つだけである。いわばIPアドレスは世界中で利用できる「住所」。コンピューターに割り当てられた住所を指定することで、インターネット上の特定のコンピューターに接続可能。

# JSON
JSONとはJavaScript Object Notationの略で、構造化したデータを表すためのデータ記述言語の一種。JavaScript以外にもPythonやJava、PHPなどの幅広い言語で使われていて、JavaScriptなどのクライアント言語とPythonなどのサーバサイド言語間のデータのやり取りで使われることが多いです。

__データ構造を表すのに使われる__
JSONを利用することで、データを木構造で表現することが可能。元々はJavaScriptで使われる想定で作成されたデータ構造なので、JavaScriptと非常に相性が良い。

__JSONとXMLの違い__
近年、データのやり取りはJSONですることが多いですが、JSONが登場する前まではXMLというデータ構造が主に使われていました。

# Webサーバー
webアプリケーションにおいて、Webクライアントに対する窓口の役割を果たすプログラム。webクライアントからのリクエストを受け取って静的ページのデータ、動的処理の必要なものがあれば、サーバーサイド・プログラムと連携して、処理の結果としてHTMLファイルをWebサーバに転送する。

<img width="1440" alt="スクリーンショット 2021-09-02 21 03 21" src="https://user-images.githubusercontent.com/82036851/131840295-5baf2d99-2f3a-44b0-8ad2-26a3ed684337.png">

webサーバーの役割として、静的ページのデータや、APサーバーから転送された動的ページのデータをWeb上に転送すること。

__XML__
* データとして文字列しか表すことができない
* 全ての情報にタグをつける必要であるため、データサイズが大きくなる
* テキストの任意の場所にタグを付けができる

```
<?xml version="1.0" encoding="utf-8"?>
<data>
  <item>
    <id>1</id>
    <name>tanaka</name>
  </item>
  <item>
    <id>2</id>
    <name>nakata</name>
  </item>
</data>
```

__JSON__
*　データとして文字列以外に、数値や空を意味するデータなどを扱うことができる
*　データを括弧で囲んで構造を表すので、データファイルは小さい
*　タグによるマーク付けができない為、人間は読みにくい

```
{
  "browsers": {
    "firefox": {
      "name": "Firefox",
      "pref_url": "about:config",
      "releases": {
        "1": {
          "release_date": "2004-11-09",
          "status": "retired",
          "engine": "Gecko",
          "engine_version": "1.7"
        }
      }
    }
  }
}

```

# TCPとUDP
TCP（トランスミッション・コントロール・プロトコル）とUDP（ユーザ・データグラム・プロトコル) は、インターネット上でデバイスからウェブサーバにデータを転送するためのネットワークプロトコルのことを指します。現在、インターネットやLAN上で最も利用されている通信プロトコルがTCP/IP。IPは宛先（アドレス）を指し、TCPは実際にデータを転送する役割となります。TCPやUDPは、データをパケットと呼ばれる小さな単位に分割します。

***
 TCP（トランスミッション・コントロール・プロトコル）
TCPは、送信側と受信側でお互いに確認を取りながら通信行うコネクション型

UDP（ユーザ・データグラム・プロトコル)
UDPは送信側と受信側で確認を取らないコネクションレス側

***

TCPとUDPの主な違い


||TCP| UDP|
|:---:|:---:|:--:|
|信頼性|高い|低い|
|転送速度|遅い|速い|
|タイプ| コネクション型 | コネクションレス型 |


# XML

XMLとはExtensible Markup Languageの略で,拡張可能なマークアップ言語と訳されます。XMLは、データ記述用の言語。文書中のデータをわかりやすくしたり、データを交換したりできます。マシンに情報をわかりやすく、効率よく伝えるための言語といっても良いでしょう。

# サーバサイドスクリプト
サーバサイドスクリプトとは、Webサーバ上で動作し、Webサーバ上でプログラムの実行が要求されるたびに、結果をウェブブラウザに対して送信するようなプログラムである。よくサーバーサイド・スクリプトの開発で使用される言語として、Perl,Python,PHP,Rubyの言語が使われる。

それぞれの特徴

|言語| 特徴|
|:---:|:---:|:--:|
|Perl|文法の自由度が高い|
|PHP|CGIを使わなくてもHTMLに埋め込んで使うことができる|
|Python| コネクション型 | スクリプトの可読性が高い |
|Ruby|オブジェクト指向プログラミングに適している|

#キャッシュ
一言でまとめると、リクエストに対するレスポンスの記憶。
__メリット__
アクセスしたサイトや、起動させたアプリなどのデータを一時的に保存しておく技術です。1からデータを読み込む必要がなくなるため、サイトの表示や、アプリの動作の速度を上げられます。

#キャッシュサーバー
キャッシュサーバーとは、Web上の各種サーバーのデータを一時的に日ぞしておき、ユーザーからの要求に応じて本来のサーバーの代わりにデーターを送るサーバのこと。

キャッシューサーバーの利点
キャッシュサーバーを設置することで、本来のサーバーへのアクセスを減らすことができるため、サーバー側の負荷は軽減され、ユーザー側にとってはアクセスが高速化。

>リクエストに対してレスポンスの記憶をキャッシュと呼ぶ。

#クエリ
データベース管理システムに対する問合せ（処理要求）のこと。わかりやすく、データベースに対して「これ調べて」命令文みたいなもの。

データの抽出や更新などの処理要求を文字列で表す。処理対象のテーブルやデータの抽出条件、並べ方などを指定する。


#データーベース
データベースとは、決まったデータモデルで整理されたデータの集まりのことです。たとえば、顧客情報を「氏名」や「電話番号」の項目ごとに整理したり、複数の商品情報を「商品コード」別に分類したりしたものがデータベースになります。身近なものとして辞書挙げられます。大量の情報を扱いやすいように整理されているので、データベースといえます。

__データベースの役割__
集積したデータを抽出・編集・共有しやすくする。

例えば、
* 商品在庫データの中から、ある商品を見つけたい
* 住所録の中から、東京都在住の人物をリストアップしたい
* 名前リストのなかから、「山田」のものだけを抜き出したい

バラバラな形式でデータが保存されていた場合、該当の情報を地道に探さなければならず、多くの時間と労力を要します。データベースなら検索や抽出がしやすいので、面倒な作業をせずに済む。

__同期通信__

デメリット:同期通信はレスポンシブ待ちが発生する。

なぜか？ Webブラウザがリクエストを送り、Webサーバーが作成したHTMLファイルをレスポンスとして返し、Webブラウザがデータを取得してコンテンツ内容を変更しています。同期通信の場合、サーバーが処理を行っている間、Webブラウザ上では待つ事しかできない。HTMLファイルを受け取って表示の処理を行うため、全体としてページの更新に時間がかかってしまうのが欠点である。また、送信するデータも多くなりがちで、サーバーへの負担もかかる。

> クライアントとサーバーが処理を行っている間、同調して通信することを同期通信と呼ぶ。
#フレームワーク

アプリケーションを開発するとき、その土台として機能させるソフトウェアのこと。「枠組み」「骨組み」「構造」などといった意味があり、土台となるフレームワークに必要な機能を追加し、アプリケーションの開発を進める。

フレームワークの最大のメリットは、目的のアプリケーションをゼロから開発する必要がないので、開発工程を大幅に短縮できることにある。またフレームワークを利用すると予め用意された雛形に沿っての開発となるため、開発者の力量の差による品質のばらつきも出にくいメリットもある。

>Javaをベースとした「Java EE」 「Struts」 「Spring Boot」
PHPをベースとした「Cake PHP」 
Rubyをベースとした「Ruby On Rails」 
 
#ポート番号

ポート番号はコンピューター内部で動作するサービスを表す。
IPアドレスを建物の住所に例えるなら、ポート番号は「部屋の番号は何号室か？」にあたる。コンピュータネットワークにおいて、プロトコル、IPアドレスとポート番号はまとめると、「どのような方法」で「どこ」の「何号室」に通信をとるのか？と捉えると概要を掴みやすい。

通信において重要なポート番号だがポートを開くということは、特定の部屋の扉をあけはなっている状態に等しいので、サービスを提供するサーバでもないかぎり、基本的に不必要なポートは開かないように設定しておかなければならない。



# ユーザーインターフェース
コンピューターの機能とユーザーのやりとりの受け渡しをする機能。
![スクリーンショット 2021-08-25 23.04.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1572216/d0acba9c-7611-9d84-aee1-e009a3a1d443.png)
例えとしてWebメールはハーパーテキストを使用してメールの一覧画面を表示することで、ユーザーがメールサーバーの中のメールを表示したり操作したりするために受け渡しを行います。ハイパーテキストで作られたメールの操作画面に対してユーザーが行った操作を、Webサーバーがユーザーの代わりにメールの操作を行う。