@1000ch です。技術書典5に参加して、よくわかる Web Components という本を書きました。当日迄と当日の気持ちは別途「技術書典5にサークル参加した」に書いています。

モチベーション

Web Components という言葉を2013年末に初めて目にして以来、かれこれ5年が経ちます。Web Components が Web のスコープ問題を根本的に解決しうる技術だと感じて以来、継続的に動向をキャッチアップしてはアウトプットを繰り返してきたように思います。

こうして蓄積してきた経験と知識を、いつか何らかの形でまとめたいなと、常々思ってきました。このような背景を踏まえて、今回は書籍という形でまとめ、出版しました。

お品書き

この本は Web 開発について全く知らない初学者向けではなく、HTML、CSS、JavaScript、ブラウザについての基本的な知識を抑えている初中級者を想定して書きました。Web Components の概要について把握し、構成する技術要素を一通り理解した上で、具体的にどのように実践に投入していけば良いかを学ぶ構成になっています。

コピー・ペーストで使えるサンプルを提示するのではなく、どの技術がどのように機能し、何を解決するのかにフォーカスすることで、Web Components についての体系的な理解を促します。また、技術要素単位で章が分かれているので、リファレンスとしても活用できるかもしれません。

1. Web Components

   1. Webにおけるコンポーネント

   2. Web Componentsとは

   3. Web Componentsを構成する技術

2. Custom Elements

   1. カスタム要素の登録

   2. ライフサイクル

   3. プロパティの定義

   4. JavaScriptクラスの参照

   5. 定義されるタイミングの取得

3. Shadow DOM

   1. DOMのカプセル化

   2. Shadow DOMの生成

   3. openモードとclosedモード

   4. slot要素による挿入ポイントの作成

   5. Shadow DOMのスタイリング

4. ES Modules

   1. ES2015のモジュール構文

   2. defaultキーワードによるデフォルトエクスポート

   3. 名前付きインポートとワイルドカードキーワード

   4. script要素を使ったJavaScriptモジュールのロード

5. 実際の使い方

   1. Custom ElementsとShadow DOMの連携

   2. ライフサイクルを利用した振る舞いの定義

   3. lit-htmlを使ったShadow Root配下の更新

6. 導入戦略

   1. 既存のUIライブラリとの組み合わせ

   2. ブラウザのサポート状況

   3. webcomponents.jsを使ったポリフィル

   4. ES Modulesのフォールバック

電子版も販売しています

刷った物理版 200 冊は、ありがたいことに完売してしまったのですが、電子版は無限の在庫で販売しています。 EPUB 形式で 500 円というスペックです。値段設定については、当日お釣りが出にくい + お求めやすい 500 円にしました。

物理版の扱いについてはイベントの前から悩むところがあり、どうするかをずっと考えていました。せっかく技術書典に参加するので、物理版を刷ってイベントに挑みたかったのは優先事項でした。アップデートの配信を優先するならば、物理版と電子版をセット前提にしても良かったのですが、物理版の数に限りがある上にセットにすることで値段を上げたくもありません。

悩みに悩んだ挙げ句、当日から物理版と電子版の販売を行い、電子版はタイミングを見てアップデートしていくことを決めました。Kindle 版を Amazon で、EPUB ファイルを BOOTH と Gumroad で販売しています。

この本が Web Components についての理解に役立ち、そしてより良い Web 開発の手助けになれば幸いです。

読んでくれた人の感想