げぇむぷろぐらみんぐ

日々の生活で得た知識、経験を書きます

ReactNativeでTypeScript+Prettier+TSlintな開発環境構築手順

はじめに

定期的にReactNativeでネイティブアプリを作りたくなる時期がくるのですが、そのたびに環境構築に手間取るので、備忘録として残しておきます。

その設定おかしいよとかあれば教えてください。

導入手順

前提

  1. nodeやwatchmanやyarnは導入済み(ない人はbrewで入れてください)
  2. エディタはVisualStudioCode(WebStormとかでも動くとは思います)

ReactNativeの導入

yarn global add react-native-cli

上記のコマンドで、ReactNativeプロジェクトを作成するための準備が整います。

プロジェクト作成

react-native init testApp

TypeScript導入

yarn add --dev typescript

型の導入

yarn add --dev @types/react @types/react-native

型は自分の使いたいライブラリによって随時導入が必要です。基本は、上記のように@types/ライブラリ名でインストールできますが、マイナーなライブラリは型定義がない場合もあります。

tsconfig.jsonの編集

TypeScriptの設定ファイルであるtsconfig.jsonを編集します。 各オプションは、各々でカスタマイズしてください。 例として、僕のtsconfig.jsonを載せます。

{
  "compilerOptions": {
    "target": "es2017",
    "module": "es2015",
    "jsx": "react-native",
    "outDir": "out",
    "rootDir": "src",
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "noImplicitReturns": true,
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "lib": ["dom", "es2015", "es2016"],
    "experimentalDecorators": true
  },
  "exclude": ["android", "ios", "out", "node_modules"],
  "compileOnSave": true
}

Prettierの導入

Prettierはコードフォーマッターで、フロントエンドで使われる言語は全般対応しており、便利なやつです。
雑にコードを書いても保存時にフォーマットの設定をしておけばフォーマットしてくれるのですごくいいです。 チーム開発でも、フォーマットが揃ってすごくいいと思います。

yarn add --dev prettier 

.prettierrcの作成

prettierの設定ファイルです。プロジェクトのルートディレクトリに置けば、ここで設定したとおりに整形してくれます。 なくても動くと思います。

{
  "singleQuote": false,
  "trailingComma": "es5",
  "semi": false
}

TSlintの導入

TSlintは、TypeScript用のlinterです。linterは、コードを監視してだめな書き方してる場合とかに教えてくれるやつです。
なくてもいいですがあると捗ります。特に初心者の場合はこれを入れておくことでだめな書き方に気づけるので絶対いれたほうがいいです。

yarn add --dev tslint tslint-react

TSlintとPrettierを併用するためのプラグイン導入

今回は、PrettierとTSlintが競合した場合に、Prettierを優先するようにします。

yarn add prettier --dev tslint-config-prettier  tslint-plugin-prettier

tslint.jsonの作成

さっきインストールしたプラグインたちを有効にするために、tslint.jsonを作成して以下のように記述します。 rulesは細かく設定をできるので、興味のある人は調べてみてください。

{
  "extends": ["tslint-react", "tslint-config-prettier"],
  "rulesDirectory": ["tslint-plugin-prettier"],
  "rules": {
    "prettier": true,
  }
}

VSCode上の設定

まず、拡張機能のTSLintとPrettierをインストールしてください。 また、VSCodeの設定からsettings.jsonを編集します。

{
    "editor.formatOnType": true,
    "editor.formatOnSave": true
}

これらの設定をすることで、VSCode上でコーディングをしながらtslintやprettierが自動で走るようになります。

作成したプロジェクトを編集してみる

srcディレクトリを作成し、App.jsをその下に移動、さらに拡張子を.tsxに変更します。 そして、以下のようにファイルを編集しました。
styleとかに型がついて、flexとかfontSizeの補完が効くようになります。便利。

import React, { Component } from "react"
import {
  Platform,
  StyleSheet,
  Text,
  TextStyle,
  View,
  ViewStyle,
} from "react-native"

const instructions: string = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu",
})

interface Props {}
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    )
  }
}

interface Style {
  container: ViewStyle
  welcome: TextStyle
  instructions: TextStyle
}

const styles = StyleSheet.create<Style>({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5,
  },
})

コンパイルした結果は、outディレクトリに出力されるので、index.jsはoutディレクトリ以下を見に行くように変更します。

import { AppRegistry } from "react-native"
import App from "./out/App"

AppRegistry.registerComponent("sampleApp", () => App)

TypeScriptファイルをコンパイル

tsc

基本は上記のコマンドでいいですが、一々コンパイルするのも面倒なので、package.jsonに以下のように定義しておくと便利です。

{
    "start": "tsc --watch & node node_modules/react-native/local-cli/cli.js start"
}

こうすると、

yarn start

上記のコマンドで監視を開始すれば、エディタで保存するたびにTypeScriptからコンパイルが走ります。

まとめ

ここまで環境を整えれば、あとは非常に快適に開発ができると思います。
ReactNative + TypeScriptの知見が日本語であんまりないように感じるので、もっと増えるとうれしいです。

参考