スマホアプリの作成に参考になったサイト一覧【React Native + Expo】

追記(2022年3月)

2022年になってもまた参考になった記事が幾つか見つかったのでシェアしておきます。

始めに

最近、自分が所属する学生向けにスマホアプリを作成しました。構成としてはTwitter API, Google Cloud Platform, Google Spreadsheet API, React Native, Expoです。

周りにReact Native, Expoについて明るい方がいないので完全に独学になりました。が、その分2021年現在でも問題なく参考になるサイトを把握できたのと、お気に入りバーが狭くなってきたので自分の備忘録がてらシェアしときます。

Twitter APIについて

今回作成したアプリではTwitter APIとしてuser_timelineAPIとoEmbedAPIを用いました。それぞれ下記リンクの通りです。

通常、Twitter APIを利用してツイートを外部のアプリケーションで表示する際にはTwitterの埋め込み機能が推奨されています(Twitterの利用規約なども全て満たせています)。

これはwebアプリケーションなどではそのままhtmlのタグを読み込むだけなので簡単に実装できますが、スマホアプリ、しかもReact Native+ Expoだと、ツイートの埋め込みは面倒な手順となります。特に、Flatlist内にhtmlタグを埋め込むにはサードパーティのライブラリをがっつり導入することになったり、そもそもExpoのmanaged flowでは実装できない可能性が高いです(私には実装方法が分からなかった)。

そこでhtmlタグでの埋め込みを回避し、Twitterの利用規約や外部アプリでツイートを表示する際に必ず守らなければならないデザインの要綱を全て満たし、React NativeのViewやTextタグにスタイルを付けて実装しました。

ツイートを外部アプリで表示するためには下記の5~7番目などのTwitterの規約を守る必要があります。なかなか細かく決まっていますが根気よく読んで、違反箇所が無いように気を付けるしかかなさそうです。

  1. GET statuses/user_timeline - ユーザータイムラインを取得する
  2. 140文字以上のツイートを取得する - Qiita
  3. Twitter APIのユーザータイムライン(GET statuses/user_timeline)をデータベースに切れ目なく保存する(その4~since_idとmax_idの組み合わせについて) – エコテキブログ
  4. TwitterAPI でツイートを大量に取得。サーバー側エラーも考慮(pythonで) | コード7区
  5. Display requirements – Twitter Developers | Twitter Developer
  6. More on restricted use cases – Twitter Developers | Twitter Developer
  7. 開発者契約 − Twitter開発者 | Twitter Developer

React Nativeの各ライブラリについて

全体に共通する基礎部分である、RNの構文についてよくまとめられています。

Flatlist関連

先ほど出てきたFlatlistですが、いくつかオプションを付けることが可能です。特に「スクロールした際に最新データをロードする機能」や「FlatList内で検索バーを挿入する場合の注意点」などについてはとても参考になりました。

また、私が書いたこちらの記事でもそうですが「FLatList内でチェックマークを利用する」という実装はかなり面倒です。

その他、FlatListのパフォーマンスチューニングについても幾つか非常に参考になる記事がありました。

AsyncStorage関連

Twitter APIを実行してFetchしてきたデータの管理・永続化にはAsyncStorageを利用しています。また、データの書き込み・呼び出し・代入はuseStateuseEffectを用いています。

これらの使い方は下記リンクを参照しました。

  1. リロードしてもデータを保持するためには「localStorage」 - Qiita
  2. FileSystem - Expo Documentation
  3. AsyncStorage official Menu
  4. AsyncStorage - Expo Documentation
  5. TypeScriptでReact Hooksに入門するチュートリアル - Qiita
  6. React useEffectを理解する | アールエフェクト
  7. CodeVsColor text input clear button
  8. React Nativeで遊んでみよう - 其ノ弐:react native storage でデータを保存 - Photosynthesic blog

また、近いうちにRealmへの移行も考えているため、下記の記事はとても参考になりました。

View, style関連

ViewStyleSheetについてです。

  1. SafeAreaView - Expo Documentation
  2. レイアウトを整える【これからはじめるReact Native】 - bagelee(ベーグリー)
  3. Layout with Flexbox

useContextについて

例えば親ファイルで定義された状態変数を子コンポネントから変更する、みたいなことをやるときにすごく参考になりました。

JavaScriptでのデータ整形などについて

JavaScriptを触り始めてたころはネタでも何でもなくフィーリングでコードを書いてました。ところが1年間個人開発をしているとやはりパフォーマンスチューニングの機会も出てくるので、その都度JS自体の仕様についても勉強していました。

連想配列や単純な配列内を探索する際にどういった方法でパフォーマンスチューニングを行うべきなのか、下記のサイトに詳しく書かれています。

JSX内での三項演算子についてはこちらが参考になりますた。

最後に

現在進行形でワイ史上初のスマホアプリのアップデートも行っています。

なのでこのページのリンクもアプリのアップデート共に増えていくと思います。乞うご期待(白目)