スマホアプリの作成に参考になったサイト一覧【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_timeline
APIとoEmbed
APIを用いました。それぞれ下記リンクの通りです。
通常、Twitter APIを利用してツイートを外部のアプリケーションで表示する際にはTwitterの埋め込み機能が推奨されています(Twitterの利用規約なども全て満たせています)。
これはwebアプリケーションなどではそのままhtmlのタグを読み込むだけなので簡単に実装できますが、スマホアプリ、しかもReact Native+ Expoだと、ツイートの埋め込みは面倒な手順となります。特に、Flatlist内にhtmlタグを埋め込むにはサードパーティのライブラリをがっつり導入することになったり、そもそもExpoのmanaged flow
では実装できない可能性が高いです(私には実装方法が分からなかった)。
そこでhtmlタグでの埋め込みを回避し、Twitterの利用規約や外部アプリでツイートを表示する際に必ず守らなければならないデザインの要綱を全て満たし、React NativeのViewやTextタグにスタイルを付けて実装しました。
ツイートを外部アプリで表示するためには下記の5~7番目などのTwitterの規約を守る必要があります。なかなか細かく決まっていますが根気よく読んで、違反箇所が無いように気を付けるしかかなさそうです。
- GET statuses/user_timeline - ユーザータイムラインを取得する
- 140文字以上のツイートを取得する - Qiita
- Twitter APIのユーザータイムライン(GET statuses/user_timeline)をデータベースに切れ目なく保存する(その4~since_idとmax_idの組み合わせについて) – エコテキブログ
- TwitterAPI でツイートを大量に取得。サーバー側エラーも考慮(pythonで) | コード7区
- Display requirements – Twitter Developers | Twitter Developer
- More on restricted use cases – Twitter Developers | Twitter Developer
- 開発者契約 − Twitter開発者 | Twitter Developer
React Nativeの各ライブラリについて
全体に共通する基礎部分である、RNの構文についてよくまとめられています。
Flatlist関連
先ほど出てきたFlatlistですが、いくつかオプションを付けることが可能です。特に「スクロールした際に最新データをロードする機能」や「FlatList内で検索バーを挿入する場合の注意点」などについてはとても参考になりました。
- React Native Official Menu about Flatlist
- 【ReactNative】FlatListの基本の使い方 - PUROGU LADESU
- React Native リストの一番上の更に上までスクロールしたら最新のリストをロードする - Qiita
- How to Add a Search Bar in a FlatList in React Native Apps
- 【ReactNative】FlatListの検索バー - PUROGU LADESU
- GitHub - [FlatList] [Android] Issue with TextInput element in the bottom of a FlatList
また、私が書いたこちらの記事でもそうですが「FLatList内でチェックマークを利用する」という実装はかなり面倒です。
- How to render check box inside flatlist
- How to check individual item in FlatList with checkbox in react native?
その他、FlatListのパフォーマンスチューニングについても幾つか非常に参考になる記事がありました。
- Zenn - React NativeでFlatList/SectionListを使うときに実施したい性能改善策
- Zenn - React Native + Expoでアプリを作ってApp StoreとGoogle Playで公開した
AsyncStorage関連
Twitter APIを実行してFetchしてきたデータの管理・永続化にはAsyncStorageを利用しています。また、データの書き込み・呼び出し・代入はuseState
やuseEffect
を用いています。
これらの使い方は下記リンクを参照しました。
- リロードしてもデータを保持するためには「localStorage」 - Qiita
- FileSystem - Expo Documentation
- AsyncStorage official Menu
- AsyncStorage - Expo Documentation
- TypeScriptでReact Hooksに入門するチュートリアル - Qiita
- React useEffectを理解する | アールエフェクト
- CodeVsColor text input clear button
- React Nativeで遊んでみよう - 其ノ弐:react native storage でデータを保存 - Photosynthesic blog
また、近いうちにRealm
への移行も考えているため、下記の記事はとても参考になりました。
View, style関連
View
とStyleSheet
についてです。
- SafeAreaView - Expo Documentation
- レイアウトを整える【これからはじめるReact Native】 - bagelee(ベーグリー)
- Layout with Flexbox
useContextについて
例えば親ファイルで定義された状態変数を子コンポネントから変更する、みたいなことをやるときにすごく参考になりました。
JavaScriptでのデータ整形などについて
JavaScriptを触り始めてたころはネタでも何でもなくフィーリングでコードを書いてました。ところが1年間個人開発をしているとやはりパフォーマンスチューニングの機会も出てくるので、その都度JS自体の仕様についても勉強していました。
連想配列や単純な配列内を探索する際にどういった方法でパフォーマンスチューニングを行うべきなのか、下記のサイトに詳しく書かれています。
JSX内での三項演算子についてはこちらが参考になりますた。
- 【React Native】 JSX内で三項演算子を使って「連続表示させないタグ」と「連続表示させるタグ」を包括する
- Zenn - React Native の JSX 内で && 演算子を使ったらエラーに怒られた
最後に
現在進行形でワイ史上初のスマホアプリのアップデートも行っています。
なのでこのページのリンクもアプリのアップデート共に増えていくと思います。乞うご期待(白目)