はじめに
ReactNativeでフラッシュ暗算アプリを作成しました。
その技術や感想等を備忘録としてだらだらと書いていきます。
プロモーションサイトも用意したのでぜひダウンロードしてください！
androidはまだ審査中です。(コロナの影響で7日以上かかるらしいです。Appleは翌日でした。)
ちょうど1週間後くらいに審査がおりました！
多面！フラッシュ暗算
使った技術
- ReactNative(React Hooks)
- Expo
- Typescript
- Firebase
- Cloud Firestore
- Figma
ReactNative + Expo
ReactNative + Expo は、はじめてアプリを公開したい方にとって最適だと思います。
ざっと理由を挙げると、ホットリロードなので開発時のストレスが少ない、Reactと書き方がほぼ同じなのでフロントの勉強にもなる、クロスプラットフォームなので、もしAppleの審査に落ちてもAndroid、またはWebで公開できるという心理的安全を得れる(これ大事)、日本語の情報が充実してきている、といったところでしょうか。
今回のアプリでは他に、Typescript、React Hooks、Firebase、Cloud Firestoreを使いました。
ReactNativeのライブラリに関しては、前回作成した個人開発をしたので技術とマーケティングの観点からまとめるにまとめあるのとほぼ同じライブラリを使っています。
今回、新しく用いたのは react-native-elements くらいです。
Typescript
Typescriptは、インターンでモダンな開発現場ではTypescriptが使われていると知り、もっと自分で深めてキャッチアップしておきたいという理由と、単なる好奇心で使用しました。
propsが足りていない等のエラーを出してくれるのでバグを発見しやすくなってよかったです。
ただ、現段階ではanyでごまかしたところが多いのでこれからもっと詰めていこうと思います。
React Hooks
React Hooksで書いたのは、わざわざ古いclassコンポーネントで書く必要もないし、せっかくだからキャッチアップしておこうという理由で使用しました。
setStateで更新するのと比べ、useStateの、引数で更新する書き方が直感的で好きです。
useEffectの第二引数の空配列はいまだに理解できていません。
Firebase
Firebaseは、ユーザーを管理するのに使いました。
フラッシュ暗算ゲームにログイン機能は持たしたくなかったので、認証に関しては匿名認証を用いました。
匿名認証を用いると、ユーザーの情報が axbuAl9R6vhYdBejNH6WhvxHKJk1 のようなハッシュ値で管理されます。
Cloud Firestore
ユーザーのゲーム記録を管理するために、Cloud Firestoreを用いました。
匿名認証を使ったのでユーザーランキング機能が実装できていない状態ですが、ニックネームを設定して実装しようか悩んでいます。
Figma
Figmaはデザインツールです。
作りながら考える部分と事前に考えておく部分があるのでそこまで厳密に仕様は決めてから作るのではないのですが、デザインと思考を整理するために使っています。
イラストレーターとかもがっつりやろうと、ずっと思っているのですが、コードを書きたい欲にいつも負け続けています。
また、アプリを作りながら詰まったところをQiitaにアプトプットしました。
非同期を使う場面が多々あったのでとてもいい勉強になりました。
【Javascript】オブジェクト、配列の分割代入で勘違いするポイント
【async/await版】JavaScriptでループ中にスリープしたい。それも読みやすいコードで
【React Hooks】useEffectで無限ループを解決する
【Javascript】ランダムな整数を桁指定で作る方法
【expo】ios,androidのストア公開で詰まったメモ
技術以外について
前回のアプリ
ReactNativeでアプリを作るのは今回で2回目で、前回は日本統計 | 文系学生と学ぶ社会統計学というアプリを作成していました。
このアプリは、政府の統計サイトe-Statからデータを取ってきて、それをグラフでデザインして描画するといったものでした。
デザインを少し変えようと思って審査に提出すると、まさかのrejectを食らったのでそこからしばらく放置している状態です。
今ようやく第三者の目線から自分のアプリを見れるようになって、自分でこのアプリは使わねーなーと思っています。
統計アプリにしては情報量が少なすぎるし、わざわざアプリでインストールする必要もないからです。
そこを克服するだけのデータ量と企画を今考えているのでまだ諦めていません。
「日本統計」でAppStoreを検索すると1番目に出てくるのがモチベーションになっています。
e-StatのAPIを触るのは面白くて、派生してe-stat-populationというnpmパッケージを出したりしました。
詳細は、まずは簡単なnpmパッケージを半日で作ってみように載っけています。
相関関係とかを調べられたりグラフを重ねられると面白いのかなーと思っています。
この、面白いかなーというのが重要で、せっかく作るのだったら面白いものをこだわって作りたいなと日々思って活動しています。
ヒットしなくても何かしらの価値は後から生まれてくるんですよ(たぶん)。
今回のアプリ
今回、多面のフラッシュ暗算アプリを作り始めたのは、昔、何かのテレビでやっていたのをちょっと思い出して、アプリであったら面白いなーと、ふと思ったからです。
ただのフラッシュ暗算アプリだと、独自性がないのでrejectされるのは目に見えているのですが、多面！という言葉を強調して世界で一つだとアピールしたら審査は通るだろうという推測の元、開発を始めました。
想定どおり審査は、無事に一発で通りました。
あと、前回のアプリと大きく異なるところは、ユーザーとの対話があるところです。
前回のアプリではただグラフを見せるだけでDBが必要なかったのですが、今回のアプリではユーザーの決定によってアプリの挙動を変えたり、ユーザーの記録を保存したりと、やることが前回と比べて高度で考える部分も多かったし、その分技術力も向上したと思います。
作った後の話
アプリが完成した後に肝心で難関なのはアプリの宣伝です。
僕自身になんのブランドもないので、Twitterで固定ツイートにしただけでは影響力は少ないです。
なので僕は自分が所属しているLineグループやslackのグループに投稿し、最大限社会に認知されるようにしています。
わかりやすく宣伝できるためにプロモーションサイトも用意しました。
jimboは無料でwixみたいに広告がトップに表示されないので、1枚だけのページを作るときは使っています。
れとるときゃりーさんみたいに開発者にブランドがあってSNSと連動したものを作ってバズらせるっていうのは本当すごいなーと思います。
以上、だらだらと書きました。
最近、ポートフォリオのためのポートフォリオを作るのではなく、商品をポートフォリオにしていきたいという思いが強くなってきたので、これからも商品レベルのものを日の目を見ることを空想しながら作り続けていきたいと思っています。
最後まで読んで頂きありがとうございました。