AltJSの選び方解説！注目の代替JavaScript言語を徹底比較

「JavaScript（JS）のコードを書くのが、いまひとつ好きになれない・・・」と苦手意識を抱えていませんか？

JavaScriptはとても便利な反面、幾つかの弱点もあり、苦手とする人が多い言語でもあります。そんな弱点をカバーするために生まれたのが、AltJS（代替JavaScirpt言語）です。今回はAltJSの代表格である、TypeScriptとCoffeeScriptをご紹介します。

またこれから注目のAltJSや、JavaScriptに次ぐブラウザベースで動作するプログラミング言語として「WebAssembly」もご紹介します。

フロントエンド開発の度にJavaScriptを書くことに負担を感じているようでしたら、ぜひこの記事を読み、気になった言語にチャレンジしてみてください。

AltJS（代替JavaScript言語）とは

JavaScript（JS）の開発を効率化するプログラミング言語

AltJS（代替JavaScript言語）とは、コンパイルすることでJavaScriptが生成されるプログラミング言語です。

JavaScriptはWebブラウザで実行されるプログラミング言語のデファクトスタンダードであり、フロントエンドエンジニアからWebデザイナーまで幅広いIT業界の開発者が利用します。近年ではライブラリの1つとしてreact、Reactを活用してスマホアプリが開発できるReact Nativeなど様々なライブラリ、フレームワークが登場しています。

JavaScriptは汎用性が高く、非常に便利な言語です。環境構築不要で、ブラウザとエディタがあればすぐに開発を始められるという他にはない長所を持ちます。

反面、苦手意識を持つ人も多いプログラミング言語です。

そこでJavaScriptの文法の複雑さを緩和したり、動的型付けをはじめとする問題点をカバーすることを目的に開発されたのがAltJSです。

JavaScript（JS）よりも読みやすく、保守性が向上

AltJSを利用するメリットは、コードの読みやすさと保守性の高さにあります。

JavaScirptよりも文法が整理されており、特にTypeScriptは中規模以上の開発に対応しやすい仕様です。バグの早期発見が可能です。素のJavaScirptに比べると、メンテナンスがしやすいです。

一方「コンパイルの手間が発生すること」と「エラーが発生した場合に、JavaScirpt上のエラーがAltJSではどの位置に相当するのか」を読み解く必要があるという注意が必要な課題もあります。

JavaScript（JS）に求められることは年々複雑化している

先にも述べた通り、JavaScriptはWebブラウザで動作するプログラミング言語のデファクトスタンダードです。IT業界で最も利用者数が多いプログラミング言語の1つと言っても、過言では無いです。

2000年代前半には、JavaScriptは決して評価の高い言語ではありませんでした。その脆弱性や処理の重さ、JavaScriptによるゴテゴテとしたアニメーションを使ったウェブページの評判の悪さなども相まって、JavaScriptを意図的にオフにした状態でウェブページを閲覧するユーザーも存在しました。

JavaScriptの再評価のきっかけとなったのは、JavaScriptのAjax（非同期通信）技術です。GoogleがAjaxを使ったGoogle Mapsを2005年に発表。市場環境が大きく変わりました。
JavaScirptの可能性が見直され、jQueryに代表されるJSライブラリが次々に登場。大規模なWebシステム開発の環境には無くてはならない存在となりました。

2009年にはサーバーサイドで動作するJavaScriptとして、Node.jsが登場。更にWebアプリケーション開発向けに、AngularJSなどのフレームワークも登場。JavaScriptの用途の拡大と、IT分野の開発の大規模化が続いています。

進化を続けるJavaScriptですが、大規模開発においては課題が多いのも事実です。

素のJavaScirptには静的型付けが無く、コンパイルという段階が存在しないため、多くのエラーは実行時に確認することになりがちです。注意が必要なのが、実際には文法にミスがあるのに「見た目上は正しく動く」ことがある点です。静的型付け言語に比べると、エラーを見逃すリスクがやや高く、メンテナンスがしづらい傾向にあるのです。

文法ミスは、セキュリティ上の欠点になるケースがあります。開発のスピーディーさよりも、安定的な動作が求められる傾向が強い大企業のシステム開発案件などでは、場合によってはそれらの脆弱性が致命傷にもなりかねません。こうした「エラーの見つけづらさ」もJavaScirptの弱点です。

Web業界は大きく発展し、市場規模が拡大し続けています。JSの置かれた環境は大きく変わってきています。JavaScriptの欠点といかに向き合うかというのは、特にフロントエンドエンジニアにとっては大きな問題です。

