Clever Geek Handbook

任意のブラウザで最新のJavaScript機能を使用する方法

画像



JavaScriptは非常に急速に進化している言語であり、最新の機能を使用したい場合もありますが、ブラウザーまたは環境で直接許可されていない場合は、そのためにトランスパイルする必要があります。



トランスパイルとは、ある言語で記述されたソースコードを、同等の抽象度で別の言語に変換することです。したがって、JavaScriptの場合、トランスパイラーは古いブラウザーが理解できない構文を取り、それを理解できる構文に変換します。



ポリフィリングvs. 転載



どちらの方法も同じ目的で機能します。ターゲット環境に実装されていない新しい機能を使用するコードを記述してから、これらの方法の1つを適用できます。



ポリフィルは、最新の機能を実装するコードの一部であり、古いバージョンのブラウザーで機能するように適用できます。



トランスパイルは、変換-変換とコンパイル

-コンパイルの2つの単語の組み合わせです。ポリフィルでは新しい構文を実装できない場合があります。その場合は、トランスパイラーを使用します。Number.isNaN



関数をサポートしていない古いブラウザを使用していると想像してみましょう。ES6仕様で導入されました。この機能を使用するには、このメソッドのポリフィルを作成する必要がありますが、これが必要になるのは、ブラウザーでまだ使用できない場合のみです。



これを行うには、isNaN関数の動作を模倣する関数を作成し、それをプロトタイプのNumberプロパティに追加します。 



//  isNaN
if (!Number.isNan) {//  .
    Number.prototype.isNaN = function isNaN(n) {
        return n !== n;
    };
}
let myNumber = 100;
console.log(myNumber.isNaN(100));


次に、新しく作成した関数のコードをトランスパイルします。ほとんどのブラウザがこの機能を実行できないと想像してみてください。その場合、動作をシミュレートするためのポリフィルを作成できません。Internet Explorer 11で次のコードを実行したいので、トランスパイラーを使用して変換します。 



class mySuperClass {
  constructor(name) {
    this.name = name;
  }
hello() {
    return "Hello:" +this.name;
  }
}
const mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); 
//Hello Rick


結果のコードは、Babelのオンライントランスパイラーを使用して移植され、Internet Explorer11で実行できるようになりました。 



"use strict";
function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }
function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var mySuperClass = /*#__PURE__*/function () {
  function mySuperClass(name) {
    _classCallCheck(this, mySuperClass);
this.name = name;
  }
_createClass(mySuperClass, [{
    key: "hello",
    value: function hello() {
      return "Hello:" + this.name;
    }
  }]);
return mySuperClass;
}();
var mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); //Hello Rick


最も一般的なJavaScriptトランスパイラーの1つはBabelです。 Babelは、異なるバージョンのJavaScript間でコードを移植するために構築されたツールであり、Node Package Manager（npm）を介してインストールできます。



Babelは、ECMAScriptアプリケーションを、そのようなアプリケーションをサポートしないブラウザーで動作するバージョンのECMAScriptにコンパイルするための標準になりました。 Babelは、ReactJSXなどの他のバージョンのECMAScriptをコンパイルできます。



次の手順では、Babelを使用して、古いNode.jsがインストールされているLinuxマシンで以前のmySuperMethodクラスをトランスパイルして実行する方法を説明します。 Windows 10やmacOSなどの他のオペレーティングシステムでも、手順は似ています。



注意。Node.jsがコンピューターにインストールされている必要があります。NpmがNode.jsインストーラーに関数として追加されました



1.コマンドプロンプトを開き、babelExampleというディレクトリを作成します。 



/mkdir babelExample
/cd babelExample


2. npmプロジェクトを作成し、デフォルトのままにします。次のコマンドは、package.jsonという名前のファイルを作成します。 



npm init


画像

npm initコマンド実行後のpackage.jsonファイルの内容のスクリーンショット



ここで、index.js（ファイル名は異なる場合があります）は、アプリケーションへのエントリポイントです。ここにjavascriptコードを配置するので、index.jsファイルを作成し、その中に次のコードを配置します。 



class mySuperClass {
  constructor(name) {
    this.name = name;
  }
hello() {
    return "Hello:" +this.name;
  }
}
const mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); 
//Hello Rick


3. Babel CLIはグローバルにインストールできますが、プロジェクトごとにローカルにインストールすることをお勧めします。次のコマンドは、node_modulesディレクトリを追加し、package.jsonファイルを変更してBabelの依存関係を追加します。 



npm install -save-dev @babel/core @babel/cli


画像

babel依存関係のあるpackage.jsonのスクリーンショット4..babelrc構成ファイルをプロジェクトルートに



追加し、ES2015 +変換用のプラグインを含めます。注意。Babelでは、各トランスフォーマーは個別にインストールできるプラグインです。各プリセットは、関連するプラグインのコレクションです。プリセットを使用すると、数十のプラグインを自分でインストールして更新する必要がありません。 すべてのES6機能（プラグインのグループを含む）のプリセットを設定します。 











npm install @babel/preset-env --save-dev


画像

babelプリセット



-env依存関係を持つpackage.jsonのスクリーンショット.babelrcファイルを編集し、ES6の変換を含む構成を追加します。



次のコードを.babelrcファイルに書き込みます。 



{
  "presets": ["@babel/preset-env"]
}


5.使用上の



注意。Windows 10 PowerShellを使用している場合は、Babelの起動時に解析エラーが発生する可能性があるため、ファイルのエンコードには注意してください。ファイルはUTF-8エンコーディングであることが望ましいです。



入力：index.js

出力：outフォルダー（Babelは移行されたファイルをここに残します）



コンソールで次のコマンドを直接実行します。 



./node_modules/.bin/babel index.js -d out


npmスクリプトを使用して、package.jsonファイルに次の行を追加します。 



"build": "babel index.js -d out"


画像

ビルドスクリプトを追加した後のpackage.jsonファイルの内容のスクリーンショット



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



npm run build


どちらの場合も、ES6クラス構文をサポートしないすぐに使用できるブラウザーにトランスパイルされた1つまたは複数のファイルをoutフォルダーに入れます。コードは次のとおりです。 



"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var mySuperClass = /*#__PURE__*/function () {
  function mySuperClass(name) {
    _classCallCheck(this, mySuperClass);
this.name = name;
  }
_createClass(mySuperClass, [{
    key: "hello",
    value: function hello() {
      return "Hello:" + this.name;
    }
  }]);
return mySuperClass;
}();
var mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello());


結論



JavaScript言語は絶えず変化しており、これらのツールのおかげで、すべてのバージョンのブラウザーにまだ実装されていない新しい構文と新機能を使用してコードを記述できます。



この記事を楽しんでいただけたでしょうか。私はこれと他の多くの有用な記事をFrontend.school（） Telegramチャネルで初心者のフロントエンド開発者に放送します。そこでは、知識をテストするための有用なクイズも用意しています。このチャンネルは純粋に趣味であり、助けたいという願望であり、私にとって重要な利益をもたらさないという事実にあなたの注意を引きます。


More articles:


All Articles