フロントエンド開発を行っていると、トランスコンパイラ（トランスパイラ）というキーワードを耳にすることがあると思います。

現代的な開発において、このトランスコンパイラは無くてはならないものであり、意識せずにトランスコンパイラの恩恵を受けて効率的な開発を行うことができています。

では、トランスコンパイラとはいったい何なのでしょうか。

その重要さとは裏腹にトランスコンパイラは表に出てこないものであり、どのような役割を果たしているのか、そもそも何なのかもわかりづらいものです。

そこでトランスコンパイラとは何か、どのような働きをしているかなど、コンパイラとの違いと合わせて詳しく解説していきます。

トランスコンパイルとは

トランスコンパイラとは、あるプログラムのソースコードを別のコードへと変換する作業（トランスコンパイル）を行うプログラムのことを指します。

トランスコンパイルを行うプログラムなのでトランスコンパイラです。

ですので、まずはトランスコンパイルについて説明しましょう。

プログラマーやエンジニアであれば、似た用語であるコンパイルはよく聞く言葉であると思います。

C++などのコンパイル言語ではコードを実行するためにコンパイル作業が必要ですが、このコンパイルとは、人間が読める形式のソースコードをCPUが読める形式であるバイナリーファイルに変換し、実行可能ファイルを作成する作業です。

一方でトランスコンパイルは、例えばTypeScriptのソースコードをJavaScriptのソースコードに変換するような作業を行う作業を指します。

ただソースコードを整形したり、スペースや改行を消去してサイズを圧縮する（いわゆるMinify）ことは一般的にトランスコンパイルとは呼ばず、別の種類や別のバーションのプログラミング言語のコードへ「変換」する作業がトランスコンパイルと呼ばれます。

同じプログラミング言語であっても、JavaScriptのES6バージョンのソースコードを、同じJavaScriptのES5バージョンのソースコードに変換する作業もトランスコンパイルです。

このような性質上、一般的にスクリプト言語においてトランスコンパイルが使われ、スクリプト言語の効率向上や自由な言語の拡張を実現する鍵になっています。

具体的にどう変換してるの？

では、実際にどのような変換が行われているのでしょうか？

ここでは、JavaScriptのトランスコンパイラを例に挙げて実際に変換してみたいと思います。

モダンJavaScriptに特徴的な表記法として、アロー関数があります。

文字通り矢のように見える表記法で、これを変数に代入することで（細かい違いはあるものの）従来の関数定義と同等の内容になります。

let doubleNumber = x => {
  return x*2;
}

これは引数を受け取って2倍にして返すだけの関数です。

プログラミング言語の初学者向けに出てくるような例ですが、普通の関数定義とは見た目が大きく異なりますね。

これをトランスコンパイラにかけてみると、

var doubleNumber = function doubleNumber(x) {
  return x * 2;
};

と、functionを用いた従来の関数表記による関数リテラルの代入文が出てきました。

トランスコンパイラにかける前のコードは古いブラウザでは実行できずエラーになりますが、変換後のコードはかなり古いブラウザでも実行可能です。

次に、JavaScriptに型システムが導入されたTypeScriptを試してみましょう。

const x: number = 1;
const s: string = ‘string’;
const a: number[] = [1, 2, 3];

コロンの後ろが変数の型の指定であり、JavaScriptとは異なり定義時と異なる型を再代入することはできません。

この型の指定はTypeScript独自の記法ですので、TypeScriptを実行できない普通のブラウザでは、型指定によるチェックが効かないだけでなく実行時エラーになってしまいます。

そこで、こちらもトランスコンパイラにかけてみましょう。

var x = 1;
var s = ‘string’;
var a = [1, 2, 3];

型指定が削除され、無事ブラウザで実行できる形になりました。

トランスコンパイラの使われ方

トランスコンパイラは様々な言語で使われますが、現在トランスコンパイラという単語を耳にする場合、ほぼ全てJavaScript関連のものを指すでしょう。

現代的なフロントエンド開発では、素のJavaScriptをそのまま書いてWebアプリなどを作成することはほぼありません。

様々なJavaScriptライブラリを選択し、ライブラリに固有の特殊な記述法によって直感的・効率的にコーディングしていきます。

この「特殊な記述法」がもたらす恩恵のためにJavaScriptライブラリを用いるのですが、ブラウザは基本的にJavaScriptしか読めないため、特殊な記述法をそのまま実行することができません。

ですので、トランスコンパイラのスクリプトを同梱してリアルタイムで解読させたり、あるいはコンパイル言語におけるコンパイラのようにアップロード前に素のJavaScriptへと変更させたりすることで、ブラウザが実行できる形にします。

