技術書典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フロントエンドのコードレビューメモ

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

2026年03月12日

フロントエンド

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

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

2026年02月25日

AI

フロントエンド

iframeの難しさ

最近、iframeを使っています。 クライアントサイドで埋め込む想定で、iframeを使おうとしています。 色々と苦労したことがあったので、書いて残しておこうと思います。 レスポンスヘッダー 前提として、ウェブアプリケーションをプロダクショ

2026年02月18日

フロントエンド

ブラウザ

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

『CSS 優良デザイン×アイデア事典 プロがシェアする現場の即戦力テクニック』を読みました。

以下の書籍を読みました。 感想について書こうと思います。 https://books.mdn.co.jp/books/3225303033/ 概要 本書では、数年以内に流行った比較的新しいCSSテクニックについて紹介されていました。 例えば

2026年03月15日

書籍レビュー

『CSS 優良デザイン×アイデア事典 プロがシェアする現場の即戦力テクニック』を買いました。

Googleレコメンドで、以下のCSSに関する書籍が流れてきました。 CSS 優良デザイン×アイデア事典 プロがシェアする現場の即戦力テクニック｜株式会社エムディエヌコーポレーション - books.mdn.co.jp なんとなくレコメンド

2026年03月10日

書籍レビュー

『トンマナ の基本 一貫性と時短のデザインルール』を読みました。

以下の書籍を読みました。 書籍の感想を書こうと思います。 https://note.com/ingectared/n/n7883798f12ce トンマナ TONEは雰囲気や印象の調子。 MANNERはそれを形づくり形式やルール。 この2つ

2026年03月07日

書籍レビュー

← ブログ一覧へ