Lynxとは？ByteDance製UIフレームワークの仕組み・始め方とReact Native・Flutterとの違い【4.1対応】

Lynx（リンクス）は、TikTokを運営するByteDanceが2025年3月5日にオープンソースで公開した、クロスプラットフォームのUIフレームワークです。ReactとCSSで書いたUIを、Android・iOS・Web・HarmonyOS、さらに2026年4月のLynx 3.7からはmacOS・Windowsでもネイティブ描画できます。2026年9月30日にLynx 4.0が発表され、公式が案内する最新版は4.1.0です。この記事では、仕組み、構成部品、2026年10月時点の対応範囲、公式の雛形ツールで実際にビルドした結果、React Native・Flutterとの違いを整理します。テキストブラウザのLynxや動物の山猫とは別物です。

まとめ：Lynxの正体と2026年10月時点の現在地

• 正体：ByteDanceが開発し、TikTokの検索パネル・TikTok Studio・Shop・LIVEなどで使われているUI基盤。ライセンスはApache 2.0
• 仕組み：ユーザーコードは既定でバックグラウンドのスレッドで動き、メインスレッドではLynx専用のJavaScriptエンジンPrimJSが初回描画と優先度の高いイベントだけを担う
• 書き方：公式フレームワークはPreactベースのReactLynxで、APIはReact 17に準拠する。React 18のAPIを呼ぶライブラリ向けに互換層（@lynx-js/react/compat）がある
• 現行版：公式のVersionsページが示す最新版は4.1.0。発表記事が出ている最新はLynx 4.0（2026-09-30）で、2026年半ばから月1回のリリースへ移った
• 始め方：npm create @lynx-js/lynx@latest。Node.js 20系の20.19.0以上、または22.12.0以上が必要で、旧来のcreate-rspeedyより、Rsbuildを使うテンプレートが推奨になった
• 選び方：起動の速さとWeb技術の流用を重視する新規アプリなら候補。周辺ライブラリの多さと日本語の情報量が要件なら、今はReact NativeかFlutterを選ぶ

Lynxとは：TikTokの画面を支えるByteDance製のUI基盤

Lynxは、Webの技術（マークアップ・CSS・JavaScript）でネイティブのUIを組むための技術群です。公開時の公式ブログ「Lynx: Unlock Native for More」は、自らを「アプリ開発向けに調整した、もう一つのWeb」と表現しています。モバイルではネイティブUI部品、Webではブラウザ上の実装、macOS・Windowsでは独自描画エンジンClayを使います。

公開時期・ライセンス・GitHubのリポジトリ

GitHubのlynx-family組織で公開され、メインのリポジトリは2025年3月4日に作成されました。公開時点で版番号が3.xから始まっているのは、社内の本番で使っていた版をそのまま出したためです。スター数は約1万5,000です（2026年10月22日時点）。役割ごとにリポジトリが分かれています。

TikTokでの利用範囲

公開時の公式ブログによると、TikTokはLynxを段階的に採用し、軽量で頻繁に開く検索パネルから、単体アプリのTikTok Studio、信頼性が求められるECのShop、LIVEまでがLynxで動いています。WebからLynxへ移した画面では起動時間が2〜4分の1になった例が多いとも書かれています。ただし、この数字はByteDance社内の計測で、外部から再現できる比較ではありません。

名前の意味と同名の別物

英単語のlynxは動物のオオヤマネコ（山猫）です。IT分野では、1992年に生まれたコマンドライン用のテキストWebブラウザ「Lynx」が古くから知られています。本記事で扱うのはByteDanceのUIフレームワークで、どちらとも関係はありません。検索するときは「Lynx ByteDance」「ReactLynx」「lynxjs」と付けると、目的の情報に当たりやすくなります。

Lynxの仕組み：メインスレッドとバックグラウンドの2系統

Lynxの設計で最も特徴的なのは、ユーザーが書くスクリプトを2つの実行環境に分け、その分け方をビルド時に強制する点です。

2つのランタイムの役割分担

メインスレッドではPrimJSが動き、初回の画面描画と、優先度の高いイベント・ジェスチャー処理といった、同期で処理すべき仕事だけを受け持ちます。ユーザーのコードは既定でバックグラウンドのランタイムに置かれ、メインスレッドの負荷を小さく保ちます。この分担から2つの機能が生まれています。

• IFR（Instant First-Frame Rendering）：最初の1フレームが描き終わるまでメインスレッドを短時間だけ止め、白い画面を出さない
• MTS（Main Thread Script）：ジェスチャーなど遅延が目立つ処理だけを、静的に決めた小さなコードとしてメインスレッドで実行する

雛形のコードにある'background only'という指示文は、その関数をバックグラウンド側だけで実行させるためのものです。React NativeのNew ArchitectureもJSスレッドとUIスレッドに処理を分担し、高優先度の更新ではUIスレッド上で同期的にレンダリングできます。Lynxが違うのは、ユーザーのスクリプトをどちらのランタイムで動かすかをビルド時に決めて分ける点です。

構成部品：エンジン・ReactLynx・PrimJS・Rspeedy・DevTool

PrimJSのREADMEによると、PrimJSはQuickJSを土台にES2019へ完全対応し、参照カウントの代わりにガベージコレクタを採用しています。Octaneベンチマークの総合スコアはQuickJSの2904に対し3735で、約28%高いとされます。ビルド側のRspeedyはRust製バンドラのRspackを土台にしています。Rustで抽象化の実行時コストを抑える仕組みはRustのゼロコスト抽象化の解説で扱っています。

ReactLynxとReactの互換範囲

ReactLynxの公式ドキュメントは、ReactLynxを「内部はPreactベースのReact実装」と説明しています。APIリファレンスによると、APIはReact 17に準拠し、useTransitionやuseDeferredValueのようなReact 18以降の並行レンダリング（concurrent）の機能は前提にしていません。実行環境のスケジューリングへの要求が厳しく、Lynxの2スレッド構成と合わないためです。HooksやJSXはReactと同じように書けますが、要素は<div>ではなく<view>や<text>、クリックはonClickではなくbindtapです。startTransitionなどReact 18のAPIを呼び出す外部ライブラリは、TanStack Routerの導入ガイドにあるとおり@lynx-js/react/compatを通して使います。この互換層はAPIの呼び出し口をそろえるためのもので、React 18の並行レンダリングそのものを再現するものではありません。

エンジン自体は特定のUIライブラリに縛られません。公開時のブログでは、ByteDance社内の利用のおよそ半分がReact以外のフレームワークだとしています。社外でもVueで書くためのVue Lynxなどのコミュニティ製プロジェクトが出てきていますが、公式にサポートされるのはReactLynxだけです。

対応プラットフォームと3.2から4.1までのリリース履歴

Android・iOS・Web・HarmonyOS・macOS・Windows

公開時点の対象はAndroid・iOS・Webでした。HarmonyOSは2025年9月25日の公式発表で公開ベータになり、描画にはArkUIのC APIを使います。macOSとWindowsはLynx 3.7（2026-04-16）で正式対応しました。デスクトップでは各OSのネイティブ部品ではなく独自の描画エンジンClayで描き、319あるCSSプロパティのうち311（97%）、246ある要素属性のうち179（73%）が使えます。2026年9月21日には、Lynxを描画に使うElectron型のデスクトップアプリ基盤Lynxtronも公開されました。

リリース履歴：3.2から4.1まで

Lynx 4.0の発表は、メジャー版だが破壊的変更は伴わないと明記しています。主な追加は、CSSメディアクエリ、ぼかし表現を行う<blur-view>（iOSのLiquid Glassに対応）、<webview>要素のオープンソース化、ReactLynxのcreateElement・cloneElementです。GitHubのリリースでは、4.0.0のタグが2026年7月20日に出ており、ブログ発表はそれより2か月以上後でした。公式のVersionsページは4.1.0を最新版とし、新規アプリには最新版の採用を勧めています。採用時の版はブログの日付ではなく、このページとタグで確かめてください。2026年のロードマップでは、隔月だったリリースを2026年半ばから毎月に変え、12月の4.5まで予定を示しています。

Lynxの導入：create-lynxによる雛形作成とビルド

