はいさい！オースティンやいびーん
概要
最近、Angularはsignalという新しいプリミティブ型を次回リリースに含めることを検討していると発表しました。
Angularの開発者なら、これは喜ばしい出来事であることをまず、理解していただきたいです。
まとめ
- signalという新しいプリミティブ型をAngularに追加する
- signalを使えば、RxJSを使わずにリアクティブ開発ができる
- AngularのRxJSとの相性が一気に良くなる
Signalとは
SignalはSolidJSの発明家、Ryan Carniato氏が作った発想です。
SolidJSでは以下のような使い方をします。
import { createSignal } from "solid-js";
const [count, setCount] = createSignal(0);
count() // 0
function Counter() {
return <div>Count: {count()}</div>;
}
非常にReactのuseStateに似ていますが、中身が昼夜のほど違います。
Signalはパフォーマンスが抜群的によく、RxJSのBehaviorSubjectにも似ています。
実際、BehaviorSubjectだと理解しておけばいいんです。
AngularのSignalとは
上記のSolidJSのsignalを、Angularで同じように実装する動きがあるのです。
実際、Ryan Carniato氏がAngularチームとあれこれ協力してくださっているらしいです。
上記の例がAngularで以下のように見えてきます。
@Component({
selector: 'my-app',
standalone: true,
template: `
<h1>Count: {{ count }}</h1>
<button (click)="add()">Add</button>
`,
})
export class App {
count = useSignal(0);
add() {
this.count.set(this.count.value + 1)
}
}
まだ実際の構文がどうなるのかはわかりかねますが、Svelte Storeにも似たような書き方になりそうです。
更新：
AngularのSignal実装が具体的になってきたので、別の記事で使い方を紹介しています。
なぜsignalがAngularに必要なのか
ここまでくると、何の話なのかわかっていただいたかと思いますが、「なぜ必要か」という疑問が出てくると思います。
一言で答えると、zone.jsを葬る必要があるから。
Zone.jsをご存知でなければ、documentから降り落ちてくるあらゆるイベントを網で集めている役割のライブラリだと思っていただければ結構です。
Angularの変更検知システムは、Zone.jsに依存しています。ユーザーが何かをクリックしたら、リスナーがなくてもZone.jsはAngularに「何か変わったかもしれんから全部チェックして！」という指令を出しています。
これを「Dirty Change Detection」と言っています。
Dirtyと聞くとよくないイメージがあるのですが、実際にはあまり良くはないのです。
それでも、意外なことにもAngularは色々と変更検知を改善しているので、パフォーマンスはそれほど悪くないです。
しかし、このZone.jsにはさまざまな問題があり、Angularの最大の技術課題と言ってもいいでしょう。
それをなくすためにはAngularが変更を検知できるようにする武器を与えなければならないでしょう？
それがSignalの担うべき使命です。だからSignalなのです。Zone.jsのその息の根を止めるために、
Angularのもう一つ深刻な問題：学習ハードルが高すぎる
最近のAngularは何かと新しい機能をばんない出している印象を受けますよね。
ただ、新規機能と言っても、これまでの機能を使わなくてもいいようにするための機能ばかりです。
これでAngularの玄人パワーユーザーからはかなり懸念を受けているし、貶されてもいます。
しかし、筆者はAngularのパワーユーザーでも、Angularを勉強することの大変さは嫌というほど理解できます。
しかも、Angularは、粋じゃないんだよね。
「僕はAngularを勉強する！僕は頑張る！」とWeb開発界隈でいうやつは、バカにされます。転職エージェントにもバカにもされます。優等生が先生にゴマを擦るのと同じくらい、格好いいイメージがないんです。
Angularが死んでいるともよく言われます。
React, React, React、日本では特にReactの話しか聞かない。Reactはフレームワークにもならず酷いライブラリーです。本当に酷い。
Angularは広報の戦争に負けています。そんなことを気にしなくてもいいだろうと思う開発者はいるでしょうが、Angularが良くても新しい人が勉強したくならなければ、どんどん一部でしか採用されなくなっていく現実が目に見えています。
Angularの存続のためにも、何でも堅実にできる優等生であることは変えなくてもゴマスリをやめて多少、粋にならんといけんさ。
それがAngularチームにもわかっているということ、筆者も理解しています。
だから、トレンドに乗りつつ、Angularのいくつかの課題を解決するという、一石二鳥のアプローチを取っているのです。
Angularをより簡単に使えるようにしつつ、signalのようなモダンな概念も取り入れています。
この前、standaloneでモジュールを使わなくてもとりあえずAngularが使えるようにしたのも、この戦略の一環だと思います。
Angularの狭き門を広げて、入りやすくしているのです。
これは我々Angular愛好家にとっても嬉しい話です。Angularを新人に教える時に、ngModuleは何ですかという質問を、必要になってきた時に教えられるようになります。
RxJSだって、あれはあれだけでものすごい学習ハードルが高いでしょう。
ライブラリのみならず、あれはプログラミングに対する姿勢を変えないと頭に入らん、と言っても過言でもないほど難易度が高いでしょう。
Reactive Programmingは簡単じゃないんです。RxJSのAsync Operatorsも僕の所有している全ての服の数より多いんです。Bill Gates氏が生涯流した涙の数より多いんです。
switchMapとmergeMapの違いを説明するだけでも一つの記事を書かないといけないくらいです。
Angularを学習するとは、これらすべてをどこかで乗り越えて、時には急な山を登っていくようなものです。とても長い道のり。
その山を登った先には、素晴らしい景色が見えているのですが、墜落して恐ろしい死に方をする者が多すぎます。
やっぱり、この問題もAngularチームが取り組んでいるなと思います。
RxJSとの相性
Signalの提案を聞いたら以下の反論が出るかと思います。
useSignalを導入するくらいなら、asyncパイプをなくしてRxJSとの相性をよくすればいいだろう
ただ、上記説明したように、初心者には、RxJSの修羅の道は、酷すぎる。
この事実を忘れてはいけません。
なので、Signalは歓迎するべきです。
なぜなら、RxJSとの相性を高めるために配慮することを約束されているからです。
toObservable、fromObservableみたいな関数がAngularに入って、Signalと同じようにテンプレートで使ったり、RxJSストリームで使ったりできるなら、誰も文句を言わないと思います！
asyncパイプもだるいんでしょう。
asyncパイプを使わなくてもテンプレートでObservableが使えるとなると筆者はクリスマスは2度と来なくてもいいんです。
まとめ
Angularにとって最近、わくわくできる話がばんない出ていますが、この話題性というのも、Angularにとっていいことだと思います。
ともかく、Angularは「死んでいないよ？笑」というメッセージを発しているのがいいなと思います。
みんなもわくわくできるといいなと思います。