- 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 
画像が見れる
...
```
```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/)
後半はViteにまつわる今後の技術戦略（OxC、Rolldown）や、設立した企業の[VoidZero](https://voidzero.dev/)についてを発表してくれました。Viteが様々なフレームワークなどで活用されているエコシステムの凄さを感じつつ、更なる技術的進化が語られておりワクワクさせられました。useId作ってくれてありがとうございます #vuefes
— オオヤマ オクト (@okuto_oyama) October 19, 2024
ちなみにVue.jsは今年で登場して10周年になるのですが、私がVue.jsに初めて触れたのが2016年からなのでそこから8年近くも経っているのだなぁ〜と思い出に浸っていました。 ### IT未経験者をVue.jsで開発できるITコンサルタントに育てあげる秘訣 - フューチャーの新人研修の取り組み こちらはフューチャーアーキテクト株式会社さんのスポンサーセッションです。 新人研修の中でVue.jsを用いた開発ができるように組み込んでいるとのことでしたが、[eslint-plugin-vue](https://eslint.vuejs.org/)のメンテナでもある太田さん（[ota-meshi](https://github.com/ota-meshi)）が教材の監修に関わっているとのことでした。 Schooでもフロントエンドアーキテクチャの選択肢としてVue.jsやNuxtを用いているので、今後の新卒エンジニアの研修教材にどう組み込むか検討しています。新卒研修でVue.jsやNuxtを組み込んでいる企業の方と意見交換できたらいいなとか考えていました。Viteの将来が楽しみです！ #vuefes
— オオヤマ オクト (@okuto_oyama) October 19, 2024
### Nuxtベースの「WXT」で開発用のChrome拡張を作成する Chrome拡張を作るにあたり何かしらのボイラープレートとなるものは色々と存在しています。今回はNuxtのディレクトリ構成に似た「[WXT](https://wxt.dev/)」でChrome拡張を作成したという内容を発表してくれました。 Manifestファイルを自動生成してくれたり、開発時には拡張機能を取り込んだブラウザが立ち上がりホットリロードして機能検証できるなど、開発者体験が良さそうに思いました。モジュールを入れる必要はありますが、Vue.jsやReact、Svelte、SolidJSを用いたUI開発もできるとのことです。Vue.jsを使って開発研修しているところってどれくらいあるんだろうかな #vuefes
— オオヤマ オクト (@okuto_oyama) October 19, 2024
### 同期する都市のキャンバス：Vue.jsによる大規模メディアインスタレーションの舞台裏 セッションやLTのおおよそはVueエコシステムの話やシステム開発・Web開発の話だったのですが、それとは違う毛色のVue.js活用事例についての発表でした。 group_inouとAC部のミュージックビデオ作品『HAPPENING』のWebアプリでも[Vue.jsが使われていた話](https://baku89.com/making-of/kindolphin)もあり、映像とVue.jsは親和性があるのかなと思い、興味をそそられました。 発表では[渋谷サクラステージ](https://www.shibuya-sakura-stage.com/)でのデジタルサイネージにはNuxtが使われているという衝撃の事実を知ることができました（[技術解説記事](https://rettuce.blog/2024/01/11/shibuyasakurastage/)）。自分にとっては、複雑なGUIを作るためにNuxtを活用するイメージがまったくできていなかったので、ここまで実現できるのかと驚きました。色の合成についてもCSSで行っているということでWeb技術をフル活用されていたことが嬉しかったです。Vue以外でReact、Svelte、SolidJSも使える！マイクロフロントエンドっぽくやれる…？ #vuefes_kickflow
— オオヤマ オクト (@okuto_oyama) October 19, 2024
ちなみに渋谷サクラステージはSchoo本社からも近い場所にあるので、出社した際はデジタルサイネージがどうなっているかを覗きに行ってみようと思います（[デジタルサイネージのイメージ動画URL](https://www.youtube.com/watch?v=DJfNFAYwEaU)）。 ### Vue 3 と Svelte 5 のランタイムを比較する 〜技術を一段深く理解する〜 SvelteのコアチームメンバーでもあるbaseballyamaさんによるVue 3とSvelte 5、そしてVue Vapor Modeのそれぞれのランタイムを比較した発表です。個人ではSvelteを書いたことがあるのと、コンパイラとして魅力を感じているOSSだったので、Vue.jsとSvelteとでどのようにランタイムが違うのか気になっていました。 ReactやVue.jsでは仮想DOMを用いていますが、Svelteでは仮想DOMを持たないランタイムを持っています。Vue Vapor Modeでも同様に仮想DOMを用いない手法を取り入れているため、どの部分が似ていてどの部分が違うのかを簡略化されたコードで説明してくれました。 それぞれのランタイムについて詳細に見たことがなかったため、今回の発表でSvelteとVue Vapor Modeのそれが、非常に近しいものであることをざっくり理解できました。Web技術をつかっていろんな展開ができる話はわくわくするな〜 #vuefes_mntsq
— オオヤマ オクト (@okuto_oyama) October 19, 2024
Vue Vapor Modeのランタイム、Svelteと似てるんだ #vuefes_mntsq
— オオヤマ オクト (@okuto_oyama) October 19, 2024
ちなみに同日夜よりSvelteにまつわるカンファレンスの[Svelte Summit Fall 2024](https://www.youtube.com/watch?v=fAPFsRP-mbc)が開催され、Svelte 5の正式リリースが発表されていました。新たに搭載された[Rune API](https://svelte.dev/docs/svelte/what-are-runes)もVue.jsの書き方と近しくなってきたと感じるので、いつかプロダクションで導入してみたいなぁという気持ちがあります。 ### 次世代フロントエンドクロストーク  Evan You、OxCクリエイターのBoshen Chen、ESLint Communityコアチームの太田 洋介さん、PrettierメンテナのSosuke Suzukiさん、Biomeコアコントリビューターのunvalleyさんらが集まりフロントエンドツールのこれからについてを語るパネルディスカッションがありました。このメンバーが一度に揃うことはまず無いのでかなり豪華な対談となりました。 もともとJavaScriptはWebブラウザで使われる言語でしたが、サーバーサイドJSが生まれ、UIライブラリ・フレームワークが登場し、そこから複数のフロントエンドツールが生まれてきています。徐々に複雑なアプリケーションや要件が生まれるようになって、JavaScriptだけで解決するには限界が生まれてきています。そんな中、フロントエンドツールを動かすための言語にRustが選択されてきています（ちなみに[esbuild](https://github.com/evanw/esbuild)はGo言語です）。 フロントエンドツールのRust化が進む中で、参入障壁の難易度やエコシステムそのものがどうなっていくかは個人的にも懸念していましたが、Rollupプラグインの後方互換や有名なプラグインはコアとして取り込んでいくなど、不安に思っていた部分に対する回答が聞けました。またVoidZeroの今後の取組みとしてASTの標準化や共通化についても話しており、今後どのような動きが出てくるのかも気になりました。 登壇されたSosuke Suzukiさんの[ブログ記事](https://sosukesuzuki.dev/posts/vuefes-2024-follow-up/)でも語られていましたが、このパネルディスカッションは幅広い聴衆に伝わるような話で展開されていたため、自分も若干の物足りなさがありました。欲を言えば[次世代Webカンファレンス](https://nextwebconf.connpass.com/)のような聴者おいてけぼりにしてしまう議論も聴いてみたいなと感じてしまいました。ざっくりとしたランタイムの紹介だったけどVapor Modeはよりシンプルなコンパイラを目指そうとしてるんだろうなと雑に理解しました #vuefes_mntsq
— オオヤマ オクト (@okuto_oyama) October 19, 2024
### Deep dive into Nuxt Server Components フロントエンドの文脈で「Server Components」というと、Reactの印象が強いかもしれません。実はNuxtにも「[Nuxt Server Components](https://roe.dev/blog/nuxt-server-components)」というものが存在します。今回はその内容についてと実際に最小単位で実装する場合にどのような形となるのかを解説してくれました。 仕組みの解説で必要な構成要素を説明してくれたのですが、その中で個人的な驚きだったのが、[Teleport](https://ja.vuejs.org/guide/built-ins/teleport)を扱っていたことです。モーダルダイアログなどの表示などでDOM階層の外側に移動させる使い方だと思っていたのですが、SSRでのハイドレーションミスマッチを防ぐ（＝クライアントとサーバーとでDOM構造を一致させる）ために用いられることは知りませんでした。 まだExperimentalな機能ではありますが、クライアントのバンドルサイズを減らしたりクライアントサイドに情報を残したくないときに活用していけるといいなと思いました。 ### Vue.jsコミュニティにようこそ！ Vueエコシステムのコミュニティで活動しているメンバーたちによる、どのようにコミュニティに参加し貢献できるかについてのパネルディスカッションがありました。私は途中から参加しましたが、立ち見が発生するほどの満員で大盛況でした。延長で1時間やってほしい #vuefes_mntsq
— オオヤマ オクト (@okuto_oyama) October 19, 2024
セッション内では[chibivue](https://ubugeeei.github.io/chibivue/)という学習コンテンツ向けのDiscordサーバー（現在はchibivueに閉じず様々なコンテンツを扱っています）の紹介がありました。そこから一気に参加者が増えてサーバー内でアラートがでるほどの人気ぶりでした。
コミュニティに参加・貢献するということ何をもってして証明されるか明確な基準はありません。Vue Fes Japanに参加することだけでもそうかもしれませんし、Vueエコシステムを活用して開発してみることだったり、この参加レポートのような感想記事を書くこともその1つかもしれません。 Vue.jsのコミュニティーガイドには「[あなたができること](https://ja.vuejs.org/about/community-guide#what-you-can-do)」という項目があり詳細にどのようなことができるかの紹介が載っています。貢献してみたい人は自分ができそうなことから始めてみると良いかもしれません。 ちなみに私が始めてVue.js関連で貢献をしたものは[ドキュメントの日本語翻訳にまつわるもの](https://github.com/vuejs-jp/ja.vuejs.org/pull/61)でした。 ## 参加したSchooエンジニアの感想 Schooからは私を含めたエンジニア3名が参加してきました（うち2名は個人スポンサーもさせていただいております）。それぞれが気になるセッションへ参加してきて刺激をもらってくることができました。参加したエンジニアによるVue Fes Japanの感想についても掲載させていただきます。 - Vue周りはコミュニティが本当にいいと再認識！ - Vue/Nuxtはあくまでも選択肢の一つのイメージだったが、これからのコミュニティの広がり熱量を感じて自分の中での価値・熱量みたいなものが上がった気がする - どんな形でもいいから自分でも何かしらコミットしたい！ - Vue作者の実際の話聞ける場ありがたい。リアルタイム翻訳ありがとう。（笑いどころはずれる） - リファクタ、テスト、パフォーマンスチューニングはみんな困っていそう - AIを用いたリファクタ、テストはやってみても良さそう - 深掘りたいことが増えた！ - Vueはいいぞ！ ## Vue Fes Japan 2024を終えて 午前からはじまったカンファレンスでしたが夜のアフターパーティが終わるまであっという間に過ぎたと感じるくらい濃密な時間となりました。直接聴けなかった発表がいくつもあったのでアーカイブ動画が公開されるのを心待ちにしております。 全セッション終了後に行われたアフターパーティでは、私と同じくVue 1系から関わっていた人たちと会えたり、過去在籍していた企業の同僚、chibivue関連で新しく繋がった方たちともご挨拶ができました。海外からの参加者も含め、幅広い多様な層が参加していることで、Vue.jsが誕生してから続くコミュニティというものの歴史の長さを感じることができました。 SchooでもVue.jsやNuxtをプロダクト開発に活用させてもらっています。引き続きVueエコシステムを活用しつつ、そこから得られた知見を通じて、コミュニティやOSSへ貢献をしていければと思っています。 #vuefes にサーバー荒らされました (chibivue 鯖) pic.twitter.com/3eHP3Rju9Q
— @ubugeeei.dev 🦋 (@ubugeeei) October 19, 2024