エンジニア夫婦の技術日記
エンジニア夫婦の技術日記 > 技術 > 【ReactNative】開発中買い物リストアプリの紹介

【ReactNative】開発中買い物リストアプリの紹介

2023年1月25日
Posted by 
悠


　もくじ


はじめに

あけましておめでとうございます。
技術的な投稿の頻度が減ってしまっていましたが、今年も継続して参ります。

今回は私たち夫婦が絶賛開発中のモバイルアプリについてご紹介致します。

買い物リストアプリとは？

私たち夫婦が実用的かつスキルアップするために開発しているモバイルアプリです。
Android、iOSを対象にしています。
まだリリースには至っていませんが、リリースに向けて少しずつ進めています。

本記事では概要だけご紹介させていただき、実装のポイントのような詳細な部分は別記事にしようと思います。

機能紹介

画面遷移

画面遷移図と画面キャプチャの通りです。
画面遷移図はGitMindというツールを使用しました。制限はありますが無料で利用出来ます。

https://gitmind.com/jp/

ユーザー認証機能

FirebaseのAuthenticationサービスを利用してユーザー登録、ログイン、ログアウトを行います。

買い物リスト機能

Firebase Firestoreサービスを利用して買い物リストの登録、閲覧、編集、削除を行います。

買い物リスト機能の中で特に重視しているサブ機能は以下の通りです。

  1. 買う物チェック機能
    チェックボックスを利用し、買い物をする時にチェック出来ます。
  2. リンク機能
    商品名称にリンクを付与することで、閲覧時にブラウザでリンク先を表示出来ます。
    例えば、後述する「連携者機能」を利用してお遣いを頼む時に商品ページのリンクがあると買い間違いを防げます。
  3. 買う物グループ機能
    アコーディオン形式で、買う物をグルーピングします。
    例えば売り場毎にグルーピングすることで効率的に買い物することが出来ます。

連携者機能

登録した買い物リストを、登録者が指定した別ユーザーでも閲覧、編集、削除可能にします。
誰かと一緒に買い出しをする時に手分けしたり、お遣いを頼んだりする時の利用を想定しています。

主な使用言語・フレームワーク・ライブラリ・サービス

  • TypeScript
  • React Native
  • React Navigation
  • Firebase Authentication
  • Firebase Cloud Firestore

TypeScript

JavaScriptに「静的型付」を行えるようにした言語です。

JavaScriptは割と自由に変数に値を入れることが可能です。
元は数値型の値が入っていた変数でも、真偽値型だったり文字列型だったり何でも入れられます。これが「動的型付」です。
何でも入れられてしまうため、バグを埋め込みやすくなってしまいます。
実装する時はエラーを吐かないことが多いためストレスなくコーディング出来ますが、保守性を考えると危険な仕様だと私は考えます。

TypeScriptは変数を定義する際に型も定義し、定義した型以外を代入しようとするとビルドしなくてもエラーを吐いてくれます。(静的解析)
そのためJavaScriptと比較して安全なコードを書くことが出来ます。

JavaScriptに慣れている方が初めてTypeScriptを触ると大分ストレスを感じると思います。
ですが例えば障害が挙がったとして、

  • 「どんな型のデータが入っているかも分からない」(JavaScript)
  • 「ひとまず型は確定している」(TypeScript)

この2つを比較すると精神的にも工数的にもTypeScriptの方が楽だと思います。

React Native

https://reactnative.dev/

以前の記事で少し触れたWebアプリ開発フレームワーク「React」を、スマホアプリ開発にも利用できるようにしたフレームワークです。

【React】コンポーネントってなんぞやという話

Reactとの大きな違いはモバイルのネイティブ機能を使用することが可能なところです。

React Navigation

https://reactnavigation.org

画面遷移を管理してくれるライブラリです。
本アプリでは大きく2種類のナビゲーターを使っています。

Stack Navigator

https://reactnavigation.org/docs/stack-navigator/

親画面と子画面の概念がある画面遷移機能を実現してくれます。親子の概念があるため、親画面へ「戻る」機能を実現してくれます。

本アプリでは以下のパターンで使用しています。

  1. ログイン画面→トップ画面
  2. トップ画面→買い物リスト詳細画面
  3. トップ画面→新規買い物リスト登録画面
  4. 買い物リスト詳細画面→新規買い物リスト登録画面

