javascriptのコンパイラー

Question

現在PHP・jquery等を使用してサーバサイドとフロントをやっています。

今後Javascriptのライブラリーを使用して開発をしたいのですが
Javascriptを生書きすると非常に管理が大変で、Angular.js等の
ライブラリーでもスケールすると面倒になりそうです。

そこで、class等を用いてオブジェクト指向に組めると噂の
typescriptを検討しているのですが、求めるのは

・将来性がある
・オブジェクト指向に可能
・Angular.jsなどのライブラリーに依存しない

です。

typescriptにもいろんな評価が有り、開発の経験者の方含め
メリットを踏まえて良い物を紹介して頂けませんか？

Answer 1

TypeScript 使用者です。

スケールが大きくなった場合のご心配をされるなら、 TypeScript は間違った選択肢ではないと思います。
AltJS ごとに思想は様々ですが、TypeScript は名前が示す通り「型」を厳密に扱うことに重点を置いた AltJS です。
この点においては対照的な CoffeeScript とは逆に、ナマの JavaScript で書く場合よりも間違いなくタイプ数は増えます。
が、大規模なプログラムでは型が厳密であることのメリットのほうが遥かに大きいでしょう。

お求めの3点については、満たしていると考えます。

将来性がある

こればかりは客観的に判断しづらいところですが、
人気の高さ (アンケート: http://www.buildinsider.net/hub/survey/201504-popularjs) や、
Google が Angular 2 の開発に採用するなど、実績もあります。
(そして上記アンケートでは Angular 自体の人気も圧倒的とのこと。)

個人的にポイントだと思うのは、 TypeScript 自体が ECMAScript の将来普及するであろうバージョンの文法を踏襲しているという点ですね。
万が一上記アンケートからの予想も虚しく TypeScript が衰退したとしても、JavaScript への移行コストは低いということです。

オブジェクト指向に可能

JavaScript 自体がオブジェクト指向言語です。おそらくほぼすべての AltJS でもオブジェクト指向プログラミングが可能です。
もちろん TypeScript も同じです。しかも他の言語によくあるクラス型オブジェクト指向で、PHPer さんであるなら (シンタックスは違いますが、) 概念的に悩むことはないと思います。

Angular.jsなどのライブラリーに依存しない

依存もしませんし、逆に共有も簡単です。
型定義ファイルという仕組みによって、 JavaScript で書かれたライブラリ (TS形式が存在しない物だとしても) のメソッドの引数や戻り値、プロパティなどの型をコンパイラに指定することができます。
これにより、まるでTS形式で書かれたライブラリが存在するかのように型チェックをし、使い方が間違っていればコンパイル時にエラーが通知されます。

Answer 2

CoffeeScript系（LiveScript）のAltJS使用者です

結論

それはJSの問題ではありません。
Gulpを勉強すれば幸せになれると思いますよ。

下記に順を追って解説していきます。

Javascriptを生書きすると非常に管理が大変

AltJSにしたからといって解決される問題ではありません。
CoffeeScriptはJSを簡潔に書く事が出来るので、ステップ数が約半分となり可読性が上がる効果が見込めますが
数千、数万のステップ数のコードにまでスケールしたとして、それが半分になったから何？
（そりゃあ数千、数万が半分になるというのはインパクトはでかいですけどね！？）
もはや管理など不可能です。

つまり、ブラウザ上でスクリプトを動かす上で
「システムが肥大化した場合のディレクトリ構造やファイルの配置をどうするねん？」
…という問題なのではないでしょうか？

将来性がある

世界的にはRubyがスタートアップ用の言語として凄まじい人気を誇っています。
その簡潔にかけるRubyとほぼ同じ形式で書けるCoffeeは間違いなく将来性がある言語の一つです。

Coffeeの魅力

• 簡潔に書けること
• 吐き出されるJSが熟練者が書いたような超綺麗なコード
• ソースコードのステップ数が半分程度になり、可読性があがり見通しが良くなること

元PHPerとしてステップ数半減のインパクトが型安全よりでかいので選択しました。
ぶっちゃけ今流行ってるなら何を選んでも良いと思います。

オブジェクト指向に可能

JavaScriptは**プロトタイプベースのオブジェクト指向言語です。
なのでPHP等のようなクラスベースオブジェクト指向言語と同じ書き方がしたいですと捉えます。

メジャーどころのAltJSは基本的にクラスベースとして書けるようになっています。
チュートリアルや言語の解説等で紹介されているサンプルコードを読めばすぐに使いこなせるはずです。

Angular.jsなどのライブラリーに依存しない

AltJSはコンパイル後、JSファイルが生成されるものです。
各種ライブラリ、自分のソースコードを適切に配置できていれば干渉することはありません。

AltJSを使った開発時の大まかなフロー

エスパー回答で、これが知りたいんじゃないかと思い追加しております。

１．ディレクトリ構造 (適当に作ったので一例です）

project_root/
  src/ # 成果物置き場
    coffee/
      config/ # こんな感じで好き勝手に整理していきましょう。
      model/
      view/
      controller/
    type/ # CoffeeとTypeの共存も可能です（一応）
  dst/ # コンパイル後のJSファイル等の吐き出し先
  lib/ # ここにはライブラリ等を格納していきます
    jquery/
    angular/
  public_html/ # Webサーバーの公開領域
    js/ # ここには何のファイルも配置しません。
    index.html
  gulp.js # 次項目で使用します。

２．AltJSをコンパイル
Gulpを使いましょう。
public_html/js配下でも良いですが、今回の吐き出し先は全てdistにしておくと後で使いやすいです。

３．dist配下のJSファイルを全てConcatでつなげて1つのファイルに！
Gulpにgulp-concatというプラグインがあります。
全部つなげて1ファイルにして「public_html/js」配下に吐き出しましょう。
（ファイルの宣言の仕方で定数宣言している先に読み込みたいファイルを上に持ってくる事が可能です。）

ページによって読み込むJSファイルを変えたい場合、
設定しだいでページAには1,2,3、ページBには1,2,4というファイルを分けて出力ということも可能です。

えっ、そんな数千ステップの1ファイルにしていいのか？
jQueryは9～10kステップ、Angularは28kステップです。
今更そんな数千増えただけで微動だにしませんよ！

４．ライブラリの設置
lib配下の必要なファイルを選択して「public_html/js」配下にコピーします
もちろんこれもGulpで指示することが可能です

まとめ

gulp-concat最高！
この手法ならばクラス別や関数別…Angularであればコントローラーやディレクティブ別に管理出来るので凄く楽ちんです。

でも、よくよく考えると、AltJSである必要ありませんね？
生JSだって関数やコントローラ、ディレクティブ別にファイルを分けて管理して、
Gulpコマンド一撃でConcatしてやれば良いだけの話です。

Gulpの詳細は控えましたが、
質問者さんの用途であればGulpを勉強すれば解決する問題かと思います。

Answer 3

フロントエンドの開発にTypeScript＋AngularJSを使ってます。
元々サーバサイド（主にJava）やAndroidをやっていてJavaScriptの経験は殆ど無かったのですが、
型を持っているので記述ミスなどがすぐ分かるのとWebStorm、VCSなどでのコード補完が効きやすいので
すんなり入ることが出来ました。
また、他のAltJSと比べるとJavaScriptに変換した後のソースが見やすいというのがあるのでコンパイル後のソースを見て解析するのはしやすいと思います。

あとは職場の方でTypeScriptとCofeeScriptのどちらが好みなのかと、PHPなどサーバ側のフレームワークがどちらがメジャーなのかもどちらを使うかの判断になると思います。RoRだとCoffeeScriptをサポートが以前からされているのでそちらの方が情報が入りやすいなどあると思います。

AngularJSを使うのがメインであれば、先に上がっている通りAngularJS2はTypeScriptで開発することになったのでTypeScriptを使うのが良いと思います。

私の職場にはTypeScriptの大家がいて過去にCofeeScriptを使ったプロジェクトをTypeScriptに移行した人がいるのでこのままTypeScriptを使い続けることになると思います（笑）