技術っぽいことを書いてみるブログ

PythonとかVue.jsとか技術的なことについて書いていきます。

ReactNativeのプロジェクト作成から環境構築までやってみた。。

概要

ReactNativeでアプリ開発を行う際、
まず必要になるのはプロジェクトとその実行環境です。
ざっとやってみましたので、まとめておきます。

やること

  • プロジェクトの作成
  • ESLintの追加・設定
  • Prettierの追加・設定

プロジェクトの作成

ReactNativeのプロジェクト作成は、npx react-native init [プロジェクト名] --template react-native-template-typescript でできます。

  • [プロジェクト名]の部分は、もちろんプロジェクト名が入ります。
  • --templateで、TypeScriptのテンプレートを指定します。
  • 実行すると…こんな画面になります。(まぁまぁ時間かかります。2分くらいカナ)

プロジェクトの中身

  • こんな感じのディレクトリ構成で、初期状態は作成されています。
  • srcフォルダとか初期状態で作成されていてもよいかと思いますが、自分で作成しろということでしょう。
    • おそらく、初期状態では、srcに含めるもがないので、フォルダ自体も用意する必要がないのでしょう。。

プロジェクト作成した状態でエミュレータ実行してみる

  • package.jsonを見れば、おおむねできることは想像できるかと思います。
  • こちらはAndroidユーザなので、npm run androidを実行してみます。
    • 実行すると、Metroというものが実行されて、こちらがエミュレータとプログラムを中継してくれているようです。
    • console.logもここに出力されます。
  • 起動されたエミュレーターはこんな感じです。

ESLintの導入

  • 静的解析のため、ESLintを導入します。
  • npm install -D eslintを実行します。
    • プロジェクトのESLintがインストールされます。
  • 初期設定のため、npx eslint --initを実行します。

    • いろいろ質問されるので、選択式で回答していきます。わたくしの設定内容は以下の通り。

      How would you like to use ESLint?
      >To check syntax, find problems, and enforce code style
      
      What type of modules does your project use?
      >JavaScript modules (import/export)
      
      Which framework does your project use? ...
      > React
      
      Does your project use TypeScript?
      >YES
      
      Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
      √ Browser
      
      How would you like to define a style for your project? ...
      > Use a popular style guide
      
      Which style guide do you want to follow? ...
      > Standard: https://github.com/standard/eslint-config-standard-with-typescript
      
      What format do you want your config file to be in? ...
      >JSON
      
      Would you like to install them now? 
      >yes
      
       Which package manager do you want to use? ... 
      > npm
      
    • .eslintrc.jsonが作成される
  • ESLintのプラグインをインストールのため、npm install -D eslint-plugin-jsx-a11y eslint-plugin-react-hooksを実行します。

  • ESLintの設定を行う。
    • これは、.eslint.jsonに書く。

      {
      "env": {
          "browser": true,
          "es2022": true
      },
      "extends": [
          "eslint:recommended",
          "plugin:@typescript-eslint/recommended",
          "plugin:@typescript-eslint/recommended-requiring-type-checking",
          "standard-with-typescript",
          "plugin:jsx-a11y/recommended",
          "plugin:react/recommended",
          "plugin:react/jsx-runtime",
          "plugin:react-hooks/recommended",
          "prettier"
      ],
      "parserOptions": {
          "ecmaVersion": "latest",
          "tsconfigRootDir": ".",
          "project": ["./tsconfig.json"],
          "sourceType": "module"
      },
      "plugins": [
          "@typescript-eslint",
          "jsx-a11y",
          "react",
          "react-hooks"
      ],
      "rules": {
          "padding-line-between-statements": [
              "error",
              {
              "blankLine": "always",
              "prev": "*",
              "next": "return"
              }
          ],
          "@typescript-eslint/consistent-type-definitions": "off",
          "@typescript-eslint/explicit-function-return-type": "off",
          "@typescript-eslint/explicit-module-boundary-types": ["error"],
          "@typescript-eslint/no-misused-promises": [
              "error",
              {
              "checksVoidReturn": false
              }
          ],
          "@typescript-eslint/no-unused-vars": [
              "error",
              {
              "argsIgnorePattern": "^_",
              "varsIgnorePattern": "^_"
              }
          ],
          "@typescript-eslint/triple-slash-reference": [
              "error",
              {
              "types": "always"
              }
          ],
          "import/extensions": [
          "error",
              {
              "ignorePackages": true,
              "pattern": {
              "js": "never", "jsx": "never", "ts": "never", "tsx": "never"
              }
          }
          ],
          "import/order": [
              "error",
              {
              "groups": [
                  "builtin", "external", "internal", "parent", "sibling", "object", "index"
              ],
              "pathGroups": [
                  {
                  "pattern": "{react,react-dom/**}",
                  "group": "builtin",
                  "position": "before"
                  },
                  {
                  "pattern": "{[A-Z]*,**/[A-Z]*}",
                  "group": "internal",
                  "position": "after"
                  },
                  {
                  "pattern": "./**.module.css",
                  "group": "index",
                  "position": "after"
                  }
              ],
              "pathGroupsExcludedImportTypes": ["builtin"],
              "alphabetize": {
                      "order": "asc"
                  }
              }
          ],
          "react/display-name": "off"
      
      },
      "overrides": [
          {
              "files": ["*.tsx"],
              "rules": {
                  "react/prop-types": "off"
              }
          }
      ],
      
      "settings": {
          "react": {
              "version": "detect"
          }
      }    
      }
      

Prettierの導入

  • npm install -D prettier eslint-config-prettierを実行する
  • .prettierrc.jsを編集して、以下の感じにしておく。

      module.exports = {
      arrowParens: 'avoid',
      bracketSameLine: true,
      bracketSpacing: false,
      singleQuote: true,
      trailingComma: 'all',
      };
    

VSCodeの設定

  • 設定した内容が有効になるようにVSCodeの設定を追加します。
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[graphql]": {
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true
  }

所感

プロジェクト作成自体は簡単ですが、
Lintなどの設定は、何かしらを参照しないとできないですね。
↑の内容が、どなたかの役に立てば幸甚です。

まぁ、、、誰も見てないやろうけどなっ!!!