PR：この記事にはアフィリエイトリンクが含まれます。
Web Componentsの本には、Custom ElementsやShadow DOMの基礎を扱う入門書から、LitやTypeScriptでの実装を扱うものまであります。どの内容を学びたいかで、おすすめの一冊は変わります。
今回の4冊は、標準APIの基本から実装や設計まで内容が異なります。刊行年は2019〜2021年。ライブラリの章は刊行当時の内容なので、現行ドキュメントと合わせて読むと役立ちます。
Custom ElementsやShadow DOMの入門には『Getting Started with Web Components』がおすすめです。実装方式の幅を知りたい人には『Exploring Web Components』、標準APIを使った実装なら『Web Components in Action』。TypeScriptで設計する人には『Developing Web Components with TypeScript』をすすめます。
4冊を早見する
| 書名・出版社 | 主な内容 | おすすめの読者 |
|---|---|---|
 Getting Started with Web Components | Custom Elements、Shadow DOM、テンプレート、ライフサイクル、PolymerやStencilとの連携。158ページ | 標準APIの入門や導入検討 |
 Exploring Web Components | 属性、プロパティ、イベント、テンプレート、フレームワーク連携。LitElementやlit-htmlも扱う。224ページ | 複数の方式を見比べたい人 |
 Web Components in Action | Vanilla JavaScriptでの実装、CSS、テスト、イベント、旧ブラウザー向けの対応。432ページ | 手を動かして実装を学びたい人 |
 Developing Web Components with TypeScript | Shadow DOM、slots、イベント、TypeScript、薄いライブラリ、SPA。本文266ページ | TypeScriptを使う中上級者 |
4冊の違いはページ数に限りません。標準APIからどこまで学べるかにも差があります。短めの入門書、実装方式を紹介する本、手を動かして学ぶ本、TypeScriptの設計に進む本。それぞれ扱う範囲が異なります。
書名に「Web Components」が並ぶため、内容を取り違えないよう主なテーマを確認しましょう。Custom ElementsやShadow DOMの基礎を押さえたいのか、テストやフレームワーク連携まで知りたいのかで、本の候補は変わります。
『Web Components in Action』の米国定価はUS$49.99です。実売価格は販売店や時期によって変わるため、注文時に確認してください。
Web Componentsの基本
Web Componentsは、ブラウザー標準の仕組みで再利用可能なUI部品を作る技術です。Custom Elementsで独自のHTML要素を定義し、Shadow DOMを使うと、部品の内部構造やスタイルをページ側から分けて扱いやすくなります。
HTML Templatesは、繰り返し使うHTMLのひな形を用意する仕組みです。要素を登録した後、属性の変化や画面への追加・削除に応じた動きまで考えると、部品の構成を把握しやすくなります。
本によって扱う範囲はさまざまです。仕様の用語を整理するものもあれば、イベントやデータの受け渡し、テストまで学べるものもあります。自分の開発場面を思い浮かべながら読むと、各章の意味が見えてきますよ。
仕様の基礎を固める
『Getting Started with Web Components』は、Prateek Jadhwaniによる2019年刊の入門書で、全158ページです。Custom Elements、Shadow DOM、テンプレートといった基本を取り上げています。学び始めの人が用語と構造を整理するのにおすすめです。
ライフサイクルの章では、connectedCallback、disconnectedCallback、adoptedCallback、attributeChangedCallbackを扱います。要素がページに加わるときや外れるとき、属性が変わるときの処理を、部品の動きとして理解できます。
再利用やSPAの例もあり、Polymer、Stencil、既存フレームワークとの連携にも触れています。仕様の基礎と導入例を一緒に学びたい人に合う内容です。全体像をつかむ入口におすすめの一冊。
Web Componentsの用語を押さえ、導入候補として理解したい人にもすすめやすい本です。158ページなので、まず一冊読んで基礎を知りたい人に向いています。
実装の幅をつかむ
『Exploring Web Components』は、Andrea Chiarelliによる2020年刊、224ページの本です。Custom Elementsの基本に加え、属性とプロパティ、イベント、Shadow DOM、HTML Templatesへと進みます。コンポーネントの入出力を広く学べる構成です。
ライブラリやフレームワークとの連携も扱います。Vanilla JavaScriptのほか、React、Angular、Vueとの接続を取り上げ、Polymer、LitElement、lit-html、Hybrids、Slim、Stencilにも触れています。複数の方式を一冊で確認できます。
ただし、ライブラリの紹介は2020年刊当時の名称と状況に基づきます。現在のLitの使い方を網羅する本というより、標準APIとライブラリの関係をつかむ比較材料として読むのがよいでしょう。
HTML、CSS、JavaScriptの基礎があり、ReactやVueとの接続も知りたい人におすすめです。実装方式を決める前に、周辺の用語を一通り押さえたい場合にも役立ちます。
実例で身につける
『Web Components in Action』はBen Farrellによる2019年刊で、432ページあります。フレームワークを使わないCustom Elementsの実装から始まり、ライフサイクルやShadow DOMとCSS、イベント、データフローを扱います。4冊の中で最もページ数が多く、実装の流れを追える本です。
テストも扱っており、部品の実装から動作確認まで学べます。Shadow CSSやイベント設計も含むため、HTML、CSS、JavaScriptの経験がある人におすすめです。
旧ブラウザー向けのフォールバック戦略も載っています。既存環境との互換性を考える人にも実用的です。米国定価はUS$49.99で、実売価格は販売店や時期によって変わります。
432ページなので、要点だけを短時間で押さえたい人には分量が多めです。ライフサイクル、CSS、テストを続けて学びたい人におすすめします。
TypeScriptで設計する
『Developing Web Components with TypeScript』はJörg Krauseによる2021年刊です。標準APIとプレーンJavaScriptの基礎から始まり、TypeScriptによる実装や薄いライブラリの構築へ進みます。中上級者や専門開発者が対象です。
内容はShadow DOMに限りません。slotsやテンプレート、イベント、スタイルのカスタマイズ、コンポーネントのライフサイクルを取り上げ、フレームワークコードを使わないSPAの作成にも触れています。
TypeScriptを使う環境でWeb Componentsを設計する人には、標準APIからアプリ構築までつながる点が魅力です。入門書より先の内容を扱うため、TypeScriptの基礎を持ってから読むと理解しやすくなります。
本書の主題はTypeScriptと薄いライブラリの構築です。Litを中心に学ぶ本とは内容が異なりますが、フレームワークに依存しない部品設計やSPAとのつながりを学びたい人におすすめです。
結論
Web Componentsの基本を初めて学ぶなら、『Getting Started with Web Components』をおすすめします。Custom Elements、Shadow DOM、テンプレート、ライフサイクルを順に押さえられ、PolymerやStencilとの連携も学べます。基礎と導入イメージを一冊でつかめる本です。
実装経験があり、ReactやVueとの連携やLit周辺も知りたい人には『Exploring Web Components』。フレームワークなしでテストまで学ぶなら『Web Components in Action』、TypeScriptで部品や薄いライブラリを設計するなら『Developing Web Components with TypeScript』が有力です。
どの本も刊行年を踏まえて活用しましょう。標準APIの原理を本でつかみ、使うLitやTypeScript環境の最新情報を公式ドキュメントで補うと、読後に実装へ移りやすくなります。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
