Reactnative プロジェクト 開発環境の構築

こんにちは、カワダです!
今回は Reactnative プロジェクトの開発環境の構築・設定についてお話ししていきます。
開発でTypeScript を使うために、また、開発をしやすくするために、どのような設定が
必要になってくるか、という話ですね。

今回も一つずつ、丁寧親切を心がけ紹介していきたいと思いますっ!

◇プロジェクトで TypeScript を使うための手順 

1.プロジェクトの作成

以下コマンドを実行して、新規プロジェクトを作成、プロジェクトの階層まで移動します。

react-native init <プロジェクト名>
 cd <プロジェクト名>

2.TypeScript関連の環境を構築

React と Reactnative 本体には型定義が含まれていないので、型定義ファイルも追加します。

npm install --save-dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer

3.TypeScript構成ファイルの tsconfig.json を作成します。
プロジェクトのルートに作成します。下記コマンドを実行してください。

tsc --init

※もし↑のtscコマンドが使えない場合、下記コマンドを先に実行してください。

npm install -g typescript

すると、以下のようなjsonファイルが作成されます。
実際はもっとコメントアウトされている行だらけですが、
ここではコメントアウトされていない行のみを抜粋しています。

{    
  "compilerOptions": { 
     "target": "es5",
     "module": "commonjs",  
     "jsx": "react", 
     "strict": true,  
     "esModuleInterop": true 
   } 
}

コメントアウトされている行の中から、以下の部分を探してコメントアウトを外します。

{  
...
"allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 
...
  }

さらに、”compilerOptionsをnode_modulesでは対象外にする”という設定を追加します。

{
     "compilerOptions": {
      ...     
 } + ,     
 + "exclude": [     
 +   "node_modules"
   + ]
}

4.App.jsをApp.tsxに変え、srcフォルダを作成し、そこにApp.tsxを移動します。
 (下記コマンドで全部やってくれます!)

mv App.js App.tsx
mkdir src 
mv App.js src/

5.index.jsを下記の様にコマンドで編集します。
 App.tsxの場所が変わったので、参照先を変えてあげます。

+ import App from "./src/App";
- import App from "./App";

◇自動整形フォーマッターの導入

1.プロジェクトにPrettierを追加

yarn add --dev --exact prettier

2.設定ファイルの作成
プロジェクトのルートディレクトリ直下に「.prettierrc.yml」を作成し、以下のように記述して保存します。

---
 # https://prettier.io/docs/en/options.html
 

 # specify correct parser
 parser: babel
 filepath: ''
 

 # main settings
 printWidth: 120
 tabWidth: 2
 useTabs: false
 semi: true
 singleQuote: true
 quoteProps: as-needed
 trailingComma: all
 bracketSpacing: true
 jsxBracketSameLine: false
 jsxSingleQuote: false
 arrowParens: avoid
 endOfLine: lf
 

 #process always
 requirePragma: false
 insetPragma: false
 

 # for Markdown
 # proseWrap: preserve
 # for HTML
 # htmlWhitespaceSensitivity: css
 

 overrides:
   - files: '*.json'
     options:
       parser: json
   - files:
       - '*.md'
       - '*.markdown'
     options:
       parser: markdown
   - files:
       - '*.ts'
       - '*.tsx'
     options:
       parser: typescript
   - files:
       - '*.yml'
       - '*.yaml'
     options:
       parser: yaml 

3.vsCodeの設定

Visual Studio Code を起動し、上部タブの
[ファイル]>[ファイルを開く]>[プロジェクト名]でプロジェクトのワークスペースを作ります。

再び上部タブから、[表示]>[コマンドパレット]

表示タブからコマンドパレットを選択

「基本設定:ワークスペース設定を開く(JSON)」を選択します。
(Preferrences:Open WorkSpace Settings (JSON))

settings.json を開く

jsonファイルに以下のコードを追加します。

"editor.formatOnSave": true
jsonファイル修正

◇ESLintの導入

ESLint はJavaScriptのための静的検証ツールです。
ファイル内のバグを見つけたり、括弧やスペースの使い方などのスタイルが統一されているかチェックしてくれます。

1.ESLint のインストール

ターミナルを開き、プロジェクトのディレクトリへ移動します。

 cd <プロジェクト名>


下記コマンドを実行します。

 yarn add --dev --exact eslint
 yarn add --dev --exact @typescript-eslint/parser @typescript-eslint/eslint-plugin
 yarn add --dev --exact eslint-config-prettier eslint-plugin-prettier
 yarn add --dev --exact eslint-plugin-react
 yarn add --dev --exact @react-native-community/eslint-config
 yarn add --dev --exact eslint-plugin-jest 

2.設定ファイルの作成

プロジェクトのルートディレクトリ直下に「.eslintrc.yml」を作成し、以下のように記述して保存します。

---
 root: true
 extends:
   - plugin:@typescript-eslint/recommended
   - prettier
   - prettier/@typescript-eslint
   - plugin:react/recommended
   - '@react-native-community'
   - plugin:react-native/all
   - plugin:jest/recommended
 parser: '@typescript-eslint/parser'
 parserOptions:
   project: ./tsconfig.json
   ecmaVersion: 2018
   sourceType: module
   ecmaFeatures:
     jsx: true
 plugins:
   - '@typescript-eslint'
   - react
   - react-native
   - jest
 settings:
   react:
     version: detect
 rules:
   no-console: warn
   yoda: off
   '@typescript-eslint/explicit-function-return-type': off
   react-native/no-raw-text: off
   react-native/sort-styles: off 

3.VScodeの設定

ESLintプラグインをインストールします。(「eslint」で検索)

ESLint プラグインをVSCodeにインストール

設定ファイルを開きます。VSCode左下の歯車のマークをクリックし、[設定]を選択します。

VScode左下の歯車マークをクリック、設定を選択

右上のページマーク?のようなものをクリックします。

右上のページマークをクリック

設定ファイル( settings.json )に以下の内容を記載します。

 {
     "eslint.validate":[
         "typescript",
         "typescriptreact"
     ]
 } 
設定ファイルにコードを追加

◇Native Base の導入

Native Baseは React NativeのUI(User Interface)の一つです。デザインを整えるのに使われます。

詳細は以下のHPを参照してみてください!
GitHubのドキュメントには使える機能の例が載っています。

Native Base HP

1.ターミナルを開き以下コマンドを実行。プロジェクトのディレクトリに移動します。

 cd <プロジェクト名>

2.以下のコマンドを実行します。

npm install native-base --save

おわり。これだけです!笑

◇React Navigation の導入

React Navigationは、React Nativeアプリケーションでルーティングとナビゲーションを行うための一般的なライブラリです。複数の画面間の遷移や、データ共有のハンドリングを行い、問題解決の手助けをしてくれます。

1.先ほど同様、ターミナルを開きプロジェクトのディレクトリに移動し、下記コマンド実行

npm install --save @react-navigation/native react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

長いですが一文です!

2.Stack Navigation の導入

npm install @react-navigation/stack --save

これもこれでおわり!コマンドってありがたいですね(しみじみ)

以上が開発環境の設定になります!

スムーズに開発を進めるためには、大事な部分ですね。

また次回の更新をお楽しみに〜☆

↓ 技術録のまとめはこちら ↓

技術録まとめ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です