ウェブ コンポーネントは、ウェブ向けの開発についてこれまでに学んだことをすべて変えるでしょう。ウェブに初めて低レベルの API が導入され、独自の HTML タグを作成できるだけでなく、ロジックと CSS をカプセル化できるようになります。グローバル スタイルシートの混乱やボイラープレート コードはもう必要ありません。すべてが要素である新しい世界です。
DotJS での私の講演では、Web コンポーネントの機能と、最新のツールを使用して Web コンポーネントを構築する方法について説明します。Yeoman について説明します。これは、最新のブラウザで Web コンポーネントを使用してアプリを開発するためのポリフィルとサガーのライブラリである Polymer を使用してウェブアプリの作成を効率化するツールのワークフローです。
カスタム要素を作成し、他のユーザーが作成した要素をインストールする
このセッションでは、次のことを学びます。
- ウェブ コンポーネントを構成する 4 つの異なる仕様（カスタム要素、テンプレート、Shadow DOM、HTML Imports）について。
- 独自のカスタム要素を定義し、Bower を使用して他のユーザーが作成した要素をインストールする方法
- JavaScript の記述に費やす時間を短縮し、ページの作成に時間を割く
- 最新のフロントエンド ツール（Yeoman）を使用して、generator-polymer で Polymer を使用してアプリケーションをスキャフォールドする
- Polymer Super がウェブ コンポーネントの作成をどのように変えるか。
たとえば、Polymer のウェブ コンポーネント ポリフィルとライブラリ自体をインストールするには、次のワンライナーを実行します。
bower install --save Polymer/platform Polymer/polymer
これにより、bower_components フォルダが追加され、上記のパッケージが追加されます。--save は、アプリの bower.json ファイルにそれらを追加します。
後で Polymer のアコーディオン要素をインストールする場合は、次のコマンドを実行します。
bower install --save Polymer/polymer-ui-accordion
次に、アプリケーションにインポートします。
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
時間を節約するために、必要なすべての依存関係、ボイラープレート コード、アプリの最適化ツールを備えた新しい Polymer アプリのスケルトンを Yeoman で作成するには、次のワンライナーを使用します。
yo polymer
ボーナス チュートリアル
また、講演で紹介した Polymer Jukebox アプリの 30 分間のボーナス チュートリアルも録画しました。
ボーナス動画で説明されている内容:
- 「すべてが要素である」というマントラの意味
- Bower を使用して Polymer のプラットフォーム ポリフィルと要素をインストールする方法
- Yeoman ジェネレータとサブジェネレータを使用して Jukebox アプリの骨組みを作成する
- ボイラープレートでスキャフォールドされたプラットフォーム機能の理解
- Angular アプリを Polymer に機能的に移植する方法。
また、新しい Polymer 要素のスキャフォールディングに Yeoman サブジェネレータを使用します。たとえば、要素 foo のボイラープレートを作成するには、次のようにします。
yo polymer:element foo
要素を自動的にインポートするかどうか、コンストラクタが必要なかどうか、その他の設定についてプロンプトが表示されます。
両方のセッションで紹介したアプリの最新ソースが GitHub に公開されています。整理して読みやすくするために、さらにリファクタリングしました。
アプリのプレビュー:
関連情報
要するに、Polymer は、ウェブ コンポーネントがネイティブに実装されるのを待つ間、最新のウェブブラウザでウェブ コンポーネントを有効にする JavaScript ライブラリです。最新のツールを使用すると、ワークフローを改善できます。独自のタグを開発する際には、Yeoman と Bower を試してみることをおすすめします。
このトピックに関するその他の参考記事: