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
47
1年半放置したExpo製アプリを最新化してみた
Yohei Iino
March 06, 2025
Tweet
Share
More Decks by Yohei Iino
See All by Yohei Iino
作成中のFlutterアプリの中間発表
wheatandcat
0
46
最近読んだ技術書を簡単紹介
wheatandcat
0
69
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
wheatandcat
0
140
Firebase App Checkを実装したので紹介
wheatandcat
0
140
PlanetScaleの無料プランがなくなるので、NeonとTiDBを試してみた
wheatandcat
0
300
Flutter HooksとRiverpodの解説
wheatandcat
0
420
T3 Stack(応用編: Next Auth & SSRの実装紹介)
wheatandcat
1
350
App Routerの紹介
wheatandcat
0
100
Flutter × GraphQLでアプリを作ってみる
wheatandcat
0
280
Other Decks in Technology
See All in Technology
「Linux」という言葉が指すもの
sat
PRO
4
140
2025年夏 コーディングエージェントを統べる者
nwiizo
0
180
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
250
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
2
260
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.1k
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
190
AIをプライベートや業務で使ってみよう!効果的な認定資格の活かし方
fukazawashun
0
100
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
560
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
190
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Practical Orchestrator
shlominoach
190
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Documentation Writing (for coders)
carmenintech
74
5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
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年半放置すると、結構な地獄になる 正直、ローカルビルドができなくなるのは想定していなかったので、かなり困った フレームワークとしての強みはかなりあるが、反面フレームワークで強制される部分が大きいので、開発に 間を空けすぎると復帰が難しくなる バックエンドと比較してフロントエンドはトレンドの移り変わりが激しいのを再認識した
ご清聴ありがとうございました 🎉