React Nativeに変わる新勢力？噂の「Lynx」を試してみた

閲覧頂き、ありがとうございます🙇

この記事は、Reactベースでネイティブアプリ開発ができる「`Lynx`」の
プロジェクト作成〜デバッグ、コード内容について触れていきます！
ちなみに私はReactド素人です🔰

# Lynxとは🐈

* 「`Lynx`」は「TikTok」や「Lemon8」の `ByteDance社`が開発
* JavaScriptでネイティブアプリ開発ということで競合に `React Native`があげられる
* Web開発に親しみやすく、`マークアップやCSSが見慣れた形式` で書くことができる

他にも特徴は色々あるが気になったポイントのみピックアップ！
ちなみに「Lynx」は「オオヤマネコ」という意味のためロゴが猫っぽいです！

# クイックスタート🧑‍💻

[公式のクイックスタート](https://lynxjs.org/guide/start/quick-start.html)に合わせてプロジェクト作成を行います！
環境は「`MacBook Pro`」で行っています。

## 1. Lynxプロジェクトの作成

```
$ npm create rspeedy@latest
```

ここで気になったのは追加ツールの選択欄！
ESLintとPrettier以外に`Biome`がありました、新しい感じする🆕

![スクリーンショット 2025-03-23 22.01.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130422/eac0e407-036a-4941-a085-1b7783b39401.png)

## 2. Lynx Explorerの準備

* お使いのデバイスに合わせてアプリをダウンロード&解凍！
    * `LynxExplorer-arm64.app`
* XCodeのインストールを行う！
    * その中にある`Simulator`を使用するため
* 画面等は後述します！

## 3. Lynxプロジェクトの起動

```
$ cd <project-name>
$ npm install
$ npm run dev
```

すると、こんな感じでターミナルに出力されます！

![スクリーンショット 2025-03-24 0.16.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130422/b8120a3b-8c7c-4079-991d-f606c9a9a5ee.png)

## 4. iOSシミュレーター(XCode)で確認

* Spotlightで「`Simulator`」を検索し起動
    * XCode起動 > メニューバーの「Xcode」 > 「Open Developer Tool」からも起動可能
* 2でダウンロード・解凍した「LynxExplorer-arm64.app」をドラッグ&ドロップ
    * これでインストールできるんだ💡

![スクリーンショット 2025-03-24 0.30.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130422/1bd6977d-e41e-4e02-ac2b-1eb841e0d6fb.png)

* Lynx Explorer を起動し、`Card URL`を入力しGoを謳歌
    * URLはターミナルに出ているURLです！

![スクリーンショット 2025-03-24 0.32.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130422/a3ed903c-f1ef-43d9-84f8-49fc279e63d5.png)

するとこの画面が出てきます🎉

<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130422/af15f6bd-b9df-4e80-8440-1246c735e161.png">

文字をソースコード上から変更してもホットリロードが効きます🙌

## 5. デスクトップアプリのLynx Explorerでデバッグ

* [公式リポジトリ](https://github.com/lynx-family/lynx-devtool/releases)からダウンロードします！
* アプリを起動します！
* 見慣れたDevToolでデバッグができます🎉

![スクリーンショット 2025-03-24 0.39.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130422/c5d6aee8-db66-4f53-a329-570f383434a3.png)

# 実際のタグ構成どうなってんの🔍

デフォルトで生成されたファイルがこちらです！

```src/App.tsx
import { useCallback, useEffect, useState } from '@lynx-js/react'

import './App.css'
import arrow from './assets/arrow.png'
import lynxLogo from './assets/lynx-logo.png'
import reactLynxLogo from './assets/react-logo.png'

export function App() {
  const [alterLogo, setAlterLogo] = useState(false)

  useEffect(() => {
    console.info('Hello, ReactLynx')
  }, [])

  const onTap = useCallback(() => {
    'background only'
    setAlterLogo(!alterLogo)
  }, [alterLogo])

  return (
    <view>
      <view className='Background' />
      <view className='App'>
        <view className='Banner'>
          <view className='Logo' bindtap={onTap}>
            {alterLogo
              ? <image src={reactLynxLogo} className='Logo--react' />
              : <image src={lynxLogo} className='Logo--lynx' />}
          </view>
          <text className='Title'>React</text>
          <text className='Subtitle'>on Lynx</text>
        </view>
        <view className='Content'>
          <image src={arrow} className='Arrow' />
          <text className='Description'>Tap the logo and have fun!</text>
          <text className='Hint'>
            Edit<text style={{ fontStyle: 'italic' }}>{' src/App.tsx '}</text>
            to see updates!
          </text>
        </view>
        <view style={{ flex: 1 }}></view>
      </view>
    </view>
  )
}
```

よくあるReactコンポーネントっぽい感じだけど、
`<view>`や`<image>`や`<text>`が初見だ🔍

公式ドキュメントにある[Composing Elements](https://lynxjs.org/guide/ui/elements-components.html) さらっと読んでみた限り、
従来のHTMLタグは使えず`Lynx専用のタグ`を使う模様💡
ただ`HTMLと同じ構造で書くことができる`という💡

* view → div
* text → p
* image → img

基本的には相対になる📝

そこだけ頭にいれておけばなんとなくコードが見やすくなったと思います🙌

# 最後に🍵

* ネイティブアプリ開発は言語も覚えないといけないしハードル高いと感じていましたが、
  `Reactの知識とマークアップの経験`があればできそうと気持ちが高まりました！
* 疑問点として`タグ`のところありました。
  画面を作る上では最小のタグで装飾を当てられれば再現できますが、
  `アクセシビリティ観点`で`role`などがどうなっているのか/`スクリーンリーダー`が読めるのか
  ここは追って調べてみたいと思います！

今回は初期セットアップのみでしたが、
次回は公式のチュートリアルを回してさらにLynxと仲良くなってみたいと思います🐈

# あとがき📝

[Vue.jsもサポート](https://github.com/lynx-family/lynx/issues/193)していくような動きがあり
今後に期待です🔥🔥🔥🔥🔥

# 参照元📝

* [Lynx](https://lynxjs.org/)