トランスパイルについて - Computer programming and health

トランスパイルについて

下記著書より引用、抜粋します。

トランスパイルとは「ある言語で書かれたコードを元に別のコードを生成する処理」を言います。

トランスパイルを行うプログラムをトランスパイラと呼びます。

JavaScriptでトランスパイルが必要な例の一つとして「最新バージョンのJavaScriptで書かれたコード」から「古いバージョンで書かれたコード」を生成したいというケースがあります。

例えばfunction式の代替構文である「アロー関数」がありますが、アロー関数を使用できるかは、各ブラウザに実装されたJavaScriptエンジン（JavaScriptの実行環境）が対応しているか否かに左右されます。

中略

JavaScriptの新しい機能を使用してコードを書く際、各ブラウザの対応状況を気にしなくてはなりません。実行環境に合わせたコードへの変換を目的とするアプローチです。

多くの場合JavaScriptでトランスパイルを行う際は「Babel（バベル）」というトランスパイラを使用します。

Babelの導入方法は大きく分けて以下の二つがあります。

1,ブラウザ上でBabelを読み込みトランスパイルを実行する。https://babeljs.io/docs/en/usage

2,npmでBabelを導入しトランスパイルを実行する。

下記著書よりでは2の方法を教示しております。ここでもその方法を学んでいきましょう。

トランスパイラを導入

まずはターミナル上からbabelを実行できるようにするため、babel-cliというnpmをグローバルインストールします。

npm install -g babel-cli

次にサンプルコードを保存する任意のフォルダを作成、移動し初期化した上でbabel-preset-2015というnpmをローカルインストールします。

mkdir フォルダ名 //フォルダを作成
cd フォルダ名　 //フォルダへ移動
npm init //初期化
npm install –save-dev babel-preset-es2015

今回、babel-preset-es2015という名前のnpmは、Babelが入力として与えられたコードを旧バージョンのコードへ変換するために必要なプログラムです。 es2015となっているのはBabelへ入力して与えるコードがES6だからです（ES2015はES6の別名です。）

今回は、便宜的にbabelというフォルダを作成しました。するとフォルダの中身はこんな感じになります。

ちなみにpackage.jsonの中身はこんな感じです。devDependenciesにbabel-preset-es2015が組み込まれているのが確認できます。

最後に.babelrcというファイルを作成してpackage.jsonがあるところにおきます。大事なのはドットの前には何も書きません。

このファイルにトランスパイル時に使用するプリセットの設定を記載します。 Babelに対してbabel-preset-es2015を使うということを通知するためです。

{“presets”:[“es2015”]}と記載しておきましょう。（sをつけ忘れないように。）

トランスパイラルを実行してみましょう

ES6で書かれたコードをBabelフォルダ内に用意します。

クラスやアロー関数、constが使用されています。

input.js class app {
constructor(){
console.log(‘ここではクラスを使ってます’)
}
}
const func = ()=>{
console.log(‘アロー関数をを使っています’)
};

new app();
func();

そして次のコマンドを実行します。

babel input.js –out-file output.js

コマンドを実行するとoutput.jsというファイルが作られます。

そしてコードは次のように変更されています。

クラスは変更され、アロー関数はfunctionとなり、constはvarに変更されていますね。

これでどのブラウザでもJavaScriptが実行されるように、トランスパイラルできました。

では、最後にoutput.jsをブラウザから読み込んでみましょう。

index.html <body>
<script src=”output.js”></script>
</body>

トランスパイラルによって作られたコードが動いていることが確認できます。

この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。

わからないことはプロフェッショナルから学ぶのが一番 | The best way to learn what you don’t know is from professionals.

キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.

オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.