イイダリョウのブログ。JSJSコンパイル系の続きで今回はBabelです。前回はAltJSのTypeScriptをGulpでコンパイルしました。今回のBabelはESの新しい書式を従来の書式(ES5)に変換します。AltJSではなく正規なJSでちょっと書き方が新しいだけだし、Babel自体にコンパイル機能があるためGulpも使いません。クモのようにコツコツとWeb開発環境まとめqiita.comBabelとは何かこちらの解説がわかりやすい。CodeGridBabel(バベル)*は、次世代のJavaScriptの標準機能を、ブラウザのサポートを待たずに使えるようにするNode.js製のツールです。次世代の標準機能を使って書かれたコードを、それらの機能をサポートしていないブラウザでも動くコードに変換(トランスパイル)します。Babelはなんと、厳密に言うとAltJSではなかった。BabelとAltJSBabelはコードを変換するという点では、CoffeeScriptやTypeScript*といった、JavaScriptのコードを生成するAltJSの仲間と言えるかもしれません。...Babelを使う際に書くのは、AltJSではなく純粋なJavaScriptです*。新しい機能や構文を使って書いたJavaScriptを、現状のブラウザでも動くJavaScriptへと変換します。Preprocessor」にBabelもあったのでAltJSの一種かと思っていた。ちなみにプリプロセッサとは...プリプロセッサとは、ソフトウェアの役割による分類の一つで、ある中心的な処理を行うプログラムに対して、その前処理(preprocess)を行うプログラムのこと。プログラミング言語のコンパイラの前処理を行うものが非常に有名。e-WordsTyepeScriptはJSのメタ言語(代替言語)のため拡張子が.ts。BabelはJSの標準仕様のため拡張子は.jsのままだった。ESとは何かESはEcmaScriptの略JSの標準仕様なのになぜコンパイルが必要なのか。それはJSの新しい仕様にまだ対応していないブラウザがあるため。以前の記事でも触れた様にJSの標準仕様は「ES」という。Internationalのもとで標準化手続きなどが行われている。今は略語ではなくなったため、大文字では書かず「Ecma」が正式名称になったそうな。ESのバージョンこのESのバージョンが今は毎年改定されていてブラウザの対応がなかなか追いつかない。2015」仕様の名称に発行年が付加されることになった。以降、ECMAScriptは毎年改訂されることになり、以降特定の版を指す場合は、edition名ではなく年号つきの仕様書名で呼ばれることが推奨されている[2]。Wikipedia「ES6(ES2015)」の前の「ES5」は2009年、「ES5.1」は2011年に改定されたため、今ではほとんどのブラウザが対応している。ES6からは便利な機能がかなり追加された。Qiitaなので、みんな使いたい。そのため開発時はES6〜の仕様でJSを書いて、公開時にはBabelでES5にコンパイルをするわけだ。ES6(ES2015)のブラウザ対応状況なお、ES6のブラウザ対応状況はこちら。table以前はChromeとFireFox以外はあまり対応してくれていなかった様だが、さすがに5年も経っているのでSafariやEdgeなども対応してくれている様だ。IEはもうホントどーしようもない。早く市場から消え去って欲しい。IEが標準ブラウザなOS「Windows7」のサポート終了は2020年1月14日。MicrosoftBabelのコンパイル環境を準備するということで早速バベりたい。CDNリンクBabelのコンパイルについて調べるとGulpやWebPackと連携する方法が多いが、まずはBabel単体に標準で付いているコンパイル機能がどんなものか体験する。こちらの記事がわかりやすく、参考にさせていただきました!※参考:Babelの使い方入門編|ES6をコンパイル(JavaScript)ちなみに、先に書いた様にBabelは.jsファイルの中身を変換するのみのため、なんとCDNのリンクでブラウザ(クライアントサイド)のみでも変換が可能らしい!headタグの中に下記をリンクする。-vBabelをインストールするフォルダを作る。今回はbabel_testという名前にした。ターミナルを開いてcdコマンドでフォルダに移動する。/(フォルダ)/babel_testpackage.jsonを作成する。-yここまではTypeScriptの時と同じですな。クモのようにコツコツとbabel-cliをインストールこの次、今回はGulpは入れない。babel-cliというツールをローカルでインストールする。babel-cli成功するとpackage.jsonのdevDependenciesにbabel-cli`が記載される。}babel-preset-envをインストールBabelの設定ファイルである.babelrcを作成する。PC設定のカルマ次にbabel-preset-envというプリセットをローカルでインストールする。-D参考記事ではbabel-preset-es2015かbabel-preset-envのいずれかを入れる、とあった。babel-preset-es2015は「ES2016」を「ES2015(ES6)」にコンパイルしてくれるプリセットだが、公式サイトを見るとそれに変わる機能としてbabel-preset-envを推奨している様だ。Babel毎年改定されるES20xxの内容をこのプリセットが判断してくれるっぽい。※参考:babel-preset-envを簡単にさわってみた。Qiita成功するとまたpackage.jsonに追記される。}.babelrcに設定を書き込む。["env"]}念のため、参考記事にある様にブラウザの詳細設定も追記する。]}presetsの第二引数として連想配列targetsキーを入れるtargetsキーの中にさらに連想配列browsersキーを入れる。browsersの値は配列で一つ目の値に相対的なバージョン、二つ目の値にSafariのバージョンデータはJSON形式のようだ。以前のAltJS記事のおさらいコンパイルしたいjsファイルを作る。以前、AltJS記事で作ったBabelのCodePenを使う。クモのようにコツコツとHTMLファイル、css、jsフォルダ作成プロジェクトフォルダ直下にindex.htmlを作る。Settingの旅、JS編第4回。JS編の最後を飾るBabelはブラウザがまだ対応していない最新のESに準拠した記述ができるAltJSとのこと。<p>Babelも素のJSがそのまま行けるようなのでJSからの書き換えもしやすそう。<p><small>※letは再宣言が出来ない。<br>※constは再宣言も再代入もできない。→いずれもvarより厳密だが、全てvarに置き換えても問題はない。src="js/script.js"></script></body></html>bodyの閉じタグの直前でscript.jsというファイルをリンクしている。これはBabelでコンパイル後のファイルの前提。src="js/script.js"></script>また、cssフォルダ、jsフォルダも作る。cssフォルダの中にcommon.cssファイルを作っている(コードはCodePen参照)ブラウザで開いてみると「ここ押せワンワン」というボタンがある。script.jsが存在していないため、ボタンを押しても何も起こらない。Babelコンパイル前のファイルjsフォルダの中にBabelコンパイル前のファイルを作る。babel_test.jsという名前にする。