はじめてのネイティブアプリ開発 - 地図を使って思い出や日常をシェアできるアプリ「Ashiato_」

# はじめに

開発でチャレンジして、失敗・成功したことをシェアしようというテーマで、転職ドラフト Advent Calendar 2024のシリーズ2、12日目の記事です。

私と友人の二人で個人開発したアプリ **Ashiato_** を、11月の初めにリリースしました。9月初めから開発を始め、2ヶ月間でリリースにこぎつけました。まだまだ最低限の機能しかありませんが、これからもコツコツと開発を続けていきます。

今回は、**Ashiato_** の紹介、技術的な話、そして成功・失敗談をお届けします。駆け出しのエンジニアや個人開発に挑戦している人たちのモチベーションアップに繋がれば幸いです。

# Ashiato_ 

ぜひこちらからアプリをダウンロードして、**Ashiato_** を使いながらこの記事を読んでみてください！
※開発工数を節約するため、現在は利用者の多い iOS のみリリースしていますが、将来的には Android 版のリリースも予定しています。

https://apps.apple.com/jp/app/ashiato/id6736559293

![qr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508663/337d6ff2-bb7c-5ac4-39de-617d23393927.png)

## どんなサービスか

**Ashiato_** は、地図上に自由に「あしあと」というメッセージを残して、他の人と共有できるサービスです。**自由な場所にレビューやコメントを残せる**のが特徴です。
Google マップなどの地図サービスは登録された場所にしかレビューが書けませんが、**Ashiato_** なら好きな場所に好きなことを書けます。

例えば、 **「地図に載っていないけれどこんな場所があったんだ」** とか、 **「今この場所でこんなことが起きているんだ」** と感じてもらえると嬉しいです。将来的にはインフルエンサーや有名人が投稿して、**「あの人が行った場所に自分も行ってみたい」** と思ってもらえるようになればいいな、と妄想しています。

また、自分だけが見られる「プライベートあしあと」機能も実装して、**メモや思い出で自分だけの地図を作れるようにしたい**と考えています。

## 使い方

アプリを開くとマップが表示されます。**ログインしなくても、あしあとを見る**ことができます。**日本全国、世界中をスクロールで旅しながら**、面白いあしあとを探してみてください！

![how-to-use-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954855/f33e76b6-0d6d-9ce1-9507-414f00b6a57e.gif)

登録方法は、**Google、Apple、独自のアカウントの3種類**から選べます。お好きな方法で登録・ログインして、あしあとを投稿してみてください。

![how-to-use-2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954855/c8d9774f-2248-c1c0-aeee-cd4adc1fab5e.gif)

ログインできたら、**あしあとを残してみましょう！** 右下の「＋」ボタンをタップし、あしあとを残したい場所を選びましょう。絵文字を選んでメッセージを書いて投稿できます。

![how-to-use-3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954855/78e295b5-d96f-15e8-c813-81a7ff9b8db8.gif)

ログイン後、プロフィールの編集も可能です。設定画面から、ユーザー名やプロフィール写真を変更して、自分らしさを表現してください。

![how-to-use-4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954855/1f0dd545-0c51-3d28-ab8e-c971c869c577.gif)

# 技術周りの話

## 技術スタック

- フロントエンド
    - TypeScript / React Navive / Expo / Tamagui
- バックエンド
    - TypeScript / Hono / Prisma / S2 Geometry / OpenAPI
- インフラ
    - AWS （CDK、Lambda など）/ VPS(ConoHa) / PostgreSQL
- その他（CI/CD など）
    - Github / Github Actions

## 開発の方針

開発の方針は次の2点です。

- 早く実装してリリースすること
- コードをクリーンに保つこと

モチベーションは有限なので、**モチベーションの火を絶やさないため**にも、まずはリリースを目標にしました。
また、リファクタリングを極力避けるため、**MVPとして小さく作りながら、ソースコードをきれいに保つこと**を心がけました。

### ライブラリ・フレームワークの選定理由

ライブラリ・フレームワークの選定基準は、**慣れ親しんだものを使って学習コストを下げる**ことでした。以前から使用していた TypeScript を使うことで、**ほとんど学習せずにプロジェクトを開始できました**。また、フロントエンドとバックエンドで同じ TypeScript を使うことで、**タスクのスイッチングコストを下げられました**。

その他のライブラリの選定理由は以下のとおりです。

