Polymer 3.0 Previewについて〜npmとES6モジュールへの移行〜

この記事は、公式サイトのブログ「Polymer 3.0 preview: npm and ES6 Modules(Justin Fagnani,2017-08-22)」を訳したものです。

本日コペンハーゲンで開催されたPolymer Summit 2017において、私たちはPolymerプロジェクトの歴史において一つのとても大きなワークフローの転換を発表しました。それは以下の二つの大きな変更です。：

• PolymerはBowerからnpmへ移行します。
• HTML importsの代わりにES6モジュールを使用するように変更を行っています。

私たちは現在、これらの変更のプレビューを行っています。Polymerの次のメジャーバージョンに含まれるこれらの変更に対して、フィードバックを得ることができるようにプロジェクトは公開しながら開発を行っています。是非プレビューを試してみてください。プロダクション上のプロジェクトでは、現在使用している既存のPolymer 1.xまたは2.xライブラリを使用してください。これから新しいプロジェクトを開始する場合は、Polymer 2.xの利用をお勧めします。

これらは重要な変更とはなるものの、我々は可能な限りシームレスに移行できるようにするように努めています。Polymer 3.0 APIは、2.x APIと基本的には同一です。APIの変更が必要な部分においては、小さな変更で済み、機械的に変更に対応できるようにしたいと考えています。Polymer 2.xの一部であるすべてのクラス、ミックスイン、エレメント、テンプレートシステム、その他のAPIは、レガシーなPolymer 1.xの構文も含め、モジュールに移植中です。Polymer開発者が持っているすべての知識は、Polymer 3.0にそのまま活かされるでしょう。

現在のエレメントやアプリケーションをPolymer 3.0に自動的に変換するためのPolymer Modulizerというツールも提供する予定です。このツールは、プレビューの一部としてすぐに利用でき、PolymerライブラリとすべてのPolymerエレメントに対してすでにテスト済みです。

今日の記事では、Polymer 3.0への移行の背景にある理由と、安定版リリースまでに必要となる段階について解説します。明日は、プレビューのコードを実際に試してみましょう。

なぜNPMとES6モジュールに切り替えるのか？

Polymerでは初期から、BowerとHTML Importsを使用して依存関係を管理しました。Bowerで依存関係をインストールし、HTML Importsはそれらを読み込みます。

これらの技術は、Polymerの提示する方法に従って作成されたPolymerあるいはサードパーティ製のWebコンポーネントのようにHTML Importsベースのワークフローに取り組んでいればうまくいきました。しかしながら、これらの方法はWeb開発の主流から外れて行き、他のフレームワークを使って作業する人やツールの作成者にとっては困難の元になりました。

また一方で、ES6モジュールとnpmに移行することにはいくつかの利点もあります。：

• Polymerは、大多数のJavaScript開発者が精通しているワークフローやツールと互換性が高まります。
• 最新バージョンのChrome、Opera、Safariでは、Polymerエレメントやアプリケーションがポリフィルなしに実行できます。EdgeとFirefoxがCustom ElementsとShadow DOMに対応すると、Polymerはこれらのブラウザでもポリフィルなしにを実行可能となります。
• 他の一般的なJavaScriptライブラリとの連携がより簡単にできるようになります。それは、Polymerエレメントを他のライブラリにインポートする場合、エレメント内に他のライブラリを使用する場合の両方に当てはまります。

以下のセクションでは、これらの変更点について詳しく説明していきます。

HTML Imports ➙ ES6 Modules

初期からPolymerはHTML Importsを使用して依存関係を読み込んでいます。 HTML importsには多くのメリットがあります。：

• Webネイティブなロード機構。HTML importsを使用してコードをロードするのでビルドツールは必要ありません。
• 依存関係は順序付けられた評価により段階的にロードされます。つまり、AがBをインポートし、BがCをインポートすると、CとBはAの前にロードされ評価されます。
• URLによる依存関係の重複排除。各インポートは、複数回インポートされた場合でも、一度だけダウンロードされ、評価されます。
• ネイティブのHTML解析。

しかし、HTML importsは、標準委員会やブラウザベンダーの間で合意を得て進められているものではありません。後継の技術に関する活発な議論はありますが、新しい標準は何年も先のことです。