手順は公式のQuick Startに沿っています。2025年に書かれた記事の多くはnpm create rspeedy@latestを案内していますが、現在の公式手順は@lynx-js/create-lynxです。

動作要件：Node.jsの対応バージョンとLynx Explorer

この雛形が指定するNode.jsの対応範囲は、20系の20.19.0以上、または22.12.0以上です。雛形のpackage.jsonには"node": "^20.19.0 || >=22.12.0"と書かれています。画面の確認には、ビルド済みのサンドボックスアプリLynx Explorerを使います。公式のビルド済みバイナリはAndroid版・iOSシミュレータ版・HarmonyOSシミュレータ版で、iOS実機で動かすにはソースからビルドします。iOSシミュレータを使うにはmacOSとXcodeが要ります。

プロジェクトの作成とテンプレートの選び方

npm create @lynx-js/lynx@latest

対話形式でビルドツールを選びます。公式の推奨は、RsbuildにpluginReactLynxを組み合わせる構成です。従来のRspeedyと、部品ライブラリ向けのRslibも選べます。対話なしで作るなら、テンプレート名を指定します。

npx -y @lynx-js/create-lynx hello --template rsbuild-react-ts
cd hello
npm install
npm run dev

テンプレートはrsbuild-react-ts・rspeedy-react-ts・rslib-react-tsと、それぞれのJavaScript版の計6種類です（create-lynx 0.2.1の--helpによる）。npm run devを実行するとターミナルにQRコードが出るので、実機のLynx Explorerで読み取ります。シミュレータの場合は、表示されたバンドルのURLをLynx Explorerの「Enter Card URL」欄に貼ります。src/App.tsxを保存すると画面が自動で更新されます。

実測：雛形のインストールとビルドの結果

2026年10月22日に、macOS（Node.js 26.5.0）でrsbuild-react-tsテンプレートを作り、インストールとビルドとテストを実行しました。

この雛形のUIコードは.lynx.bundleにまとまり、画像は別ファイルとして出力されます。このバンドルをLynx ExplorerやLynxを組み込んだアプリが読み込みます。なお、npmの最新は0.128.0でも、雛形は^0.126.2と書かれているため0.126系が入りました。0.x系のキャレット指定はマイナー版を固定するので、新しい版へ上げるときはpackage.jsonを書き換えます。

ReactLynxカウンターの実装とタップ後の表示テスト

次のカウンターは、雛形のsrc/Counter.tsxに保存します。テストコードはsrc/__tests__/counter.test.tsxに保存し、npm testで実行します。

import { useState } from '@lynx-js/react';

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <view>
      <text>タップ回数: {count}</text>
      <view bindtap={() => setCount(count + 1)}>
        <text>カウントを増やす</text>
      </view>
    </view>
  );
}

雛形に入っているReactLynx Testing Libraryで、タップすると表示が増えることを確かめます。

import '@testing-library/jest-dom';
import { fireEvent, render } from '@lynx-js/react/testing-library';
import { expect, test } from '@rstest/core';
import { Counter } from '../Counter';

test('Counter', () => {
  const { container, getByText } = render(<Counter />);
  const label = container.querySelector('text')!;
  expect(label).toHaveTextContent('タップ回数: 0');
  fireEvent.tap(getByText('カウントを増やす').parentElement!);
  expect(label).toHaveTextContent('タップ回数: 1');
});

このテストは成功しました。最初はfindByText('タップ回数: 0')で探して失敗しています。{count}の部分が<wrapper>という別のノードに分かれて描画されるため、文字列が1つの要素にまとまっていなかったからです。<text>の中で文字列と変数を混ぜた要素は、上のように要素のtextContentで確かめると通ります。

React Native・Flutterとの違い

Lynxの4.1.0は公式Versionsページ、React Nativeの0.88とFlutterの3.47.7は、2026年10月22日時点のnpmとFlutterの配布情報で確認した版です。

React Nativeとの違い

どちらもReactの書き方を使えますが、Lynxは要素がHTML風の<view>・<text>で、スタイルを本物のCSS（セレクタ・変数・アニメーション）で書きます。React NativeはStyleSheetのオブジェクトで書くため、Web開発者にとってはLynxのほうが手持ちのCSSを流用しやすい作りです。反対に、ライブラリの数、Expoのような周辺サービス、日本語の解説の多さはReact Nativeが大きく上回ります。React Nativeの現在の仕組みはReact NativeとNew Architectureの解説で詳しく扱っています。

