こんにちは。モビリティサービス開発部の久恒です。
普段はFuelPHPを使ったWebシステムの開発をしていますが、今回初めてReact Nativeを使ったアプリ開発に挑戦する機会をいただきました。
アプリ開発は初めての経験だったので、実際に触ってみての感想や、Web開発経験者として感じたギャップについてお伝えしたいと思います。
開発の概要
- 期間：5月～7月（約30時間）
- テーマ：位置情報付き家計簿アプリ（個人開発）
- 使用技術
- フロントエンド：React Native（TypeScript）
- データベース代用：Googleスプレッドシート
- バックエンド：Google Apps Script（JavaScript）
- 開発環境
- iOS：Xcode
- Android：Android Studio
今回作ったアプリは、収支を入力すると同時に位置情報も記録し、あとで地図上で確認できるシンプルな家計簿アプリです。
CRUD（Create / Read / Update / Delete）の基本を一通り体験したかったこと、また地図や位置情報といった社内アプリでも使われる機能を自分でも触ってみたかったことから、やや無理やりですがこのテーマを選びました。
本記事ではアプリの画面イメージの詳細は割愛し、開発を通して得られた学びを中心にご紹介します。
Web開発とのギャップ
React NativeはJavaScriptで書けるため「Web開発の延長線」だと思っていましたが、実際には多くの違いがありました。
1. ディレクトリ構成の違い
プロジェクトにはiOSとAndroidそれぞれのネイティブ設定用ディレクトリが存在します。
OSの機能（位置情報やカメラなど）を使いたい場合は、それぞれのディレクトリ内で設定やコードを追加する必要があります。
2. 入力方法の違い
HTMLでおなじみの<select>や<input type="date">タグはありません。
そのため、ライブラリを使うか、自作コンポーネントを作成します。
今回の実装では、日付選択はライブラリ（react-native-modal-datetime-picker）を利用し、
年月選択は自作コンポーネント（約100行）でセレクトボックス風のUIを作成しました。
*以下はセレクトボックス風UIのコード例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import React, { useState } from 'react'; import { View, Text, TouchableOpacity, Modal, FlatList } from 'react-native'; const MonthPicker = ({ months, selectedMonth, onSelect }) => { const [visible, setVisible] = useState(false); const handleSelect = (month: string) => { onSelect(month); setVisible(false); }; return ( <View> <TouchableOpacity onPress={() => setVisible(true)}> <Text>{selectedMonth}</Text> </TouchableOpacity> <Modal visible={visible} transparent> <TouchableOpacity onPress={() => setVisible(false)}> <View> <FlatList data={months} renderItem={({ item }) => ( <TouchableOpacity onPress={() => handleSelect(item)}> <Text>{item}</Text> </TouchableOpacity> )} keyExtractor={(item) => item} /> </View> </TouchableOpacity> </Modal> </View> ); }; |
ボタンを押すとModalが開き、FlatListで候補を並べ、タップしたら選択＆閉じる仕組みです。
スタイル部分は記載を割愛しましたが、実際にはborderWidthやbackgroundColorで見た目を整えています。
3. iOS / Androidならではの挙動
地図表示：iOSではデフォルトマップを利用可能（Webではできないこと）
権限周り：位置情報許可ダイアログの出し方や設定がOSごとに異なるため、条件分岐が必要
4. 動作環境の違い
Webアプリの場合は、NginxなどのWebサーバーに配置して運用し、動作確認もブラウザを通じて行います。
一方スマホアプリは、開発段階ではXcodeやAndroid Studioでビルドして実機やシミュレーターで確認し、リリース後はApp StoreやGoogle Playからユーザーがインストールして端末上で動作します。
実際に感じたこと・学び
1. アプリならではのUI
モーダルやスワイプ、フリックなど、WebにはないUI部品があり、どんな動きをつけるか考えるのは楽しい経験でした。
2. ライブラリ利用のメリットとリスク
HTMLでおなじみの<select>や<input type="date">タグが使えないため、毎回コンポーネントを自作するのは大変です。そのため、便利なライブラリに頼りたくなります。
ライブラリを使えば開発スピードは確かに上がりますが、実際に世の中へリリースするアプリを作るなら、将来的なメンテナンスやアップデートへの追従が課題になるでしょう。
そのため、利用する際は更新状況やサポート体制も確認することが大切だと感じました。
3. 動作確認は両OS必須
iOSとAndroidで挙動が異なるため、両方でのテストは必須です。
途中からは時間の都合でAndroidの動作確認を省略してしまい、結果として地図表示の動作差分を確認できなかったのは反省点です。
まとめ
3か月・30時間という限られた時間でしたが、React Nativeを使った初めてのアプリ開発を通して、Web開発との違いやアプリ特有の課題を体験できました。
もし、Web開発経験者でアプリ開発に挑戦しようとしている方がいれば、この記事が最初の一歩の参考になれば嬉しいです。
最後まで閲覧いただきありがとうございます。
エコモットでは一緒にモノづくりをしていく仲間を随時募集しています。
弊社に少しでも興味がある方はぜひ下記の採用ページをご覧ください！