DOM操作をするため、WebデザイナーがJavaScript（JS）を触る機会も多い

JavaScriptの魅力を支える大きな要素の1つが、DOM（Document Object Model）の操作です。

JavaScirptによるDOM操作とは、端的に言うとWebページのHTMLなどのドキュメントにJSからアクセスする仕組みのことです。DOM操作を行うと、JavaScirptで自由にページの要素を追加したり、変更することができるようになります。

HTMLだけでなくCSSの操作も可能です。

JavaScriptを利用することで、Webページの視覚的要素をダイナミックに変更することができます。ページの「見た目」と大きく関係するため、JavaScirptはエンジニアだけで無くWebデザイナーも利用することが多いです。

しかし前述の通り、JavaScriptはメンテナンスが難しく、注意を要する言語でもあります。

エンジニア以外の職種の人物が触る機会が多い一方で、その文法は必ずしも使い勝手がよくないのが現状です。AltJSが登場した大きな目的の1つには、こうした課題を解決することがあるとも言えます。

最終的にはJavaScript（JS）にコンパイル

AltJS（代替JavaScirpt言語）は、コードを書いたのち最終的にコンパイルするのが特徴です。AltJSで書いたコードのままでは、基本的に実行できないので注意してください。

コンパイルすることで、素のJavaScript（JS）が出力されます。

主な言語はTypeScriptとCoffeeScript

AltJSには様々な種類の言語が存在し、選択肢は多様です。

その中でも主流となっているのが「TypeScript」と「CoffeeScript」の2つです。

TypeScriptは堅牢かつ大規模な開発に向いており、CoffeeScriptはRubyライクな文法で楽しくAltJSが書けます。それぞれの特徴があるので、その違いに注意しながら、自分にあった選択肢を選んでください。

TypeScriptとは

2012年に登場した、Microsoft発のAltJS

TypeScriptは2012年に登場した、Microsoft製のAltJSです。フリーかつオープンソースで提供されており、中規模〜大規模な開発を想定した仕様を持ちます。

・公式ウェブサイト

他のメジャーなオブジェクト指向言語と違い、JavaScriptにはECMAScript 6（※）までclass構文がありませんでした。prototypeと呼ばれる仕組みで他の言語における「クラス」と似た機能を実現していました。ECMAScript 6は着実に普及が進んでいますが、ブラウザ環境によっては一部対応が進んでいないケースもあるのが課題です。

TypeSciptを利用する大きなメリットとしては、クラスを使うことが可能です。C#やJavaなどの言語に慣れていて、JavaScirptにはあまり馴染みがない方にとっては、より直感的にコードを書くことができます。

既存のJavaScriptとの強い互換性も持ちます。

「JavaScirptの文法は分かるけれど、TypeScirptは良く分からない」「TypeScirpt関連のツールやコンパイラを試しに利用してみたい」という方は、JavaScirptで書かれたコードの拡張子を「.js」から「.ts」に変えるだけで、TypeScirptの最初の一歩をスタートできます。

※ ECMAScriptは、JavaScriptの仕様です。ECMAScriptの仕様に沿って、実装されたものがJavaScriptという関係性を持ちます。

静的型付けを持つ

TypeScriptを利用する最大のメリットは、JavaScriptにはない「静的型付け」にあります。

静的型付けとは、プログラムの実行前に全ての変数の型が決まっていることを指します。コード内で全ての変数の型を宣言しておくのが、コーディングの際のルールとなっています。

TypeScriptで、コードを書くと以下のようになります。以下は一例です。

var word:string;

word = “Hello,World”;

上のコードでは、まずwordという変数はString（文字列）に関するものだと宣言しています。

その上で、wordに「Hello,World」というString（文字列）を代入しています。上のコードでは、例えばwordに０や１といった数字を代入しようとするとエラーになります。

通常のJavaScriptは「動的型付け言語」です。上のコードで言うならば、wordという変数に文字列以外の要素も代入できてしまいます。小規模な開発であればそのことは大きな問題にはなりません。しかし大規模開発では、バグの発生を招くケースがあります。

JavaScirptとの互換性を保ち、既存のコードを資産として生かすことにも対応しつつ、静的型付けを導入。より堅牢なアプリケーションの開発を実現するのが、TypeScriptなのです。

AngularJSで採用

