こんにちは、くーへいです。
6月21日に「FRONTREND IN NAGOYA」に参加してきました。
第一線で活躍するフロントエンドエンジニアの皆さんの講演を聞いて、俄然やる気が出てきております！
さてさて、今回はそんな講演の中で出てきた技術についてまとめてみます。
すでに良く知られているものもあれば、知らなかった！というものもあるかと思います。
当然ですが、全部習得するのは不可能だと思いますので、気になったものを習得していくのが良いでしょう。
このページに技術を随時まとめていき、個別の記事を書いたらリンクを張ろうかと思っています。
ちなみに、読み方は正しいとは限りませんのであしからず・・・。
バージョン管理
Git（ギット）
バージョン管理と言えばこれ、というくらいに浸透していますね。
分散型のバージョン管理システムです。
同種のシステムもいろいろありましたが、現時点ではGit一択と言っても過言ではないでしょう。
ファイルの変更を管理するリポジトリがローカルとリモートで分かれている点が大きな特徴です。
Git自体はコマンドラインのみのツールですが、各種OS向けにGUIのGitクライアントもリリースされています。
また、GitHubはもっとも有名なGitホスティングのウェブサービスで、無料で利用できます。（ただし、無料版では保存したソースコードがすべて公開される）
JavaScript関連
altJS（オルトジェイエス）
記述方法がやや難解なJavaScriptの代替として用いられる中間言語の総称。
いずれもコンパイルすることで純粋なJavaScriptを生成します。
TypeScript、CoffeeScript、Haxeなどが代表格。
それぞれに書き方や性質が全く違うため、案件や自分との相性で使用するaltJSを決めていく。
Node.js（npm）（ノードジェイエス・エヌピーエム）
通常のJavaScriptはクライアントサイドの言語ですが、それをサーバーサイド実装の言語にしたものがNode.jsです。
後述のSocket.IOが特徴。
npmはNode.jsにおけるパッケージ管理システム。
AngularJS（アンギュラージェイエス）
Googleが開発したJavaScriptのフレームワーク。
HTMLのhead内にAngularJSの本体を読み込み、対象となる要素に変数を設定、二重かぎかっこで変数をリアルタイムで出力できます。
※詳細はググってください。
昨年末あたりから日本でも急に流行し出したようですが、日本語の情報量は多いものの、実践的な資料や実装した際の注意点などは少ないように思います。
JsRender（ジェイエスレンダー）
JavaScriptのテンプレートエンジン（要はフレームワークの一種？）。
AngularJSと同様の仕組みを提供していますが、一般的にAngularJSよりも簡素であるという印象が強いようです。
JSRenderは、もともとjQuery Templateとして発表予定だったものの実質的な後継とされており、jQueryのプラグインとしても動作します。
Handlebars.js（ハンドルバーズジェイエス）
JavaScriptのテンプレートエンジン。
CreateJS（クリエイトジェイエス）
AdobeやMicrosoftがスポンサーになっているJavaScriptのライブラリです。
ActionScript3に近い文法になっており、Flashに似た動作を実現できます。
Sinon.JS（シノンジェイエス）
いわゆるJavaScriptのテストに特化したライブラリです。
様々な機能がありますが、
- メソッドの引数、戻り値、実行回数などの記録
- メソッドの振る舞いを変更する
- オブジェクトの時間操作
- XMLHttpRequestを操作する
などが可能となります。
Mocha（モカ）
こちらもJavaScriptのテストに特化したライブラリです。
Sinon.JSと同様のことが行えます。
ブラウザでの実行とともに、Node.jsでの実行も可能です。
Mochaはテストを実行してその結果を集計・表示するテスティングフレームワークです。
テスト結果の判定には後述するchai.jsをはじめとした、アサーションライブラリが必要になります。
chai.js（チャイジェイエス）
アサーションライブラリ。
テスティングフレームワークが行ったテスト結果を判定します。
通信規格
WebSocket（ウェブソケット）
非同期通信を実現する「Ajax」と「Comet」のデメリットを解消するために生まれた規格。
HTML5にて追加されました。
Ajaxではクライアントからのリクエストで通信が行われるため、サーバー側からはデータを送信できないというデメリットがありました。
一方のCometではサーバー側からクライアントへ通信が行えるが、Ajaxのメリットであったリソース消費が犠牲になっていました。
WebSocketではサーバーからクライアントへリクエストを送信することができ、かつコネクションを永続的に保つことでリソースを無駄にしないようです。
サーバー側、クライアント側（ブラウザ）双方の対応が必要ですが、ともに対応しきれていないのが現状。
Socket.IO（ソケットアイオー）
Node.jsのライブラリとして実装されている通信規格で、ざっくり言うと「Ajax」「Comet」「WebSocket」のいずれかを切り替えて通信します。
そのため、環境に左右されにくいという特徴があります。
CSS関連
Sass（サース、サス、サッス）
SassはCSSの中間言語であり、コンパイルすることで純粋なCSSを生成します。
純粋なCSSにはない、変数・ネスティング・ミックスイン・引数などに対応しています。
SCSS（エスシーエスエス）
SCSSはSassの文法を変更したものです。
同様な機能を有しており、文法がより純粋なCSSに近くなっています。
つまり、純粋なCSSをSCSSに落とし込んでコンパイルしても、ほぼ同様のCSSが生成されます。
SCSS公式サイト（Sassと同じ）
LESS（レス）
上記のSass、SCSSと同様に、CSSの中間言語です。
上記２つと大きく異なる点として、動的なコンパイルが可能な点が挙げられます。
LESSのコンパイルにはnode.jsが使用されており、LESSを使用するにはインストールが必須です。
また、記法も異なっており、SassやSCSSに比較すると出来ることも限られますが、シンプルです。
開発支援ツール
Vagrant（ベイグラント）
Vagrantは仮想マシンの作成および環境構築を自動化し、配布することもできるツールです。
複数の仮想マシンを簡単に作成することができ、環境もそろえることが可能なため、WEB開発におけるテストに有用です。
Chef（シェフ）
Chefは環境構築自動化ツールです。
Vagrantは仮想環境でしたが、Chefではサーバーの設定が自動化できます。
Rubyで作られており、設定ファイル等もRubyで記述していきます。
どちらかと言えばサーバーサイドの技術でしょうか。
Grunt.js（グラントジェイエス）
ここまで読んできていただいていたとすると、薄々お気づきかもしれませんが、フロントエンド周りはタスクが非常に多くなっています。
それらを自動化するツールがGrunt.jsです。
Node.jsで動いています。
Grunt.jsは様々なプラグインを読み込むことができ、様々な処理を自動化できます。
自動化できる処理の例は以下の通り。
- 簡易サーバーの構築
- CSSやJSの構文チェック
- ファイル操作（複製、削除、結合）
- gzip圧縮
- 中間言語（TypeScript、CoffeeScript、Haxe、SCSS、LESSなど）のコンパイル
- HTML、CSS、JSのminify化
- CSS Spriteの自動生成
- 画像最適化
- ライブリロード（ブラウザの自動リロード）
- スタイルガイドの生成（いわゆる、CSSの見本）
などなど・・・
gulp.js（ガルプジェイエス）
Grunt.jsの後発で、Grunt.jsの難点であった設定ファイルが長い、処理が遅い、プラグインを作る敷居が高いという問題点を解決するために生まれました。
Grunt.jsとシェアを競っているような状況です。
まとめ
フロントエンドエンジニアに関連する技術は、出現しては消え・・・また出現しては消え・・・の連続です。
真に必要とされる技術を見極める！というのもなかなか難しそうですので、現在直面している課題を解決する際に覚えていくのがいいかと思います。
また、数はたくさんありますが、種類は限られます。
ライブラリなどが消えるのは、新しくて機能が改善されたライブラリなどが出てきた時が多いようです。
それぞれの分野での技術を1つずつ習得しておくのも良いかもしれませんね。