EMに限らないけど「〇〇は△△すべき〜」も含めて、無意識的な職業差別だと思ってる。 得手不得手や向き不向きはあると思うけどやってはいけないことはないというか。 適切な役割を充てるのも大事だけど、それに対して組織はより変容的でいい気がしてる（という意識のもと労働してるつもり）。 [vol.33 組織における肩書の功罪＆デザインエンジニア転職のつらみ - お元気ですか.fm | Podcast on Spotify](https://open.spotify.com/episode/4InVmuxk14VyXUp07Sc5JI?si=ba5848bf58ba4b36&nd=1&dlsi=ecf49d67961d4f2a) [#3 激論！“デザインエンジニア” 役職名で四十五分 feat. お元気ですか.fm - よくわからないデザインと工学 | Podcast on Spotify](https://open.spotify.com/episode/5ozyIYZG5EgUZJAFbmKJlj?si=1b5ab4e792704792&nd=1&dlsi=801bc1a4d9384f7f) 最近ポッドキャストでもそういう話をしていて、この辺は自分の最近の考えているテーマでもあったりする。「役割名」をいい感じでなくしていきたいなと思っている。 で、こういう考えの源泉となっているものはなんだろうと考えていた時に、自分の信念として、できなかったことができるようになれる社会になったらといいな、というのがあると気付いた。 エンパワメントやサポートとしてのもの、身体の拡張に関してのものと価値観が一致してるところのものに興味がある。WebやAIというものを使ったソフトウェアは「できるようになれる」ものの最たる例。そういうものに関わっているからこそそうした思考が強くなってきているのだと思う。 だから何か特有のスキルをもつ人を区切ることや、その役割にはまることに気持ち悪さがあるんだなとも思った、思いました。「EMは〇〇すべき」「EMは〇〇すべきでない」という話に終止符を打ちたいというテーマで収録したいな。参加してくれるゲストさんいたら検討したい🙋
— いっしー🐱 (@oturu333) April 14, 2025
Baseline MCP Serverは、[Web Platform Dashboard](https://webstatus.dev/)のAPIを利用して、WebのAPI機能のBaselineステータス（ブラウザ対応状況）を取得できるMCPサーバーです。Claude DesktopやCline、VSCodeなどでMCPクライアントを通じてWeb機能のBaseline情報へアクセスできるようになります。
Baselineについての詳細は「[Baseline (互換性) - MDN Web Docs 用語集](https://developer.mozilla.org/ja/docs/Glossary/Baseline/Compatibility)」を参照してください。
例えば、「`導入優しい #v_tokyo22
— とと / totocalcio (@dir20634) March 28, 2025
Reactivity の説明めっちゃわかりやすい…
— kzhrk//Kazuhiro Kobayashi (@kzhrk0430) March 28, 2025
#v_tokyo22
導入からわかりやすい構成だからわかりやすいなぁ
— Naoki Haba (@naokihaba) March 28, 2025
#v_tokyo22
この記事が、これから登壇に挑戦する方や、準備に悩んでいる方の、ほんの少しでも参考になれば嬉しいです。 最後まで読んでいただき、ありがとうございました！alien-signalsのセッションめちゃ分かりやすかった！
— hiro (@hiro_xre) March 28, 2025
#v_tokyo22
このようなSignalsの潮流の中で登場したのが **alien-signals** です。alien-signalsは、**非常に軽量なリアクティブライブラリ**であることを特徴としています。
https://github.com/stackblitz/alien-signals
このライブラリが生まれた背景として、作者であるJohnson氏が[Vue 3.4のリアクティビティシステムの最適化](https://github.com/vuejs/core/pull/5912)に関わったことが挙げられます。その後、[Vue 3.5がPreactに似たPull型のアルゴリズムに切り替わった](https://github.com/vuejs/core/pull/10397)ことを受け、Vue.jsとは別のリアクティビティライブラリを研究しはじめたことが、alien-signalsの開発のきっかけとなりました。
このライブラリではPush-Pull型を採用しています。さらに[Vue 3.6からはalien-signalsの実装がリアクティブプログラミングの基盤として取り入れられる](https://github.com/vuejs/core/pull/12349)ことになりました。
### alien-signalsの特徴
値を保持する `signal`、算出された値として計算する `computed`、リアクティブな処理を定義する `effect`、そして `effect` の有効範囲を管理する `effectScope` など、Signalsの基本的なAPIを提供しています。
```javascript
import { signal, computed, effect } from 'alien-signals';
const count = signal(1);
const doubleCount = computed(() => count() * 2);
effect(() => {
console.log(`Count is: ${count()}`);
}); // Console: Count is: 1
console.log(doubleCount()); // 2
count(2); // Console: Count is: 2
console.log(doubleCount()); // 4
```
`signal` でリアクティブな値 `count` を作成し、`effect` 内でその値を監視しています。`count` の値が変更されると、`effect` 内の処理が自動的に再実行されます。
```javascript
import { signal, effect, effectScope } from 'alien-signals';
const count = signal(1);
const stopScope = effectScope(() => {
effect(() => {
console.log(`Count in scope: ${count()}`);
}); // Console: Count in scope: 1
});
count(2); // Console: Count in scope: 2
stopScope();
count(3); // No console output
```
`effectScope` を使うことで、`effect` のライフサイクルを管理できます。
内部の処理では、`propagate` 関数による変更の伝播、`checkDirty` 関数によるダーティチェックなど、再帰呼び出しを避けるための最適化が施されており、効率的な更新を実現しています。
また、`createReactiveSystem()` を使うことで、alien-signalsのコアアルゴリズムを再利用して、独自のSignals APIの構築も可能です。
```javascript
const system = createReactiveSystem({
updateComputed(computed: Computed) {
return computed.update();
},
notifyEffect(watcher: subtle.Watcher) {
if (watcher.flags & alien.SubscriberFlags.Dirty) {
watcher.run();
return true;
}
return false;
},
});
```
### 派生プロジェクト
alien-signalsは、現在さまざまなフレームワークや言語で派生して実装が進められています。2025年3月時点での派生プロジェクトは以下の通りです。
- [YanqingXu/alien-signals-in-lua](https://github.com/YanqingXu/alien-signals-in-lua)
- [medz/alien-signals-dart](https://github.com/medz/alien-signals-dart)
- [delaneyj/alien-signals-go](https://github.com/delaneyj/alien-signals-go)
- [Rajaniraiyn/react-alien-signals](https://github.com/Rajaniraiyn/react-alien-signals)
- [hunghg255/reactjs-signal](https://github.com/hunghg255/reactjs-signal)
- [CCherry07/alien-deepsignals](https://github.com/CCherry07/alien-deepsignals)
- [gn8-ai/universe-alien-signals](https://github.com/gn8-ai/universe-alien-signals)
## TC39への標準化提案
Signalsは、現在Ecma Internationalの技術委員会39（通称TC39）にてECMAScriptでの標準化提案が進められています。現在はStage 1（Proposal）になります。
https://github.com/tc39/proposal-signals
Signalsの仕様提案の推進者には、BloombergのDaniel Ehrenberg氏、Emberの開発者であるYehuda Katz氏、Google社内で使用されるWizフレームワークのメンテナのJatin Ramanathan氏、SvelteメンテナのDominic Gannaway氏などが名を連ねています。
alien-signalsのようなライブラリや各フレームワークによるSignalsの実装がより浸透していくと、この標準化の動きをさらに加速させる可能性があります。将来的には、JavaScriptの標準APIとしてSignalsが利用できるようになれば、アプリケーション側はSignalsを採用するために変更を加える必要はなくなります。また、複数のマイクロフロントエンドで共通のデータ層を共有する場合などに役立つとされています。
## まとめ
- リアクティブは、現代のフロントエンドフレームワークにおける重要な概念であり、状態の変化に応じてUIを効率的に更新するための基盤となる
- 複数の主要なフレームワークが、それぞれ独自の方法でリアクティビティを実現しているが、近年「Signals」というパターンに収束する傾向が見られる
- alien-signalsは、軽量なリアクティブプログラミングのライブラリであり、Vue 3.6から採用されることになった
- TC39におけるSignalsの標準化の動きは、JavaScriptエコシステム全体に大きな影響を与える可能性があり、フレームワーク間の相互運用性や開発の共通理解を促進することが期待される
## 宣伝: Vue.js v-tokyo Meetup #22
Vue.js日本ユーザーグループが主催する「Vue.js v-tokyo Meetup #22」では、alien-signalsのメジャーリリースを記念して、Webフロントエンドフレームワークのリアクティビィティについてキャッチアップできるイベントが3/28に開催されます。
[Vue.js v-tokyo Meetup #22 - connpass](https://vuejs-meetup.connpass.com/event/343338/)
alien-signalsやVue.jsについてはもちろん、PreactやAngular、Svelteなどのフレームワークにおけるリアクティブについても学ぶことができる貴重な機会です。ぜひご参加ください！
## 謝辞
本記事は、NotebookLM Plusにより関連情報の要約・整理をしてもらい作成されました。本記事のレビューについては[ubugeeei](https://github.com/ubugeeei)さん、[ナイトウ](https://github.com/engineer-naito/)さん、[GANGAN](https://github.com/shinGangan)さんよりしていただけました。感謝申し上げます。
## 参考情報
* [Reactive programming - Wikipedia](https://en.wikipedia.org/wiki/Reactive_programming)
* [The Reactive Manifesto](https://www.reactivemanifesto.org/)
* [The introduction to Reactive Programming you've been missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)
* [pzuraq | blog | What Is Reactivity?](https://www.pzuraq.com/blog/what-is-reactivity)
* [pzuraq | blog | What Makes a Good Reactive System?](https://www.pzuraq.com/blog/what-makes-a-good-reactive-system#observables-streams-and-rxjs)
* [EmberConf 2024 - Standardizing Autotracking Via TC39 Signals with Daniel Ehrenberg](https://youtu.be/ji7zSHCX6d8?list=TLGGE0qWPG3HOW4xNTAzMjAyNQ)
* [The Evolution of Signals in JavaScript - DEV Community](https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob)
* [ついにやってくるSignals！Angularはどう変わるのか？【ng-japan OnAir #63】 - YouTube](https://www.youtube.com/watch?v=gCKw5OyRPiA)
当日の各セッションごとでの様子は [togetter](https://togetter.com/li/1889734) にてまとめられておりますので、併せてご覧ください。 来年以降もまた開催されるのであれば、何らかの成果を出して発表ができればと考えております。 そして、私たちのように社内での取り組みを発表して、次の自信につなげたい企業が増えていけばいいなとも思っております。 手前味噌ですが、各社のアクセシビリティの取り組みについてをまとめているリポジトリを公開しております。 基本的に私が更新していますが「この取り組みを載せてほしい」というのがあれば是非 [@okuto_oyama](https://twitter.com/okuto_oyama) までご連絡ください。 [yamanoku/awesome-japanese-a11y-companies: アクセシビリティに取り組む・推進している日本企業まとめ（随時更新）](https://github.com/yamanoku/awesome-japanese-a11y-companies) また、登壇ほか字幕配信にもご協力いただいた Shamrock Records 株式会社の青木さんに感謝申し上げます。 UD トークを通じてリアルタイム字幕を提供できたほか、自身が開発された[字幕エディター](https://tools.udtalk.jp/jimakueditor)にて、自分の発表動画の字幕編集を簡単に行うことが出来ました。 花王さんの事例のように、各企業の字幕提供も進んでいくといいなと思っております。 【満員御礼】
— GAAD Japan 🇯🇵 (@GAAD_jp) May 20, 2022
昨日開催した「GAAD Japan 2022」は、671名もの皆さんに参加登録をいただきました。本当にありがとうございました！
また、ご協賛いただいた14社、9組のセッション登壇者、8組のLT登壇者の皆さんに感謝申し上げます。
本日よりフォローアップメールをお送りしてまいります！#GAADjp pic.twitter.com/YhYvqT09Ec
- Link: [https://reading.yamanoku.net](https://reading.yamanoku.net/)
- GitHub: [https://github.com/yamanoku/reading/](https://github.com/yamanoku/reading/)
日頃自分が見ているニュースを集約してまとめてみたらどうなるだろうか、情報の蓄積・可視化みたいなのを考えておりそういうのができないかなと思ってそれを題材に PWA にしてみようと思いました。以下は経緯みたいなやつです。
> [情報収集ってどうしてる？ - YAMALT vol.04](https://yamanoku.net/LT/lt04/)
### 動作イメージ
[](https://gyazo.com/8418eadc1713fd8f083a625706757786)
自分が最近見た 20 件のニュース × ５ページ分にした計 100 件を表示。
ページ間はページネーションで動きます。
### 使用技術
| API | ホスティング | フレームワーク |
| :----------------------------- | :----------- | :------------- |
| Slack API 
製品画像に関する説明についてあれこれ
``` こうかな。WAI-ARIA 使えなかったら詰みっぽいです。 参考：https://www.w3.org/WAI/tutorials/images/complex/#description-containing-textual-information
画像が見れる
See the Pen Intersection Obeserver Test code by Oyama Michinoku (@yamanoku) on CodePen.
[](https://gyazo.com/bebf722e1e507c4b4a1fe9b5c01dd81b) いわゆる「ある程度の表示にきたらヘッダの色を変える」アレです。スクロール量に制御されないので、レスポンシブなどで要素の高さが変わった場合でもこの調整は効きます。 #### サンプルコード（ES6） ```javascript (() => { const clientHeight = document.documentElement.clientHeight; const header = document.querySelector('.header'); let observer = new IntersectionObserver((changes) => { for (const change of changes) { let rect = change.target.getBoundingClientRect(); let h = (0 < rect.top && rect.top < clientHeight) || // 対象の上端は表示領域に入っている (0 < rect.bottom && rect.bottom < clientHeight) || // 対象の下端は表示領域に入っている (0 > rect.top && rect.bottom > clientHeight); // 上端下端も表示されてないがその間が表示されている if (h) { header.classList.remove('scrolled'); } else { header.classList.add('scrolled'); } } }); let target = document.querySelector('.main-middle'); // この要素のから外れたら observer.observe(target); })(); ``` コード内でいうところの target 部分に何を指定するかでどの位置で変化するか制御することが出来ます。 ```javascript let target = document.querySelector('.main-middle'); ``` また`unobserve()`を使用することでその対象の監視を終了させることができるので、１度限りの処理も対応できます。 #### 画像遅延読み込み Intersection Observer を使うと以下制御で実現出来る感じです ```html
...
```
```javascript
let observer = new IntersectionObserver(onChange);
function onChange(changes) {
changes.forEach(change => {
// data-src属性の画像URLをsrcに挿入
change.target.src = change.target.dataset.src;
// 挿入し終わったら監視を終了
observer.unobserve(change.target);
}
}
// 配列化した画像一覧
const imgs = [ ...document.querySelectorAll('.lazy') ];
// それぞれに順次監視処理
imgs.forEach(img => observer.observe(img));
```
ちなみに上記の場合だと、画像が小さかったりして読み込みがない表示があるなどラグが起こりうるので、オプションの`rootMargin`で要素の上下左右に空きを指定しておけば、その要素がくる前の段階でイベントを発火させることも出来ます。
margin の指定の順序は CSS のそれと同じです。
```javascript
{
rootMargin: '10px 0px';
} // 上下10px、左右0pxの空き
```
```javascript
{
rootMargin: '-10px 10px -5px';
} // 左記のようにマイナス値も設定できる。
```
ちなみに、0 の時は必ず単位を省略せずに書かないとエラー判定になります。
### Callback 例
以下参考までに。
```javascript
let observer = new IntersectionObserver(changes => {
for (const change of changes) {
console.log(change.time); // 変化が生じた時点でのタイムスタンプ
console.log(change.rootBounds); // root の getBoundingClientRect()
console.log(change.boundingClientRect); // target の getBoundingClientRect()
console.log(change.intersectionRect); // 交差領域の getBoundingClientRect()
console.log(change.intersectionRatio); // 交差している領域の割合
console.log(change.target); // target にされている要素
}
}, {});
const target = ... // ターゲットとする要素
observer.observe(target); // 特定のtargetに対して，監視開始
observer.unobserve(target); // 特定のtargetに対して，監視をやめる
observer.disconnect(); // すべての target に対し，監視をやめる
```
### Polyfill（2017/07 現在）
現状 Intersection Observer は IE Edge 最新、Firefox 最新、Chrome 最新、Android ブラウザ最新のみの対応につき Polyfill が必要となります。([Can I Use](http://caniuse.com/#feat=intersectionobserver))
```html
```
#### 追記（2019/02/05）
Safari12.1 でも Intersection Observer API がサポートされるようになりました。
- [Safari 12.1 Release Notes | Apple Developer Documentation](https://developer.apple.com/documentation/safari_release_notes/safari_12_1_release_notes)
- [IntersectionObserver in WebKit | WebKit](https://webkit.org/blog/8582/intersectionobserver-in-webkit/)
## 所感
監視する要素の設定があるので感覚的かと言われると怪しいですが、上記にも書いた辛くて煩わしいスクロールイベントからは離れられそうでそこは安心しました。また、スクロールイベントではなくなるので処理に負荷がかかっていた場合に原因を特定する際にも役立ちそうです。
現状は縦イベントのみで確認していますが、横スクロールのコンテンツの場合でもこれは有効な API っぽいなと感じたので後で試してみます。
## 参考 URL・記事
- [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
- [Intersection Observer 1 日本語訳](https://triple-underscore.github.io/IntersectionObserver-ja.html#intersection-observer-callback)
- [FRESH! Web パフォーマンス改善 〜クライアントサイド編〜](https://developers.cyberagent.co.jp/blog/archives/6057/)
- [Intersection Observer を用いた要素出現検出の最適化](https://blog.jxck.io/entries/2016-06-25/intersection-observer.html)
- [Quick introduction to the Intersection Observer API](https://jeremenichelli.github.io/2016/04/quick-introduction-to-the-intersection-observer-api/)
See the Pen Velocity.js - Pause/Resume animation by William Lindner (@wlindner) on CodePen.
[https://codepen.io/wlindner/pen/ykIzw](https://codepen.io/wlindner/pen/ykIzw) google 日本語検索でもそれに関する記事は見受けられませんでした。 しかし、１人の Contributior の活躍により [2016 年 11 月に一時停止・再生機能が実装されました](https://github.com/julianshapiro/velocity/pull/718)。 ## 実装例 ```js $(function () { $('.hover').velocity( { scale: [1, 0.6], }, { duration: 1500, complete: function () { $(this).velocity( { scale: [0.6, 1], }, { duration: 1500, loop: true, }, ); }, }, ); $('.hover').hover( function () { $(this).velocity('pause'); }, function () { $(this).velocity('resume'); }, ); }); ``` ## デモ [https://jsfiddle.net/g09jkr80/1/](https://jsfiddle.net/g09jkr80/1/)  ## 得られた教訓 **公式ドキュメント、アップデート情報はちゃんと調べてちゃんと読もう！！！！！** 以上学びでした。 ## 余談ですが React 用の velocity.js プラグインがあります [https://github.com/twitter-fabric/velocity-react](https://github.com/twitter-fabric/velocity-react) おっきなとこが管理してるので安心 ☺
