JavaScript と altJS

アジェンダ

JavaScript について

JavaScript は Web ブラウザで実行する言語のデファクトスタンダードです。昨今では利用範囲が拡大しており、益々注目 されています。

(1) 利用上の注意

JavaScript は DOM を操作する性質上、エンジニアだけでなくデザイナが触ることも多い言語です。管理が煩雑になりがちで、他言語では当然行われることも忘れられる傾向があるので注意が必要です。

altJS について

(1) 利用するメリット

利用範囲の広い JavaScript ですが、苦手な人 が多いのも事実です(特に Java 好きな人に顕著な気がする。※個人の感想です)

苦手な人が多い理由は下記が予想できます。

altJS はこれらを解決あるいは緩和し、保守性向上を目指しています(altJS を使っても、this やパフォーマンスに対しては継続して気を付ける必要があります)

(2) 利用上の注意

altJS を利用することでコスト増となる場面もいくつかあります。

したがって JavaScript の利用がミニマムであるならば、altJS を利用しないというのも有力な選択肢となります。

(3) 現実的な選択肢

altJS は非常に種類が多いのですが、コミュニティの活発さやエコシステムから、現実的な選択肢は 2つに絞られます。

(4) 言語の比較

簡単な比較表を載せておきます。

Lang class module source map 型指定 記述量 移行難度 備考
JavaScript(ES5) - - - - - - prototype ベース
TypeScript ○  C#ライク。MS製。
CoffeeScript - Ruby ライク。Rails に採用されている。

TypeScript について

(1) 利用するメリット

Java や C# のような文法の altJS です。下記に当てはまる場合は有力な選択肢となります。

(2) 利用上の注意

ただし TypeScript を利用する上で注意する点もあります。

(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

CoffeeScript について

(1) 利用するメリット

Ruby や Python に似た文法の altJS です。下記に当てはまる場合は有力な選択肢となります。

(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

参考

(1) Web サイト

(2) 書籍