Reactnative プロジェクトのセットアップ(ios ver.)

Reactnative で開発をはじめたい!
・・・けれど他にどんなソフトがいるの?何からやっていけばいいの?
そんな方のためにこの記事では、Reactnative FWを使ってアプリ開発を始めるにあたっての
必要な準備をひとつづつ紹介していきます。
今回はMacでのios向け開発での必要な準備についてです。

※開発OSがWindows の場合は、以下の記事が参考になります

React Nativeの環境構築(Windows版)

Android 編も近々更新しますが、1.Homebrew〜5.Watchman のインストールまでは
同じ手順になります!

Android 編 更新しましたー!!! ↓↓↓

注意!Reactnative セットアップの前になおPCのアカウントが複数ある方は、ここからの作業は全て、
PCの管理者アカウントでログインした状態で行ってください。

注意!Reactnative セットアップの前に※「7.xCode のセットアップ」でApp Storeへのサインインが必要になります。
 AppleID をお持ちでない方は作成しておくことをオススメします。
                 ⇨ Apple公式|新しいApple IDの作成方法

1. Homebrew のインストール

  • Homebrewとは
    一言で言うと、パッケージ管理システムです。開発に使いたいソフトがあるときに、
    そのソフトを動かすために必要なまた別のソフトも一緒に落としてきてくれる、
    とても便利なシステムです。

– Homebrew のインストール手順 –

手順に入る前に、そもそもすでにインストールされていないか確認します。
ターミナルで以下のコマンドを実行してください。

brew -v

もしHomebrewのバージョンが表示されたら、すでにインストールされているという事なので、
ラッキー、てことで次の手順までスキップしてください。⇨2.Node.js のセットアップ

①インストールコマンド実行

Homebrew 公式インストールサイトへアクセスし、赤枠のスクリプトをコピーします。
Homebrew 公式インストールサイト
Homebrewの公式インストールサイトの下部のスクリプトをコピー

コピーしたスクリプトをターミナルに貼り付け、Enterキーで実行します。
これで、インストールが始まります。

②インストール完了確認

無事にインストールできているか確認します。
ターミナルで以下のコマンドを実行してください。

brew -v

この時に、HomeBrewのバージョンが表示されればインストール無事完了です。

2.Node.js のセットアップ

  • Node.js とは
    サーバーサイドでのJavaScriptの実行環境です。
    リアルタイム通信や処理の速さから、モバイルアプリ開発によく使われています。

– Node.js のセットアップ手順 –

まずはHomebrew 同様、既にNode.js がインストールされていないか確認します。

ターミナルで以下のコマンドを実行してください。

node -v

もしNode.jsのバージョンが表示されたら、すでにインストールされているという事なので、
これまたラッキー、次の手順までスキップしてください。⇨3.yarn のインストール

①nodebrew のインストール

先程インストールしたHomebrew を使って、Node.jsをインストールするための”nodebrew”を
インストールします。
(※Homebrew から直接 Node.js をインストールすれば良いじゃん?と思うかもしれませんが、
  nodebrew を使うことで、後々のNode.js のバージョン管理がしやすくなるのです。)

ターミナルで以下のコマンドを実行してください。

brew install nodebrew

これでインストール完了です。無事インストールできているか確認するため、バージョンを
チェックします。ターミナルで以下のコマンドを実行してください。

nodebrew -v

バージョンが表示されればインストールは成功です。

②Node.js をインストール

まずNode.js公式サイトで、推奨版のバージョン数を確認します。
Node.js公式サイト
Node.js公式サイトでバージョンを確認

以下コマンドをターミナルで実行します。
※この時、末尾の「12.17.0」は、公式サイトで確認したバージョン数を入れるようにしてください。
 例)「14.16.0 LTS」とサイトにある場合は、「nodebrew install-binary v14.16.0」になります。

nodebrew install-binary v12.17.0

もしエラーが出てしまう場合は、以下のコマンドを実行してからインストールします。

mkdir -p ~/.nodebrew/src

③使用するNode.js のバージョンを指定

以下コマンドを実行して、使用するバージョンを指定します。
※この時も、末尾の部分は公式サイトで確認したバージョン数に変えて実行してください。

nodebrew use v12.17.0

④パスを通す

以下のコマンドを実行してパスを通します。
(パスを通す=コンピュータに実行ファイルの在り処を教えてあげることです。)

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
source ~/.bash_profile

⑤Node.js のバージョンを確認

きちんとインストールされているか、今回も以下のコマンドでバージョンを確認します。

node -v

バージョンが表示されれば Node.js のセットアップ完了です。

