Webのフロント技術を勉強していると、"この単語知らないなんて言えない・・・！"
という単語がちらほら現れます。
そんなWeb業界初心者の私がこそっとググっていた用語集（ザックリ）。
この辺がピンときていれば、あとは未知に遭遇しても
"次にどのへんを調べたらいいか"、がわかるような気がします。

DOM

Documentdomt Object Modelの略。xmlやhtmlドキュメントをツリー構造として表現したもの。
各要素を”ノード”という。

DOMツリー

これのこと。HTMLは階層的に表現される。

DOMイベント

ブラウザが用意している、ユーザがDOMに対して行うことのできるイベントのこと。
クリックしたら、とか、マウスがホバーしたら、とかのこと。
好きに実装していいDOMイベント一覧は、DOMイベントリファレンスを参照。
フロントエンド開発では、たいていの場合、イベントとアクションが対になる。

JSON（JavaScript Object Notation）

テキストベースのデータフォーマットのこと。
実は、JSのオブジェクトを記述するための書式。
eval()関数で評価することで、JSオブジェクトに変換できちゃう。
JSONは、key-valueがセットになった形をしており、データ区切りはカンマ。
連想配列の場合、変数名.keyでvalueを扱う。
全体がツリー構造で表現できるので書く方も読む方もラク。

エンタープライズ系ゴリゴリバックエンド出身の私はCSVくらいしか知らず。
XML,CSVと並んで説明されることが多いが、得手不得手が当然ある。
台頭してきた順番としては　 CSV->XML（Extensible Markup Language）->JSON の順。

CSVと比べる

CSVはヘッダ行がないとデータの中身がわからないのに対し、
JSONはkey-valueのセットでデータの中身が一発でわかることと、軽量なのがウリ。
CSVはデータの形も項目も一回決めれば固定なものや、
バッチ処理のタイミングが決まっているものなどに適している。
つまりリクエストごとにデータのやりとりが発生するWebシステムにはXML,JSONが向いている。

XMLと比べる

マークアップなので書くの面倒、読みづらさ、が有名のようす。
属性とテキストノードがごっちゃになったり、ファイルが大きく複雑になりがち。
なので、用途はあまりJSONと変わらないが、JSONの方が入力する文字の量が半端なく少ないし、
パッと見人間フレンドリーなので、敬遠されつつあるみたい。

Tips

フォーマッタ・バリデータが一緒になったサイト。
https://jsonformatter.curiousconcept.com/

API(Application Program Interface)

もともと存在するプログラムを呼び出して、
その機能を組み込んだソフトウェアを開発することができる、というもの。
有名なところで行くと、Google、LINE、楽天、Twitterなどが、独自のAPIを開発。
それを、ユーザが利用することで、各サービスのデータをユーザのサイトで利用できるようになる。

例えば・・・

ぐるなびに乗っているGoogleMapのページ(Google Maps API)
自分のサイトに、Twitterつぶやき投稿ができるように埋め込む(Twitter API)
まとめサイトの下の方に表示されてる、Amazon、楽天のアフェリエイト
・・・などなど！

APIの処理順序

クライアントからhttpでサーバへリクエストする
サーバ処理してレスポンスが返ってくる

マッシュアップサービス

WebAPIを組み合わせてできたサービス。

HTTPリクエスト/レスポンス

送受信されるデータの形式：XML,HTML,JSON,画像ファイル形式が一般的。
ajax形式で利用されることが多い。

Ajax

Asynchronous JS + XML の略。jsを使って非同期にDOM操作、データ取得ができる。
WebAPIを用いたCGI版のアプリケーションと同様の機能を持つ。

クロスドメイン制約

JSでAjaxを用いて外部のリソースを取得する場合、その外部リソースは同じドメインでないといけない。

回避する方法 -> iframe, JSONP
外部のAPI使うときは、Proxyが必要になる。

XSS（クロスサイトスクリプティング）

これを防止するには、ユーザ入力した文字列の画面出力時にはHTMLをエスケープする。

CGI（Common Gateway Interface ）

Webサーバが外部のアプリケーションとやりとりするためのインターフェースプログラム（サーバ側のプログラムなので言語は問わない）。各リクエストが別々のプロセスを開始しないといけないので、サーバに負荷がかかる

C,C++ -> ハンドラ
Java -> サーブレット　と呼ばれる
PHP使うなら、MAMPで開発する

FQDN

絶対ドメイン名。FQDNとは、DNS（Domain Name System）などのホスト名、ドメイン名（サブドメイン名）などすべてを省略せずに指定した記述形式のこと。例えば、「www.atmarkit.co.jp.」はホスト名「www」とドメイン名「atmarkit.co.jp」をすべて揃えたFQDNである。

Webサーバ

apache -> UNIX,LINUXで使われる
IIS　 -> Windowsで使われる

非同期と同期

非同期：並列で実行されることもある
同期：直列的に実行する。新しい依頼は待ち行列で処理される。