フロントサイド界隈調べ

最近フロント側に触れていなかったので、周辺の情報をさらっと調べてみた。そのメモ。
用語だけの解説止まりだが、まんべんなく、易しめで。

管理ツール

最近はブラウザからライブラリをDLしてきてローカルに配置…というのはあまりせず、管理ツールを使う。PHPのComposerのようなもの。

  • npm
  • 1番メジャー。Node.jsを利用したパッケージ管理ツール。現状必須。

  • Bower
  • npmと同じ管理ツール。扱っているライブラリの数は少ないが、クライアントサイドのライブラリ管理はどちらかといえばこちらが使われている模様。
    尚、サーバサイドのパッケージ管理ではnpmが使われている。

自動化ツール(タスクツール)

JavaScriptの中間言語(TypeScriptなど)をコンパイルしたり、CSSを縮小といったことをコマンドラインもしくは監視させ、自動で行わせるツール。

  • grunt
  • フロントサイドの自動化ツールと言えばこれだった。

  • gulp
  • ここ数年はgruntよりgulpが使われている。
    並列処理ができるため、gruntより速い。
    ただ、最近はgulpも若干廃れてきているような話も…

  • webpack
  • これは正確にはタスクツールではないが、ここに書いとく。
    webpackは画像やCSSなど、フロントサイドの構成要素をモジュール単位で取り使うためのツール。CSSの圧縮なども行えるので、タスクツールとしても使われている。上2つよりこちらの方がモダン。

AltCSSとPostCSS

素のCSSで煩雑になる部分を解決する手段。

  • AltCSS
  • 例えばSassはAltCSSになる。AltCSSは、標準のCSSにはない機能例えば変数などを実装させる。ブラウザが解釈できるようにコンパイルが必要となる。

  • PostCSS
  • こちらは現段階で実装できていない最先端のCSSの仕様をブラウザに実装させること。
    また、AltCSSのように新しい独自構文を覚える必要はなく、CSSだけで書ける点が大きい。例えば、cssNextなどのプラグインがこれに当てはまる。
    最近はAltCSSより、PostCSSの流れになってきている。

AltJS

いわゆるJavaScriptの中間言語。コンパイルが必要だが、素のJavaScriptにはない機能や、より短縮された構文で記述できるという利点がある。

  • CoffeeScript
  • Rubyライクな書き方ができ、通常のJavaScriptより短いコードになる。

  • TypeScript
  • MSが開発中。ECMAScriptで先行実装されている機能(クラスなど)の再現や型のチェックまでできる。このクラスと型指定がとにかく強力で、本格的なオブジェクト指向で組めるのがありがたい。

  • Babel
  • 正確にはAltJSではないが、現行のJavaScriptの問題点を解決する点では上2つと似ている。ただし上のように独自言語を記述するのではなく、ECMAScriptECMAScript標準のみに対応しているわけでなく、あくまでベースをコンパイルする。ESを覚えればいいだけなので、学習コストは無駄にならない。

TypeScriptとBabel何が違うかというと、Babelは現行だとES6をブラウザフレンドリーなES5に変換するだけだが、TypeScriptは静的な型指定とクラスベースのオブジェクト指向によりJavaScriptを拡張するという点で異なる。

フレームワーク

JavaScriptでもフレームワークが使われるようになり何年か経つが、いまだにこれ!というのは決まりきってない感じ。AngularJSは仕様がよく変わるからか、国内でもReactの方が普及している模様。

  • BackBoneJS
  • AngularJS
  • React

コメントする




fifteen + five =