2025/09/20 13:34 Show HN: Arrow JavaScript, Reactivity Without the Framework
やっほー、ロボ子！今日はArrowっていうJavaScriptライブラリについて話すぞ。
Arrowですか、博士。初めて聞きます。どんなライブラリなんですか？
Arrowはね、リアクティブなWebアプリケーションを作るためのライブラリなのじゃ。しかも、すごく簡単に使えるらしいぞ！
簡単に使える、ですか。具体的にはどうやってインストールするんですか？
ふむ、インストール方法はいくつかあるみたいじゃな。npmとかyarnなら`npm install @arrow-js/core`か`yarn add @arrow-js/core`でOK。CDNからも使えるし、ローカルファイルシステムからもいけるみたいじゃぞ。
いろいろな方法があるんですね。VSCodeを使っている場合は何か便利な機能はありますか？
VSCodeなら、lit-html拡張機能を入れると、htmlブロックの構文ハイライトができて便利らしいぞ。これでコードが読みやすくなるのじゃ！
なるほど。それで、このライブラリの主な機能は何ですか？
`reactive`関数っていうのがあって、これを使うと普通のデータオブジェクトを「監視された」データオブジェクトに変えられるのじゃ。プロパティの変更を監視できる `$on` と `$off` メソッドも持ってるらしいぞ。
監視されたデータオブジェクト、ですか。変更を検知して何かできるんですね。
そうそう！`watch`関数ってのもあって、リアクティブデータの依存関係を追跡して、変更があったら関数を再呼び出ししてくれるのじゃ。便利だね！
データの変更に応じて自動的に処理が実行されるんですね。他に特徴的な機能はありますか？
Arrowは、コンテンツを宣言的にレンダリングするためにタグ付きテンプレートリテラルを使うのじゃ。`html`関数をティックマークの前につけて、テンプレートをDOMにマウントするみたい。
テンプレートリテラルですか。なんだか難しそうですね。
大丈夫！静的な式、リアクティブ式、呼び出し可能な関数を区別してくれるから、そんなに難しくないぞ。テンプレート式が関数で、リアクティブデータを使う場合は、自動的に更新されるらしい。
自動で更新されるのは便利ですね。リストのレンダリングはどうやるんですか？
リストをレンダリングするには、データを反復処理して新しい`ArrowTemplate`を返すのじゃ。DOMノードとその状態を保持したい場合は、テンプレートの`key()`メソッドに一意のキーを指定するといいみたい。
キーを指定することで、効率的に更新できるんですね。
そう！イベントリスナーをDOM要素にバインドするには、`@eventName`ショートハンドを使うのじゃ。例えば、`@click`とかね。
`@`を使うんですね。シンプルでわかりやすいです。
Calculator, Performance, Dropdown, Carousel, Tabsのデモとソースコードも利用できるみたいじゃ。コードの圧縮率を確認できるmin-gzip.comもArrowJSで作られてるらしいぞ。
いろいろなデモがあるんですね。試してみるのが楽しみです。
Alpha 10では、`Array.splice()`のバグが修正されたり、`ArrowTemplate.key()`のTypeScriptの戻り値が修正されたりしたみたいじゃ。
着々と改善されているんですね。
Alpha 9では、複数の式を持つ新しいhtmlブロックを作成する際のパフォーマンスが大幅に向上したらしいぞ。DOMパッチ適用アルゴリズムも改善されたみたいじゃ。
パフォーマンス改善は嬉しいですね。
Alpha 8では、IDL属性の設定に関する問題が修正されたみたいじゃ。
IDL属性、ですか。細かいところまで修正されているんですね。
Alpha 7では、要素のIDL属性を設定するためのドット（.）プレフィックスが導入されたり、非リアクティブテンプレート部分が最初または最後のDOMノードの子ではない場合に、更新時にそれらの部分が残る可能性のあるバグが修正されたりしたみたいじゃ。
着実に進化していますね。
Alpha 6では、リアクティブデータを変更するウォッチャーが自身のエフェクトを適切にキューイングしない問題が修正されたみたいじゃ。
ウォッチャーのキューイング、ですか。奥が深いですね。
Alpha 5では、input、textarea、select要素のvalue属性のバインディングが、content属性ではなくIDLプロパティを変更するようにしたり、DOMから削除されたノードからイベントリスナーを削除するようにしたりしたみたいじゃ。
より細かい制御ができるようになったんですね。
Alpha 4では、キー付きリストのレンダリングでunshift時のバグが修正されたみたいじゃ。
unshift時のバグ、ですか。特定のケースでの問題も解決されているんですね。
Alpha 3では、不要なDOMパッチをキー付きリストに適用するバグが修正されたみたいじゃ。
パフォーマンスに関わる修正ですね。
Alpha 2では、マークアップサニテーションを改善したり、不正な構造のテーブルを防ぐためにトークン置換を改善したり、reactive、watch、htmlエイリアスを追加したりしたみたいじゃ。
セキュリティと使いやすさの向上が図られているんですね。
Alpha 1は、ArrowJSの最初の公開リリースだったみたいじゃぞ！
ついに公開されたんですね。これからの発展が楽しみです。
というわけで、ArrowJSはなかなか面白そうなライブラリじゃな。ロボ子も使ってみるといいぞ！
はい、博士。ぜひ試してみたいと思います！
そういえばロボ子、矢って英語でなんて言うか知ってるか？
えーと、arrow、ですよね？
正解！…って、ライブラリの名前が答えだった！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。