HTMLとTypeScirptによるアプリケーション開発向けのフレームワークが、AngularJSです。Angularはフレームワーク自体がTypeScriptで書かれています。

 Angularはそれ自身がTypeScriptで書かれています。コア部分と、アプリケーションにインポートするオプショナルな機能をTypeScriptライブラリのセットとして実装しています。

—出典：Angular 公式ウェブサイト

AngularJSはGoogleと個人、企業のコミュニティによってオープンソースで開発が進められています。

AngularJSはMVCフレームワークを採用しているため、アプリケーションの構造を見通しよく管理しながら、開発が進められます。TypeScriptとの相性は非常に良く、静的型付けによって変数にどんな型が入るのか、直感的に把握しながらコードを書き進めることが可能です。

CoffeeScriptとは

JavaScriptをRubyライクに記述可能なAltJS

CoffeeScript（略称：coffee）は2009年に1番最初のバージョンが公開されたAltJSです。Rubyライクな、直感的な文法を持つのが特徴です。

・公式ウェブサイト

CoffeeScriptは、動的型付け言語です。TypeScriptに比べると、少ないコード量で快適なコーディングを行うことにより主眼を置いたAltJSであると言えます。

RubyのほかPythonなどに影響を受けたすっきりとした文法を持ち、素のJavaScriptに比べると、coffeescriptはコード量が少なく済む傾向があります。またコンパイルによって生成されるJavaScriptのコードの綺麗さも長所です。

Ruby on Railsでサポートされている

CoffeeScriptで書いたコードは、javascriptに最終的に変換する必要があります。

Ruby on RailsではCoffeeScriptを標準でサポート。Asset Pipelineという機能によって、自動でコンパイルを行います。

Railsエンジニアにとっては、CoffeeScriptを導入することで短いコード量でフロントエンドの処理を書き、コンパイルまですぐ実行できるというメリットがあります。

2017年にCoffeeScript 2が公開

2017年9月、CoffeeScriptのメジャーバージョンアップとなる「CoffeeScript 2」が公開されました。

CoffeeScriptは、2015年に発表されたJavaScriptの仕様「ECMAScript 6」への対応の遅れが長年指摘されていました。先述の通り、CoffeeScript 2の公開は2017年。結果として、JavaScriptの仕様変更への対応におよそ2年を要しました。CoffeeScript 2では近年のJavaScript仕様への対応や、JavaScript内にXMLを記述可能な「JSX」のサポートなどが導入されました。

CoffeeScript 2からはFlowというライブラリを利用することで、静的型付け言語と同様の型チェックも可能になりました。

・Flow 公式ウェブサイト

CoffeeScriptは動的型付け言語であることから、静的型付けを好むエンジニアや大規模システムの開発者はTypeScriptを利用する傾向にあります。CoffeeScriptはバージョンアップの遅れから近年はやや存在感が薄れていたのも事実です。

TypeScriptが大きな人気を集める中、今後CoffeeScriptはどのようなアップデートを続けていくのか。どういったメリットを、ユーザーに提供できる言語になっていくのか。

さらなる今後の動向に注目です。

今後注目のAltJS（代替JavaScript言語)

TypeScriptとCoffeeScript以外にも、独自の発展を続けるAltJS（代替JavaScirpt言語）は多数存在し、選択肢が山ほどあります。

その中でも、今後のバージョンアップやライブラリの充実が期待される要注目のプログラミング言語をご紹介します。

PureScript

PureScriptは関数型プログラミング言語としての側面を持つ、AltJSです。他のAltJSと同様に、purescriptのコンパイルを行うとJavaScriptが生成されます。

・公式ウェブサイト

関数型プログラミングとは「手続き型」「オブジェクト指向」と並ぶ、プログラミングのパラダイムの1つです。

関数型プログラミングは、プログラムを関数で構築する方法のことです。関数とは「入力（引数）に対して、特定の値を返す」ことです。

C言語やBASICに代表される手続き型言語では、プログラムは「コンピュータに実行させる手続きの列」であり上から順にコードが実行されます。手続きAと手続きBが上から順に実行されることで組み合わさり、大きなプログラムが出来上がります。

一方、関数型言語では式Aと式Bが関数によって呼び出され、組み合わさり、プログラムが出来上がります。コマンドの実行ではなく、式の評価を重視するプログラミングの手法だとも言えます。

プログラミングで用いる関数として、代表的なものにはmapやfilter、reduceなどがあります。

関数型プログラミングは式と式を関数で組合せていくプログラミング手法であるため、 この手法を守っていく限り、手続き型プログラミングにおいては常套手段である、 「再代入可能な変数(assignable)」への破壊的更新、という概念がそもそも存在しない。

