安田学 manabuyasuda

Git用語集 - Gitを始めてみよう!! (FRONTEND CONFERENCE 2016)

「FRONTEND CONFERENCE 2016」でおこなわれるハンズオン「Gitを始めてみよう!!」で使用する用語をまとめたものです。

「Git」は分散型のバージョン管理システムのことです。Gitの機能を使うと、専用のサーバーに保存したファイル（リポジトリ）を自分のパソコン内（ローカル環境）にも複製することができます。

サーバーに保存したデータや、複製したデータ、ローカルで作業したデータに変更履歴を残すこともできます。それによって、データを共有しながら、それぞれのデータの差分を管理することができます。

Gitは「GitHub」や「Backlog」のような、サーバーのレンタルやGitにはない機能を提供しているサービスを使って利用するのが一般的です。

セレクタ名、セレクタの構文、詳細度、セレクタの説明を表組みにしてまとめています。

セレクタの構文には以下のようにして構文の例を示しています。

	// @desc - img要素内のsrc属性をウィンドウサイズに応じて置換する。
	// @example html
	// <img src="image_sp.png" class="js-image-switch" alt="">
	// CSSで画像の描画サイズを切り替えると、より柔軟に対応できる
	// @see - https://gist.github.com/manabuyasuda/d000bcdcf5ea7ac17c9c
	$(function() {
	// 置換の対象とするclass属性。
	var $elem = $('.js-image-switch');
	// 置換の対象とするsrc属性の文字列。
	var sp = '_sp';

	// @desc - スクロールの方向を判断して、ナビゲーションの表示を切り替えます。
	$(function() {
	// 表示を切り替えるナビゲーションのクラス名を指定する。
	var $nav = $('.nav');
	var state = 'is-active';
	$nav.addClass(state);

	var startPos = 0;
	var scrollTimer;

	// `.js-matchHeight`がページ内にあればその要素の高さを揃える
	$(function() {
	var $class = $('.js-matchHeight');
	if($class.length) {
	$class.matchHeight();
	}
	});

	<% var
	// `fileName`にページのフォルダ名を記述します。
	// `pageName`にナビゲーションに表示するページ名を記述します。
	// `subName`にナビゲーションに表示するページ名の補足等を記述します。
	// index.ejsの`pageCurrent`と`name`が同じ場合は`.is-current`が付きます。
	navs = [
	{ fileName: "child-page1", pageName: "child page1", subName: "sub name1"},
	{ fileName: "child-page2", pageName: "child page2", subName: "sub name2"},
	{ fileName: "child-page3", pageName: "child page3", subName: "sub name3"},
	]

	// @desc - キャレット（<）を生成します。
	// @prop - `$size`は長さ、`$weight`は太さを定義します。
	@mixin caret($color: #333, $width: 14px, $weight: 2px, $deg: 35deg) {
	display: inline-block;
	position: relative;
	width: $width;
	height: 1em;
	margin-left: 1em;
	border: none;
	vertical-align: middle;

	<!-- 実際の画像サイズの半分を指定する -->
	<img src="" alt="" width="100px" height="100px" class="image-unset"/>

	//
	// #Easing
	//

	// `transition-timing-function`と`animation-timing-function`プロパティに指定する、
	// cubic-bezier() 関数記法で定義した、3次ベジェ曲線のタイミング関数です。
	// 実際に動きは、以下のサイトで確認できます。
	// https://matthewlein.com/ceaser/
	//
	// デフォルトのタイミング関数には以下のような特徴があります。