フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。
- この項目の担当 @kumak1
JavaScript について
JavaScript は Web ブラウザで実行する言語のデファクトスタンダードです。昨今では利用範囲が拡大しており、益々注目 されています。
- サーバー
- クライアント
- モバイル
- ゲーム
(1) 利用上の注意
JavaScript は DOM を操作する性質上、エンジニアだけでなくデザイナが触ることも多い言語です。管理が煩雑になりがちで、他言語では当然行われることも忘れられる傾向があるので注意が必要です。
- コーディング規約を守る
- JSDoc を記述する
- 控えめな JavaScript に則る
- 名前空間を汚染しないようにする（クロージャ を使う）
altJS について
(1) 利用するメリット
利用範囲の広い JavaScript ですが、苦手な人 が多いのも事実です（特に Java 好きな人に顕著な気がする。※個人の感想です）
苦手な人が多い理由は下記が予想できます。
- 動的型付けがちょっとイヤだ
- IDE、コンパイラの構文・型チェックを受けづらい
- 暗黙の型変換がちょっとイヤだ
- 比較演算子「1 == "1"」が true
- 人によって記述の幅が広すぎて読みづらい
- prototype ベースがよく分からない
- 変数の巻き上げ問題
- 手続き型で書いたり、関数型 で書いたり
- this がスコープによって意味変わり過ぎ
- 記述の仕方次第でパフォーマンスが大きく変わる
altJS はこれらを解決あるいは緩和し、保守性向上を目指しています（altJS を使っても、this やパフォーマンスに対しては継続して気を付ける必要があります）
(2) 利用上の注意
altJS を利用することでコスト増となる場面もいくつかあります。
- JavaScript へのコンパイルが必要になります（開発、本番デプロイ時）
- 最終的に JavaScript として動作するので、ブラウザでデバッグして修正箇所が見つかったときに、ブラウザのデバッグツールが指し示す修正箇所が altJS のどの箇所にあたるかを知る必要があります
- 開発者全員が利用する altJS を読み書きできる必要があります
したがって JavaScript の利用がミニマムであるならば、altJS を利用しないというのも有力な選択肢です。
(3) 現実的な選択肢
altJS は非常に種類が多いのですが、コミュニティの活発さやエコシステムから、現実的な選択肢は 2つに絞られます。
- TypeScript
- CoffeeScript
- ==== 現実的な選択肢の壁（2014年11月現在）====
- Dart
- Haxe
- JSX
- Scala.js
- 他100種ほど
(4) 言語の比較
簡単な比較表を載せておきます。
| Lang | class | module | source map | 型指定 | 記述量 | 移行難度 | 備考 |
|---|---|---|---|---|---|---|---|
| JavaScript(ES5) | - | - | - | - | - | - | prototype ベース |
| TypeScript | ○ | ○ | ○ | ○ | △ | ○ | C#ライク。マイクロソフト製。 |
| CoffeeScript | ○ | - | ○ | △ | ○ | △ | Ruby ライク。Rails に採用されている。 |
TypeScript について
(1) 利用するメリット
Java や C# のような文法の altJS です。下記に当てはまる場合は有力な選択肢です。
- 既存プロジェクトを altJS に移行したいとき
- JavaScript の文法そのままコピーして使用できるため
- 静的型付けをしたいとき
- 現状 TypeScript 一択です
- 新規の中・長期に渡る大規模プロジェクトのとき
- 静的型付やインターフェースを利用できるため
(2) 利用上の注意
ただし TypeScript を利用する上で注意する点もあります。
- コンパイルが遅い
- 型チェック等があるため、altJS の中でも特に遅めです
- this の用法が増える
- クラスのメンバ変数の参照には this.foo と記述します
(3) サンプルコード
// sample.ts
module Saying {
export class Greeter {
greeting:string;
constructor(message:string) {
this.greeting = message;
}
public greetFrom(...names:string[]) {
var suffix = names.reduce((s, n) => s + ", " + n.toUpperCase());
return "Hello, " + this.greeting + " from " + suffix;
}
}
}
var g:Saying.Greeter = new Saying.Greeter("WebStorm");
var bar: (hoge:number, piyo:number)=>number = (hoge,piyo)=>{return hoge+piyo};
function foo(x, y, z) {
bar(1, b);
x = {0: "zero", 1: "one"};
var i:number = 0;
var value:string;
var a:number[];
var c:string;
if (i < 10) {
for (var j = 0; j < 10; j++) {
switch (j) {
case 0:
value = "zero";
break;
case 1:
value = "one";
break;
}
c = j > 5 ? "GT 5" : "LE 5";
}
} else {
var j = 0;
try {
while (j < 10) {
if (i == j || j > 5) {
a[j] = i + j * 12;
}
i = (j << 2) & 4;
j++;
}
do {
j--;
} while (j > 0)
} catch (e) {
alert("Failure: " + e.message);
} finally {
reset(a, i);
}
}
}
(4) フレームワーク・プロダクトとの連携
(ア) JavaScript ライブラリとの連携
jQuery などのライブラリやプラグインを利用する場合、そのままでは記述を解釈できずコンパイルエラーとなってしまいます。型定義ファイルを TSD からダウンロードし、下記のように include する必要があります。
///<reference path='jquery.d.ts'/>
TSD に登録されていない独自ライブラリを利用する場合、型定義ファイルを作成しましょう。
(イ) Rails との連携
Rails はデフォルトで CoffeeScript が利用できますが、 typescript-rails という gem で TypeScript を簡単に利用することもできます。
(5) 移行しやすさ
TypeScript は JavaScript をそのまま記述できます。そのため、既存ソースをひとまず ts ファイルにコピーして、変数に型を追加していくとよいでしょう。
(6) 導入方法
Node.js で下記コマンドを実行してパッケージをインストールしてください。
npm install -g typescript
コンパイルは下記コマンドです。
tsc target.ts
(7) 開発環境
基本的に、今使っているエディタにプラグインを追加するだけで問題ありません。下記コマンドで入力ファイルを監視して自動コンパイルします。ローカル開発は自動コンパイルし、本番環境はデプロイ時に Grunt 等を動作させるとよいでしょう。
tsc -w target.ts
- Vim
- SublimeText
- JetBrains 製 IDE（IntelliJ IDEA, WebStorm, RubyMine, PHPStorm）
- シンタックスハイライト・スニペットは、公式プラグインで対応
- File Watchers プラグインで自動保存 + 自動コンパイル
- VisualStudio
- シンタックスハイライト・スニペットはデフォルト対応
CoffeeScript について
(1) 利用するメリット
Ruby や Python に似た文法の altJS です。下記に当てはまる場合は有力な選択肢です。
- Rails を利用しているとき
- Rails がデフォルトで CoffeeScript をサポートしています
- 記述量を減らしたいとき
- Ruby に似た簡潔な記述ができます
- 開発速度を求められるプロジェクトのとき
- 記述量を少なく抑えることができます
(2) 注意事項
現在 ECMAScript6 の仕様策定が進んでいて、将来的には ECMAScript6 が普及するであろうと考えられます。この点、CoffeeScript は ECMAScript6 とは（メソッドやオブジェクトリテラルの拡張等の点で）別の道を進んでいるようなので、今後の動向に注意が必要です。（なお、TypeScript は ECMAScript6 に沿っています）
(3) サンプルコード
# sample.coffee
obj = {name: value}
arr = [1, 2, 3, 4]
bar = (hoge, piyo) -> hoge + piyo
foo = (x, y, z) ->
bar 1, b
i = 0
value = ""
a = []
c = ""
if i < 10
for j in [1..10]
switch j
when 0
value = "zero"
when 1
value = "one"
c = if j > 5 then "GT 5" else "LE 5"
else
j = 0
try
while !(j >= 10)
if i == j || j > 5
a[j] = i + j * 12
i = (j << 2) & 4
j++
while j > 0
j--
catch e
alert("Failure: " + e.message)
finally
reset(a, i)
(4) フレームワーク・プロダクトとの連携
コンパイル時に型チェック等がないため、JavaScript と同じ感覚で連携させることができます。
(5) 移行しやすさ
Js2Coffee を利用することで、JavaScript から CoffeeScript への逆変換が可能です。
(6) 導入方法
Rails プロダクトで利用する場合は Asset Pipeline を利用するとよいでしょう。
その他 PHP 等を利用したプロダクトでは、Node.js で下記コマンドでパッケージインストールしてください。
npm install -g coffee-script
コンパイルは下記コマンドです。
coffee -c target.coffee
(7) 開発環境
基本的に、今使っているエディタにプラグインを追加するだけで問題ありません。下記コマンドで入力ファイルを監視して自動コンパイルします。
ローカル開発は自動コンパイルし、本番環境はデプロイ時に Grunt 等を動作させるとよいでしょう。
coffee -w -c target.coffee
- Vim
- SublimeText
- JetBrains 製 IDE（IntelliJ IDEA, WebStorm, RubyMine, PHPStorm）
- シンタックスハイライト・スニペットは、公式プラグインで対応
- File Watchers プラグインで自動保存 + 自動コンパイル
参考
(1) Web サイト
- altJS の選び方
- AltJS の選び方フローチャート
- Coffee か、Type か。〜 比較しながらの入門編 〜
- いろんな言語を適材適所で使おう
- TypeScript クイックガイド
- The Little Book on CoffeeScript（和訳）