Web Streams API 入門 ― 基本概念から実践まで
こんにちは、tasshi です。 この記事では、JavaScriptでストリーム処理を行うための標準API「Web Streams API（Streams API）」について、基本概念から実践的な使い方、Node.js Streamとの違いまでを解説します。 本記事は、TSKaigi 2025で発表した「Web Streams APIの基本と実践、TypeScriptでの活用法」をベースに、現在のブラウザ対応状況などを踏まえて記事として再構成したものです。 ストリームとは何か Web Streams APIの話に入る前に、まず「ストリーム」という概念について整理します。 ストリームとは、データ入出力を逐次的に、効率よく扱うためのデータ構造です。 データをより細かく分割された単位（チャンク）の連続した流れとして表現します。 ストリーム自体は昔からある概念で、多くの開発言語でストリーム操作のイ
JavaScriptのStreams APIで細切れのデータを読み書きする
近年、PCに搭載されるメモリは爆発的に増えました。16GBや32GBのメモリが搭載されているのが当たり前の時代です。性能の制限が強いスマートフォンですら4GBほど搭載していることがあります。ストレージの読み書き速度もどんどん加速し、昔では扱えなかったようなデータ量をリアルタイムで処理できます。インターネット回線も同様に大量のデータを扱えるようになりました。 しかし現実的な大きさのデータを一度に扱おうとすると、現代でもそれなりに処理時間がかかります。ユーザはレスポンスに対して敏感で、反応が0.1秒でも遅れるとストレスを感じます。しかし時間がかかるものはかかるのです。この問題は一見どうしようもないように思えます。 そこで登場するのが「データを細切れにして処理する」というコンピュータにおける万能の薬です。細切れにして逐次処理すれば、少しずつデータを処理することができ、素早いレスポンスを実現するこ
stream b/w node.js and whatwg // Speaker Deck
Talk about Stream API difference between node.js and whatwg at #tng11 2016/08/08
Streams 仕様読んだ - Qiita
Streams 雑感 WHATWG Streams の仕様を読みました。 雑感です。 第1印象は**「常識に囚われてはいけないのですね!」**でした。 仕様は ES6 で実装してから書いてるようで、既に動く実装があります。 ES6 Classes を使って書かれており、主要なクラスはReadableStream, ReadableStreamReader, WritableStreamの3つ。 Promise まず特筆すべき事は、 Streams はイベントを一切持たないという点です。 ワオ。 従来の JavaScript はイベント駆動です。DOM も XHR も WebSockets も EventSource もイベントを通知します。しかし、この新しい Streams はaddEventListenerを持っていません。代わりに、Promiseをイベントのように使っています。 これに
Fetch + Streams Demo
This demo will search the first billion digits of PI for a substring you specify, and tell you the position at which it was found. It will do this without consuming a billion bytes of memory! That was impossible with XHR! Furthermore, it won't even need to do text decoding and string comparison, as it will operate on the bytes directly. (XHR's pseudo-streaming mode, with an ever-growing responseTe
Byte Sources: Introduction
This post is the beginning of a series of posts regarding some of the more interesting issues I’ve encountered while working on the Streams Standard. In the Streams Standard we have the concept of readable streams, which are an abstraction on top of the lower-level underlying sources. In an abstract sense an underlying source is “where the chunks of data come from.” The most basic underlying sourc
Kefir.js — fast and light Reactive Programming library for JavaScript inspired by Bacon.js and RxJS
Redirecting to kefirjs.github.io/kefir/...
Stream API がブラウザにやってくる - Block Rockin’ Codes
Intro 今日は、フロントのプログラミングスタイルに、にまた一つ大きな変化をもたらすであろう Stream という API についてです。 この仕様は現時点でまだ策定中であるため、 API は変更される恐れがある点にご注意ください。 Stream API 以前 「Node.js の Stream API で「データの流れ」を扱う方法」 という記事を書きましたが、簡単に言うとあれがブラウザにもやってくるという話です。 非同期処理おさらい もう何度も書いた話なので駆け足で。 JS はシングルスレッドでイベント駆動な世界なので、何をするにも非同期であり、コールバックを登録することで完了した結果を受け取る API が基本です。 これは、ブラウザの DOM の API でも、 Node.js でも共通しています。 概念を疑似コードで書くと以下のような感じです。 console.log('1');
GitHub - hughsk/ast-pipeline: Seamlessly pipe between text transform streams and AST transforms
Seamlessly pipe between text transform streams and AST transforms. Say, for example, you have a source transform API similar to browserify's: each file goes through a series of transforms streams, the output of one becoming the input of the next. Recently an increasing number of transform streams have appeared that operate on plain old parseable JavaScript, generally using the following pattern: v
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
streams/transferable-streams-explainer.md at main · whatwg/streams
Consider using different streams as the basis · Issue #146 · gulpjs/vinyl-fs
GitHub - browserify/labeled-stream-splicer: stream splicer with labels
tagtree