Babelとは?
Babelとは?
ウェブ開発をしていると、Babel（バベル）といつ言葉をよく聞くことがあると思います。私も、React勉強をしたときに使ったことがありますが、それが正確に何なのかを詳しく説明ができなかったですね。それで今回は、Babelについて説明しながら理解しようと思います。
予約すると、BabelはJavascriptのコンパイラーと表現できます。人間レベルの高級言語で書かれたプログラムを、機械語のプログラムに出力する翻訳機みたいなものです。ただし、大学のプログラミング基礎知識で学ぶように、Javascriptはコンパイラーではなくインタプリターとして動作します。
インタプリンターとコンパイラーを違いは何なのか？両者とも高級言語を機械語に変換する翻訳プログラムですが、その過程で異なる点があるため、別々に分類されます。コンパイラーは全体のソースを把握して翻訳を進めますが、インタプリターはソースコードの各行を連続的に翻訳して実行します。
では、これがどのような違いを知っていますか？インタプリターの特徴は4つにまとめることができます。
・コンパイラは全体を一度読み込み、コンピューターが理解できる機械語に変換しますが、インタプリターは各行を高級言語から中間コードに直ちに変換して実行します。中間コードは別のプログラムによって読み込まれ、実行されます。
・※一般的には、コンパイラーの方がインタプリタよりも実行が早いです。 ・コンパイラーは全体を把握してーエラーを出力しますが、インタプリタはエラーが発生した時点でその後の行は翻訳しません。 ・※インタプリター言語は、コンパイラー言語よりも機械依存性から自由です。
※Javaはコンパイラーとインタプリターの両方を使用します。Pythonはインタプリター、CおよびC++ 言語はコンパイラー言語です。
話が少し脇道に逸れてしまいましたが、話題はJavascriptはなぜコンパイラーBabelが必要なのか？です。その理由は、Babelが高級言語を機械語に翻訳するのではなく、Javascriptで出力物を作成するためのコンパイラーからです。これはソースコードからソースコードへのコンパイラー（トランスパイラ）と呼ばれます。
では、JavascriptをJavascriptに変換する必要がある理由は何でしょうか？手間がかかるからです。以下で詳しく説明します。
Babelはなぜ使うのか?
この記事を読んでいる方々は、※クロスブラウジング（Cross-Browsing）についてご存知でしょう。簡単に言えば、様々なブラウザでサービスを提供するための動きです。単にサービス提供だけではなく、最適化の問題も含まれます。つまり、交換性と効率性に関連する重要な言語です。
※互換性の問題は、ブラウザの※多様性や技術の急速な発展などによるものです。特に技術の変化が非常に速いため、最新のブラウザでさえサポートできない文法や技術が依存しています。さらに、Web開発者であれば古いブラウザを使用しているユーザーも考慮する必要があります。
こうした多様な環境を考慮することは簡単ではありません。これが人々がBabelを使用する理由です。Babelは、新しい文法やTypeScriptやJSXなど、他の言語に分類される言語についても、全てのブラウザで動作する互換性を保つようにします。つまり、上記の技術が全てブラウザで動作する下位バージョンのJavascript言語に変換されることになります。
Babel動作は、次の３つのステップに分かれます。
- 構文解析(parsing: パーシング):コードを読み取り、※抽象構文木（AST）に変換するステップ
- 変換(Transforming): 抽象構文木を変更するステップ
- 出力(Printing): 変更された結果物を出力するステップ
実際、Babelが担当するのはパーシングと出力2つの段階です。
ちなみに、抽象構文木と言うのは何でしょうか？これは私も初めて聞いた概念ですが、プログラム内で発生する機能を表現するために作成された構文製造のことを指します。これは、高レベルの言語を機械語に変換するプロセスで必要になります。コードをツリー構造のデータ構造に変換します。こうすることで、プログラマーもコンピューターも、より理解しやすくなるでしょう。
簡単に言うと、人間のタイピングではなく、構造化されたツリーにコードを変換することです。BabelはJavaScriptコードを受け取り、ASTを作成します。そして、それを活用して新しいJavaScriptコードを出力します。
では、中間の変換は誰が担当しますか？それはBabelプラグインが担当します。※プラグインは、どのようにコードを変換するかに関する規則を定義します。必要に応じて、これらのプラグインを自分で作成して使用することができます。そして、プラグインを目的に応じてまとめたものを※プリセット（preset）と呼びます。
Babelポリフィル（Polyfill）
下位バージョンのJavaScriptに変換しても限界があります。Babelを使っても、最新の関数を使えるわけではありません。Babelは単に文法を変換してJavaScriptに変換するだけなので、ブラウザエンジンが実装していない新しい関数の場合、ブラウザで実行できる別の方法を考えなければなりません。そしてそれがポリフィルでしょう。
このような状況では、ポリフィルがどのように役立つのでしょうか？ポリフィルは、スクリプトにユーザーが望む最新の関数を追加します。JavaScriptは非常に動的な言語であるため、追加したい関数があれば、どんな関数でもスクリプトに追加することができます。ポリフィルはこの役割を担うのです。
ポリフィルは、特定の機能がサポートされていないブラウザをサポートするために使用されます。Babelはコンパイル時に実行されますが、ポリフィルはランタイムで実行されるため、実装されていない新しい機能を埋める※fillの役割を果たします。
もうちょっと知りたい。
※ 一般的には、コンパイラーの方がインタプリタよりも実行が早いです。
・コンパイラーとインタープリターの実行速度の違いは、コンピュータの性能、ソースコードのサイズや複雑さ、コンパイラーまたはインタープリターの最適化レベルなどによって異なる可能性があります。しかし、一般的には、コンパイラーの方がインタープリターよりも実行速度が速い傾向があります。 これは、コンパイラーがソースコード全体を分析して機械語に変換するためです。そのため、コンパイラーは実行時にインタープリターよりも速くコードを実行できます。また、コンパイラーは機械語に変換されたコードをキャッシュして再利用できるため、同じコードを何度も実行する必要がある場合には、インタープリターよりも効率的です。 一方、インタープリターはソースコードを一行ずつ読み込んで直ちに実行するため、実行速度が遅くなる可能性があります。しかし、インタープリターはコードを実行する過程で中間結果をすぐに確認できるため、デバッグが容易です。 結論として、コンパイラーとインタープリターはそれぞれ長所と短所があり、実行速度については一般的にコンパイラーの方が速いとされています。
※ インタプリター言語は、コンパイラー言語よりも機械依存性から自由です。
・インタプリター言語は、プログラムコードを実行する際に機械語に変換する必要がありません。つまり、ソースコードを機械語に変換する過程がないため、特定のハードウェアアーキテクチャに依存しないということです。 一方、コンパイラー言語は、ソースコードを最初に機械語に変換する必要があるため、特定のハードウェアアーキテクチャでのみ実行できます。これを機械語依存性と呼びます。例えば、x86アーキテクチャでコンパイルされたコードは、ARMアーキテクチャで実行することはできません。 そのため、インタプリター言語はプラットフォームに依存せず、どこでも実行できます。これが、インタプリター言語がコンパイラー言語よりも多くのプラットフォームで使用される理由の一つです。
※ Javaはコンパイラーとインタプリターの両方を使用します。
・Javaは、コンパイラーとインタプリターの両方を使用する言語です。Javaソースコードは、最初にコンパイラーによってバイトコード(Bytecode)に変換されます。このバイトコードは、特定のプラットフォームに依存せず、Java仮想マシン(JVM)で実行されます。 バイトコードは、実行時にインタプリターによって解釈されるか、JIT(Just-In-Time)コンパイラーによってより高速なマシンコードに変換されます。JITコンパイラーは、バイトコードを実行時に解析し、頻繁に実行されるコードを事前にマシンコードにコンパイルして実行速度を向上させます。 Javaは、このような方法でさまざまなプラットフォームで実行でき、高い移植性と性能を両立して提供しています。また、Javaにはガベージコレクタ(Garbage Collector)と呼ばれるメモリ管理を自動的に処理する機能が組み込まれているため、プログラマはメモリ管理に直接注意を払う必要がありません。
※ クロスブラウジング（Cross-Browsing）
・クロスブラウジングとは、異なる種類のウェブブラウザで同じウェブサイトやウェブアプリケーションが正しく動作することを意味します。つまり、ウェブサイトやアプリケーションが、Google Chrome、Firefox、Safari、Microsoft Edgeなど、複数のウェブブラウザで問題なく表示・動作することを目指すことです。 異なるブラウザは、ウェブページの表示方法や動作に対して若干の差異があります。例えば、HTML、CSS、JavaScriptの実装やレンダリングエンジンの違い、セキュリティ設定の違い、フォントの違いなどが原因となります。このため、特定のブラウザで動作するウェブサイトが、他のブラウザで正しく動作しないということがよくあります。 クロスブラウジングには、ブラウザごとに異なる仕様に対応するために、コードの修正やブラウザごとに異なるCSSファイルを作成するなどの対策が必要です。これにより、ウェブサイトやアプリケーションをより広いユーザー層に提供することができます。
※ 互換性
・互換性(Compatibility)とは、あるシステム、製品、プログラムなどが他のシステム、製品、プログラムなどと同等の機能を持っていることを指します。つまり、あるものが他のものと互いに共存することができ、問題なく機能することを意味します。例えば、Webブラウザの互換性とは、あるWebページが異なるブラウザで同じように表示されることを指します。また、あるバージョンのソフトウェアが別のバージョンと互換性があるということは、それが正常に動作し、同じ機能を提供することを意味します。
※ 多様性
・多様性とは、様々な環境、デバイス、オペレーティングシステム、ブラウザーなどでソフトウェアやウェブサイトが正常に動作し、互換性を維持できる能力を指します。多様性は、ユーザーが様々な環境で提供されるソフトウェアやウェブサイトを使用できる権利と必要性に対する認識を反映したものです。そのため、多様性を考慮して開発されたソフトウェアやウェブサイトは、より多くのユーザーにアクセス可能で、使いやすさが向上します。
※ JSX
・JSXは、JavaScript XMLの略で、ReactでUIコンポーネントを作成するための文法拡張です。JSXは、JavaScriptコードの中でXMLに似た文法を使用してUIを作成できるようにします。 Reactでは、JSXはUIをレンダリングする前に、Babelなどのトランスパイラーを使用して通常のJavaScriptコードに変換されます。この変換作業は、ブラウザで直接実行可能なコードに変換されます。 JSXの最大の利点は、可読性が非常に高いことです。XMLに似た文法を使用してUIを作成するため、開発者はUI構造を一目で理解することができます。また、JSXはJavaScriptコードの中で使用されるため、さまざまなJavaScriptライブラリと一緒に使用することができます。 ただし、JSXを使用すると、一般的なJavaScriptコードと混同される可能性があるため、使用するには少し学習が必要です。
※ 抽象構文木(AST)
・抽象構文木(AST)とは、プログラムのソースコードを解析して、プログラムの構文を木構造で表現したものです。ASTは、プログラムを構成する各要素(変数、関数、式など)をノードとして表現し、それらの間の関係を辺で表現します。 ASTは、コンパイラーやインタプリターなどのソフトウェア開発において重要な役割を果たしています。ASTを利用することで、プログラムの構文解析、意味解析、最適化、コード生成などの処理を行うことができます。 例えば、コンパイラーは、ソースコードをASTに変換し、その後、ASTを解析して様々な最適化を行います。最終的に、最適化されたASTから機械語コードを生成して実行可能なバイナリファイルを作成します。 また、インタプリターは、ASTを解析しながらソースコードを実行することで、プログラムを実行します。 ASTは、ソースコードを抽象化することで、プログラムの構造や意味を明確に表現し、ソフトウェアの開発や解析において重要な役割を果たしています。
※ プラグイン
・プラグインとは、あるプログラムやアプリケーションの機能を拡張・追加するためのソフトウェアモジュールのことです。プラグインは、ホストアプリケーション内に組み込まれることで、様々な追加機能を提供することができます。例えば、ブラウザの場合、フラッシュプレイヤーやPDFビューアなどのプラグインがあります。また、画像編集ソフトの場合、フィルターやエフェクトなどの機能を提供するプラグインがあります。プラグインは、ユーザーが自由にインストールや削除を行うことができ、アプリケーションの機能を柔軟に拡張することができます。
※ プリセット（preset）
・プリセット（preset）とは、あらかじめ設定された一連のルールや構成を含む、コードをトランスパイルするためのBabelの設定の塊です。つまり、特定の目的に合わせて事前に用意されたBabelの設定です。 例えば、Reactアプリケーションを開発する場合、JSXのトランスパイルやES6+の機能を使用するためのトランスパイルが必要です。そのため、Reactプリセットを使用することが一般的です。Reactプリセットは、JSXのトランスパイルやES6+の機能を自動的に設定してくれるため、Reactアプリケーションの開発に必要な設定を簡単に行うことができます。 他にも、envプリセットは、ブラウザやNode.jsの実行環境に応じたBabelの設定を自動的に行ってくれるプリセットです。TypeScriptプリセットは、TypeScriptファイルをトランスパイルするための設定を提供してくれます。 プリセットは、Babelの設定をより簡単に管理し、複数のプロジェクトで同じ設定を使い回すことができるようにするために利用されます。
参考資料
・https://ja.wikipedia.org/wiki/Babel_(%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B9%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%A9)
・https://blog.recruit.co.jp/rls/2019-12-08-babel-approach/
・https://bravenamme.github.io/2020/02/12/what-is-babel/
Comments