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

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

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

Lynxとは🐈

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

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

クイックスタート🧑‍💻

公式のクイックスタートに合わせてプロジェクト作成を行います！
環境は「MacBook Pro」で行っています。

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

$ npm create rspeedy@latest

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

2. Lynx Explorerの準備

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

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

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

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

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

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

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

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

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

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

• 公式リポジトリからダウンロードします！
• アプリを起動します！
• 見慣れたDevToolでデバッグができます🎉

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

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

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 さらっと読んでみた限り、
従来のHTMLタグは使えずLynx専用のタグを使う模様💡
ただHTMLと同じ構造で書くことができるという💡

• view → div
• text → p
• image → img

基本的には相対になる📝

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

最後に🍵

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

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

あとがき📝

Vue.jsもサポートしていくような動きがあり
今後に期待です🔥🔥🔥🔥🔥

参照元📝

• Lynx