つまり、関数型プログラミングには assignable にまつわるバグは存在しない。

出典：関数型プログラミングの利点

Functional programming is a style of programming that emphasizes the evaluation of expressions, rather than execution of commands. The expressions in these language are formed by using functions to combine basic values. A functional language is a language that supports and encourages programming in a functional style.

（関数型プログラミングとはコマンドの実行よりも、式の評価を重要視するプログラミングのスタイルである。これらの言語の表現は、基本的な値を組み合わせる関数によって形作られる。関数型言語は関数型のプログラミングをサポートし、奨励するものである）

出典：Comp.lang.functional（訳：拙訳）

以下の記事ではmap()、reduce()を利用した関数型プログラミングのサンプルコードを紹介しています。関数を利用せずにfor文で処理を書くよりも、短くコードが仕上がるのがメリットです。

・JavaScriptプログラマーならMap()とReduce()で関数型プログラミングを始めてみない？

Haskellの影響を受けた関数型のAltJS

PureScriptは、関数型言語の代表格であるHaskellを元にしたプログラミング言語としての仕様やコンセプトを持ちます。

素のJavaScriptでも、関数型プログラミングは可能です。しかし型システムを持たないJavaScriptでは、関数型プログラミングにおいて重要な「式の理解」がやや困難という欠点があります。

PureScriptはhaskellの思想をベースにしつつ、JavaScriptの手軽さも引き継いだプログラミング言語として発展を続けています。

JavaScript（JS）以外もブラウザで実行可能になりつつある

「JavaScriptはWebブラウザで実行されるプログラミング言語のデファクトスタンダード」であると、記事の前半部で紹介しました。

実はいま、JavaScriptに次ぐ新たなブラウザベースで動作するプログラミング言語「WebAssembly」の開発が進んでいます。

・公式ウェブサイト

WebAssemblyとは

WebAssemblyはブラウザベースで動作する、低水準のアセンブリ風言語です。C言語、C++などの言語のコンパイル対象にでき、それらの言語で書かれたプログラムをブラウザで実行できます。

素のJSとは違い、環境構築不要で開発できるわけではなく、Cなどからのコンパイルが必要というのが特徴の1つです。WebAssemblyのコンパイルに対応する言語は、今後の拡大が見込まれています。

JavaScriptは動的型付け言語のため、実行スピードが遅いという欠点があります。一方でWebAssemblyは変数の型が決まっているため、実行速度が高速です。

またWebAssemblyではコンパイル後の言語が、機械語に近い低水準のものです。JavaScriptではこれまで実行できなかったようなグラフィックの負荷が大きいリッチコンテンツの実行が可能になります。マシンパワーの削減にも貢献するため、IoTデバイスなどCPUパワーが限られているデバイスやモバイル端末のバッテリ稼働時間の延長にも寄与します。

WebAssemblyは、JavaScriptとの併用が可能です。つまり、WebAssemblyはJavaScriptの「完全な代替」を目指した言語ではありません。JavaScriptでは扱いづらかった処理などを、WebAssemblyで可能にするということを目指しています。

WebAssemblyは2017年3月にリリースされたFirefox 52.0で正式にサポートされました。

AltJSの登場の裏には、JavaScriptに求められることが年々複雑化しているという事情もあります。WebAssemblyという、JavaScriptと共存可能なより低水準の言語の登場はこうした課題を解決するかもしれません。

「JavaScirptで書けるものは、JavaScriptで書く」「WebAssemblyで実装した方がいいものは、Cなどで書いてコンパイル」という使い分けがそう遠くない未来には当たり前になるでしょう。

まとめ

静的型付けを持つ言語で、JavaScriptを書きたいならTypeScript。

Rubyに近い文法で、短いコードで処理を書きたいならCoffeeScript。

関数型プログラミングにチャレンジするなら、PureScript。

上のように、AltJSには様々な特徴を持った言語が登場しています。

こうしたAltJSの登場の裏にはIT業界そのものの急激な発展とJavaScriptに求められることの複雑化があります。そこで近年では、JavaScriptとの共存が可能で、かつより低水準の処理が可能なWebAssemblyの開発も進んでいます。

もしCやC++などで書いたプログラムのブラウザベースでの実行や、より低水準な処理。JavaScriptとWebAssemblyが共存する近い未来に興味があれば、WebAssemblyをいまから勉強してみるのも面白いかもしれません。

↑目次へ戻る