React Native 入門してみた① 環境構築編 + Hello World

前提

• Reactを知っている人
• React Nativeを使ってアプリを作りたい人
• iOS Onlyです(とりあえず...)

入門してみて学んだことの備忘録みたいなものです。

経緯

いろいろあってフロントエンドから2年弱離れており、JS界隈から取り残されていました。
今回、Reactで開発する機会があり、感を取り戻す(リハビリ)ことと、React再学習を踏まえてReactNativeに入門することにしました。
リリース間もない頃、一度さらっと触った経験もありますが、以前は環境構築で疲れてしまった記憶があります。
ReactNativeがどう進化しているのか知るのも楽しみでもありました。

React Nativeとは？

React Native · A framework for building native apps using React

Build native mobile apps using JavaScript and React

JavaScriptとReactを使ってモバイルアプリiOS・Annroidを開発するフレームワークです。
Facebookが開発しており、Facebookアプリは元論、SkypeやUberなどで採用されています。
フロントエンドエンジニア(JavaScript)特にReactエンジニアであればすぐに開発できるのが特徴です。

学んだこと

まずは、チュートリアルを一通り一読

その他、下記サイトを読ませて頂きました。

• 世界一シンプルなReactNative + Reduxチュートリアル① - Qiita
• React Native + Expoを用いて、1週間でアプリを作ってみて学んだこと - ログミーTech
• React Native でアプリ開発をして良かったところ・ツラかったところ - BizReach Tech Blog
• ReactNativeで何が出来るのかさっと知れるサイト、その他リンクまとめ - Qiita など

周辺ライブラリの調査など

• jondot/awesome-react-native: Awesome React Native components, news, tools, and learning material!
• 2018年 React Nativeで真剣なアプリを開発するなら、 絶対使うライブラリー！ - KOKENSHAの技術ブログ

実装したもの

実際に実装を試してのが下記です。

• Expoの環境構築 + Hello World : React Native 入門してみた① 環境構築編 + Hello World - Qiita
• React Navigationで画面遷移: React Native 入門してみた② 画面遷移編 - Qiita
• axiosでHttpアクセス: React Native 入門してみた③ Httpアクセス編 - Qiita
• カメラ実装(Expo): React Native 入門してみた④ カメラ実装編 - Qiita
• データ永続化(redux-persist): React Native 入門してみた⑤ データ永続化編 - Qiita についてです。

多かったので記事を分割してます。
まだ学習途中だったりするので、おいおい追加しようと思います。

リポジトリ

サンプル実装したコードをGitHub上げてあります。

• Gitbanzo/react-native-sample: React Native Sample Code

ちなみにExpoに開発したサンプルアプリをUpしてありますので良かったら見て下さい。

• garbanzo on Expo

環境構築/下準備

開発環境

ライブラリ名	バージョン	備考
Mac	Mojava(10.14.3)
Node.js	v10.15.2
npm	6.8.0
Xcode	10.2.1

開発はVSCodeを使用してます。
基本は、React + TypeScript + Expoの構成で開発を行います。

Expoとは？

Expo

ReactNativeのビルド環境・開発支援ツールです。

チュートリアルでは、「Quick Start」「Building Projects with Native Code」の2パターンの環境構築手順があります。
「Quick Start」はexpo-cliを使用するパータン
「Building Projects with Native Code」は、react-native-cliを使用するパターン
今回は、セッテイングが簡単なQuickStartのexpoを選択するパターンにします。

※Nodejs v.8以上が必須です

Expoインストールと新規プロジェクト作成

Expoをインストールする

npm install -g expo-cli
expo -V
2.11.6

新規アプリケーションを作成する

expo init {AppName}

AppNameは開発するアプリ名を入力して下さい。
今回はアプリ名Sampleとします。
入力後、テンプレートの選択できます。

? Choose a template:
  ----- Managed workflow -----
❯ blank         minimal dependencies to run and an empty root component
  tabs          several example screens and tabs using react-navigation
  ----- Bare workflow -----
  bare-minimum  minimal setup for using unimodules

それぞれ

