🛠️

ぼくのかんがえた、さいきょうのReact Nativeテンプレート

4 min read

この記事は鈴鹿高専 Advent Calendar 2021の20日目の記事です

🎉はじめに

Androidアプリケーション開発を始めて半年のRe-taroです。

クロスプラットフォームにしないのならKotlinやJavaで書けよという声をよく聞きますが、
私はもともとReact派生のフレームワークをぶりぶりしていたので、
React Nativeを採用しました。
とても気に入ってるのですが、最近は、
毎回毎回自分にあったリポジトリにするのがめんどいなぁと感じるのです。
そこでテンプレートリポジトリを建ててどうせなら、npmパッケージにして
react native initで使えるものにしようと考えました。

👔リポジトリ

🚧WIP🚧このリポジトリは開発中です。申し訳ございません。

https://github.com/Re-taro/rn-template-re-taro

🔧作成環境

派閥が分かれると思いますが筆者はいつかpnpmを触りたいと思いつつ
ずっとyarnを使っています。今回もyarnです。

またそれぞれのバージョンは以下です。
今回のテンプレートはArch Linux上で作成されていますがWindowsでの動作を確認しています。

対象 version
node 16.13.0
yarn 1.22.17
react-native 0.66.4

🚀ディレクトリ構成

今回私が作成するディレクトリ構成はだいぶ思想が強いのでご注意ください

/src
┣__tests__/
┃ ┗mocks/
┃   ┗mocks.ts     # recoilをモックしています。
┣assets/
┃ ┣fonts/         # フォントを置きます。
┃ ┗images/        # 画像を置きます。
┣components/
┃ ┣atoms/         # 可能な限り最小のコンポーネントをここに置きます。
┃ ┣molecules/     # atoms同士を用いて作った再利用可能なUIをここに置きます。
┃ ┗organisms/     # molecules同士を用いて作った複雑なインターフェースをここに置きます。
┣containers/      # タブやサイドバーなど共通するコンテナベースのUIをここに置きます。
┣hooks/           # カスタムフックスなどをここに置きます。
┣navigations/     # ナビゲーションコントローラーをここに置きます。
┣screens/         # コンポーネントを用いて作成したスクリーンをここに置きます。
┣store/
┃ ┣atoms/         # recoilにおけるatomをここに置きます
┃ ┗selectors/     # recoilにおけるselectorをここに置きます。
┣styles/          # CSSにおけるユニバーサルセレクタとなり得るstyleをここに置きます。
┣themes/          # フォントサイズなど統一すべき情報をここに置きます。
┣types/           # 再利用する型定義をここに置きます。
┣utils/           # 再利用可能なロジックやメソッドをここに置きます。
┗App.tsx          # アプリのルートファイル(厳密に言うと違う)

それぞれのディレクトリに置かれているindex.tsでエクスポートをしています。このほうがインポートがスッキリしておすすめです。

🏗️含んでいるライブラリ

方針は私がよく使っているライブラリをまとめたリポジトリとしたいので
インストールしたらすぐに開発がスタートできるようにしています。

Storybookは設定がめんどくさいので含めていません。(設定できた方、PR投げてください🙏)

React Native

そもそもなぜ、IonicなどではなくReact Nativeなのかというと、
FacebookMeta製なのでサポートが手厚く(と思っていた時期が私にもありました)、
採用事例も多いからです。

v0.60~では動作も安定しており、極めればNativeコードと同等のパフォーマンスを生み出すことができます。

https://reactnative.dev/

TypeScript

人権です。もちろん個人開発ではJavaScriptで書くのもいいと思います。
しかし型がある安心感を覚えてしまうと、もう戻れません。

https://www.typescriptlang.org/

ESLint/Prettier

私の中ではこれも人権だと思います。
先日友人や先輩とHack U Kosenに出場したのですが、
私の友人のコーディングがとても個性的で、
ESLintに度々引っかかっていたのですが、
それらをすべて直したコードはとてもきれいだったので、
ぜひ導入しましょう。

https://eslint.org/

https://prettier.io/

Jest

個人開発だとしても、コードの品質を落とすことのないようにテストコードは書きましょう。
私はスナップショットテストしかできませんごめんなさい。

https://jestjs.io/

React Navigation

React Nativeでの画面遷移というと、React NavigationReact Native Navigationがあります。
私が毎回React Navigationを採用しているのには理由があります。
React Native Navigationは

React Native Navigation provides 100% native platform navigation on both iOS and Android for React Native apps. The JavaScript API is simple and cross-platform - just install it in your app and give your users the native feel they deserve. Ready to get started? Check out the docs.

とあるように、ハイパフォーマンスを保証する代わりに、
OS側のコードを書き換えたりしないといけないため、
私にはとてもではありませんが、レベルが高すぎると感じるため採用していません。

https://reactnavigation.org/

NativeBase

React Nativeで採用できるUIライブラリは様々とありますが、私があえてNativeBaseを採用する理由は唯一つです。
私はWebフロント開発の際は手放せないと言っていいほど、Chakra UIを採用します。
このTailwind CSSチックなスタイリングとカスタマイズの多様性が魅力です。

React Nativeで採用可能なUIライブラリの殆どは、
既に完成したUIコンポーネントを提供されるものなどで、
カスタマイズやUI作りにセンスが試されます。

その中でNativeBaseはChakra UIを彷彿とさせるカスタマイズのしやすさがあり、
余生はNativeBaseと共にすると決めました。

https://nativebase.io/

React Native vector icons

ここは完全に好みです。
他にいいライブラリがあったら教えて下さい。

https://oblador.github.io/react-native-vector-icons/

React Native MMKV

React Native MMKVは今年の2月にリリースされた、MMKV
React Nativeで簡単に使用できるようにした、ストレージライブラリです。
React Nativeのストレージライブラリと言えば、React Native Async Storageがありますが、
それと比べて、とてもパフォーマンスが高いです。

https://github.com/mrousavy/react-native-mmkv/

Recoil

まずみなさん、コンポーネントを跨いだ変数を使うのに、propsのバケツリレーしてませんか?
余談ですが、私の得意技はオレオレアーキテクチャです。

状態管理といえば、みなさんが想像するのはきっとReduxでしょう。
しかしあえて私がRecoilを使うのにも理由があります。
それはRecoilのアプローチがアプリケーションの状態を有向グラフで表現する。という点です。

もっとも違う点として、
ReduxにおけるStateは一つの巨大なプレーンオブジェクトですが、
RecoilにおけるStateはたくさんの小さなAtomという点。
があげられます。

他にもありますが、私は特にこの点に惹かれました。

https://recoiljs.org/

✨まとめ

入れただけの状態で完璧に動くことを保証できるように頑張ってます。
振り返ってみるとかなり思想が強いなと言う印象です。
完成したらぜひ皆さん使ってくださると嬉しいです。
最後まで見てくださりありがとうございました!

Discussion

ログインするとコメントできます