<p>第1章: この記事です<br>
第2章: <a href="https://zenn.dev/toridori/articles/613bc819d4498e" target="_blank">https://zenn.dev/toridori/articles/613bc819d4498e</a><br>
第3章: ちょっとまってね</p>
<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p>Flutterを開発していると、<code>Stream</code>というクラスによく出くわします。Firestore や FCM の SDK がインターフェイスとして公開していたり、BLoC パターンでも頻出するアイツです。</p>
<p>Stream の理解で躓く方、多いんじゃないかと思ってます。特徴を掴もうにも、「非同期なデータのシーケンスを扱える」だとか、「まるで川のように上流から下流に向けて値を流す」だとか、いや理解はできるんだけど腹落ちしないとうか。実装例を見たって「それ Stream 使わなくても良くね？」ってなる感じ。</p>
<p>先に言うと、Stream を完全理解するには <code>Reactive Programming</code> という世界を先に理解することが必要です。世界です世界。パラダイムとか新時代でもいいです。ただ、これの完全理解には時間がかかるし、完全理解したとしても Flutter 開発への寄与率は少なく、コスパが良くないです。多分。</p>
<p>本記事では、そんなあなたに腹落ちを与えるべく、<strong>Stream から見る Reactive Programming の入り口</strong>を解説します。本記事を読み終えても Stream マスターになれるわけではありませんが、ちょっとだけ楽しく Stream を扱えるようになっていて欲しいなと思っています。よろしくお願いします。</p>
<h1 id="1.-%E8%83%8C%E6%99%AF%E3%81%8B%E3%82%89-reactive-programming-%E3%82%92%E7%9F%A5%E3%82%8B">
<a class="header-anchor-link" href="#1.-%E8%83%8C%E6%99%AF%E3%81%8B%E3%82%89-reactive-programming-%E3%82%92%E7%9F%A5%E3%82%8B" aria-hidden="true"></a> 1. 背景から Reactive Programming を知る</h1>
<p>2011年、マイクロソフトによって ReactiveX というソフトウェアが作成されました<a href="https://en.wikipedia.org/wiki/ReactiveX" target="_blank" rel="nofollow noopener noreferrer">^1</a>。このソフトウェアには大きな思想があり、</p>
<ul>
<li>同期か非同期かを区別せずにデータを扱いたい</li>
<li>命令的プログラミング言語であっても上記を宣言的に扱いたい</li>
</ul>
<p>という、「非同期処理、つらいよね」という当時のプログラミング全般が抱えていた問題の解決を目指していました（要出典）<sup class="footnote-ref"><a href="#fn-fb10-1" id="fnref-fb10-1">[1]</a></sup>。</p>
<h2 id="%E3%82%B7%E3%83%BC%E3%82%B1%E3%83%B3%E3%82%B9%E3%81%A8%E3%81%84%E3%81%86%E8%80%83%E3%81%88%E6%96%B9">
<a class="header-anchor-link" href="#%E3%82%B7%E3%83%BC%E3%82%B1%E3%83%B3%E3%82%B9%E3%81%A8%E3%81%84%E3%81%86%E8%80%83%E3%81%88%E6%96%B9" aria-hidden="true"></a> シーケンスという考え方</h2>
<p>ReactiveXは、同期的に用意されるデータと非同期的に用意されるデータを区別なく扱うために、「シーケンス」という概念を用いました。シーケンスとは、順序のあるデータの列です。よく目にするのは配列だったりListクラスでしょう。</p>
<p>仮に次のような突拍子のない提案を想像すると、</p>
<p>ただの値と配列を区別して扱うの大変だよね？全てのデータは配列にしちゃお😉</p>
<p>ReactiveXは、これを同期か非同期か？に関して行ったイメージです。</p>
<p>同期処理と非同期処理を区別して扱うの大変だよね？全てのデータはストリームにしちゃお😉</p>
<p>これがあの Everything is a stream. と言われる所以です。もちろんストリームもシーケンスです。ReactiveXは、このような思想のもと「同期的か非同期か区別せず、シーケンス化されたデータを扱う」ことのできるソフトウェアとなっています。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/8dd867bc3fd4-20230322.png" alt loading="lazy" class="md-img"></p>
<p>※ 「ストリームって結局なんやねん！」って突っ込みは次章までお待ち下さい</p>
<h2 id="%E3%81%96%E3%81%A3%E3%81%8F%E3%82%8A%E6%AD%B4%E5%8F%B2%E3%82%92%E6%83%B3%E5%83%8F%E3%81%99%E3%82%8B%E3%81%A8">
<a class="header-anchor-link" href="#%E3%81%96%E3%81%A3%E3%81%8F%E3%82%8A%E6%AD%B4%E5%8F%B2%E3%82%92%E6%83%B3%E5%83%8F%E3%81%99%E3%82%8B%E3%81%A8" aria-hidden="true"></a> ざっくり歴史を想像すると</h2>
<p>ReactiveXの歴史を想像すると、</p>
<ol>
<li>マイクロソフトは、プログラミングの新時代を考えた</li>
<li>マイクロソフトは、.NET Framework 向けの ReactiveX ソフトウェア（<a href="http://rx.net/" target="_blank" rel="nofollow noopener noreferrer">Rx.NET</a>）を開発した</li>
<li>マイクロソフトは、他のフレームワーク向けの ReactiveX ソフトウェアもどんどん増やしていった</li>
<li>Reactive Programming に共感したデベロッパによるソフトウェアも増えていった</li>
<li>今に至る</li>
</ol>
<p>という、多くデベロッパを巻き込んだある種の変革のようなものを想像できます（要出典）。エモいですね。</p>
<p>一旦用語を整理すると、</p>
<table>
<thead>
<tr>
<th>用語</th>
<th>is何</th>
<th>詳しく</th>
</tr>
</thead>
<tbody>
<tr>
<td>Reactive Programming</td>
<td>思想</td>
<td>すべてのデータをシーケンスで扱う新時代プログラミング</td>
</tr>
<tr>
<td>ReactiveX</td>
<td>ソフトウェア群</td>
<td>Reactive Programming を実現するための <a href="http://rx.net/" target="_blank" rel="nofollow noopener noreferrer">http://rx.net/</a> を始めとした ソフトウェア群</td>
</tr>
</tbody>
</table>
<p>です。</p>
<h2 id="dart-stream-%E3%81%AE%E4%BD%8D%E7%BD%AE%E3%81%A5%E3%81%91">
<a class="header-anchor-link" href="#dart-stream-%E3%81%AE%E4%BD%8D%E7%BD%AE%E3%81%A5%E3%81%91" aria-hidden="true"></a> dart Stream の位置づけ</h2>
<p>僕の知ってる範囲で Reactive Programming 関連のソフトウェアを紹介します。</p>
<table>
<thead>
<tr>
<th>名称</th>
<th>言語orフレームワーク</th>
<th>所属</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://rx.net/" target="_blank" rel="nofollow noopener noreferrer">Rx.NET</a></td>
<td>.NET</td>
<td>ReactiveX</td>
</tr>
<tr>
<td>RxJava</td>
<td>Java</td>
<td>ReactiveX</td>
</tr>
<tr>
<td>RxSwift</td>
<td>Swift</td>
<td>ReactiveX</td>
</tr>
<tr>
<td><a href="https://github.com/neuecc/UniRx" target="_blank" rel="nofollow noopener noreferrer">UniRx</a></td>
<td>Unity</td>
<td>neueccさん</td>
</tr>
<tr>
<td><a href="https://github.com/ReactiveCocoa/ReactiveSwift" target="_blank" rel="nofollow noopener noreferrer">ReactiveSwift</a></td>
<td>Swift</td>
<td>ReactiveCocoa</td>
</tr>
<tr>
<td>RxDart</td>
<td>Dart</td>
<td>fluttercommunity</td>
</tr>
<tr>
<td><a href="https://github.com/dart-lang/async" target="_blank" rel="nofollow noopener noreferrer">dart.async(この記事で紹介するやつ)</a></td>
<td>Dart</td>
<td>dart-lang</td>
</tr>
</tbody>
</table>
<p>こんな関係図になりますね。実際にはまだまだ他にもありますが。</p>
<span class="embed-block zenn-embedded zenn-embedded-mermaid"><iframe id="zenn-embedded__77550643fb9ea" src="https://embed.zenn.studio/mermaid#zenn-embedded__77550643fb9ea" data-content="flowchart%20LR%0A%0An1%5BReactive%20Programming%3Cbr%3E%E3%81%86%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%5D%0A%0Asubgraph%20ReactiveX%0ARx.NET%0ARxJava%0ARxSwift%0Aend%0A%0Asubgraph%20%22neuecc%E3%81%95%E3%82%93%22%0AUniRx%0Aend%0A%0Asubgraph%20ReactiveCocoa%0AReactiveSwift%0Aend%0A%0Asubgraph%20flutter%20%5B%22fluttercommunity%E3%83%BBdart-lang%22%5D%0ARxDart%0Adart%3Aasync%0Aend%0A%0AReactiveX%20--%3E%20n1%0Aneuecc%E3%81%95%E3%82%93%20--%3E%20n1%0AReactiveCocoa%20--%3E%20n1%0Aflutter%20--%3E%20n1" frameborder="0" scrolling="no" loading="lazy"></iframe></span><p>※中の人、実際はうおおおおおとか思ってなかったらごめんなさい</p>
<p>実際のところ、dart:async や ReactiveSwfit は、ReactiveX と比べると設計が結構違ったりします。根本の「同期か非同期かを考慮せずすべてのデータをシーケンスとして扱う」は同じなものの、「良いインターフェイスは何か」に関して製作者の意志が強く反映されている印象です。クラス名ですらこんな違うよ、ってのを簡単に紹介です。</p>
<table>
<thead>
<tr>
<th>ソフトウェア名</th>
<th>イベントを送信するクラス名</th>
<th>値が流れるクラス名</th>
<th>イベントが流れるクラス名</th>
</tr>
</thead>
<tbody>
<tr>
<td>ReactiveX</td>
<td>Subject</td>
<td>Observable</td>
<td>左に同じ</td>
</tr>
<tr>
<td>dart:async</td>
<td>Sink</td>
<td>Stream</td>
<td>左に同じ</td>
</tr>
<tr>
<td>ReactiveSwift</td>
<td>SignalProducer</td>
<td>Observer</td>
<td>Signal</td>
</tr>
</tbody>
</table>
<p><strong>やっと出てきましたね、Stream。2000文字越しに伏線回収した気持ちです。Stream はこういう世界の末端に位置する存在です。</strong></p>
<p>Stream 関連について少し補足すると、上記の通り ReactiveX とは結構インターフェイスが異なっています。また、ReactiveX には <a href="https://reactivex.io/documentation/operators.html" target="_blank" rel="nofollow noopener noreferrer">死ぬほどたくさんオペレータがあります</a>が、dart:async がサポートしているのはこれらのうちごく一部です。憶測ですが、ReactiveX の最たる課題感として「学習コストが高いこと」があり、dart:async はこれを回避すべく必要最低限に絞ったんじゃないかなと考えています。<s>慣れている身としては「おぉん？」って感じですぐ RxDart 入れたんですけどね</s>。</p>
<p>Reactive Programming の雰囲気を掴んでもらえたでしょうか。「同期か非同期かを区別せず全てのデータをシーケンスとして扱う」という思想のもと、マイクロソフトを始めとした各種デベロッパーがソフトウェアを開発しています。<strong>dart の Stream、もとい dart:async もこのソフトウェアの1つです</strong>。</p>
<h1 id="2.-%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E6%80%A7%E8%B3%AA%E3%81%8B%E3%82%89-stream-%E3%81%AE%E7%AB%8B%E3%81%A1%E4%BD%8D%E7%BD%AE%E3%82%92%E7%9F%A5%E3%82%8B">
<a class="header-anchor-link" href="#2.-%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E6%80%A7%E8%B3%AA%E3%81%8B%E3%82%89-stream-%E3%81%AE%E7%AB%8B%E3%81%A1%E4%BD%8D%E7%BD%AE%E3%82%92%E7%9F%A5%E3%82%8B" aria-hidden="true"></a> 2. データの性質から Stream の立ち位置を知る</h1>
<p>第1章では、Reactive Programming を背景から見ていきました。なんか雰囲気は分かったけど雰囲気しか分かってない状態かと思います。第2章では、シーケンス化されたデータと、普段の Flutter 開発で使うデータが、いかに似ていて拡張概念であるかを説明します。</p>
<p>なお、本章の説明は <a href="https://reactivex.io/intro.html" target="_blank" rel="nofollow noopener noreferrer">ReactiveX のintroduction</a> と重複しています。このページを読んで「あーなるほどね」を得られる方は飛ばしちゃっても良いと思います。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c1c900f1eef8e" src="https://embed.zenn.studio/card#zenn-embedded__c1c900f1eef8e" data-content="https%3A%2F%2Fzenn.dev%2Ftoridori%2Farticles%2F613bc819d4498e" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/toridori/articles/613bc819d4498e" style="display:none" target="_blank">https://zenn.dev/toridori/articles/613bc819d4498e</a></p>
<hr>
<p>トリドリのプロダクト開発部では通年採用を実施しています！</p>
<p>ユーザの幸せについて真剣に議論したり、「やってみたい」で新しい技術に挑戦をしてみたり、気づいたら30分雑談していたり、ゆるく真面目に開発しています。もし興味を持ってもらえたら、こちらを読んでみてください！</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__9761e2919b96" src="https://embed.zenn.studio/card#zenn-embedded__9761e2919b96" data-content="https%3A%2F%2Ftoridoridevs.page.link%2FamTC" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://toridoridevs.page.link/amTC" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://toridoridevs.page.link/amTC</a></p>
<section class="footnotes">
<span class="footnotes-title">脚注</span>
<ol class="footnotes-list">
<li id="fn-fb10-1" class="footnote-item">
<p>つらさの根源は命令的プログラミングにあるものの、Webアプリケーションのリッチ化に伴って非同期処理を扱う機会が増え、つらさが表出した、みたいな印象を持っています <a href="#fnref-fb10-1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>


Flutter の Stream から見る Reactive Programming の入り口（1/N）

1. 背景から Reactive Programming を知る

2. データの性質から Stream の立ち位置を知る

にわとり

<p>連載を続ける力が必要です</p>


Discussion