Slide 1

Slide 1 text

React Nativeならぬ"Vue Native" が実現するかも? 新世代マルチプラットフォーム開発フレームワークの LynxとLynxのVue.js対応を追ってみよう 2025.10.25 Vue Fes Japan 2025 Yuto NAGAI @yut0naga1

Slide 2

Slide 2 text

Who Am I ?/お前誰よ? 永井優斗/Yuto NAGAI  @yut0naga1 フューチャーアーキテクト株式会社(ゴールド&ルームネイミングライツスポンサーです!) シニアコンサルタント 資格:経済産業大臣登録 中小企業診断士 日商簿記2級 BBQインストラクター🍖 パエリア検定上級🥘(上級パエジェロ) 2017年北海道大学公共政策大学院修了後、新卒にてフューチャー入社。 流通・小売企業・ヘルスケア企業の案件、新人研修、現在は社内の教育企画などを担当 去年はプラチナスポンサーセッション登壇しました 「IT 未経験者をVue.js で開発できる IT コンサルタントに育てあげる秘訣」 登壇報告TechBlog 資料・動画へのリンクもBlog内に。 その他活動: 特定非営利活動法人全日本ディベート連盟( CoDA) 普及研修部局マネージャー 特定非営利活動法人全国教室ディベート連盟( NADE) 連盟教育普及・啓発委員 TSKaigi 運営委員 KeyWords #TSKaigi2024/2025運営委員 #新日本プロレス #競技ディベート #中小企業診断士 #BBQ焼き担当 #最近バイク買いました #

Slide 3

Slide 3 text

011. ”Vue Native”

Slide 4

Slide 4 text

