技術書典7 で「はじめてのWeb Components入門」を初出版します！

この度、初めて書籍を出版することになりました！ 「はじめての Web Components 入門」本を技術書典 7 で販売します。

技術書典 7 って

コミックマーケットのエンジニア向けみたいなものです。 詳しくは、下記のリンクを参照下さい。

あなたは誰

詳しくは、私のポートフォリオを参照下さい。

Web アプリケーションが大好きなエンジニアです。 今は、EC サイトのフロントエンドエンジニアをしています。

どんな本

Web Components について 何も知らない方向けの書籍になります。 書籍の内容の大きな流れは、下記のとおりです。どれもサンプルコードを用意しています。

1. Web Components の基礎
2. ★ 実際に Web Components を作成
3. 関連ライブラリの紹介

「実際に Web Components を作成 」について紹介

お題として Todo Components を作ることになります。作る流れは順序立てて紹介しています。

1. 最小限のコンポーネントを作成
2. レンダリングの工夫
3. コンポーネント間のデータ連携

上記のステップを踏むことで Todo Components が完成します。もちろん、サンプルコードがあるので動作確認できます。

また、カバレッジ 100%テストコードの実装も紹介していますので、TDD も実現できます。Web Components のテストコードは、あまりネット上に紹介されていない印象があったので、折角なので混ぜてみました。

最後に、（実際はしていませんが）Web Components を公開する手順も紹介しています。

コラムネタ

コラムネタとして下記のようなもの（全てではない）を書いています。

• cloneNode vs innerHTML
• html-imports
• WAI-ARIA
• slot
• :host

目次

• 第一章 フロントエンド開発

  • フロントエンド開発の苦労
  • コンポーネントベースの JS フレームワーク
  • JS フレームワーク非依存
  • まとめ

• 第二章 Web Components

  • 概要
  • Web Components 4 つの基本機能
  • ライフサイクルメソッド
  • まとめ

• 第三章 Web Components を作ってみよう

  • 作って学ぶ
  • TodoComponents を作ってみる
  • [実践] TodoItem と TodoInput を作る
  • [実践] render を工夫してみよう
  • [実践] MyTodo を作る
  • [実践] 各コンポーネントを連携する その 1
  • [実践] 各コンポーネントを連携する その 2
  • [実践] 各コンポーネントを連携する その 3
  • [実践] テストコードを書く
  • [補足] slot
  • Web Components の公開
  • まとめ

• 第四章 Web Components の関連ライブラリ

  • Polymer
  • LitElement
  • Material Web Components
  • その他の周辺ライブラリ
  • まとめ

なぜ書いたの

主に下記のとおりです。

1. Web Components を学習したかったから
2. ポートフォリオとして残したいから
3. エンジニアと交流したいから

特に、1 番が大きかったです。 Web が大好きな私にとっては、Web Components という技術に興味がありました。 けれど、実際に試したことがなかったので、これをきっかけにして使ってみたい！という欲求が大きくありました。

いつ、どこで販売されるの

2019 年 09 月 22 日で、「池袋サンシャインシティ 展示ホール C/D」で販売します。 弊サークル「silverbirder」の配置は「う 03C」です。

販売形態は

本と電子本の 2 つにするつもりです。 本は日光企画様より製本して頂いたもののみの販売となります。 電子本は BOOTH で販売する予定です。

本を購入された方は、電子本を 無料 で差し上げます。

終わりに

今回、初物が多すぎました（笑）。
そのせいで、プライベートの時間がほぼなくなりました（笑）。

• 初技術書典参加
• 初製本
• 初 Web Components 勉強
• 初クリスタ（イラスト用)

技術書典では、エンジニアそれぞれの 今 書きたいものをアウトプットしています。 そうすると、新鮮な情報をキャッチアップしやすくなるため、非常に情報収集するのが効率的だと思います。 技術書典を参加したことがありませんが、執筆してみて思います。

「 どの本も絶対面白い！ 」はずです。

だって、好きなこと書けるんですから（笑）。私も含まれます。

技術書典 7 当日は、是非とも「う 03C」にお越し下さい〜〜！
（他のサークルさんの本買いに行きたい...!!!）

関連リンク

見本誌

• [見本誌] はじめての Web Components 入門 -4 つの基本機能から関連ライブラリまで-

技術書典 7

Twitter 宣伝

-

読者になる

|

シェアする

|

ブログを応援する

この記事がよかったら、お布施という形で応援してもらえるとうれしいです。

おふせぼたん

関連する記事

タグ「フロントエンド」の記事

Webフロントエンドのコードレビューメモ2

また、以下の記事の続きを書こうと思います。 https://silverbirder.github.io/blog/contents/20260312/ ビジネスロジック アプリケーションのビジネスロジックに関することについて書きます。 複

2026年03月18日

フロントエンド

Webフロントエンドのコードレビューメモ

Webフロントエンドのコードレビューをしているときに考えていることについて書きます。 毎日1記事投稿、1記事30分という制約を課していますので、本記事は完璧ではありません。(言い訳) また希望的な考えもあるので、実践していないものもあります

2026年03月12日

フロントエンド

AIの書いたコードの手直しを減らすお作法

AI にコードを書かせた後、余計なコードを見つけて消す作業があります。 不毛なことなので、それらの作業を減らすためのお作法を紹介します。 未使用コードを消す 以下でも書きましたが、未使用コードの検査に knip を使うことが多いです。 ht

2026年02月25日

AI

フロントエンド

タグ「書籍レビュー」の記事

『Webブラウザエンジニアリング』第12章を読みました。

以下の書籍を12章を読みました。 12章は難解でした。 https://www.oreilly.co.jp/books/9784814401574/ 1章から11章の感想については、以下で書いています。 『Webブラウザエンジニアリング』第

2026年04月03日

書籍レビュー

『Webブラウザエンジニアリング』第11章を読みました。

以下の書籍を11章を読みました。 11章はかなり奥が深いので、1つの章のみの感想になります。 https://www.oreilly.co.jp/books/9784814401574/ 1章から10章の感想については、以下で書いています。

2026年03月29日

書籍レビュー

『Webブラウザエンジニアリング』第9~10章を読みました。

以下の書籍を9章から10章まで読みました。 https://www.oreilly.co.jp/books/9784814401574/ 1章から8章の感想については、以下で書いています。 『Webブラウザエンジニアリング』第1~3章を読み

2026年03月27日

書籍レビュー

← ブログ一覧へ