ホーム自己紹介ブログ
NO.30
DATE2019. 08. 30

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

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

技術書典 7 って

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

技術書典7
技術書の祭典が2019年09月22日(日)@池袋サンシャインシティ 展示ホールC/D(文化会館ビル2/3F)で開催決定!
techbookfest.org

あなたは誰

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

ジブンノート
silverbirder のホームページ。ブログ記事や自己紹介などを掲載しています。
silverbirder.github.io

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」です。

貴サークル「silverbirder」う03C
貴サークル「silverbirder」う03C

販売形態は

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

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

終わりに

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

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

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

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

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

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

関連リンク

見本誌

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

技術書典 7

技術書典7: silverbirder 詳細
Web Componentsを誰でも簡単に使えるように紹介します![無料見本誌あり/サンプルコードあり]
techbookfest.org

Twitter 宣伝

フロントエンド
書籍レビュー

-

シェアする

フォローする

次のページ

エンジニアのためのスマートホーム化

前のページ

Cloud Native Days Tokyo 2019 -2019年7月22-23日参加レポート

関連する記事

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

ヒューマンインターフェース ガイドライン という言葉を知りました。

最近、ヒューマンインターフェース ガイドライン(HIG)という言葉を知りました。 「ヒューマンインターフェイスガイドライン」には、どのAppleプラットフォームでも優れた体験を設計できるようにするためのガイドとベストプラクティスが含まれてい

2026-01-24

フロントエンド
AIの利用上限に達した時にすることを残しておく

主にWeb関連の個人開発をしている際に心がけていることを書きます。 月末に近づくにつれ、AIの利用上限に達してしまうことがあります。 その状況になった時、以下のいずれかの選択肢が私の中では残っています。 課金して利用上限を増やす 無料モデル

2026-01-22

フロントエンド
AI
CSSで頑張らなくても、SVGで楽にできるときもある

個人サイトをリニューアルをしています。 ノート風のデザインを目指して、スタイルを調整していました。 ノートの見た目は、現実にあるノートを再現しようとCSSを書いていました。 現在、以下の画像のようなノートになっています。 ノート風デザインの

2026-01-20

フロントエンド

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

『ザ・ダークパターン ユーザーの心や行動をあざむくデザイン』書籍レビュー

今回、以下の書籍を読みました。『ザ・ダークパターン ユーザーの心や行動をあざむくデザイン』せっかくなので、感じたことや気づきをまとめてみます。

2025-07-02

書籍レビュー
『マイクロインタラクション―UI/UXデザインの神が宿る細部』を読みました。

マイクロインタラクションという言葉をネットで見かけて、興味を持ちました。詳しく知るには書籍が最適だと思い、オライリー社の『マイクロインタラクション ―UI/UXデザインの神が宿る細部』https://www.oreilly.co.jp/books/9784873116594/を読みました。本書を通じて、細部にこだわることで、「仕方なく使う」から「次も使いたくなる」Webサービスを目指したいと感じました。以下は、その感想です。

2025-02-22

書籍レビュー
『レタースペーシング タイポグラフィにおける文字間調整の考え方』を読みました。

書店の本棚を眺めていると、「レタースペーシング タイポグラフィにおける文字間調整の考え方」というタイトルが目に留まりました。興味を引かれ、手に取って購入しました。読み終えたので、その感想をまとめます。

2025-02-11

書籍レビュー
← ブログ一覧へ