はじめに

　備忘録として、フロントエンドで押えておくべき用語をメモしていきます。

1.CSS

1-1.Floats

　float（フロート）プロパティは、＜div＞などの要素を横並びにする際に使うCSSのコード。floatは浮くと言う意味があり、要素を浮いた状態にして並び替えれるようにする。
　「float:値；」という形で使用することができ、値には「left,right,none」などを指定することができる。
　注意点として、floatは指定した要素が浮いている状態なので、指定していない要素が下に回り込んでしまうことがある。

1-2.Positioning

　positionプロパティは、要素の位置を決める時に使うCSSのコード。
種類としては、static(初期値)、relative(今の位置を基準に相対的な位置を指定)、absolute(親要素を基準に絶対的な位置を指定)、fixed(画面の決まった位置を指定)などがある。

1-3.Display

　要素の表示形式を指定するプロパティの一つです。
　指定できる値は主に4つあります。
　1.block：＜div＞、＜h１＞タグなどの初期値、要素が横いっぱいに広がり、
　　　　　　要素同士は縦に並ぶ
　2.inline：＜span＞、＜a＞、＜img＞タグなどの初期値、要素同士が横に並ぶ
　3.inline-block：inlineとblockの中間
　4.none：非表示にする

1-4.Box Model

　HTMLの要素は全て四角形のボックスと呼ばれる領域が生成されます。ボックスの種類にも２種類あり、ブロックボックスとインラインボックスの２種類あり,上記のDisplayプロパティの指定によりボックスの種類が変る。
　Box Modelは主に4つの領域で構成されている。

　
content(コンテンツ）
　テキストや画像などの要素そのものが表示される領域で、width(幅）、height(高さ)プロパティで指定することができる。

padding(パディング)
　contentとborderの間にある余白の領域。paddingプロパティを使って値を指定することができる。

border(ボーダー)
　paddingの外側にある枠線。border-widthプロパティで指定することができる。

margin(マージン)
borderの外側の余白。marginプロパティで指定することができる。

1-5.Flex Box

　flexboxを使うと、要素の縦横の配置を簡単に変更することができる。
　以前は、ブロック要素を横並びにする際はfloatが広く使われていましたが、仕組みが複雑で、記述を間違えてしまうとレイアウトが大きく崩れる、高さが消えるのでclearfixを使用しないといけないなどの欠点がある。
　現在は下記のCSS Gridと共にレイアウト技術では主流となって使われている。
　親要素にdisplay:flex;と記述するだけで、子要素は「flexアイテム」というものに変わり、要素を上下左右に簡単にレイアウトすることができる。

1-6.CSS Grid

　CSS Gridは、上記のflexboxと似ており、要素の縦横の配置を簡単にする技術。
　flexboxとの大きな違いとしては、
　・サイズの指定をする時に、flexboxは子要素ベースで行うが、CSS Gridは親要素ベースで行う。
　・CSS Gridはgrid-column-gapというプロパティを使用して子要素に隙間をつけることができる。flexboxには隙間をつけるためのプロパティはない。
　・flexboxは、縦か横のどちらか一方向のレイアウトに適しており、CSS Gridは縦と横の二方向にレイアウトする時に適している。

1-7.BEM

　・Block(かたまり）、Element（要素）、Modifier（修飾）の頭文字をとったもの。厳格なclass名の命名ルールが特徴的なCSS設計方法の一つ。
　・厳格なclass名の命名ルールがあり、HTMLを見ただけでスタイルを予測しやすいメリットがある。

2.JavaScript

2-1.Hoisting

　・Hoisting(巻き上げ)とは、コードを実行する前に関数や変数が実行コンテキスト(関数部分）のメモリに格納されること。
　・JavaScriptは、関数内ではどこでも変数を宣言することができる。それがどこで宣言されていても、関数の先頭で宣言される。
　・Hoisting(巻き上げ）されるのは宣言部分だけで、値は代入されていないので、varの場合、「undefined」になり、let、constの場合は「ReferenceError」が起きる。
　・予期せぬエラーを発生させないために、ローカル関数は関数の先頭で宣言する。
　

2-2.Event Bubbling

　・要素上で起きたイベントが、親要素に伝搬されていく仕組み。
　・Bubblingを止めるためのevent.stopPropagation()メソッドがある。

2-3.Scope

　・変数の有効範囲を定義する概念のこと。
　・同じScope上であれば変数にアクセスできるが、Scopeが違えばアクセスすることができない。
　・Scopeを使用し有効範囲を決めることで、変数名の競合を避ける、メモリの消費を減らすなどのメリットがある。
　・Scopeには、グローバルスコープ、ローカルスコープ（関数スコープ、ブロックスコープ）などの種類がある。

2-4.Prototype

・prototypeとは「オブジェクト」のこと。
・javascriptは、あるオブジェクトをベース（プロトタイプ）にして独自の特徴を付加していく考え方のプロトタイプベースのオブジェクト指向言語。

2-5.Shadow DOM

・DOMに対して、カプセル化を提供する仕組み。
・カプセル化とは、あるHTML要素の中身に直接アクセスすることはできず、中身の詳細を見ることもできず、HTML要素を実装した人の用意したメソッドでしかその中身にアクセスできない仕組み。
・Shadow DOMのメリットは、自分のコードがHTML要素内に悪影響を及ぼす心配もなく、要素内を詳しく知る必要もなく、実装した人が公開している機能だけ知っていれば多くの人が扱うことができる。

2-6.strict

　・Javascriptのコードをより厳しくエラーチェックすることができる仕組み。通常ではエラーが出ていなかったバグが起こりそうなコードに対して、エラーを表示してくれる。
　・全体に適用するには、コードの一番上に「"use strict";」と記述する。

2-7.Ajax/XHR

・Ajaxとは、javascriptとXMLを使って、非同期にサーバーと通信すること。
・非同期通信とは、画面が遷移せずにサーバーと通信すること。
・XHRとは、Ajax(非同期通信）に使われる組み込みオブジェクトのこと。使用することでサーバーへ通信リクエストを送ることができる。