Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
1年半放置したExpo製アプリを最新化してみた
Search
Yohei Iino
March 06, 2025
Technology
0
42
1年半放置したExpo製アプリを最新化してみた
Yohei Iino
March 06, 2025
Tweet
Share
More Decks by Yohei Iino
See All by Yohei Iino
作成中のFlutterアプリの中間発表
wheatandcat
0
41
最近読んだ技術書を簡単紹介
wheatandcat
0
62
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
wheatandcat
0
120
Firebase App Checkを実装したので紹介
wheatandcat
0
110
PlanetScaleの無料プランがなくなるので、NeonとTiDBを試してみた
wheatandcat
0
280
Flutter HooksとRiverpodの解説
wheatandcat
0
390
T3 Stack(応用編: Next Auth & SSRの実装紹介)
wheatandcat
1
340
App Routerの紹介
wheatandcat
0
100
Flutter × GraphQLでアプリを作ってみる
wheatandcat
0
270
Other Decks in Technology
See All in Technology
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
110
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
180
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
1.1k
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
280
Microsoft Learn MCP/Fabric データエージェント/Fabric MCP/Copilot Studio-簡単・便利なAIエージェント作ってみた -"Building Simple and Powerful AI Agents with Microsoft Learn MCP, Fabric Data Agent, Fabric MCP, and Copilot Studio"-
reireireijinjin6
1
190
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
3
410
20250728 MCP, A2A and Multi-Agents in the future
yoshidashingo
1
160
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
2
230
KCD Lima: eBee in Peru!
lizrice
0
110
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
120
Unson OS|48時間で「売れるか」を判定する AI 市場検証プラットフォーム
unson
0
140
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
110
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Building Adaptive Systems
keathley
43
2.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
GitHub's CSS Performance
jonrohan
1031
460k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
For a Future-Friendly Web
brad_frost
179
9.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Transcript
1年半放置したExpo製アプリを最新化してみた Press Space for next page
自己紹介 📝 飯野陽平(wheatandcat) 🏢 会社: 合同会社UNICORN 代表社員 📚 Blog: https://www.wheatandcat.me/
🛠 今までに作ったもの memoir OOMAKA MarkyLinky
あらすじ① 2022年にmemoirをリリース 参考リンク memoir 【夫婦で開発】1年かけて1週間を振り返えるアプリを本気で開発してみた
あらすじ② 技術スタック Expo Expoとは? React Nativeを使用したアプリ開発を支える代表的なエコシステム Expo SDKを使用することで、本来必要な開発をかなり省略できる 省略できる開発の例 公式がBuild環境のサーバーを提供
テストアプリの配布機能をサポート Push通知等のプラットフォーム固有の開発をExpo側で抽象化して提供 etc… 現在はReact Nativeの公式でもExpoを使用した開発を推奨している
あらすじ③ 2023年までは定期的に更新していたが、それ以降は他の個人開発に時間を割いていて更新を止めていた 間に作っていた個人制作物 自分専用todo MarkyLinky OOMAKA STOCK KEEPER
開発を1年半サボると、どういうことが起きるのか?
🤮 ローカルでビルドが出来なくなる Expo SDK 48 → 52までの間でEAS Buildの対応が必須になった 元々あったExpo Goベースの開発はあくまでデバッグ用という立ち位置になり、ネイティブ周りの機能を修
正したアプリはビルドできなくなった Expo SDK 48の時点で本番ビルドはEAS Buildに移行済みだったが、EAS Buildで実行してもエラーになり、 ローカルでもビルドできない そもそもデバッグできない状態になり、詰みの状態が発生
😭 Expoの一部ライブラリが非推奨になる Expo SDK 48 → 52までの間でexpo-auth-sessionの expo-auth-session/providers/google が非推 奨になった
具体的には、以前まではExpo更新のライブラリのみGoogleログインが可能だったが、出来なくなり代替で @react-native-google-signin/google-signinの使用が必須になった その他の一部ライブラリでも廃止、仕様変更が発生がしていた ` `
😭 ナビゲーションライブラリのトレンドが変わる 以前はreact-navigationが最もよく使われているライブラリだった 現在はexpo-routerが公式が提供しているライブラリとして推奨されている しかも、expo-routerは ファイルベースルーティング を採用しているので、ディレクトリ構造の変更も必要 ファイルベースルーティングとは? ディレクトリ構造が、そのまま画面のルーティングに反映される方式 Next.jsやNuxt.js等の採用されている方式
` `
🙁 Reactのバージョンが変わり、非推奨が発生 Expo SDK 48 → 52の移行でReact、React Nativeのバージョンが上がった defaultProps の非推奨化など警告がでるようになり、一部コード修正が発生
` `
🤔 ディレクトリ構造のトレンドが変わる 以前はフロントエンドのディレクトリ構造はAtomic Designが流行っていた 現状のトレンドは以下 Feature Sliced Design Screaming Architecture(日本だとFeature型と呼ばれている事が多い)
トレンドが変わった理由 Atomic Designの定義が複雑でチーム開発でうまく回せないケースが多い 後からの開発でコンポーネントの機能拡張した際に、ディレクトリ構造が変わる可能性があり、長期の 開発では管理が難しくなる 各画面との依存関係がわかりにくい等々
🤔 Lint、Formatterのトレンドが変わる 以前はESLintとPrettierを使っていた 現在はBiomeがトレンド トレンドが変わった理由 長期の開発をしていくとESLint & Prettierの設定の複雑になっていくケースが発生しやすい ESLint &
Prettierを使用するとPCに負荷がかかり開発に支障が出るケースがある よりシンプル且つ、一括管理できるBiomeの方が採用されるようになった
🤔 使っていたライブラリが開発停止になる 開発時はグローバルな状態管理はRecoilが最もよく使われていた Facebookが開発しているライブラリで、ほぼ公式扱いだったが… その後の大規模レイオフで全開発者が解雇され開発停止になった React 19では動作しないため、今後の移行が必須 今後はJotaiが使われていきそう
このままでは開発できないので、諸々最新化してみる
最新化後の構成 Expo SDK: 48 → 52 ナビゲーションライブラリ: react-navigation → expo-router
ディレクトリ構造: Atomic Design → Feature型 Lint、Formatter: ESLint、Prettier → Biome パッケージマネージャ: yarn → pnpm ※まだReact19まで猶予があるので、Recoilの移行は一旦後回し ▪ リポジトリ 更新前: リンク 更新後: リンク
起動まで① Expoには、バージョンアップ時のマイグレーションを自動で行うコマンドが用意されている 以下のコマンドでSDKの最新化 & ライブラリのバージョンの依存関係を更新 以下のコマンドでドキュメントに記載されているチェックを行い、NGが出ている箇所を修正 参考 Expo Doctor $
npx expo install expo@latest $ npx expo install --fix $ npx expo-doctor
起動まで① Expoには、バージョンアップ時のマイグレーションを自動で行うコマンドが用意されている 以下のコマンドでSDKの最新化 & ライブラリのバージョンの依存関係を更新 以下のコマンドでドキュメントに記載されているチェックを行い、NGが出ている箇所を修正 参考 Expo Doctor ただ今回のケースでは、これをやってもビルドが通らなかった
😢 なので、新規でExpoのプロジェクトを作成して徐々に既存のコードを移行する手法で対応 $ npx expo install expo@latest $ npx expo install --fix $ npx expo-doctor
起動まで② 以下のページを参考に、Expo Routerのサンプルアプリを作成 Install Expo Router - Expo Documentation ここから徐々に既存のコードを移行していった
ディレクトリ構造① ▪ 以前のディレクトリ構造 . ├── assets └── src ├── components
│ ├── atoms │ ├── molecules │ ├── organisms │ ├── pages │ └── templates ├── containers ├── hooks ├── img ├── lib ├── queries └─ store
ディレクトリ構造① ▪ 以前のディレクトリ構造 └── src ├── components │ ├── atoms
│ ├── molecules │ ├── organisms │ ├── pages │ └── templates ├── containers ├── hooks ├── img ├── lib ├── queries └─ store . ├── assets
ディレクトリ構造① ▪ 以前のディレクトリ構造 ├── components │ ├── atoms │ ├──
molecules │ ├── organisms │ ├── pages │ └── templates . ├── assets └── src ├── containers ├── hooks ├── img ├── lib ├── queries └─ store
ディレクトリ構造② ▪ 現在のディレクトリ構造 . ├── app │ └── (app) │
└── search ├── assets │ ├── fonts │ └── img ├── components │ ├── elements │ └── layouts ├── containers ├── features │ ├── home │ │ └── components │ └── search │ ├── components │ └── hooks ├── hooks ├── lib ├── queries └── store
ディレクトリ構造② ▪ 現在のディレクトリ構造 ├── app │ └── (app) │ └──
search . ├── assets │ ├── fonts │ └── img ├── components │ ├── elements │ └── layouts ├── containers ├── features │ ├── home │ │ └── components │ └── search │ ├── components │ └── hooks ├── hooks ├── lib ├── queries └── store
ディレクトリ構造② ▪ 現在のディレクトリ構造 ├── components │ ├── elements │ └──
layouts . ├── app │ └── (app) │ └── search ├── assets │ ├── fonts │ └── img ├── containers ├── features │ ├── home │ │ └── components │ └── search │ ├── components │ └── hooks ├── hooks ├── lib ├── queries └── store
ディレクトリ構造② ▪ 現在のディレクトリ構造 ├── features │ ├── home │ │
└── components │ └── search │ ├── components │ └── hooks . ├── app │ └── (app) │ └── search ├── assets │ ├── fonts │ └── img ├── components │ ├── elements │ └── layouts ├── containers ├── hooks ├── lib ├── queries └── store
Lint、Formatterの移行 以下のページを参考にBiomeに移行 Getting Started | Biome 今回のコードでは軽微な修正のみだったので基本は移行後に、以下のコマンドで自動で修正できた $ npx @biomejs/biome
check --write ./
デモ 現在の動作するところまで確認
まとめ Expoのアプリの開発を1年半放置すると、結構な地獄になる 正直、ローカルビルドができなくなるのは想定していなかったので、かなり困った フレームワークとしての強みはかなりあるが、反面フレームワークで強制される部分が大きいので、開発に 間を空けすぎると復帰が難しくなる バックエンドと比較してフロントエンドはトレンドの移り変わりが激しいのを再認識した
ご清聴ありがとうございました 🎉