---
title: エンジニア達の「完全に理解した」Talk　#73
tags:  #oss #rxjs #web-serial  
author: [akihiko.KIgure](https://convert.docswell.com/user/ic_lifewood)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/L73124QGJ5.jpg?width=480
description: エンジニア達の「完全に理解した」Talk　#73 by akihiko.KIgure
published: January 27, 26
canonical: https://convert.docswell.com/s/ic_lifewood/KN9W4G-2026-01-27-191628
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/L73124QGJ5.jpg)

Web Serial を完全に理解した
エンジニア達の「完全に理解した」Talk
#73


# Page. 2

![Page Image](https://bcdn.docswell.com/page/87DXZQ9NEG.jpg)

自己紹介
akihiko.KIgure a.k.a グレさん
渋谷とグンマー帝国の 2 拠点でフロントエンド開発をしています。
AI
QR
生
コ
ー
成
ド
コ
ンテンツは誤り
を含む可能性があり
ます。


# Page. 3

![Page Image](https://bcdn.docswell.com/page/VJPPDLZNJ8.jpg)

個人的推しOSS
※アルファベット順
Angular
CHIRIMEN Open Hardware
Firebase


# Page. 4

![Page Image](https://bcdn.docswell.com/page/2EV21QWYEQ.jpg)

個人的推しOSS
※アルファベット順
Google Cloud
MDN Web Docs
Nx
Rust


# Page. 5

![Page Image](https://bcdn.docswell.com/page/57GR2WDWEL.jpg)

今日テーマ
Web Serial
RxJS


# Page. 6

![Page Image](https://bcdn.docswell.com/page/4EQVP31QJP.jpg)

今日お話する事
● シリアル通信とは
● Web Serial とは
● npm パッケージの紹介
● デモ
● おまけ


# Page. 7

![Page Image](https://bcdn.docswell.com/page/KJ4MY1RYE1.jpg)

Q：シリアル通信知っていますか？
1️⃣：知らない
2️⃣：知っている


# Page. 8

![Page Image](https://bcdn.docswell.com/page/LE186GQN7G.jpg)

シリアル通信とは（ざっくり）
・1bitずつ順番にデータを送る
・RX / TX
・マイコン・センサーの世界では「当たり前」
AI
QR
生
コ
ー
成
ド
コ
ンテンツは誤り
を含む可能性があり
ます。


# Page. 9

![Page Image](https://bcdn.docswell.com/page/GEWZWKLME2.jpg)

シリアルケーブル・コネクタ


# Page. 10

![Page Image](https://bcdn.docswell.com/page/47Z15ZMMJ3.jpg)

シリアル通信イメージ


# Page. 11

![Page Image](https://bcdn.docswell.com/page/YJ6L9ZN5EV.jpg)

本題：Web Serial API とは？


# Page. 12

![Page Image](https://bcdn.docswell.com/page/GJ51NW5G74.jpg)

ブラウザから直接シリアル通信ができる！


# Page. 13

![Page Image](https://bcdn.docswell.com/page/9E215QNDJR.jpg)

何が凄いの？


# Page. 14

![Page Image](https://bcdn.docswell.com/page/D7YZKWPMJM.jpg)

Web 技術だけで、物理世界と
直接つながるのが一番凄い！！！


# Page. 15

![Page Image](https://bcdn.docswell.com/page/VEN3R953E8.jpg)

AI
QR
生
コ
ー
成
ド
コ
ンテンツは誤り
を含む可能性があり
ます。


# Page. 16

![Page Image](https://bcdn.docswell.com/page/Y799M2YP73.jpg)

注意：Chrome, Edge, Opera の PC 版のみ使えます
AI
QR
生
コ
ー
成
ド
コ
ンテンツは誤り
を含む可能性があり
ます。


# Page. 17

![Page Image](https://bcdn.docswell.com/page/G789L56XJD.jpg)

何故 Chrome, Edge, Opera の PC 版のみなのか？


# Page. 18

![Page Image](https://bcdn.docswell.com/page/L7LWLY9NER.jpg)

Mozilla の立場（Firefox）
Mozilla は Web Serial API を有害（Harmful）であると分類しています。
文献: Mozilla Specification Positions - Web Serial API
AI
QR
生
コ
ー
成
ド
コ
ンテンツは誤り
を含む可能性
があり
ます。
主な理由:
・認証の弱い
・一般ユーザーがシリアル接続を許可する危険を理解出来ない


# Page. 19

![Page Image](https://bcdn.docswell.com/page/4EM9MNZQ7W.jpg)

Apple / WebKit の立場（Safari）
Apple も WebKit エンジンにおいて、Web Serial を含むいくつかの
ハードウェアアクセス API の実装を拒否しています。
文献:
WebKit Standards Positions - Web Serial API ※1
Tracking Prevention in WebKit ※2
主な理由:
・フィンガープリントの悪用されるリスク
・ウェブのサンドボックスの原則を壊す
AI
QR
生
コ
ー
成
ド
コ
ンテンツは誤り
を含む可能
AI
QR
生
コ
ー
成
ド
コ
ンテンツは誤り
を含む可能
性があり
ます。
性があり
ます。
※1
※2


# Page. 20

![Page Image](https://bcdn.docswell.com/page/PERGVD6K79.jpg)

Chromium プロジェクト（Chrome, Edge, Opera）の立場
一方で、Google を中心とする Chromium プロジェクトは
利便性を優先しています。
文献: Web Serial API - Chrome Platform Status
AI
QR
生
コ
ー
成
ド
コ
ンテンツは誤り
を含む可能
性があり
ます。
主な理由:
・教育・業務用途の価値が大きい
・セキュリティについては、ユーザー操作・HTTPS 必須で、制御


# Page. 21

![Page Image](https://bcdn.docswell.com/page/P7XXZ1M57X.jpg)

ウェブのあり方に対する哲学の違い
ブラウザ
Chromium系
哲学
ウェブを「アプリ実行プラットフォーム」
にしたい
Mozilla / Apple
ウェブを「安全でプライベートな閲覧環境」
に保ちたい
Web Serial への見解
肯定的。
十分なガードレール（許可ダイアログ等）が
あれば、強力な機能を提供すべき。
否定的。
ユーザーがリスクを理解できない強力な権限や
追跡に繋がる情報の露出は避けるべき。


# Page. 22

![Page Image](https://bcdn.docswell.com/page/37KW82GR7D.jpg)

W3C Community Group Draft Report
AI
QR
生
コ
ー
成
ド
コ
ンテンツは誤り
を含む可能性があり
ます。


# Page. 23

![Page Image](https://bcdn.docswell.com/page/LJ3124NGE5.jpg)

Web Serail の JavaScript 実装イメージ
接続実装イメージ
送信・受信実装イメージ
AI
QR
生
コ
ー
成
ド
コ
ンテンツは誤り
を含む可能性があり
ます。


# Page. 24

![Page Image](https://bcdn.docswell.com/page/8JDXZQWN7G.jpg)

でも・・・生 API は辛い


# Page. 25

![Page Image](https://bcdn.docswell.com/page/VEPPDL9NE8.jpg)

そこで作った OSS
※npm パッケージ


# Page. 26

![Page Image](https://bcdn.docswell.com/page/27V21QMY7Q.jpg)

@gurezo/web-serial-rxjs
Web Serial を RxJS でラップしたライブラリ
AI
QR
生
コ
ー
成
ド
コ
ンテンツは誤り
を含む可能性があり
ます。


# Page. 27

![Page Image](https://bcdn.docswell.com/page/5JGR2WGW7L.jpg)

AI
QR
生
コ
ー
成
ド
コ
ンテンツは誤り
を含む可能性があり
ます。


# Page. 28

![Page Image](https://bcdn.docswell.com/page/47QVP3XQEP.jpg)

npm パッケージの話の前に


# Page. 29

![Page Image](https://bcdn.docswell.com/page/KE4MY16Y71.jpg)

What is RxJS
AI
QR
生
コ
ー
成
ド
コ
ンテンツは誤り
を含む可能
性があり
ます。


# Page. 30

![Page Image](https://bcdn.docswell.com/page/L7186GVNJG.jpg)

何度も届くデータを安全に分かり易く扱うための仕組み


# Page. 31

![Page Image](https://bcdn.docswell.com/page/G7WZWK3M72.jpg)

たとえ話
Promise
→ 宅配便（1 回だけ届く）
RxJS
→ ラジオ放送・川の流れ（ずっと流れてくる）


# Page. 32

![Page Image](https://bcdn.docswell.com/page/4JZ15ZVME3.jpg)

なぜ Web Serial と相性がいいの？


# Page. 33

![Page Image](https://bcdn.docswell.com/page/YE6L9Z557V.jpg)

シリアル通信は：
・デバイスからデータが 何度も
・いつ来るか分からず
・途中で止める必要がある
これは Promise より RxJS の得意分野


# Page. 34

![Page Image](https://bcdn.docswell.com/page/GE51NWYGJ4.jpg)

RxJS を使うと何が嬉しい？
・無限ループを書かなくていい
・停止するときは「やめる」と言うだけ
・エラーや切断も自然に扱える
・データ加工が読みやすくなる


# Page. 35

![Page Image](https://bcdn.docswell.com/page/97215QGDER.jpg)

JavaScript の Promise と RxJS の比較
観点
Promise
RxJS（Observable）
扱える値
1 回だけの結果
時間とともに流れる値
データの性質
単発
ストリーム（連続）
複数データ
不向き
得意
開始タイミング
即時実行
subscribe したとき
停止方法
基本できない
unsubscribe で停止可能
無限データ
while / 再帰が必要
自然に扱える
エラー処理
catch
error イベントとして扱える
リソース解放
手動で書く必要あり
unsubscribe に集約できる
変換・加工
then を繋ぐ
map / filter / buffer など豊富
UI との相性
普通
非常に良い
テスト
モックしにくい
Observable を簡単に差し替え可能
シリアル通信との相性
悪い
非常に良い


# Page. 36

![Page Image](https://bcdn.docswell.com/page/DJYZKWVMEM.jpg)

RxJS のまとめ
Promise
→「結果を 1 回受け取るための仕組み」
RxJS
→「いつ来るか分からないデータの流れを扱うための仕組み」
Web Serial API は後者なので、RxJS でラップするのが自然


# Page. 37

![Page Image](https://bcdn.docswell.com/page/V7N3R9M378.jpg)

という訳で、デモをします！


# Page. 38

![Page Image](https://bcdn.docswell.com/page/YJ99M2NPJ3.jpg)

ハード接続例
Chrome
Type B to C
Raspberry Pi Zero と
拡張ボード（任意）
パソコン


# Page. 39

![Page Image](https://bcdn.docswell.com/page/GJ89L5KXED.jpg)



# Page. 40

![Page Image](https://bcdn.docswell.com/page/LJLWLYZN7R.jpg)

デモ動画のダウンロードリンク
AI
QR
生
コ
ー
成
ド
コ
ンテンツは誤り
を含む可能性があり
ます。


# Page. 41

![Page Image](https://bcdn.docswell.com/page/47M9MNVQJW.jpg)

下記フレームワークのサンプルがあります。
AI
,テ
生
メ
ア
グ
ー
プ
ラ
キ
成
ル
フ
リ
ス
コ
ケ
ィ
ト
ン
カ
ー
ル
テ
シ
ン
ユ
ョ
ン
ツ
ー
は
ザー
誤イ
り
を
ン
含
タ
ー
む
フ
可
ェ
イ
能ス
性があり
ます。
・Angular
・Vanilla JavaScript
・Vanilla TypeScript
・React
・Svelte
・Vue


# Page. 42

![Page Image](https://bcdn.docswell.com/page/P7RGVD2KJ9.jpg)

何故 npm パッケージを公開したか？


# Page. 43

![Page Image](https://bcdn.docswell.com/page/PJXXZ1D5JX.jpg)

Web Serial API そのままだと使い難い


# Page. 44

![Page Image](https://bcdn.docswell.com/page/3JKW82XRJD.jpg)

OSS にコントリビュートして
人様のお役に立ちたい！！！


# Page. 45

![Page Image](https://bcdn.docswell.com/page/LE31245G75.jpg)

これ言ってみたかった


# Page. 46

![Page Image](https://bcdn.docswell.com/page/8EDXZQDNJG.jpg)

おまけ：ハード紹介


# Page. 47

![Page Image](https://bcdn.docswell.com/page/V7PPDLXN78.jpg)

Raspberry Pi Zero 2 WH
AI
QR
生
コ
ー
成
ド
コ
ンテンツは誤り
を含む可
能性があり
ます。
スイッチサイエンス
AI
QR
生
コ
ー
成
ド
コ
ンテンツは誤り
を含む可
AI
QR
生
コ
ー
成
ド
コ
ンテンツは誤り
を含む可
KSY
秋月電子通商
能性があり
ます。
能性があり
ます。


# Page. 48

![Page Image](https://bcdn.docswell.com/page/2JV21QLYJQ.jpg)

GeeekPi Raspberry Pi Zero 2 W/Zero/Zero W用
Raspberry Pi USBドングル拡張ボードキット
QR
コ
ード
自動的に生成さ
れた説明


# Page. 49

![Page Image](https://bcdn.docswell.com/page/5EGR2WXWJL.jpg)

UGREEN OTGケーブル Type-C 変換アダプタ タイプC USB 変換
USB3.0メス 高速転送 Android スマートフォン タブレット MacBook Pro USBホストケーブル
Type-C端末とType-A機器接続 17CM
QR
コ
ード
自動的に生成さ
れた説明


# Page. 50

![Page Image](https://bcdn.docswell.com/page/4JQVP38Q7P.jpg)

ハードの紹介の gist
AI
QR
生
コ
ー
成
ド
コ
ンテンツは誤り
を含む可能性があり
ます。


# Page. 51

![Page Image](https://bcdn.docswell.com/page/K74MY12YJ1.jpg)

まとめ
Web Serial できるよ
にんげんだもの
ぐれを


# Page. 52

![Page Image](https://bcdn.docswell.com/page/LJ186GMNEG.jpg)

ご静聴ありがとうございました！