- [React Native](https://reactnative.dev)
    - ネイティブアプリを実装するためのフレームワークです
    - 慣れ親しんだ React を使うことで学習コストを下げたかった
    - 将来実装するであろう Android アプリの開発コストを下げたかったので採用しました
-  [Expo](https://docs.expo.dev)
    -  React Native の開発を簡単にするためのフレームワークです
    -  React Native を使う上でのデファクトスタンダードだったので採用しました
- [Tamagui](https://tamagui.dev)
    - ネイティブアプリで使える UI ライブラリです
    - なんとなく使ってみたかったから採用しました
- [Hono](https://hono.dev)
    - API を実装するための Web フレームワークです
    - Express よりも軽量で簡単に使えそうだったので採用しました
- [Prisma](https://www.prisma.io)
    - TypeScript から DB にアクセスするための ORM です
    - できるだけ安定していて資料が多いものを選びました
- [S2 Geometry](http://s2geometry.io)
    - 地理情報（緯度経度）を扱いやすくするためのライブラリです
    - [この記事](https://qiita.com/szit/items/e426ff118dd6884773aa)などがわかりやすく解説しています
- [OpenAPI](https://www.openapis.org)
    - API のインターフェースのコードやドキュメントを自動生成してくれる規格です
    - フロントエンド・バックエンド間の通信のためのクライアントを自動生成して楽をするために採用しました

### コードをきれいに保つために

フロントエンドとバックエンドの両方で、ドメイン駆動設計とオニオンアーキテクチャを採用し、秩序あるコードを書けました。

ドメイン駆動設計により、**重要なロジックを一箇所に集約し、可読性が向上しテストもしやすくなりました**。オニオンアーキテクチャを採用したことで、**DB などのコードを抽象化して隠蔽し、余計なことを気にせずにロジックを実装できる**ようになりました。このため、コードの可読性が上がり、頭に収まる量で実装できています。

また、単体テストや結合テストを可能な限り書くことで、バグを減らし、リファクタリングがしやすい環境を整えました。

### AWS と ConoHa を併用する理由

AWS と ConoHa を併用した理由は、（1）慣れた AWS を使いたかったこと、（2）インフラのメンテナンスを減らしたかったこと、（3）Amazon RDS の料金が高いこと、の3点です。

AWS は個人開発には少し高めの料金設定です。特に **RDS は最低限でも月5000円**ほどかかります。まだ収益が見込めないサービスに毎月5000円の出費は痛手です。そこで、DB だけ ConoHa を使うことにしました。**ConoHa は月500円程度なので、これで大幅にコストを節約**できます。

AWS の Lambda や API Gateway は**無料枠があり、ほぼ0円で利用**できます。API Gateway の100万リクエストまでの無料枠も、個人開発では十分です。

# 成功したところ・失敗したところ

## 成功

**Ashiato_** をリリースできたことは大きな成功です。これまでにもサービスを構想し、実装に取り組んできましたが、**途中で挫折したことが片手では数え切れない**ほどあります。

また、好きなように設計・実装することでモチベーションを維持できたのも良かった点です。バックエンドで関数型ドメイン駆動設計を行ったり、フロントエンドでドメイン駆動設計を採用するなど、自由に挑戦できたことで得た学びも大きかったです。

社会人として働いていると、勉強した技術を自由に使える機会は少ないと思います。実際に手を動かすことで、その技術のメリット・デメリットや自分の理解していなかった点などが明らかになり、学びは大きかったです。

## 失敗

ネイティブアプリの性質を見誤り、**サービスを再設計して 1 ヶ月ほどリリースが伸びてしまった**ことは痛手でした。ネイティブアプリの開発が初めてだったので、アプリの審査を初めて経験しました。**ユーザーが投稿を通報・削除・ブロックする機能は必須**だということを審査で初めて知りました。

開発当初は **Ashiato_** の全ての機能をアカウント登録なしで使用できるようにしていました。
しかし、通報・削除・ブロック機能は、アカウントと投稿が紐づいていたほうがやりやすく、アカウント登録を必須に要件を変更しました。将来的にもアカウント登録機能は作る予定だったので、リリース前に実装してしまうように舵を切りました。



# おわりに

**Ashiato_** はまだまだスタートしたばかりの小さなアプリですが、皆さんの力でどんどん成長していけたら嬉しいです！

「こんな機能があったらいいな」「ここにバグがあるよ」といったフィードバックをどんどんお寄せください。あなたの声が、次のアップデートを作る原動力になります。

開発過程や新機能の情報は [Note](https://note.com/cybako/) や [X（旧Twitter）](https://x.com/cybako2)にも載せているのでフォローお願いします！