React Nativeでゲームを作る(ための、はじめの一歩)

フロントエンジニアの、YAMATAKUです。
今回はチーム「LOT」の初開発についての方針と、準備(サンプルアプリ開発)を記事にしていきます。

## 背景

チームで結成前に、こんなサービスが欲しい、世の中の不便を解決できるようなサービスを作ろうなど、チームで議論したものの、まずはチームとしてのモチベーションの底上げが先決だと思いたつ。そのためには、例えユーザーがいなくても、とりあえずは開発している側も楽しめそう、ということで、ゲーム開発を念頭において、スタートすることにしました。

## 開発ツール、言語、フレームワークなど

- React Native
https://reactnative.dev/

- react-native-game-engine
https://www.npmjs.com/package/react-native-game-engine

で作ります。

### 選定理由
- JSを使いたい
- これからも当分JS強い(はず)
- React知名度(from Facebook)
- スマホアプリのゲームが作れる
など

### その他候補メモ
- CocosCreator(cocos2d-js)  
https://www.cocos.com/en/creator

なんか、GUIでグイグイ行く感じがアガらなかった・・・


## 環境構築

- Node.js インストール 
https://nodejs.org/ja/


- Android Studio インストール 
https://developer.android.com/studio?hl=ja


- Android Studio エミュレータ作成 (Google Pixel3 & Android9.0) 
https://qiita.com/yacchi1123/items/5849df8965de19818617


- VSCode インストール 
https://code.visualstudio.com/


- Python3 インストール(序盤の「Python のインストール」だけでOK) 
https://qiita.com/youkidkk/items/b6a6e39ee3a109001c75

### React Native CLI インストール

```
$ npm install -g react-native-cli
```

### Macの場合(Xcodeインストール)
```
- Xcodeインストール  
App Store > Xcodeで検索

- Pod アップデート  
$ sudo gem install cocoapods -n /usr/local/bin

- Xcode パス設定  
$ sudo xcode-select --switch /Applications/Xcode.app
```

## VSCodeに支援ツール(もしくはお役立ちツール)を入れる
スニペットや補完など、ReactNativeのコーディングを支援するプラグインを追加していきます(随時)
VSCode > 表示 > Extentions > Search Extentions in Marketplace
で、以下項目を検索して、インストールしていきます(以下リンクを開いた先にある「Install」ボタンを押すと、VSCodeが起動し、インストールページを表示できます)。

- [React Native Tools](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native):デバッグツール
- [React Native Snippet](https://marketplace.visualstudio.com/items?itemName=jundat95.react-native-snippet):スニペットプラグイン 
- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense): 外部ソースのパスを補完してくれる
- [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense):インスペクタの各行にアイコンを表示してくれる
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode):自動整形ツール


### Prettier設定
まず、
・VSCode > 基本設定 > 設定 > 「Format On Save」で検索 > チェックを入れる

上記設定後、プロジェクトルートフォルダに、.prettierrcファイルを作成します。

```:.prettierrc
{
  "printWidth": 100,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "endOfLine": "lf",
  "bracketSpacing": true
}
```
これで、セーブするたびに、自動整形が実行されます。

## React Native チュートリアル
これから数回の記事で、react-native-game-engienのチュートリアルをやります。
動画付きの記事があったので、助かります。 
https://github.com/lepunk/react-native-videos

- Whack-A-Mole
- Flappy Bird
- MineSweeper
- Snake

4つあるうち、まずは、 「Whack-A-Mole(もぐらたたき)」を見ていきます。


## Whack-A-Mole プロジェクト作成
事前にターミナルなどを開いて、適当なディレクトリに移動しておきます。

プロジェクト作成

```
$ react-native init WhackAMole
```

実行

```
$ cd WhackAMole
$ react-native run-android
$ react-native run-ios
```

## eslint設定
ESLintはJavaScriptのための静的検証ツールです。
今回は説明を省いて、eslintrc.jsファイルを以下のように書き換えてください(コピペでOK)

```eslintrc.js
module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],

  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    project: './tsconfig.json',
    sourceType: 'module',
  },
  plugins: [
    '@typescript-eslint',
    'jest',
    'prettier',
    'prefer-arrow',
    'react',
    'react-hooks',
  ],
  root: true,
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', 'jsx', '.ts', '.tsx'],
      },
    },
  },
  rules: {
    // eslint official
    'newline-before-return': 'error',
    'no-console': 'warn',
    'require-yield': 'error',

    // @typescript-eslint
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-member-accessibility': 'off',
    indent: 'off',
    '@typescript-eslint/indent': 'off',
    '@typescript-eslint/no-unnecessary-type-assertion': 'error',

    // prefer-arrow
    'prefer-arrow/prefer-arrow-functions': [
      'error',
      {
        disallowPrototype: true,
        singleReturnOnly: true,
        classPropertiesAllowed: false,
      },
    ],

    // react
    'react/jsx-filename-extension': [
      'error',
      {
        extensions: ['jsx', 'tsx'],
      },
    ],
    'react/jsx-one-expression-per-line': 'off',
    'react/jsx-uses-react': 'error',
    'react/jsx-uses-vars': 'error',
    'react/prop-types': 'off',
    'react/prefer-stateless-function': 'off',

    // react hooks
    'react-hooks/rules-of-hooks': 'error',

    // prettier
    'prettier/prettier': [
      'error',
      {
        bracketSpacing: true,
        printWidth: 80,
        semi: true,
        singleQuote: true,
        trailingComma: 'all',
        useTabs: false,
      },
    ],
  },
};

```

## ビルドエラー関連
ビルドエラーが起きた場合には、以下を試してみてください。

```
//ターミナル、シュミレータを閉じて

$ lsof -i :8081
COMMAND   PID     USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
node    89670 my-pc   24u  IPv6 0x26cfb288a930f387      0t0  TCP *:sunproxyadmin (LISTEN)

$ kill -9 PID 89670

↓上記で解決ない場合

//ビルドキャッシュのクリア
$ rm -rf ios/build
$ rm -rf android/app/build

【Android】
#エラー Error: spawnSync ./gradlew EACCES
$ chmod 755 android/gradlew 

【iOS】

//Xcode > ビルドシステムをLegacyに変更する

//iOS ビルドエラーにPod系の表示があれば
$ pod install

```

## 総括
とりあえず、プロジェクト作成、ビルドはできました。
次回から、実装に入ります。

次回参考：Whack-A-Mole GitHub
https://github.com/lepunk/react-native-videos/tree/master/WhackAMole