Vue開発者がネイティブアプリ開発にチャレンジするとき もし、使い慣れたVueの構文で、ネイティブアプリが作れたならなあ…(願望) ● ReactにはReact Nativeがあるが、Vueには決定的な選択肢がなかった(と思う。) ○ WebViewによるネイティブアプリ開発で Vueを使う、Capacitorとか。
 ○ 「Vue.jsでモバイルアプリ開発をするフレームワークたち(2025秋) 」 
 ■ そのあたりをの選択肢をつい最近他のFuture社員がTech Blogにまとめていたりするので読んでもらえる と。
 ○ ところで”Vue Native” ってモノもあったんですよね。 ■ 開発終了:Vue3系には対応せず。(´・ω・`) ● ちなみに顧客の展開したいビジネス等に合わせて (意外と?)当社でもモバイル開発することはある。

Slide 5

Slide 5 text

02 2. フレームワーク「 Lynx」とは?

Slide 6

Slide 6 text

Lynxの3つのキーポイント ByteDance社が開発 TikTokやCapCutなど、 巨大サービス を支える技術が ベース 2025年3月にOSSとして発表 新世代のモバイル向け クロスプラットフォーム 開発フ レームワーク 複数のJSフレームワークへの 対応 現在はReactにのみ対応だ が、React以外にも対応する かも

Slide 7

Slide 7 text

Lynxの3つのキーポイント ByteDance社が開発 TikTokやCapCutなど、 巨大サービス を支える技術が ベース 2025年3月にOSSとして発表 新世代のモバイル向け マルチプラットフォーム 開発フ レームワーク 複数のJSフレームワークへの 対応 現在はReactにのみ対応だ が、React以外にも対応する かも <Lynx公式から引用 ※太字は発表者による > 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. ReactLynx(「React on Lynx」)をLynxの初期フロントエンドフレームワークとして オープンソース化します。これにより、Lynx上でコンポーネント化された宣言型UIを 実現します。 ただし、LynxはReactに限定されません。 実際、(発表者注:ByteDance内では)他 のフレームワークが既に Lynx全体の使用量の約半分を占めており、異なるフ レームワークを中立的にホストできることを示しています。

Slide 8

Slide 8 text

Lynxの3つのキーポイント ByteDance社が開発 TikTokやCapCutなど、 巨大サービス を支える技術が ベース 2025年3月にOSSとして発表 新世代のモバイル向け マルチプラットフォーム 開発フ レームワーク 複数のJSフレームワークへの 対応 現在はReactにのみ対応だ が、React以外にも対応する かも <Lynx公式から引用 ※太字は発表者による > 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. ReactLynx(「React on Lynx」)をLynxの初期フロントエンドフレームワークとして オープンソース化します。これにより、Lynx上でコンポーネント化された宣言型UIを 実現します。 ただし、LynxはReactに限定されません。 実際、他のフレームワークが既にLynx 全体の使用量の約半分を占めており、異なるフレームワークを中立的にホストで きることを示しています。 Vue対応してほしい!!

Slide 9

Slide 9 text

03 3. Lynxを触ってみた

Slide 10

Slide 10 text

Lynx(ReactLynx)を触ってみた 疎結合感 Reactをそのまま持ってきたのではなく、Lynx側に独自のインターフェースがあ り、それをReactでラップしている(と書き方ひとつからも感じた) 例)React Nativeなら”onPress” (cf. “onClick”)のところ、Lynxは”bindtap” LTということで、詳細は割愛。フューチャー技術ブログ読んでください! https://future-architect.github.io/articles/20250902a/ 7

Slide 11

Slide 11 text

04 4. LynxとVue.jsの繋がり

Slide 12

Slide 12 text

Vue+Lynxに向けた注目の動き OSS公開から盛り上がった! Lynxが OSS化 2025年3月

Slide 13

Slide 13 text

Vue+Lynxに向けた注目の動き OSS公開から盛り上がった! Lynxが OSS化 2025年3月 Evan You 氏が支援を 表明

Slide 14

Slide 14 text

Vue+Lynxに向けた注目の動き OSS公開から盛り上がった! Lynxが OSS化 2025年3月 Evan You 氏が支援を 表明 Rahul Vashishtha 氏がForkす る形で、プロ トタイプ公開 7 14

Slide 15

Slide 15 text

Vue+Lynxに向けた注目の動き OSS公開から盛り上がった! Lynxが OSS化 2025年3月 Evan You 氏が支援を 表明 Rahul Vashishtha 氏がForkす る形で、プロ トタイプ公開

Slide 16

Slide 16 text

Vue+Lynxに向けた注目の動き OSS公開から盛り上がったけれども…。 Lynxが OSS化 2025年3月 Evan You 氏が支援を 表明 Rahul Vashishtha 氏がForkす る形で、プロ トタイプ公開 TODAY が、そこから動きが少な く、、、苦戦中みたい

Slide 17

Slide 17 text

Vue+Lynxに向けた注目の動き OSS公開から盛り上がったけれども…。 Lynxが OSS化 2025年3月 Evan You 氏が支援を 表明 Rahul Vashishtha 氏がForkす る形で、プロ トタイプ公開 TODAY が、そこから動きが少な く、、、苦戦中みたい

Slide 18

Slide 18 text

Vue+Lynxに向けた注目の動き OSS公開から盛り上がったけれども…。 Lynxが OSS化 2025年3月 Evan You 氏が支援を 表明 Rahul Vashishtha 氏がForkす る形で、プロ トタイプ公開 TODAY が、そこから動きが少な く、、、苦戦中みたい

Slide 19

Slide 19 text

Vue+Lynxに向けた注目の動き OSS公開から盛り上がったけれども…。 Lynxが OSS化 2025年3月 Evan You 氏が支援を 表明 Rahul Vashishtha 氏がForkす る形で、プロ トタイプ公開 2025年7月 が、そこから動きが少な く、、、苦戦中みたい TODAY 「お、これは熱いね! おもろそうやん!登壇まで に開発進んでるだろうし、 触ってみた話とかできるか なあ」

Slide 20

Slide 20 text

プロトタイプ(の Readme)が示す可能性 VueのSFC(single file component)がLynx上で動作することを目指している

Slide 21

Slide 21 text

プロトタイプ(の Readme)が示す可能性 Vue 3系の、Composition APIにも対応予定

Slide 22

Slide 22 text

05 5. Vue+Lynxがもたらす未来

Slide 23

Slide 23 text

VueLynxが実現すれば … 学習コスト少なく、ネイティブ開発! Vue開発者が持つ既存のスキルセットを 最大限に活用! エコシステムの拡大 Vueとその周辺の豊富なエコシステムが ネイティブ開発にも広がる! そこから新たなツールやライブラリが生まれる(か も) ByteDanceの大資本力にも期待 …!

Slide 24

Slide 24 text

このワクワクを、皆さんと共有したい! まだ始まったばかりの挑戦ですが、動向を追いかける価値は十分にあるはず • 情報のキャッチアップ : LynxのGitHubリポジトリやRahul氏の動向をウォッチ&応援! • 情報発信 : Lynxそのものすら、日本語での情報が少ない今、ブログや SNSでの発信がコミュニティを育てる(と 思う) Let's Dive into Vue+Lynx!