どんなアプリを作ったか
自動販売機の場所と売っている飲み物を確認できるアプリを作ってみました。
今回は作ったアプリを初めてリリースまで持っていったということで、
- このアプリ作成への思い
- 作成している時の気持ち
- 気づきや今後に生かすこと
を本記事にまとめておこうと思います。
最初に言っておきますが、外部公開してみたい！という思いが強く、色々とガバガバ仕様（後述します）になっています…
機能概要
まずはこのアプリ自体がどういう機能を持っているかについて話していきます。
左下の画像はアプリの初期画面です。
初期画面では自動販売機が登録された場所に青のピンたてがされています。
マップをスクロールしたり、拡大縮小することができます。
また、初回起動時やログインセッションが切れた時は「自販機を登録」ボタンを押下することで次の画面に遷移します。
右下の画像はログイン画面です。
一覧を見ることは誰でもできるのですが、自販機を登録、更新する際はGoogleAuthによる外部サービスログインが必要になっています。
左下の画像は新規登録画面その１です。
ログインユーザのみ登録画面に遷移することができます。
その１では登録する自販機の場所をピン立てによって決めることができます。
ピン立ての位置はマップの中央に立てられているため、マップをスクロールすることで中央にあるピン立ての位置を変えることができます。
自販機の場所が決まったら、右下の「次へ」ボタンを押下することで次の画面に遷移します。
右下の画像は新規登録画面その２です。
その２では自販機にて販売されているジュースを登録することができます。
チェックリストにて選択されたジュースは上記のテキストボックス欄に表示されます。
選択後は右下の「登録」(画像では見えないですが…)ボタンを押下して新規登録が正常終了します。
左下の画像は上記にて登録された後の一覧画面です。
登録処理によってピンが一つ増えており、処理が正常に終了していることが分かります。
右下の画像は上記にて登録されたピンをクリックした時に遷移するジュース一覧画面です。
選択されたピンに登録されているジュース一覧を表示しています。
また、「編集」ボタンを押下することで、ピン立ての場所と販売しているジュースの一覧を変更することができます。（画面は登録時と同じです）
使用した技術・作成期間
使用した技術は以下の通りです。
- フロント：React (hook,axios)
- バックエンド：Django (DRF)
- インフラ：Heroku (postgresSQL), Firebase
- その他ツール：Github（コード管理）, Leaflet（地図サービスフレームワーク）, MaterialUI（スタイルフレームワーク）
技術採用の意図に関して、そもそもReactを使って何か外部サービスを作ってみたいという思いでした。
また、Leaflet(Google Mapのオープン版のやつ)も最近存在を知り、アプリに組み込んだら結構いけてるアプリが作れるのでは！？！？という思いもありました。
Leafletに関してはこちらもご参照ください↓
他のサービスに関しては如何に早く開発できるか、を考えて選定しました。（この時の精一杯です（笑））
作成期間は2022/3~2022/5のAM6:30 ~ AM8:45、週５日稼働ほどです。
どうしてこのアプリを開発したかったのか
これまでにないアプリが作成できると思った
私は夜中に近くの自販機で飲み物を買って飲むことが好きです。
ある時、「えーっと、ポカリ缶のある自販機ってどこだっけ？？」「あのレモンスカッシュってどこだっけ？！？」と思った時にこんなアプリがあったら便利なのではと思い、このアプリを作ってみようと思いました。
他にこんなアプリを作っている人はいるのか？と思い
「自販機 一覧 アプリ」と検索したところ似たアプリが無く、この世にないアプリが作れるかも！！！
と気持ちを昂らせていました。
ですが、「自動販売機 一覧 アプリ」と調べれば似たようなアプリが出てくるのを最近知りました（笑）
これまでにないアプリができると思ったら、元々存在していたのです。。。
フロントからインフラまでを一気通貫した成果物が作成してみたかった
React単体のアプリ自体はローカルでやったことがあったのですが、そんなサービスって世の中にあるわけないよな…（笑）と思っていました。
１つのアプリをフロントからインフラまで作る流れ自体はQiitaの記事などで知ってはいましたが、手を動かしたことが無いため「知ったかぶり」状態にある気がしました。
百聞は一見に如かずということで自ら経験してみたいと思い、本アプリを作成してみました。
達成可能な目標を作りたかった
私自身、「新しいことに触れて成長していく」人生でした。
今はエンジニアとして成長したいという思いはありますが、言語ベースではあまりにも学習範囲が広すぎて新しいことに触れる前に飽きてしまうのではないかと感じました。（Reactのドキュメントを全部覚えるなんて耐えられない！！！）
そこで
何かアプリを作るという目標なら、その完成がゴールとなり１歩ずつ歩めるのではないかと思いました。
達成可能な目標が立てられた瞬間から、それを達成するのためにやるべきことを考えることができ、時間の確保のため、平日の朝６：３０に起きて出社前までの時間は開発にあてていました。
目標立てることって本当に大切だとおもいます d(￣ ￣)
作ってみて楽しいと思えたこと
アプリが形になっていく過程
アプリ完成のために機能ごとで１つずつ作っていくわけですが、その１つ１つの完成が楽しくてしょうがなかったです。
簡単に構築できるものもあれば、期待した動作をせず何時間も調べてようやっと構築できたものもありました。
期待した動作をせず何時間も調べたもののトップ３は以下の通りです。
これらを解決した時は気持ちよかったですね（笑）
- DRFでM2Mのリレーションを持ったテーブルの新規、更新処理の記述方法
- ReactHookのuseContextの値を他のコンポーネントから更新する方法
- フロントとバックエンドを持ったアプリをHerokuにデプロイする方法
１つ１つ見ていきます。
１つ目は「DRFでM2Mのリレーションを持ったテーブルの新規、更新処理の記述方法」です。
Googleで検索しても紹介している記事が無いことやDRF自体を初めて触ることもありかなり苦労しました。
その分ドキュメントを読んで理解するということを体験し、試行錯誤する機会を得ることができました。
２つ目は「ReactHookのuseContextの値を他のコンポーネントから更新する方法」です。
これは探したら記事が見つかったのですが、Hookってこんなもんかと思ってしまう節がありましたね。。
というのも、どのコンポーネントからゲット、セットできるのはいいのですが、いちいちuseContextの構文を定義しないといけないというのが、若干めんどくさいなと思いました。（Hook使わせてもらっているやつが何言ってんだ！！！という話は置いといて（笑））
３つ目は「フロントとバックエンドを持ったアプリをHerokuにデプロイする方法」です。
デプロイしたことが無かったので、フロントとバックエンドを同じサーバーに入れておくという発想自体が思いつかなく、調べるのにかなり苦戦しました。
これに関してはReactで開発していて本当によかったと思う瞬間がありました。
というよりReactという”今流行りの”フレームワークを選択しておいてよかったなと思いました。
ReactとDjangoで開発していたからこそコミュニティが盛り上がっていたわけで、参考記事のようなまんま同じような記事に出会っていたわけで、例えばC#で開発していたらこの方法には辿り着けなかったと思います。（ごめんなさいC#さんm(__)m）
新しいことが次々降ってくるため、自分の知的好奇心がくすぐられ続ける
MaterialUIというスタイルフレームワークを使って、今時っぽいUIを作ってみたり、DjangoでAPIを作ってみたりと今までやったことの体験ばかりできたので、非常に楽しかったです。
またそれらをインプットで終わらせることなくアウトプットをすることも意識していたため、ブログの投稿頻度も上がり数値化のあやではあるかもですが、投稿数が増えていくことに喜びを覚えていました（笑）
アプリを作っている時の気づき
自販機アプリは他にあった！！（笑）
自販機アプリは他にありました（笑）
リサーチ不足でしたね。。
ですが、他と差別化することでこちらのアプリを使ってもらえる方法もあると思います。
例えばですが、現在はUIを極めたアプリが多いと思います。（メモ帳やカレンダーや家計簿など）
ですので、そのトレンドに乗っかればワンチャンあるのか！？！とか思ったりしています（笑）
他には、自販機のアプリの登録数を他のアプリよりも増やすことだと思います。
登録を増やす仕組みとして、登録してくれたらスタンプが溜まりたくさん集めたらギフトカードと換金できる的な仕組みをつくり、
お金を集める方法としてGoogleの広告費や自販機を設置している人・ジュースの会社の人たちに交渉して出資してもらうとかですかね（笑）
今はFlutterを勉強しているため、スマホアプリにて実装してみても面白いかもしれません！
実装がガバガバ
APIについてもっと最初から勉強しておけばよかったが、私の性格上やりたいことをやる！という感じです。
APIを実装してから気づいたのですが、セキュリティがガバガバでした。
というのもAPIへ誰でもアクセスできる状態を作ってしまいました（笑）
作っている最中は、モノができていくことが楽しみでしょうがなく全く意識していませんでした。
セキュリティのこと自体を考えながらアプリを作ったことがなかったので、今回のように「APIを作る時はセキュリティを意識する必要がある」ということを肌身で理解することができたので良かったです。
流行っている技術で開発していくことの大切さ
これは分からないことを調べている時に実感したことです。
私は仕事上ではC#を使っています。
分からないことを調べた時に検索にヒットする記事の投稿日が古く、バージョン違いによりその実装では解決できないことがしばしばありました。
ですが、今回ReactやDjangoでの開発は分からないことを調べた時に検索ヒットする記事の投稿日が概ね３年以内のものが多く、回答へのアプローチ方法もかなり明確に書いてある印象でした。
最近の記事が書かれているということはコミュニティが活発ということでもあり、単純ではありますが開発している人も多いというわけで凄いエンジニアがいる可能性も高くなると思っています。
そんな人のコードをどんどん真似して成長できるよう、これからも流行りの技術を追っかけていこうと思います。
改良点
これは色々あります。
- アプリロード時に取得された位置情報をマップの中心に描画できるようにする
- Herokuでの実装では無く、AWSの導入を考える
- 検索システムの導入
- 自販機登録の信頼性を多数の人で補完し合いながら高めていく（ブロックチェーン的な）
- 自販機位置登録時のスタンプ制度導入
- スマホアプリへの転用
さいごに
長々と話してきましたが、自分で考えていたアプリが完成して、外部URLアクセスして表示される瞬間って何事にも変えがたい喜びがありました。
と同時にもっと他のアプリも作ってみたいと思えるようになりました。
この勢いで新しいアプリを作る目標を立てれば、モチベも高まり知識を拡充できるといういいループに入れるような気がしてきました。
完成度はなんであれ、形にすることで多くの気づきを得ることができたことが次への繋がるのではないかと思っています。
皆さんも個人開発してみてはどうでしょうか？？
終わり
コメント