Web Components は、ウェブ用の構築について皆さんが知っているものすべてを変えるでしょう。今回初めて、ウェブで低レベル API が提供されるようになり、独自の HTML タグの作成だけでなく、ロジックや CSS のカプセル化も可能になります。グローバルなスタイルシートのスープやボイラープレート コードは必要ありません。すべてが要素となる、勇敢な新しい世界です。
DotJS の講演では、Web Components が提供する機能と、最新のツールを使って Web Components を構築する方法について説明します。Yeoman は、Polymer を使用してウェブアプリを効率的に作成するためのツールのワークフローです。Polymer は、最新のブラウザでウェブ コンポーネントを使用してアプリを開発するためのポリフィルと糖分のライブラリです。
カスタム要素を作成し、他のユーザーが作成した要素をインストールする
この講演では、以下の内容を取り上げます。
- ウェブ コンポーネントを構成する 4 種類の仕様(カスタム要素、テンプレート、Shadow DOM、HTML インポート)について解説します。
- 独自のカスタム要素を定義し、Bower を使用して他のユーザーが作成した要素をインストールする方法
- JavaScript の記述に費やす時間を減らし、ページの構築により多くの時間をかけることができます
- 最新のフロントエンド ツール(Yeoman)を使用して、ジェネレータ ポリマーと Polymer を使用してアプリケーションをスキャフォールディングする
- Polymer がウェブ コンポーネントの作成を大幅に変更する方法。
たとえば、Polymer の Web Component ポリフィルとライブラリ自体をインストールするには、次の 1 行を実行します。
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">
Yeoman では、必要な依存関係、ボイラープレート コードとアプリを最適化するためのツールをすべて含む新しい Polymer アプリをスキャフォールドして時間を節約するために、次の 1 行を使って実行できます。
yo polymer
ボーナス チュートリアル
また、講演でお見せする Polymer Jukebox アプリの 30 分間のボーナス チュートリアルも録画しました。
ボーナス動画で取り上げる内容:
- 「すべてが要素である」というスローガンの意味
- Bower を使用して Polymer の Platform ポリフィルと要素をインストールする方法
- Yeoman ジェネレータとサブジェネレータを使用して Jukebox アプリを足場にする
- ボイラープレートで土台となるプラットフォーム機能を理解する
- Angular アプリを Polymer に機能的に移植する方法
また、新しい Polymer 要素をスキャフォールディングするために、Yeoman サブジェネレータも利用します。たとえば、実行する要素 foo
のボイラープレートを作成します。
yo polymer:element foo
要素を自動的にインポートするかどうか、コンストラクタが必要かどうかなどの設定を指定できます。
両方の講演で紹介されているアプリの最新のソースは、現在 GitHub で公開されています。もう少しリファクタリングして、整理して読みやすくしました。
アプリのプレビュー:
関連情報
つまり、Polymer は Web Components がネイティブに実装されるのを待つ間、Web Components を最新のウェブブラウザで有効にするための JavaScript ライブラリです。最新のツールを使用すれば、それらを使用してワークフローを改善できます。独自のタグを作成する際には、Yeoman と Bower をぜひお試しください。
このトピックに関する他の記事もご参照ください。