これまでサーバーサイド（主にPHP）しか実務で使ったことがなく、そろそろAndroid/iOSくらいは組めるようになりたいので、個人プロジェクトとして進めていくことにしました。
とは言えiOSアプリを個人でバリバリ作っていく機運は全く無く（維持費が高いので）、Androidメインの予定です。なのでKotlinでアプリを作りつつ、必要であればAPIもKotlinで実装するつもりでした。
ただ仮に実務でネイティブをやるとなると、自社のリソース的にはクロスプラットフォームな技術選定をするはず。なので業務でも活かせるように、今回はReact Nativeでクロスプラットフォームなプロダクト開発をしていきます。
筆者のスキル
前述した通り、僕の現在のスキルレベルはこんな感じです。まさにゼロからのスタート。
- フロントエンド苦手
- React経験無し
- ネイティブ（ほぼ）経験無し
それではやっていきます。
本日行うこと
本日は、サクサク実装する前準備をしていきます。
- React Nativeのプロジェクトを作成
- ESLint、flowの設定
プロジェクトの作成
必要なパッケージは事前に入れてある想定です。必要なパッケージは公式サイトを参考にしてください。
参考記事：Getting Started · React Native
# react-nativeのバージョン
$ react-native -v
react-native-cli: 2.0.1
react-native: 0.55.4
# react-nativeで雛形の作成
$ react-native init project_name
立ち上げ
好き方で立ち上げてください。
iOSの場合
$ react-native run-ios
# 指定したエミュレータで起動する
$ react-native run-ios --simulator="iPhone X"
Androidの場合
$ react-native run-android
ESLint導入
ルールセットについてはお好みで選択してください。
# グルーバルESLintを導入
$ npm install -g eslint
# --devで使用するルールセットを導入
$ yarn add --dev eslint-config-rallycoding
.eslintrcの設定は以下のように設定しました。
{
"extends": "eslint-config-rallycoding"
}
とりあえずextendsのみ設定していますが、その他の設定項目については公式サイトを参照してください。ただし、基本はextendsしているルールセットに則るので、以降大量に追加することはありません。
参考記事：ESLint - Pluggable JavaScript linter
（EditorConfigの導入）
お好みでどうぞ。
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 2
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
# Use 4 spaces for the Python files
[*.py]
indent_size = 4
max_line_length = 80
# Use 4 spaces for the PHP files
[*.php]
indent_size = 4
# The JSON files contain newlines inconsistently
[*.json]
insert_final_newline = ignore
# Minified JavaScript files shouldn't be changed
[**.min.js]
indent_style = ignore
insert_final_newline = ignore
# Makefiles always use tabs for indentation
[Makefile]
indent_style = tab
# Batch files use tabs for indentation
[*.bat]
indent_style = tab
[*.md]
trim_trailing_whitespace = false
flowの設定
flowのバージョンは、.flowconfigに記述してあるものと一致していないとエラーになるので、バージョン指定で導入してください。
参考記事：Getting Started with React Native and Flow – React Native Training – Medium
$ yarn add [email protected] --dev
また、flowの記述で型指定しますが、普通にバリデーションしてしまうと警告が出るので、VS Codeの設定でバリデーションを切っておきます。
{
"javascript.validatetime.enable": false
}
参考記事：[Flow] type can be used by only ‘.ts’ files? · Issue #5214 · Microsoft/vscode
自動実行をするのであれば、エディタ拡張などで対応してください。VS Codeならこちらのプラグインを導入すれば大丈夫です。
参考記事：flowtype/flow-for-vscode: Flow for Visual Studio Code
まとめ
ここまでで次回以降にサクサク実装していく前準備ができました。ESLintとかflowは自分で設定しないといけないのが、多少面倒だなと思いました。どうせだからデフォルトで組み込んでくれればいいのに…
それでは次回以降、実装していきます。