本記事は
React Nativeを用いて
iPhoneアプリを作ってみたい
人向けの記事です
React Native良さ、
React NativeとSwiftUIの違いや
メリットデメリットは記述しません！
それらを知りたい人は、
こちらの記事をご覧くださいー！
↓
【5分で動作】React Nativeの始め方（入門編）
React Nativeを利用したアプリケーション開発は、Expoというフレームワークを利用します。
ExpoはReact NativeとiPhone機能の橋渡しをしてくれるだけではなく、ディレクトリの管理や、設定の管理を行ってくれる優れたフレームワークです。
メリットデメリットはありますが、さくっと実装を行いたい人は使うことをおすすめします。
Expoを使ったiPhoneアプリ制作手順
- brewコマンドをインストール
- Expoコマンドをインストール
- Expoコマンドで、雛形アプリケーションを作成
- 実装を行う
手順0．brewコマンドをインストール（入門の前に）
Expoのインストールには、homebrewを利用します。
homebrewとはコマンドを管理するコマンドで、brewコマンドを使ってコマンドをインストールすることができます。このhomebrewはエンジニアには広く使われており、開発も活発に行われているため、是非利用しましょう。（homebrewの公式サイト）
さっそくhomebrewのコマンドをインストールしましょう。
ターミナルを起動して、こちらのコマンドを打ち込んでください。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"そうするとコマンドが走るので、必要に応じて『Yes』を押していけば終わりです。ちなみにhomebrewの読み方はホームブリューで、自分の家でビールを作ることを指すようです。そのため、brewコマンドを用いてパッケージをインストールが完了するとビールのアイコンが出てきます。
Homebrewのよく使うコマンド
・brew install パッケージ名…パッケージのインストール
・brew uninstall パッケージ名…パッケージのアンインストール
・brew doctor…brewでインストールしたコマンドの状態を確認。エラーなら教えてくれる
手順0. nodeコマンドを入れる
expoはnpmというNodeJSのパッケージコマンドでインストールします。
そのため、nodeをインストールしましょう
brew install nodebrewそのあと、設定を追加しましょう。
// 最新の安定版をインストール
$ nodebrew install-binary stable
// 安定版のバージョンを確認
$ nodebrew --version
// 確認したバージョンを利用するようにセット
$ nodebrew use vX.X.X手順1．Expoコマンドをインストール（ここから入門）
ここからReact Nativeの開発が始まります。
環境構築で行うことは、コマンドのインストールと、expoのアカウント作成です。
環境構築で行うこと
1. Expoコマンドのインストール
2. expoのアカウントを作成
1. Expoコマンドのインストール
こちらのコマンドを打ち込んで、Expoコマンドをインストールしてください。Expoコマンドは、ReactNativeのアプリケーションの雛形アプリを作成してくれるコマンドで広く開発に使われているコマンドです。
こちらのコマンドを打ち込んでください。
# (1) expoのコマンドを入れる
$ sudo npm install -g expo-cli
# (2) バージョン確認（小文字のvだとエラーになる）
$ expo -V
4.0.15これで、エラーなど起きなければインストール完了です。
2. expoアカウントの作成をしましょう
expoは雛形のアプリを作成できるコマンドとは別に、アプリをiPhoneで確認できるサービスがあります。そのサービスに登録して実機確認ができるようにしましょう。
こちらのサイトでアカウントを作成してください。
手順2．Expoコマンドで、雛形アプリケーションを作成
Expoコマンドを使って、アプリケーションを作成していきましょう。
Expoコマンドを使ったアプリケーションの作成はこちらになります。
アプリケーション作成の流れ
1. initコマンドを使う
2. 設定項目を決める
3. アプリを開く
1. initコマンドを使う
早速こちらのコマンドを打ち込んでみてください。
打ち込んだあとは設定項目があるので、待っていてください！
// (叩くコマンド)
$ expo init <アプリケーション名>
// 例. コピペ用（アプリケーション名 ... rss-application）
$ expo init rss-applicationこのコマンドで、アプリケーションの雛形を作ります。
2. 設定項目を決める
initコマンドを打つとテンプレートが作成できます。
このテンプレートを作成する設定を決めていきましょう。
こちらが設定項目の意味です。
初心者は『Blank』で始めることをおすすめします。
Blank以外では、最初のうちは不要な設定が多くあるのでわかりにくいためです。最初は動くことを想定しているのでまずは何もない状態を目指しましょう。
----- Managed workflow -----
・blank ... 何も設定されていない状態からスタート
・blank (TypeScript) ... TypeScriptで記述する設定以外、なにも設定されていない状態からスタート
・tabs (TypeScript) ... TypeScriptで記述する設定と、タブによるページ遷移の設定が済みからスタート
----- Bare workflow -----
・minimal ... 何も設定されていない状態からスタート（bare workflow）
・minimal (TypeScript) ... TypeScriptで記述する設定以外、なにも設定されていない状態からスタート（bare workflow）設定を進めると、このようになります。
$ expo init rss-application
┌─────────────────────────────────────────────────────────────────────────┐
│ │
│ There is a new version of expo-cli available (4.0.17). │
│ You are currently using expo-cli 4.0.15 │
│ Install expo-cli globally using the package manager of your choice; │
│ for example: `npm install -g expo-cli` to get the latest version │
│ │
└─────────────────────────────────────────────────────────────────────────┘
✔ Choose a template: › blank a minimal app as clean as an empty canvas
✔ Downloaded and extracted project files.
🧶 Using Yarn to install packages. You can pass --npm to use npm instead.
✔ Installed JavaScript dependencies.
✅ Your project is ready!
To run your project, navigate to the directory and run one of the following yarn commands.
- cd rss-application
- yarn start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- yarn android
- yarn ios
- yarn webこれで初期設定が終了です！
3. アプリを開く
作成したアプリケーションに移動して、アプリを動かしてみましょう。
// 作成したアプリケーションへ移動する
$ cd （アプリケーションの名前）
// 作成したアプリケーションを動かす
$ yarn iosこれでアプリケーションの動作は完了です！
手順3．実装を行う
あとは、細かい実装を行っていきます。
実装については、コードを実際に見せながら行った方がわかりやすいため、こちらに記載していることを参考に行うといいでしょう！
【コピペで入門】React Native x Expoで作るRSSリーダーアプリ（初心者向け）
React Nativeの始め方（入門編）のまとめ
今回は、React Nativeでアプリを作成する方法をまとめました。
React Nativeを用いたアプリ作成は簡単に、早く、webの技術で作成できるためおすすめです！是非みなさんも作成してみてください。
このほかにも、簡単にアプリを作成する方法を記載しているので、是非みてみてください。
【ReactNative】引っ張って(スクロール,スワイプ)Listのデータ更新
