JavaScript は Web ブラウザで実行する言語のデファクトスタンダードです。昨今では利用範囲が拡大しており、益々注目 されています。
JavaScript は DOM を操作する性質上、エンジニアだけでなくデザイナが触ることも多い言語です。管理が煩雑になりがちで、他言語では当然行われることも忘れられる傾向があるので注意が必要です。
利用範囲の広い JavaScript ですが、苦手な人 が多いのも事実です（特に Java 好きな人に顕著な気がする。※個人の感想です）
苦手な人が多い理由は下記が予想できます。
1 == "1" が truealtJS はこれらを解決あるいは緩和し、保守性向上を目指しています（altJS を使っても、this やパフォーマンスに対しては継続して気を付ける必要があります）
altJS を利用することでコスト増となる場面もいくつかあります。
したがって JavaScript の利用がミニマムであるならば、altJS を利用しないというのも有力な選択肢となります。
altJS は非常に種類が多いのですが、コミュニティの活発さやエコシステムから、現実的な選択肢は 2つに絞られます。
簡単な比較表を載せておきます。
| Lang | class | module | source map | 型指定 | 記述量 | 移行難度 | 備考 |
|---|---|---|---|---|---|---|---|
| JavaScript(ES5) | - | - | - | - | - | - | prototype ベース |
| TypeScript | ○ | ○ | ○ | ○ | △ | ○ | C#ライク。MS製。 |
| CoffeeScript | ○ | - | ○ | △ | ○ | △ | Ruby ライク。Rails に採用されている。 |
Java や C# のような文法の altJS です。下記に当てはまる場合は有力な選択肢となります。
ただし TypeScript を利用する上で注意する点もあります。
this.foo と記述します。こちら で他の this も要確認です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);
}
}
}
jQuery などのライブラリやプラグインを利用する場合、そのままでは記述を解釈できずコンパイルエラーとなってしまいます。型定義ファイルを TSD からダウンロードし、下記のように include する必要があります。
///<reference path='jquery.d.ts'/>
TSD に登録されていない独自ライブラリを利用する場合、こちら を参考にして型定義ファイルを作成しましょう。
Rails はデフォルトで CoffeeScript が利用できますが、こちら を参考して TypeScript を利用することもできます。
TypeScript は JavaScript をそのまま記述することができます。そのため、既存ソースをひとまず ts にコピーして、変数に型を追加していけばよいでしょう。
Node.js で下記コマンドを実行してパッケージをインストールしてください。
npm install -g typescript
コンパイルは下記コマンドです。オプションは こちら を参照。
tsc target.ts
その他詳細は こちら を確認してください。
基本的に、今使っているエディタにプラグインを追加するだけで問題ありません。下記コマンドで入力ファイルを監視して自動コンパイルします。ローカル開発は自動コンパイルし、本番環境はデプロイ時に Grunt 等を動作させるといいでしょう。
tsc -w target.ts
File Watchersプラグイン で自動保存 + 自動コンパイルRuby や Python に似た文法の altJS です。下記に当てはまる場合は有力な選択肢となります。
現在 ECMAScript6 の仕様策定が進んでいて、将来的には ECMAScript6 が普及するであろうと考えられます。この点、CoffeeScript は ECMAScript6 とは（メソッドやオブジェクトリテラルの拡張等の点で）別の道を進んでいるようなので、今後の動向に注意が必要です。（なお、TypeScript は ECMAScript6 に沿っています）
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)
コンパイル時に型チェック等がないため、JavaScript と同じ感覚で連携させることができます。
Js2Coffee を利用することで、JavaScript から CoffeeScript への逆変換が可能です。
Rails プロダクトで利用する場合は Asset Pipeline を利用するとよいでしょう。
その他 PHP 等を利用したプロダクトでは、Node.js で下記コマンドでパッケージインストールしてください。
npm install -g coffee-script
コンパイルは下記コマンドです。 オプションは こちら を参照。
coffee -c target.coffee
基本的に、今使っているエディタにプラグインを追加するだけで問題ありません。下記コマンドで入力ファイルを監視して自動コンパイルします。（自動コンパイルのその他の方法は こちら を参照）
ローカル開発は自動コンパイルし、本番環境はデプロイ時に Grunt 等を動作させるとよいでしょう。
coffee -w -c target.coffee
File Watchers プラグイン で自動保存 + 自動コンパイル