LoginSignup
8
15

More than 5 years have passed since last update.

いまさら聞けないフロントエンド技術用語集

Last updated at Posted at 2017-07-05

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

DOM

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

DOMツリー

これのこと。HTMLは階層的に表現される。
2FA2F7B9-39BA-4557-A440-120CA33E4709.jpg

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の処理順序

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

マッシュアップサービス

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で使われる

非同期と同期

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
15