ES6モジュールを取り入れます。 ECMAScript 2015標準（ECMAScript 6またはES6とも呼ばれます）は、JavaScript用のネイティブモジュールとモジュールロードシステムを導入しました。これは、最終的にすべての主要なブラウザによってサポートを得ています。Safari、Chrome、そしてFirefoxとEdgeでサポートされています。

ES6モジュールを使用することで、JavaScriptファイルが他のファイルをインポートし、ブラウザによってロードされ実行されることになります。 ES6モジュールの読み込み動作は、HTML importsとほぼ同じです。：

• Webネイティブな読み込み機構
• 順序付けられた評価による依存関係の段階的なロード。
• URLによる依存関係の重複排除。
  ES6モジュールから明らかに欠落しているHTML imports機能の1つは、インポートされたHTMLをネイティブに読み込み解析することです。この機能をプラットフォームに取り戻したいと思っていますが、開発者やそのユーザーにとってベストなことは何かを考えれば、標準に関する議論が展開されている間に、広く採用済みの標準としてES6モジュールを採用することは理にかなったことです。

他方、JavaScriptでHTMLを表現するための合理的なオプションはいくつもあります。これらのオプションについてコミュニティで議論を深めることを楽しみにしています。

Bower ➙ npm

HTML importsと同じくらいBowerは長い間私たちと一緒に開発を共にしてきました。 Bowerのフラット型の依存ツリーは、フロントエンドプロジェクトに最適です。しかし、Bowerはnpmほど広く普及しておらず、今もメンテナンスされていますが、もはや活発に開発されているものではありません。

npmに移行すると、数百万人のnpmユーザーがPolymerパッケージをシームレスに利用できるようになり、Polymerパッケージもnpmエコシステムに存在する膨大な他のパッケージを簡単に利用できます。

このような移行に対する要求は長らく存在していましたが、モジュールのフラット型のインストールをサポートし、Bowerとnpmパッケージを同期させておくための良い解決策が得られるまで見送られていました。

npmクライアントであるYarnはフラット型インストールをサポートしています。これにより、＃1(訳注：原文まま)の問題がnpm上で解決されます。

Bowerとnpmパッケージを同期して利用するための様々なアプローチを検討した結果、並行してバージョンを維持することは実用的ではないと結論づけました。そこで私たちは3.xを区切りとしてnpmだけに移行することとしました。

これらの変更はいつ行われますか？

ライブラリとエレメントの新しいバージョンをプレビューすることができますが、完全なプロダクションリリースを完成するにはまだいくつかのピースが必要です。

現時点において、私たちは以下に取り組んでいます。：

• Polymerコアライブラリとエレメントのワーキングバージョンのnpmへの公開
• BowerおよびHTML Importsベースで作られたプロジェクトをnpmおよびJavaScriptモジュールベースに変換するPolymer Modulizerツール。
• polymer serveにおけるnpmパッケージのサポート

Polymer 3.0をリリースする前に、もう少し多くのことが必要です。

• 動的インポートなど、モジュール仕様を完全にサポートするブラウザが少なくとも1つは必要です。（Safari 10.1とChrome 61はすでにモジュールをサポートしていますが、動的インポートはサポートしていません）。

• より包括的なパフォーマンステストを行う必要があります。ES6モジュールのネイティブサポートはまだ道半ばで、実際のところ試験的なものです。

• ES6モジュールとnpmに対応するようにPolymer CLIや関連ツールをアップデートする必要があります。

• より良いドキュメント、サンプルコード、テンプレートを完成させなければいけません。

• なにより重要なことは、私たちがPolymer Modulizer、Polymer 3.0、および3.0互換のPolymerエレメントをプロダクション環境で利用可能なものとするには、プレビューの利用と参加を介してみなさまからのフィードバックが必要です。また、サードパーティのWebコンポーネントを活気あるエコシステムに移行させるためにもみなさまの助けが必要です。

次は何がありますか？

私たちがPolymer 3.0のプレビューに対して抱くのと同じくらいみなさまながエキサイトすることを期待し、フィードバックを下さるを心待ちにしています。

明日は、ハンズオンを通して新しいコードを試してみてください！

※すでに@salamanderさんが訳してくださっていたので、該当記事へリンクを貼らせていただきました。