React Native　コーディングガイド

注意すべきポイント

Google Admob の設定ファイルを本番用・テスト用で変更する
- ファイルAdmob.tsx > adUnitID={adUnitID}→adUnitID={testUnitID}
- テスト用でうっかり本番用広告をタップすると、広告の配信を停止されることがあるらしい？

頻繁に使うサイトURL

Expo Notification Tool （通知）

デバイスに通知を簡単に送れるツール

Push Notification Tool — Expo

Testsendingpushnotificationstoyourdevice.

参考URL

React Native Direactory（ライブラリ一覧で人気度最終アップデート日Expo対応か等わかる）

https://reactnative.directory

npm trends

npm のパッケージごとのダウンロード推移の比較や、最終更新日やスター数とかがわかる

npm trends: Compare NPM package downloads

WhichNPMpackageshouldyouuse?Comparepackagesdownloadstats,bundlesizes,githubstarsandmore.Spottrends,pickthewinner.

synk Advisor

ライブラリのメンテナンス頻度や脆弱性などがわかる

Choose the best package - Snyk Open Source Advisor

Findthebestopen-sourcepackageforyourprojectwithSnykOpenSourceAdvisor.Exploreover1millionopensourcepackages.

Yarn（上記には載ってないライブラリもあるため。ただし並べ替えとかはできん。

Yarn packages

Fast,reliable,andsecuredependencymanagement.

Tips

【検証】React.FCとReact.VFCはべつに使わなくていい説

こんにちは、クレイの正岡です。コロナ禍が始まってから小学生時代以来のゲーム生活を送っています。ゲームボーイと呼んでください。さて、今回はReact×Typescriptでコードを...

子要素をいじらない関数コンポーネントの型定義にはVFCを使うことがコミュニティでは推奨されている。

React TypeScript Cheatsheets | React TypeScript Cheatsheets

ReactTypeScriptCheatsheets

↑ TypeScript（以降TS）でReactを使うのにすごく参考になると評判のドキュメント（アップデートも頻繁）

プレイグラウンド - TypeScriptとJavascriptを探求するためのオンラインエディタ

プレイグラウンドで、TypeScriptとJavascriptのコードをオンラインで安全に共有できる形で書くことができます

TSをWebで試せる

フックに関するよくある質問 – React

ユーザインターフェース構築のためのJavaScriptライブラリ

TypeScript解読アシスタント（わからないコード部分を選択するだけで、その部分の文法や言語機能名が調べられる。

TypeScript解読アシスタント | TypeScript入門『サバイバルTypeScript』

TypeScriptのコードの意味を調べられるツールです。

急なTypeScript案件🔥最初の30日間に使い倒したい「コードリーディング支援ツール」 - Qiita

この投稿では、「TypeScriptの文法や用語がよく分からない」という問題を解消してくれそうなツールを紹介します。勉強しながらの見切り発車最近はTypeScript未経験でも、TypeScri…

Hooks FAQ

https://overreacted.io/ja/a-complete-guide-to-useeffect/

UseEffect完全ガイド

React Native Express

Theall-in-oneguidetoReactNative

公式ドキュメントより軽い（英語）

Firebase Cloud FirestoreのTransactionについて考える - Qiita

みなさんこんにちは@1amageekです。年末からいろいろやって、ひと段落したのでまとめました。…

Firebaseでデータの競合を防ぐ方法

2色を選んだら自動的に複数の中間色を作って、濁りのない美しいグラデーションを生成してくれるツール（RNではコピペでは使えない。要修正。）

CSS Gradient Generator

Friendlytutorialsfordevelopers.FocusonReact,CSS,Animation,andmore!

・コマンドを押した状態で関数をクリックすると定義した箇所に飛ぶ

・comand + shift + Pで、「シェルコマンド：PATH内に'code'コマンドをインストール」とすると、VSCodeでだけ起こる「zsh: command not found : ○〇〇」が解決することがある。

コーディングルール

