開発 / ビルドツール

• Webのフロントエンド開発におけるJS / CSS開発用のツール
  • AltJS / AltCSSのトランスパイラ
  • タスクランナー
  • Lint
  • CSSスプライト作成

Node.jsはこれらのツールを通じてWebフロントエンド開発も大幅に影響を及ぼした。

AltJS / AltCSS

AltJS

• JavaScriptに変換 (transpile) される言語
  • 異常に流行ったけど最近落ち着いてきた

以下、はてなで使われたことのあるAltJS (or transpiler)

• CoffeeScript
  • 元祖AltJSだが滅びゆく運命 (さだめ)
  • ラボサービスなどで使用
  • 皆さんが見ることは無いでしょう
• TypeScript
  • 大人気AltJS
  • Mackerel, 少年ジャンプルーキーなどで使用
  • 社内では人気
• Babel
  • はてなブログで使用
  • JavaScriptの新機能を用いたコードを、今のブラウザで動作するよう変換する

AltCSS

• CSSに変換される言語 / ツール群
  • CSS プリプロセッサ とも呼ばれる

以下、はてなで使われたことのあるAltCSS。

• Less
  • シンプルさ重視
  • 社内でもっとも多く使われている
• Sass
  • 高機能なAltCSS
  • ユーザーが多く、開発が活発
• PostCSS
  • プラガブルなCSS変換ツール
  • minifyなどで部分的に使われている

タスクランナー

• 複雑なビルドやテストを実行するためのツール
  • ファイルを監視して自動ビルドしたり
  • JS / CSSを並列にビルドしたり
  • テストとか

はてなでは、多くのチームでGrunt / Gulpどちらかを利用している。

• Grunt
  • 元祖タスクランナー
  • タスク毎に中間ファイルを作成するため、重い
  • 最近あんまり見ない
• Gulp
  • Gruntに比べ、高速に動作する
  • 設定もJavaScriptで書ける
  • 開発が活発