ReactNativeの開発環境を構築する話(Mac編)

# はじめに
細々とReactNativeの開発を進めているわけですが、この度新しい開発メンバを迎え入れることになりました。
自分としてもReactNativeに触れて1年も経ってないため大して助言できるわけでもないですが、個人的には環境構築でハマった記憶があります。
なので、せめてスタートで躓かないようにと構築手順をまとめました。
Windows版はこちら→[ReactNativeの開発環境を構築する話(Windows編)](https://qiita.com/nekoniki/items/054c22f3072141bf6aea)。

# 前提
XcodeやNodeやらは、探せばしっかりとまとまった記事があると思うので割愛します。
ちなみに自分は以下を参考にしました。

・Xcode 
[MacにXcodeをインストールする](https://qiita.com/NolikaOhkawa/items/1bc2960f513d3d6a8882)
・Node.js
[MacにNode.jsをインストール](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)
・VSCode
[MacにVisual Studio Codeを導入してみる](https://qiita.com/ganbarumasu0525/items/5e0c91f9ed5083baab4e)

# 各種設定・インストール
諸々のコマンドで掲載していますが、本来はバッチファイルにして渡した方がスムーズかもしれません。
入力したコマンドがそれぞれどういう意味かを理解してもらいたい意図もあるため、ひとつひとつ入力していってもらっています。

## 1. yarnとreact-native-cliインストール

```
npm install -g yarn
yarn global add react-native-cli
```

## 2. 必須モジュールインストール
ここは各プロジェクトによって内容が異なってくるかと思います。
お好きなようにアレンジしてください。

```
react-native init【プロジェクト名】 —version 0.59.9
cd【プロジェクト名】
yarn add typescript
yarn add react-native-typescript-transformer
yarn add —D @types/react @types/react-native
yarn tsc —init —pretty —jsx react
mkdir src
mv App.js src/App.tsx
touch rn-cli.config.js
yarn add —D prettier
yarn add —D tslint tslint-react
yarn add prettier —D tslint-config-prettier tslint-plugin-prettier
touch tslint.json
touch images.d.ts
```

## 3. tsconfig.jsonを修正
下記の値を追加・修正します。

```tsconfig.json
{
  "compilerOptions": {
    "lib": ["es2015"],
    "allowSyntheticDefaultImports": true,
  },
  "exclude": [
    "node_modules"
  ]
}
```

## 4. index.jsのApp参照先を修正
App.jsをsrcに動かしたのでindex.jsを修正します。

```index.js
/**
 * @format
 */

import {AppRegistry} from 'react-native';
// import App from './App';  // del
import App from './src/App'; // add
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);
```

## 5. rn-cli.config.jsとpackage.jsonを修正
※0.57以降ではrn-cli.config.jsは不要と聞いたこともあります。

```rn-cli.config.js
module.exports = {
    getTransformModulePath() {
        return require.resolve("react-native-typescript-transformer");
    },
    getSourceExts(){
        return["ts","tsx"];
    }
}
```

package.jsonは以下を追加

```package.json
  "scripts": {
    "run-ios": "react-native run-ios",
    "run-android": "react-native run-android"
  },
```

## 6. tslint.jsonとimages.d.tsを修正
tslin設定も正直お好みです。

```tslint.json
{
    "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
    "rules": {
        "jsx-no-lambda": false,
        "member-access": false,
        "interface-name": false,
        "prefer-for-of": false,
        "ordered-imports": false,
        "object-literal-sort-keys": false,
        "no-console": false
    },
    "linterOptions": {
        "exclude": [
            "config/**/*.js",
            "node_modules/**/*.js",
            "coverage/lcov-report/*.js"
        ]
    }
    
}
```

```images.d.ts
declare module '*.svg';
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.gif';
declare module '*.bmp';
declare module '*.tiff';
```

## 7.実行
Xcodeからエミュレータを起動した状態で下記コマンドを実行

```
yarn run-ios
```

ここで下記のエラーが発生したらXcode設定を見直す

```
error: unable to find utility "instruments", not a developer tool or in PATH
```
参考
[Error Running React Native App From Terminal (iOS)](https://stackoverflow.com/questions/39778607/error-running-react-native-app-from-terminal-ios)

成功すると以下の画面が表示されます。
<img width="374" alt="screenshot.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435429/c31ad11f-ae38-cdbc-fa0b-5ad390987284.png">

# 感想
いざまとめてみると、結構面倒臭い箇所が多いなあという印象です。
後発メンバがスムーズに開発に取りかかれるようにするのも先駆者としての責務だと思うので、定期的にアウトプットもとい情報共有をしていきたいと思います。

また、ここで記載した内容が少しでも参考になれば幸いです。