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
44
1年半放置したExpo製アプリを最新化してみた
Yohei Iino
March 06, 2025
Tweet
Share
More Decks by Yohei Iino
See All by Yohei Iino
作成中のFlutterアプリの中間発表
wheatandcat
0
43
最近読んだ技術書を簡単紹介
wheatandcat
0
66
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
wheatandcat
0
130
Firebase App Checkを実装したので紹介
wheatandcat
0
120
PlanetScaleの無料プランがなくなるので、NeonとTiDBを試してみた
wheatandcat
0
290
Flutter HooksとRiverpodの解説
wheatandcat
0
400
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
GCASアップデート(202506-202508)
techniczna
0
240
AIが住民向けコンシェルジュに?Amazon Connectと生成AIで実現する自治体AIエージェント!
yuyeah
0
250
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
180
自治体職員がガバクラの AWS 閉域ネットワークを理解するのにやって良かった個人検証環境
takeda_h
2
370
生成AIによるデータサイエンスの変革
taka_aki
0
3.1k
なごミュ@SPAJAM2025 第二回予選
1901drama
0
120
マイクロモビリティシェアサービスを支える プラットフォームアーキテクチャ
grimoh
1
160
広島銀行におけるAWS活用の取り組みについて
masakimori
0
110
Delegate authentication and a lot more to Keycloak with OpenID Connect
ahus1
0
240
Backboneとしてのtimm2025
yu4u
3
1.3k
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
380
Understanding Go GC #coefl_go_jp
bengo4com
0
550
Featured
See All Featured
Facilitating Awesome Meetings
lara
55
6.5k
Gamification - CAS2011
davidbonilla
81
5.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Documentation Writing (for coders)
carmenintech
73
5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
770
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Site-Speed That Sticks
csswizardry
10
780
RailsConf 2023
tenderlove
30
1.2k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building an army of robots
kneath
306
45k
How GitHub (no longer) Works
holman
315
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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年半放置すると、結構な地獄になる 正直、ローカルビルドができなくなるのは想定していなかったので、かなり困った フレームワークとしての強みはかなりあるが、反面フレームワークで強制される部分が大きいので、開発に 間を空けすぎると復帰が難しくなる バックエンドと比較してフロントエンドはトレンドの移り変わりが激しいのを再認識した
ご清聴ありがとうございました 🎉