関数はすべてアロー関数で記述すること
- コード補完： nfn または const 関数名 = anfn と打つ
- コンポーネント作成時は、rafce (React Allow Function Export Component)
npm ではなく yarn を使うこと
コードの整形はPrettierがやってくれるので空白や改行などは一切気にせずコーディングすること
VSC（VSCode）を開いたとき、TypeScriptをワークスペースのバージョンで使うかどうか効かれたら「承諾」をクリックすること（VSCのTSバージョンが適応されエラー出る）
NativeBaseを使うときは<NativeBaseProvider>タグで囲む（※親コンポーネントでProveiderタグ使っている場合、呼び出される子コンポーネントはNativeBase使っていてもProviderタグで囲わなくてもいい
変数・定数を定義する時には、なるべく関数スコープやブロックスコープで行い、スクリプトスコープは綺麗な状態にしておく(独習JavaScript@193）

Firestore編

マップ（オブジェクト）の特定のフィールドの値を更新したい場合は、"map名.field名": 更新したい値 にすること（map名: { field名: 更新したい値}にすると、map全体が左のに上書きされてしまう。

コマンド集

ターミナル

NPM

現在プロジェクトでインストールしているnpm（依存関係含む）のバージョンを確認する方法

npm list [パッケージ名]

> npm list color

/Users/haradaatsuki/Anything/RN/DreamCollector
├─┬ @react-navigation/material-top-tabs@6.0.6
│ └── color@3.2.1 // react-navigationが依存しているバージョン
└── color@4.2.0 // 自分がダウンロードしたバージョン

Expo

Tunnel 環境でexpo start する

=> yarn start --tunnel

※Tunnel オプション・・・外部ネットワークから接続可能にする
LAN環境では、ビルドしたPCとIPアドレスが異なるとアプリを起動できない。

エディター

コンポーネントを作ってくれる便利なスニペット

rnfe

==> 出力結果

import React from 'react'
import { View, Text } from 'react-native'

const App = () => {
  return (
    <View>
      <Text></Text>
    </View>
  )
}

export default App

エディター⇆ターミナル

command + shift + @ 
または 
command + `

Lint TS エラーを無視したい

参考https://blog.ojisan.io/eslint-ts-ignore/

// 次の行を無視
// eslint-disable-next-line  // @ts-ignore-next-line

// 同一行を無視
console.log("aaa"); // eslint-disable-line
fuga // eslint-disable-line ルール名

// ファイル単位で無視（トップに書く）
// eslint-disable  // @ts-nocheck

// ルール単位で無視する
/* eslint ルール名: 0|1|2 */

// ブロック単位で無視する
/* eslint-disable ルール名 */
hoge
fuga
/* eslint-enable ルール名 */
piyo

自分で定義した型であるかどうかの判定

const a = (item: Dream | Comment) => {
  
  // 型チェックの方法1
  if ("day" in item) { // Dreamにしかないプロパティが item に存在するか判定
    // このスコープ内では item は、Dream型として扱われる。
  }

  // 型チェックの方法2
  // https://zenn.dev/nekoniki/articles/d40acfd3c26583
  const isDream = (item: Dream | Comment): item is Dream => 'day' in item;  
  // is を使うことで、unknown 型や、any 型、Union 型の型の絞り込みを行えます。（今回はユニオン型の絞り込み）
  // isDream の結果が true の場合は引数で受け取った変数の型は、Dream 型であるとコンパイラに教えることができます。https://qiita.com/ryo2132/items/ce9e13899e45dcfaff9b

  if (isDream(reportedItem)) {
    // このスコープ内では item は、Dream型として扱われる。
  }

}

Expo Go

`Cmd+Ctrl+Z`でメニューを開く

動作がおかしいとき系

EXPOの挙動がおかしい

$ watchman watch-del-all && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start --reset-cache

【iOS/Android】ReactNativeでよく使うキャッシュ削除系コマンド一覧

ReactNativeでiOS/Androidアプリを開発する際に良く使うコマンドを紹介・解説しています。

最後にキャッシュ削除

rm -rf /tmp/metro-*

デバッグ

console の便利な書き方集

console.log(); しか使えなかった自分へ。。。 - Qiita

この記事についてWebエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。そんな脳筋な過去の自分に教えて...

テスト

テストの目的と、RNで行うテスト内容

設計者の意図通りに機能が実現されているかの確認
新規に追加した全ての処理に破綻がないかの確認
既存の機能を破壊していないかの確認
モジュラリティの確保

1は、シミュレータでの確認
2は、TypeScriptである程度担保
4のモジュラリティは、不要な他からの依存が切れていて、他からの境界が自明になっている（モジュールとして分離されていて、独立性が高く扱いやすい）ということで、
例えばStorybookを使うことがViewのモジュラリティを確保（Viewは見た目の責務だけ果たす）することにつながる。
3は、Storybookにストーリー登録したコンポーネントのスナップショットテストを自動的に行う機能ある。
「スナップショット」... 既存の UI のスナップショットを DOM テキストや画像ファイルで取得しておいて、比較して変更があった場合にアラートを上げてくれるもの。これを利用すれば、テストコードを記述することなくうっかりView を書き換えたりしていないかを確認することができる。

結局やること

ロジックのテストはちゃんとやる
- APIハンドラなど、ユニットテストを用意して実施（Jest + react-native-testing-library）
コンポーネントに関しては、Storybookに登録したPresentional Componentのスナップショットテストを行う（Storybook(storyshots)+Jest　→ Jest + react-native-testing-library）（設定が複雑でかつ動かんため）
全体的な動作の保証のために自動化されたE2Eテストを正常系に限って行う（「Detox」or 「Expo Web + Cypress）

ロジックテスト（Jest, react-native-testing-library）

ドキュメント

React Nativeアプリをテスト · Jest

Facebookでは、Jestを使用してReactNativeアプリケーションをテストします。

React Native Testing Library

Helpsyoutowritebettertestswithlesseffort.

GitHub - testing-library/jest-native: 🦅 Custom jest matchers to test the state of React Native

🦅CustomjestmatcherstotestthestateofReactNative-testing-library/jest-native

https://docs.expo.dev/guides/testing-with-jest/

Setup | Testing Library

Settingupyourproject

参考資料

@testing-library/react-native でスナップショットテスト | Honmushi blog

@testing-library/jest-native を使って、React Native のテストをもっと便利にする | Honmushi blog

react-native-testing-libraryをexpoで使ってみる - Qiita

RNではないが、ユニットテストの参考になる。

React テスト応用、テストに悩む人へ

2022-05-06更新「Reactでコンポーネントテストを書くといいらしい、　ReactTestingLibraryやjestでサンプルを参考に書いてみたが　現実どうやってプロダクトコードに合わせていけばいいか分からない」そういった方が対象となる本を目