会津大学学園祭実行委員会 Advent Calendar 2025の12/12に出すはずだった記事です。
React Nativeを使用した経緯
今年度の学祭ではLIFF上で表示されるグループ/個人識別用のQRコードを使用して入場処理をしました。
QRコードの読み取りをするためにバーコード/QRコードリーダーがついているFZ-N1という端末を使用し、それ用にReact Nativeで管理用のソフトウェア開発をしていました。
雑なフロー
- PCまたはスマホで学祭委員用のツールを開き、QRコードを発行
- FZ-N1でそのQRコードを読み込んでスタッフ認証
- QRコードの読み込み待機
- QRコードが読み込まれたらAPIに送信してAPI側で入場処理
- 成功したら成功音+レシートプリンターにイベントで使用するレシートのデータを送信
- 失敗したら失敗音を鳴らす
- 3に進む(ループ)
Expoが使えない！！
React Nativeを使用する際にExpoは必須とも言えるぐらい重要なものですが、Expoが対応しているAndroidのバージョンは7以上。
それに対して学祭で使用したFZ-N1のAndroidのバージョンは6なのでExpoは使えません...
そんなわけでExpo無しのReact Nativeアプリを作成せざるをえなくなりました。
困ったこと
Expoがあれば、QRコード読み込んですぐにデバッグができたのですが、ExpoがないReact Nativeは不便とかいうレベルではなく、Javaのエラーで苦しんだり、原因がわからないクラッシュだったり、同じ端末で同じことをしている例がないので当然資料もなかったり...とまあ酷かったです。
Expoと今回のを比較するとこんな感じ。
| 項目 | Expo | 今回 |
|---|---|---|
| 環境構築 | ほとんどの場合はNode.jsで完結 | JDK, Android SDK, Gradleをいい感じにしてバージョンを頑張って合わせる |
| 実機テスト | Expo GoでQR読むだけ | Metroがあったがうまく行かなかったので、毎回ビルドしてinstallする羽目に |
| 設定変更 |
app.json を書くだけ |
AndroidManifest.xml や build.gradle を直接編集 |
| ライブラリ |
pnpm dlx expo installしたら勝手にやってくれる |
Javaのエラーでビルドが落ちることがあるのでpatch-packageでなんとかする |
| 権限管理 | 設定ファイルに書くだけ | Javaコードで許可を求める処理を実装 |
React Nativeだからjs/tsだけ書ければいいやーではなかった...
助かったこと
React Native上でレシートプリンターの操作をできるパッケージ(Link)が公開されていたので、そこを実装する必要がなくなりました。やったねたえちゃん!
他に助かったこと...？そこになければないですね(絶望)
さいごに
別の記事でも出した通り今年度はやることが多かったため、こんな手間がかかるのは二度とやりたくないです。
まあ来年度も同じ端末使うのでやることになるんですけどね...ははは...
これを読んだ方は、古い端末で試そうとせずに新しめのバージョンのAndroid端末でExpoを使って開発しましょう。
Discussion