3.yarn のインストール

  • yarn とは
    Node.js のパッケージマネージャーです。
    Node.js 上ではJavascriptのフレームワークなどが動作しますが、フレームワークは大量のプログラムで構成されています。それらをまとめたものがパッケージと呼ばれ、それを管理するのがパッケージマネージャーです。
    Node.js上で動作するJavaScriptフレームワーク、ライブラリ、プラグインなどのパッケージのインストールや、バージョン管理を簡単に、正確に行ってくれます。

– yarn のインストール手順 –

ターミナルで下記コマンドを実行します。

brew install yarn

yarn のインストールはなんとこれだけで完了です。
次にyarn を使ってReactNativeパッケージのインストールをしていきます。

4.ReactNativeパッケージのインストール

  • ReactNative とは
    開発用のフレームワークの一種です。
    JavaScriptで開発することができ、クロスプラットフォーム(iOSとAndroidどちらでも動く)であるため、モバイルアプリ開発に適しています。

– ReactNativeパッケージのインストール手順 –

下記コマンドを実行します。こちらもこれだけで完了です!

yarn add --exact react-native

5.watchman のインストール

  • watchman とは
    Facebookによって開発された変更監視ツールです。
    ファイルに変更があった場合に変更内容を記録したり、あらかじめ指定したアクションを行ったり、自動でビルドをかけてくれたりするので作業の効率UPが期待できます。

– watchman のインストール手順 –

ターミナルで以下のコマンドを実行します。

brew install watchman

はい、またもやインストールはこれだけです。では例に倣ってバージョンを確認します。

watchman –version

バージョンが表示されればインストール無事完了です。

6.CocoaPods のインストール

  • CocoaPods とは
    ios/Mac 向けのアプリを開発する際に、使用したい外部ライブラリを管理してくれるツールです。
    ライブラリのダウンロードやプロジェクトへの追加を簡単なコマンドを打つだけでやってくれます。

– CocoaPodsのインストール手順 –

ターミナルで下記コマンドを実行、もう聞き飽きたかもしれませんが、これだけです。

sudo gem install cocoapods

そして今回もバージョンチェックをします。

pod ––version

無事バージョンが出たら、インストール完了です。

次で最後です!あともう少し〜

7.Xcode のセットアップ

  • Xcodeとは
    Apple社が開発・リリースしているソフトウェアで、MacやiPhone、iPad向けのアプリケーション開発に特化しています。(むしろこれが必須と言っても過言でないくらいです。)
    ファイルの管理、コンパイル、ビルド、実機検証、デバッグ、などアプリ開発の一連の流れをサポートしているため、統合開発環境(IDE)とも呼ばれています。

– Xcode のセットアップ手順 –

①App Store で Xcode をインストールする

App Store で「Xcode」と検索するか、
下記リンクをクリックで、Xcode のインストール画面を開きます。
App Store|Xcode インストール
※リンクから飛ぶ場合は「App Store を開く」を選択して下さい。
「AppStoreを開く」を選択します。

インストール画面が出てきますので、「入手」ボタンをクリックします。

xCode「入手」ボタン押下

「インストール」をクリックします。

xCode「インストール」ボタン押下

「開く」をクリックします。

xCode「開く」ボタン押下

②規約の確認と変更許可をする

規約画面が出るので、「Agree」ボタンをクリックします。

xCodeの規約

ユーザ名とパスワードを求められるので、
PCの管理者アカウントのものを入力して下さい。

xCodeによる変更を許可するため、IDとパスワードを入力

これでインストールは完了です。次に設定に移ります。

インストール完了画面

③Command Line Toolsを設定する

「Xcode」タブをクリック→「Preference」をクリックします。

Preferencesをクリック

「Locations」タブをクリックします。

Locationsをクリック

すると「Command Line Tools」が表示されるので、赤枠の部分をクリック、
使用する状態へ変更します。

CommandLineToolsのバージョンを選ぶ

※変更しようとするとユーザ名とパスワードの入力を求められるので、
 こちらもPCの管理者アカウントのものを入力して下さい。

IDとパスワードを入力して変更を許可する

これで設定も完了です。

8.プロジェクトの作成

インストール系はこれで終了ですので、いよいよ新規プロジェクトの作成をします!

下記コマンドの”プロジェクト名”の部分を、自分の作りたいプロジェクト名に変更して、
ターミナルで実行して新規プロジェクトを作成します。
※ちなみにプロジェクト名にはアルファベットか数字しか使えないようです。

npx react-native init [プロジェクト名] --template react-native-template-typescript

これでプロジェクトの作成ができました。

9.おわり

以上で、 Reactnative プロジェクトのセットアップ(ios編)は完了です!
お疲れ様でした!

近いうちに Android編も投稿しますので、少々お待ちくださいませ。

Android 編 はこちらを参照ください!

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です