つまり、JavaScriptではない言語をJavaScriptに変換するために、トランスコンパイラが使われているというわけです。

トランスコンパイラの具体例

JavaScriptのトランスコンパイラとして最も有名で古くから使われてきたのが、Babelです。

元々Babelは、主要ブラウザが新しいバージョンのJavaScriptに対応しないうちから新しいバージョンのJavaScriptを使って効率的に開発したいという需要を受け、新しいバージョンから古いバージョンのJavaScriptに変換するトランスコンパイラとして活躍してきました。

JavaScriptライブラリ全盛である現在においても、最新のJavaScript構文を使うためにライブラリと組み合わせて使われています。

また、JavaScriptの代替言語として今一番使われているのがTypeScriptです。

JavaScriptに静的型付けなど様々な言語要素を取り入れ、大人数での開発にも耐えうる快適で堅牢な言語を目指して作られ、その目的通り大規模開発を中心に広く採用されています。

ですがTypeScriptを直接読み込めるブラウザはありませんので、JavaScriptにトランスコンパイルする必要があります。

TypeScriptにはトランスコンパイラが付属するため、コンパイル言語と同じ感覚でコンパイルし、JavaScriptに変換したものを実際のWebアプリ等では使用します。

トランスコンパイラを使うのは面倒？

トランスコンパイラの説明だけ聞くと、元々そのまま実行できるはずのスクリプト言語を、わざわざ別の言語で書いて変換するという作業が面倒だと思われるかもしれません。

一昔前のフロントエンド開発では、開発を始めるまでにトランスコンパイラを含めた様々なツールを導入する必要があり、環境整備が複雑すぎてフロントエンド開発を始める気になれないという声もよく聞かれました。

しかし、最近はほとんどのJavaScriptライブラリにおいて、付属するプログラムやバッチから一連のツールの導入やトランスコンパイルの実行などが行えるようになっており、裏でどのようなツールが組み合わされているのか全く理解せずに使えるようになりました。

特に、最近の主要JavaScriptライブラリのほぼ全てがホットリロード機能を搭載しています。

この機能は、JavaScriptライブラリの簡易サーバー機能を実行させておくと、エディタでコードを修正し保存するたびに自動的に裏でトランスコンパイルを行い、変換したJavaScriptをブラウザで表示してくれるというもので、まさに全自動でトランスコンパイルが行われます。

今ではトランスコンパイラの存在を知らないままJavaScriptライブラリを使いこなす若手エンジニアもいるほどで、面倒どころか存在を意識することもほとんどありません。

トランスコンパイラを使わない開発

では、一般的にトランスコンパイラが使われる開発分野において、あえてトランスコンパイラを使わずに開発が行えるでしょうか？

フロントエンド開発で必要なツールが増え始めた黎明期では、トランスコンパイラなどコーディングに直接関係しないツールの導入や使用を嫌う流れもあり、トランスコンパイラをあえて使わない開発を実際に試みたフロントエンドエンジニアが多くいました。

ですがその後のライブラリの利便性向上もあり、結局ツール群をフル活用する開発スタイルが圧倒的多数派となり、今に至ります。

トランスコンパイラを使わないということは、フロントエンドにおいては素のJavaScriptのみを使って開発することを意味し、他の言語においても、便利な代替言語の利用を諦めて素のプログラミング言語のみを扱うことを意味します。

利便性のために作られた代替言語などのメリットをまるごと放棄することになり、開発効率を落とすことになる一方、それに見合うほどのメリットは見いだせません。

すでに紹介したとおり、トランスコンパイラなどのツールはほぼ全自動で適用されますので、面倒ということも手間になることもありません。

ですので、トランスコンパイラをあえて使わない開発にはメリットがありませんので、便利なものは活用して、最高効率を得られるツールセットで開発することを強くお勧めします。

Javascript開発ならAMELAに

今回は、Javascriptの開発で活躍する「トランスコンパイラ」について見てきました。

エンジニアにとって、
「バージョンの違いによって動かない」
という問題は、常に付きまとう問題でしょう。

しかし、トランスコンパイラなどの技術が発達するに連れて、安全で高品質の開発ができることは非常に嬉しい事です。

現在AMELAでは、様々な業務用システム・アプリなどを開発しています。

特にJavaScript関連では、非常に高い評価を頂いており、実績も多数ございます。

これからは、どのような企業でもIT技術を取り入れたビジネスが必要になります。

・少しでも早く
・少しでも安く
・少しでも安全に

システム導入をするためにも、オフショアを得意とするAMELAに相談してみてはいかがでしょうか。