Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
13
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

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

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

背景

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

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

で作ります。

選定理由

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

その他候補メモ

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

環境構築

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が起動し、インストールページを表示できます)。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
13
Help us understand the problem. What are the problem?