以下の「ShoppingList.tsx」のように、createStackNavigatorでデータ型を指定することで遷移先画面へデータを渡してあげることが可能です。

import { createStackNavigator } from "@react-navigation/stack";
import ShoppingList from "./src/views/ShoppingList";
import Top from "./src/views/Top";
import Registration from "./src/views/Registration";

// 受け渡すパラメータの型定義
export type RootStackParamList = {
  Login: {};
  RegistrationUser: {};
  Top: {};
  ShoppingList: IT_BuyThings;
  Registration: {};
  MainStackNav: {};
  Collaborator: {};
};
const Stack = createStackNavigator<RootStackParamList>();
...
    <Stack.Navigator>
      <Stack.Screen name="Top" component={Top} options={{
        headerShown: false
      }} />
      <Stack.Screen name="ShoppingList" component={ShoppingList} options={{
        title: "買い物リスト",
        headerTitleStyle,
        headerStyle: { ...mainStyle.primaryDarkColor }
      }} />
      <Stack.Screen name="Registration" component={Registration} options={{
        title: "新規買い物リスト登録",
        headerTitleStyle,
        headerStyle: { ...mainStyle.primaryDarkColor }
      }} />
    </Stack.Navigator>
...
const ShoppingList = ({ route, navigation }: TopPageNavigationProp) => {
...
  const [shoppingDate, setShoppingDate] = useState(route.params.dateShopping);
  const [arrayGroupBuyThings, setArrayGroupBuyThings] = useState(route.params.groupBuyThings);
...
};
export default ShoppingList;
export interface IT_BuyThings {
...
  /** 買い物をする日付 */
  dateShopping: Date;
  /** 買うものグループ */
  groupBuyThings: Array<IGroupBuyThings>;
...
}

Drawer navigation

https://reactnavigation.org/docs/drawer-based-navigation/

ハンバーガーメニューの機能を実現してくれます。

ハンバーガーメニューで管理されている画面は状態遷移図の緑背景の画面が該当します。

ハンバーガーメニューのデザインは以下のようにプロパティを指定することで細部までカスタマイズ可能です。

import { createDrawerNavigator } from "@react-navigation/drawer";
...
            <Drawer.Navigator>
              <Drawer.Screen name="MainStackNav" component={MainStackNav} options={{
                title: "買い物リスト",
                headerTitleStyle,
                headerRight: HeaderPlusButton,
                headerStyle: { ...mainStyle.primaryDeepDarkColor },
                drawerStyle: styles.drawerStyle,
                drawerActiveTintColor: mainStyle.primaryLightColor.backgroundColor,
                drawerActiveBackgroundColor: mainStyle.secondaryColor.backgroundColor,
                drawerInactiveTintColor: mainStyle.secondaryDarkColor.backgroundColor,
              }} />
              <Drawer.Screen name="Collaborator" component={Collaborator} options={{
                title: "連携者リスト",
                headerTitleStyle,
                headerStyle: { ...mainStyle.primaryDeepDarkColor },
                drawerStyle: styles.drawerStyle,
                drawerActiveTintColor: mainStyle.primaryLightColor.backgroundColor,
                drawerActiveBackgroundColor: mainStyle.secondaryColor.backgroundColor,
                drawerInactiveTintColor: mainStyle.secondaryDarkColor.backgroundColor,
              }} />
            </Drawer.Navigator>
...

Firebase Authentication

https://firebase.google.com/products/auth?hl=ja

Firebaseのユーザー認証サービスです。独自でユーザー認証システムを構築せずに済むため、大幅な工数削減が可能です。

Firebase Cloud Firestore

FirebaseのNoSQLデータベースサービスです。
本アプリの開発を着手前に下調べした際に「ReactNative DB クラウド 無料」とかで検索したところ一番記事が多そうだったのがこちらのサービスだったため利用することにした記憶があります。

「Firebase Authentication」について、Firestoreに決める前はユーザー認証機能を独自で実装しようと考えていましたが、既にFirebase にユーザー認証サービスがあったため利用することにしました。

簡単ではありますが以上が開発中の買い物リストアプリのご紹介でした。
今後は本アプリのコードを一部抜粋して、ReactNativeやFirestoreでよく使う関数等をご紹介していこうと思います。
それでは、次回の記事をお楽しみに(´∀｀)ノシ

コメントを書く