フロントエンドエンジニア必読！AltJS選定・導入前に気をつけるべき３つのこと ｜ SiTest (サイテスト) ブログ

こんにちは、SiTest事業部エンジニアの牧です。

ここ最近、AltJSが開発現場へ一気に普及してきていると感じています。
昨年制定されたES2015（ES6）と、SPA（Single Page Application）の普及による
クライアントサイドでの大規模開発が行われるようになったことが影響しているのでしょうか？

そこで今回は、AltJSを選定・導入する前に気をつけるべきことをご紹介します。

AltJS（Alternative JavaScript）とは、その名の通りJavaScriptの代替言語です。
AltJSをコンパイル（トランスパイル）することでJavaScriptを生成し、
言語仕様が柔軟なJavaScriptの持っている問題を解決します。

また、数として数百種類ものAltJSが存在しており様々な言語がJavaScriptへとコンパイルできます。
こちらのGithubページには、数多くのAltJSがリスト化されていますので、
お好きな言語がJavaScriptにコンパイルできるか調べてみてはどうでしょうか？
面白いのでよく眺めているのですが、眺めているだけでも結構な時間を消費してしまいます。

まず、AltJSを開発現場へ導入する上で発生するメリット・デメリットを知る必要があります。

導入するメリットは様々ありますが、大きなメリットとして便利な記法が使用できることで
記述するコード量が減り可読性・保守性の高いコードを書くことができますので
これだけでも導入する価値はあると思っています。

更に、JavaScriptで開発することに比べて開発効率を大きく向上させることができます。
選択する言語によりますが、コンパイル時に型チェックまで行ってくれる言語もあったりします。

JavaScriptは動的型付け言語ですので、バグの温床が生まれやすくなってしまいます。
そのため、型チェックを行ってくれるAltJSはバグの発生を抑えることができ
開発や保守・テストなどのコストをとても削減することができるのです。
このように、AltJSを導入することで様々なメリットや恩恵を受けることができます。

しかし、メリットだけではなくもちろんデメリットも存在します。
例えば、JavaScriptへのコンパイルはほぼ必須となるため
そのための知識やビルドツール、タスクランナーの導入が必要となることや
エンジニア全員がAltJSをしっかりと理解する必要があることが挙げられます。

特に、ブラウザでデバッグする時は生成されたJavaScriptをデバッグすることになるので、
AltJSでの記述がJavaScriptではどのように変換されるのかもしっかりと理解している必要があります。

しっかりとメリット・デメリットを把握した上でAltJSを導入していきましょう！

最初にもお伝えした通りAltJSは数だけならば数百種類以上存在しています。
見ているだけでも楽しいのでひとつひとつ試していきたいところですが
それをやってしまうと、とてもじゃないですがきりがありません・・・

というわけで、現在人気のある2種類のAltJSの特徴と簡単な目安となる選定基準をご紹介します！

・CoffeeScript

CoffeeScriptはRuby on Railsでも採用されたAltJSです。

特徴として、RubyやPythonなどから影響を受けているためとても簡潔にコードを書くことができます。
また、ブロック要素がほとんど無くなりインデント主体の構成です。
JavaScriptには存在しない記法が盛り沢山ですが記法がJavaScriptとは結構違ってくるため、
ドキュメントとにらめっこしながら覚えるまでが大変です。

コードをできるだけ簡潔に書いて、保守性を上げたい方にはとてもおすすめです。
一度慣れてしまうと病みつきになること間違いなしな言語です！

・TypeScript

TypeScriptとはMicrosoft社が開発を行っているAltJSです。

大きな特徴として、コンパイル時に静的型付けチェックを行うことができます。
静的型付けチェックを行えることで、バグの温床を減らすと同時に保守性を高めることができます。
ただ、コンパイルが遅いという欠点がありますがそれを補って余りあるほどの便利さです。

また、先ほどのCoffeeScriptとは違い、既存のJavaScript（ES5）から
追加機能を加えた言語ですので非常に親しみやすい言語です。
ES2015の記法にもほとんど対応していますので、将来性を考える方はTypeScriptをおすすめします！

・おまけ

よく耳にするAltJSをGoogleトレンドで調査してみました。

気になる結果ですが・・・CoffeeScriptは変わらず安定した人気ですね。
しかし、TypeScriptが最近とても流行ってきていることがわかります。
昨年ES2015が制定され、TypeScriptがES2015の記法を先取りして導入しているためでしょうか？

ちなみに、弊社ではLiveScriptというAltJSを採用しています。
LiveScriptはCoffeeScript系のAltJSですが、今流行りの関数型言語のような記法を使用することができます。
また、CoffeeScriptで既に開発されている方は、LiveScriptへの移行ガイドもありますので
ぜひ一度触ってみてください。病みつきになりますよ！

それでは最後に、開発現場へどのように導入するか
どのように移行させていけば良いのかをお伝えします！

まず、これから始まるプロジェクトや規模の小さいプロジェクトでは一気に導入してしまったほうがとても楽です。
これから始まるプロジェクトならばAltJSに最初からなじむことができますし、
規模の小さいプロジェクトであれば移行コストは大きくないため、
少しずつ移行していくより時間を取って一気に導入してしまうほうが良いでしょう。

逆に、中規模以上のプロジェクトの場合一気に導入するのはとても難しくなってきます。
既存開発環境からAltJSを含めた開発環境への移行や
ライブラリとの相性やAltJSを導入することによる影響度合いなど、
規模が大きくなればなるほど考えるべきことはたくさん出てきます。

そのため、どのようにすれば上手く導入できるのか？
これはSiTest の開発でAltJSを導入する際に行った方法ですが、影響範囲の比較的小さい部分から
少しずつAltJSへ移行していくととてもスムーズに導入することができます。

いかがでしたでしょうか？

AltJSが気になっている方やまだ導入されていない方は、この記事をきっかけにぜひとも導入してみましょう！