ReactNativeでTypeScript+Prettier+TSlintな開発環境構築手順
はじめに
定期的にReactNativeでネイティブアプリを作りたくなる時期がくるのですが、そのたびに環境構築に手間取るので、備忘録として残しておきます。
その設定おかしいよとかあれば教えてください。
導入手順
前提
- nodeやwatchmanやyarnは導入済み(ない人はbrewで入れてください)
- エディタは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の知見が日本語であんまりないように感じるので、もっと増えるとうれしいです。