Flutterとの違い

Flutterは自前のエンジンで全画面を描くため、OSが違っても見た目がそろいますが、Dartを覚える必要があります。Lynxはモバイルでは各OSのネイティブ部品で描くので、OS標準の見た目や操作感を保ちやすい一方、OSによる描画の差を自分で確かめる必要があります。Flutterの現行版の変更点はFlutter 3.47の変更点、React NativeとFlutterの比べ方はFlutterとReact Nativeの違いと選び方にまとめています。

Lynxを採用する条件と見送る条件

Lynxが最も力を出すのは、既存のネイティブアプリの一部画面をWeb技術で作り、頻繁に更新したい場合です。TikTok自身がその使い方をしており、公式のQuick Startも本番では既存アプリへの組み込みを案内しています。起動の速さが売上に直結する画面、CSSでのアニメーションを多用する画面、Reactのチームがいる会社には合います。

次のどれかに当てはまるなら、2026年10月時点では見送るのが妥当です。

• 決済・地図・広告SDKなど、ネイティブSDKとの連携をライブラリに頼りたい（React Nativeほどのライブラリはまだ無く、自分でネイティブモジュールを書くことになる）
• 日本語の情報だけで開発・保守したい（公式ドキュメントは英語と中国語が中心）
• Expoのようなビルド・配信の仕組みまで1つのサービスで済ませたい
• 毎月のリリースに追随する人手を確保できない

新規にアプリ全体をLynxで作るなら、TikTokが公開したアプリの雛形Sparklingや、2026年5月に一般提供が始まった部品集lynx-uiが出発点になります。どちらもリリースから1年未満なので、本番で使う前に、必要な画面を一通り試作して確かめることをおすすめします。React NativeやFlutterを含めて技術選定から相談したい場合は、Flutter・React Nativeによるクロスプラットフォームアプリ開発の支援も行っています。デスクトップだけが目的なら、Lynxtronより実績の長いElectronやTauriとも比べてください。

よくある質問

Lynxは無料で使えますか？

はい。Apache 2.0ライセンスのオープンソースで、商用アプリにも無料で使えます。再配布時は改変の有無にかかわらずライセンスの写しを提供します。改変ファイルには変更した旨を明示し、ソース形式では関係する著作権等の表示を保持し、元の配布物にNOTICEがある場合は該当する帰属表示も引き継ぎます。

Lynx.jsとLynxは同じものですか？

同じものです。公式サイトがlynxjs.orgなので、海外の記事ではLynx.jsやLynxJSと書かれることがあります。公式の名称はLynxで、npmのパッケージは@lynx-js/から始まります。

LynxはVueでも書けますか？

Vue Lynxなどのコミュニティ製プロジェクトがあり、Vueで書くこともできます。ただし公式にサポートされるフレームワークはReactLynxだけなので、業務で使うならReactLynxを選ぶのが安全です。

iOSの実機でLynxを試すにはどうすればいいですか？

公式のビルド済みLynx ExplorerはiOSシミュレータ用だけです。実機で動かすには、GitHubの手順に沿ってLynx Explorerをソースからビルドします。App Storeにはコミュニティが出したLynx Explorerもありますが、Lynxチームは審査も保守もしていません。

テキストブラウザのLynxとは違うものですか？

まったく別物です。テキストブラウザのLynxは1992年から続くコマンドライン用のWebブラウザで、ByteDanceのLynxとは名前が同じだけです。

関連記事

• React Nativeとは？仕組みとNew Architectureの構造・採用判断を実装目線で解説【2026年版】
• FlutterとReact Nativeの違いと選び方｜Flutterとは何かから2026年の判断基準まで
• Valdiとは？Snap製TypeScript UIフレームワークの仕組みと導入条件
• Compose Multiplatformとは？KMPとの違いとiOS対応の現在地・採用判断を解説
• Flutter 3.47とは？material_ui移行・iOS 15と3.47.7までの修正【2026年10月時点】