新しいマルチプラットフォームフレームワークLynxを触ってみた。

夏の自由研究2025ブログ連載の6日目です。

はじめに

こんにちは、HealthCare Innovation Group(HIG)¹の永井優斗です。

2025年3月にTikTokの運営会社である、ByteDance社が Lynxというクロスプラットフォームフレームワークを公開しました。

LynxはJavaScriptベースでのマルチプラットフォームフレームワークです。そう書かれると、React Nativeを思い浮かべない人はいないでしょう。React Nativeの競合になりうるフレームワークです。

まだまだLynx自体の知名度は低く、LynxとGoogle検索すると、元の意味であるオオヤマネコが出てきます。リンクスティップ（耳の先から出ている、狩りに役立つ毛）が可愛いですね

Lynx lynx, Nationalpark Bayerischer Wald, Deutschland の写真
著作者：Martin Mecnarowski
CC表示-継承 3.0 https://commons.wikimedia.org/wiki/File:Lynx_lynx_1_(Martin_Mecnarowski).jpg による

この記事では、Lynx を触ってみた体験を簡単にまとめます。なお、開発した環境は、私物のMac mini(2020 M1)で、iPhone上での動作を試してみました。

セットアップ

※セットアップにはNode.js 18以上がインストールされている必要があります。

まずは公式の create-rspeedy でプロジェクトを作成します。

npm create rspeedy@latest
cd <project-name>
npm install
npm run dev

セットアップについては、[公式ドキュメントのQuick Startもご確認ください

npm run devでビルド成功後、QRコードとURLがターミナルに表示されます。

動作確認には、「Lynx Explorer」というアプリが必要です。

公式サイトに記載の「Download LynxExplorer-arm64.app.tar.gz.」のリンクから落として解凍し、XCodeのシミュレーターにドロップすることで、アプリをシミュレーターにインストールできます。ターミナルに表示されたURLをシミュレーター上の「Lynx Explorer」のCard URLに入力することで、動作確認ができます。

また、「Lynx Explorer」は、App Storeでも公開されており、スマホ実機にもインストールすることが可能です。

同じく、ターミナルに表示されたURLを入力するか、QR コードをアプリで読み込むと、そのままスマホ実機で動作確認できます。
開発している横で、ケーブルに繋ぐこともなく、即実機で試せるのは便利だなと感じました。

カウンターアプリを作ってみた。

あまり時間をかけずに触ってみたいと思ったため、簡単なカウンターアプリを作成することにしました。

Lynx では HTML タグではなく、 <view> や <text> を使います。
イベントハンドラも React っぽくはなく、 bindtap , bindlongpress のように書くのが特徴的です。

App.jsx

<view class="btn" bindtap={() => setCount(c => c + 1)}>
  <text>+1</text>
</view>

CSS もそのまま使えるので、スタイリングは Web の知識でいけそうです。

イベント拡張：「長押し」「ダブルタップ」

次に、イベントAPIを活かしてカウンターを拡張しました。

+ボタン → タップで +1、長押しで +10
–ボタン → タップで –1、ダブルタップで –10
Resetボタン → 0 にリセット

ダブルタップ判定の実装例

App.jsx

const lastTapTimeStampRef = useRef(0);
const singleTapTimeoutIdRef = useRef(null);
const DOUBLE_TAP_GAP = 250;

// -1 ボタンのtapハンドラ
const handleMinusTap = () => {
  const now = Date.now();
  const gap = now - lastTapTimeStampRef.current;

  if(gap < DOUBLE_TAP_GAP){
    // ダブルタップと判定する
    if(singleTapTimeoutIdRef.current) {
      // ダブルタップが成立したらシングルタップ予約をキャンセル
      clearTimeout(singleTapTimeoutIdRef.current);
      singleTapTimeoutIdRef.current = null;
    }

    lastTapTimeStampRef.current = 0;
    setCount((c) => c - 10);
    return;
  }
  // シングルタップかもしれない場合は、少し待って確定する。
  lastTapTimeStampRef.current = now;
  singleTapTimeoutIdRef.current = setTimeout(() => {
    setCount((c) => c - 1);
    lastTapTimeStampRef.current = 0;
    singleTapTimeoutIdRef.current = null;
  }, DOUBLE_TAP_GAP);
};

標準で「ダブルタップ」イベントがあるわけではないので、useRef を使って「直前のタップ時刻」を保存し、一定時間内にもう一度押されたらダブルタップとみなすようにしました。

作成したアプリのUIはこんな感じになりました。

GitHubでソースを公開しています。

触ってみて感じた疎結合感

カウンターアプリを作っていてまず感じたのは、「ReactとLynxががっちり結合しているわけではない」 という点です。

イベントの書き方ひとつ取っても、React Native なら onPress を書くところを Lynx では bindtap を書きます。ReactのクリックイベントがonClickであるのに対してのReact NativeのonPressはとてもわかりやすいなと思いますが、そのまま持ってきたという感じもします。

LynxはReactのAPIをそのまま持ってきたのではなく、Lynx側に独自のインターフェースがあり、それをReactでラップしているんだなと感じました。

また、スタイルが素のCSSで書けるのも印象的です。React Native のように StyleSheet API に閉じていないため、「Webの知識をそのまま活かせる」一方で「別のフロントエンドフレームワークからも同じ描画基盤を使える」余地があると感じました。

React Nativeとの違いとしてのフレームワーク依存性

React NativeはReactに強く結合しており、他のUIフレームワークを載せることはできません。Lynxは描画基盤とフレームワークが、（React Nativeと比較してという意味で）疎結合です。React 以外に他のJSフレームワークを載せることもできるかもしれません。

実際、公式のLynx公開時の説明でもLynxが対応するフレームワークReactに限らないことを表明しています。

We are open-sourcing ReactLynx (“React on Lynx”) as Lynx’s initial frontend framework flavor, enabling componentized, declarative UI on Lynx.
However, Lynx isn’t limited to React. In fact, other frameworks already represent roughly half of Lynx’s overall usage, demonstrating its neutrality in hosting different flavors.

※太字はこちらでつけたものです。

実際、GitHub Issue #193 のとおりVue.jsをLynxに載せられないかというディスカッションはすでに始まっており、今後Vue.jsに対応するかもしれません。その話はまた、別の機会で深掘りしたいと思います。

最後に

Lynxはまだ3月に出たばかりでもあり、エコシステムの発展やLynx自体も「枯れる」までにはもうちょっと時間がかかるとは思います。
いますぐ業務で使えるというわけではないですが、今後React NativeやFlutterの対抗馬として、マルチプラットフォーム開発に使える日が来るかもしれません。

その頃にはVue.jsにも対応しているといいな。

おまけ

今回Lynxを触るということまでは決めていたのですが、何つくろっかなーと悩んでいました。ChatGPT5と相談することで、簡単に試すことができました。

カウンターアプリを作ることや、作ったカウンターの拡張（長押し、ダブルタップ）はChatGPTのアイデアです。また、ChatGPTが生成したサンプルのソースコードに対して「この行何やってるんだろうか」と質問したり、逆にChatGPTが明らかにおかしいところを指摘しながら、対話を進めるとだいぶ理解が捗りました。

新しいプログラミング言語に入門するとき、LLMは大きなアシスタントになってくれるんだなと感じました。