前提
- 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上げてあります。
ちなみにExpoに開発したサンプルアプリをUpしてありますので良かったら見て下さい。
環境構築/下準備
開発環境
| ライブラリ名 | バージョン | 備考 |
|---|---|---|
| Mac | Mojava(10.14.3) | |
| Node.js | v10.15.2 | |
| npm | 6.8.0 | |
| Xcode | 10.2.1 |
開発はVSCodeを使用してます。
基本は、React + TypeScript + 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コードを読み取って起動するのが便利です。
もし上手く起動しない場合は、下記を試してみて下さい。
- xcodeがインストールされている事を確認
- xcodeを起動する
-
sudo xcode-select -s /Applications/Xcode.appを実行する - 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!を表示します。
...
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実装が少ないように思えます。
個人で開発する分には、ちょっとコストかかりすぎるので不要かなとも思ってしまいます。(つまづいたのが、何箇所かあったので...)
まだ続きがあるので興味があれば読んで下さい。