ネイティブアプリ開発日記（1/100）環境構築

1. 下記をインストールする

#	インストール項目	説明
1	homebrew	Mac用のパッケージマネージャ
2	cocoapods	iOSアプリ開発のパッケージマネージャ
3	npm	nodeのパッケージマネージャ
4	XCode	MacでiOSアプリを開発する開発環境
5	react-native-cli	ReactNativeのプロジェクトを管理する
6	expo-cli	react-nativeのラッパーツール
7	node	JavaScriptをOS上で動かすための実行環境
8	watchman	ファイルの変更を検知しビルドするためのツール
9	JDK	React Nativeの開発に必要
10	ruby	cocoapodsに必要
11	rbenv	rubyのバージョンを管理するツール
12	Node Version Manager	rNodeのバージョン管理

2. プロジェクトを作成・起動する
   以下の2つの方法があるようなので、それぞれ検証する
   方法1. react-native-cli
   方法2. expo-cli

方法1. react-native-cliの検証

• プロジェクトの作成

npx @react-native-community/cli init MyApp

ただし、MyAppは自分で決めたプロジェクト名

• プロジェクトの起動

cd MyApp
npx react-native run-ios

以下の理由でエラーとなった。
理由：XCodeのバージョンが16.1以上ではない
XCodeのバージョンを16.1以上にするにはMacOSのバージョンアップが必要であるが、
Mac端末が2016モデルでありMacOSのバージョンアップができない。
方法1は保留とし、方法2の検証を行う。

方法2. expo-cliの検証

• プロジェクトの作成

npx create-expo-app MyApp --template blank

ただし、MyAppは自分で決めたプロジェクト名
また、--template blankは最小構成のJavaScriptテンプレートを指定する

• プロジェクトの起動

cd MyApp
npx expo start

iOSシミュレータ（開発端末上の仮想のiPhone）、およびiPhone（動作確認用の端末）で起動成功。

MyAppディレクトリ内は以下のファイルがある。

$ ls
App.js			index.js		package.json
app.json		node_modules
assets			package-lock.json

エントリファイル（上記のiOSシミュレータに表示される画面）はApp.jsらしい。内容を確認する。

App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

つまり、Appのfunctionが起動し、textタグで
Open up App.js to start working on your app!
という文字列を返却している。

試しに、上記の文字列を変更し、iOSシミュレータ（開発端末上の仮想のiPhone）、およびiPhone（動作確認用の端末）で画面が更新されることを確認する。

結果、
iOSシミュレータ：更新されない
→再起動したところ、更新された
iPhone：更新された