技術書典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 宣伝

-

読者になる

|

シェアする

|

ブログを応援する

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

おふせぼたん

関連する記事

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

Webmention 使ってみた

Webmention というのを最近知りました。 名前の通り、Web 上でメンションすることができます。 受信側、送信側、どちらも対応したので感想を残そうと思います。 Webmention ざっくりと Web AサイトにBサイトのリンクをつ

2026年09月08日

フロントエンド

個人開発

モジュールアップデートでやっていること

ITヲタクな AI くんにピッタリな仕事の一つは、モジュールアップデート。 特に、メジャーアップデートが超助かる。 昔だったら 数ヶ月掛かった移行も、数日たらずに対応できるようになったので、 さすが ITヲタクくん。 対応してよかったフロー

2026年07月24日

AI

フロントエンド

写経テストコードを全部消した

以下で書いた通り、プロダクトコードを写経したテストコードを削除しました。 "こぶりー" ( https://kobliy.vercel.app/ ) という個人ブログを読むアプリのコードです。 https://silverbirder.gi

2026年06月08日

AI

フロントエンド

テスト

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

ブローガスト15日目: 『ウェブ配色 決める! チカラ』を読みました。

前回同様、昔読んだけど感想が残せていない以下の本『ウェブ配色 決める! 』について、 簡単に感想をまとめておこうと思います。 https://www.color-fortuna.com/writing/deciding-power-for-

2026年08月15日

書籍レビュー

ブローガスト14日目: 『カラー・アクセシビリティ』を読みました。

前回同様、今回は『カラー・アクセシビリティ』の本の書籍レビューを書きます。 https://book.mynavi.jp/ec/products/detail/id=138894 色盲 色盲の人は、日本では男性の約5％（20人に1人）、女性

2026年08月14日

書籍レビュー

ブローガスト13日目: 『いろいろな、いろ』を読みました。

前回同様、過去読んだ本の書籍レビューを残したいため、 今回は『いろいろな、いろ』 について書き残そうと思います。 https://ingectar-e.com/books/iroironairo あまり書けることがありませんでした...。

2026年08月13日

書籍レビュー

← ブログ一覧へ