• blank: 最小限構成のアプリを作成します。
• tabs: react-navigationを使用したナビゲーションテンプレートを作成します
• bare-minimum: ejectされた状態のテンプレートを作成します。ios/Androidのnativeコードを生成します。

今回は、サンプルなのでblankを選択してます。
続いて、ホームスクリーンに表示されるアプリ名を入力します。

? Please enter a few initial configuration values.
  Read more: https://docs.expo.io/versions/latest/workflow/configuration/ › 50% completed
 {
   "expo": {
     "name": "<The name of your app visible on the home screen>",
     "slug": "Sample"
   }
 }

入力したらインストールが開始されます。
下記が表示されたら完了です

(省略)
Your project is ready at /project/path/Sample

To get started, you can type:

  cd Sample
  npm start

Hello World

まずは、HelloWordを表示してみます
上記で記載しましたが、React + TypeScriptの構成にするのでインストールします

イントールする ~TypeScript対応~

ライブラリ一覧

ライブラリ名	バージョン	備考
expo	32.0.0
react	16.5.0
typescript	3.3.3333

1.パッケージインストール

TypeScriptとReact、ReatNatrive、expoの型定義ファイルをインストール

npm install typescript @types/react @types/react-native @types/expo

2.tsconfigを初期化

tsc --init

成功すれば、message TS6071: Successfully created a tsconfig.json file.と表示され、tsconfig.jsonが追加されています

3.tsconfigを編集

先ほど生成されたtsconfig.jsonを修正します

- "target": "es5",
+ "target": "ES2018",
...
- //"jsx": "preserve",
+ "jsx": "preserve",
...

targetをes5からES2018に変更します。これは環境によって変更して下さい。
コメントアウトされている"jsx": "preserve"を有効にします。

4.ファイル拡張子変更

ファイル拡張子が.jsになっているので.tsxに変更します
JSXを使用するファイルは.tsxとして、その他は、.tsとします
コンポーネントファイルでなかったとしてもJSX構文を記載したらその時点で.tsxになるので注意が必要です。

mv App.js App.tsx

これでインストール完了です。

起動してみる

npm startor expo statで起動します。
すると、http://localhost:19001(他に使用していない場合)でWebブラウザが開きます
「Run on iOS simulator」をクリックしてSimulatorを起動します。

ExpoはiOSアプリもあり、インストールして実機で試す事も出来ます。
iPhoneで開く場合は、QRコードを読み取って起動するのが便利です。

もし上手く起動しない場合は、下記を試してみて下さい。
1. xcodeがインストールされている事を確認
2. xcodeを起動する
3. sudo xcode-select -s /Applications/Xcode.appを実行する
4. Simulatorアプリを起動してから実行してみる

表示を「Hello World!」に変更してみる

構成

src
├── App.tsx
├── app.json
├── assets
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
└── tsconfig.json

このファイル達は、create-react-appで生成されたファイルです。
メイン画面となるのがApp.tsxファイルです。

編集

App.tsxを編集しHello World!を表示します。

App.tsx

...

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
-       <Text>Open up App.js to start working on your app!</Text>
+       <Text>Hello World!</Text>
      </View>
    );
  }
}

...

TextコンポーネントのOpen up App.js to start working on your app!をHello World!に変更します。
変更し保存すると、HotReloadによりSimulatorの表示が自動で「Hello World!」と更新されます

リポジトリ

react-native-sample/1-HelloWorld at master · Gitbanzo/react-native-sample

まとめ ~入門してみて~

入門しての全体を通しての感想ですが、リリースもしてないし、まだまだ学習する事は多いですが、ReactNative + Expoでの開発は簡単かつ、Reactを知っていれば何も問題なくすぐに参入出来るのではないだろうか。
何より学んで楽しかったっ!
おいおいReactNativeでアプリをリリースしてその際記事にします。

TypeScriptを学ぶべきと思い導入したがまだまだ経験不足...
と、サンプルがTypeScript実装が少ないように思えます。
個人で開発する分には、ちょっとコストかかりすぎるので不要かなとも思ってしまいます。(つまづいたのが、何箇所かあったので...)

まだ続きがあるので興味があれば読んで下さい。