ReactNative入門 ExpoとReactNativeCliの使い方

スクリーンショット 2019-07-25 0.52.39

React Nativeは、Facebookが開発したJavaScriptのフレームワークでモバイルでも利用できるようにしたものです。

React Nativeを使ってiOS, Androidの両方のアプリケーションを作成することができます。Webで利用するフレームワークのReactを利用したことがあればスムーズに利用できると思います。

アプリのネイティブの機能も利用できるため利用できる幅が広いです。しかし、SwiftやObjective-Cなどのアプリのネイティブ開発言語経験者にとっては、Swiftで簡単に書いていたことをさらに学び直すことになったり、React Nativeのエラーなのかネイティブ部分のエラーなのか判断がつきにくかったりと、なれるまでに少し時間がかかるのも事実です。

そこで、今回はReactNativeのアプリケーションを作成して画面を表示する部分までを解説していきます。

※React Nativeは、まだまだ発展途上でバージョンがドンドンあがり今回の立ち上げ方法が古くなっているかもしれません。随時更新する予定ですが、ご了承ください。

 

 

この記事はこんな方にオススメです。

 

  • React Nativeって何か知らない人
  • React Nativeを聞いたことはあるけど触ったことがない人

 

 

React Nativeとは?

 

react-native-logo

最初に書いた部分と被りますが、Facebookが提供しているJavaScriptのフレームワークです。

今までは、Web開発をしていた人とネイティブアプリを作成していた人は違う言語で書いており、学習コストが高い状態でした。しかし、React NativeのようなJavaScriptのフレームワークを利用することでWeb開発をしていた人もネイティブアプリを開発する一歩を踏み出しやすくなりました。

また、HTMLタグのようにUIパーツを書くことができ、直感的にわかりやすいような書き方になっていると思います。

 

ネイティブとの繋がり

 

ネイティブアプリの作成ツールとして「Xcode」や「Android Stuido」がありますが、React Nativeを使うからといっていらないわけではありません。React NativeはJavaScript言語を用いてネイティブアプリの作成ツールとの連携をしてくれるフレームワークとなっています。そのため、React Nativeの開発時には「Xcode」や「Android Stuido」のダウンロードとインストールが必要です。

 

2つのアプリケーションツール

 

React Nativeで開発をする場合、ツールが大きく二つあります。「Expo」と「react-native-cli」です。

Expoは、開発中にXcodeなどを開かずにアプリケーションの完成まで開発を進めることができます。しかし、デメリットとしてAppleアカウントでの決済のようなネイティブの機能を利用することができません。

react-native-cliは、開発時にXcodeも少し触ります。ネイティブの機能を利用できますがExpoよりもXcodeの使い方などを知らないといけないため、学習コストが少し高い可能性があります。

 

expoとcliツールの違い

 

決済などネイティブの機能を利用しない場合は、Expoでの開発をした方が速いと思います。いろんなモジュールを使う場合に時々Expoは対象外と書いているプログラムもあるので、注意が必要です。

 

環境構築

 

まずは、React Nativeを使えるようにするための環境構築をしていきます。

具体的には、下記をインストールしていきます。

  • node.js
  • expo, react-native-cli
  • Android Studio(URLのみ)
  • Xcode(URLのみ)

私のPCのOSはMacのため紹介画像はすべてMacでのターミナルなどの画面となっています。

 

 

node.jsのインストール

 

スクリーンショット 2019-07-24 22.25.16

node.jsは非同期型のイベント駆動のJavaScript環境です。React Nativeではnode.jsが必須となっています。

まずは、今のPCにnode.jsが入っているか確認します。下記コマンドを打ちバージョンが表示されたらインストール済みです。

macOSやLinuxの場合

WindowのPowerShellの場合

 

もしまだインストールされていない場合は、こちらからnode.jsのホームページにいきダウンロードしてインストールしましょう。

インストーラーを起動して順に進めていくとインストールされます。インストールが完了したあと、バーションを確認してインストールされているか確認してください。

 

 

Expoのインストール

 

次は、Expoをインストールします。

Expoは、nodo.jsをインストールしたときに一緒に付いてくるパッケージングツール「npm」を利用してインストールします。

インストール後にツールのバージョンを表示させてインストールしたかの確認をしましょう。

Expoは別途詳しく説明しますが、expo.ioのアカウントが必要になります。expo.ioのホームページでアカウントを作成しておきましょう。

 

react-native-cliのインストール

 

次は、react-native-cliのインストールです。

ちなみにCLIはCommand Line Interfaceの略です。

react-native-cliもnode.jsのインストールと一緒に付いてくるnpmでインストールします。

バージョンを確認してインストールできたかを確認しましょう。

 

 

Android Studio, Xcodeのインストール

 

本筋と少しずれるためAndroidエミュレータとiOSシミュレータのインストールはリンクのみ掲載します。

Android Studioのインストール

https://developer.android.com/studio/install?hl=ja

 

Xcodeのインストール

https://qiita.com/NolikaOhkawa/items/1bc2960f513d3d6a8882

https://developer.apple.com/download/more/#

また、react-native-cliでは、Xcodeのプラグインツール CocosPodsが必要です。

参考 CodeSchool:https://code-schools.com/cocoapods-install

 

アプリケーションの雛形を作ってみる(iOSのみ)

 

どんな感じなのかを掴むには、まずは作ってみることが大事です。今回はiOSでの立ち上げの方法を解説していきます。Androidは時間があったら追記します。

 

Expoでinitする

 

expoでinitコマンドを打つと、どんなアプリケーションにするのかを聞かれるため十字キーで選択してEnterキーで決めていきます。

 

name部分で青下線になっているので、アプリケーションの名前を決めます。

npmと同じパッケージツールのYarnもインストールすることを聞かれるので、インストールします。すでにYarnがインストールされていたら、それを使うのか聞かれます。

これで作成完了です。コマンドラインでアプリケーションをスタートするまでのコマンドも書かれていますが、lsコマンドで中身を確認しましょう。

 

Expoをスタートする

 

それでは、雛形で作成したExpoProjectをXcodeでシミュレータを起動させてみます。途中でsafariやchromeなどのブラウザが起動されますが、慌てずそのままでコマンドラインをみると下記のような表示になっているはずです。

スクリーンショット 2019-07-25 1.28.34

シミュレータでexpoをひらくか聞かれるので、okしてもらうとExpoアプリケーションが起動します。

Simulator Screen Shot - iPhone X - 2019-07-25 at 01.29.59

この画面になった後、青いボタンの「Got it」をタップするとExpoProjectの中身が起動します。

Simulator Screen Shot - iPhone X - 2019-07-25 at 01.30.44

止めたいときはコマンドラインで「control + c」を打つと止まります。

 

 

react-native-cliでinitする

 

 

 

react-native-cliでスタートする

 

expoと異なるのは、このままスタートするとエラーになるところです。

パッケージのインストールをnpmとXcodeのpodでする必要があります。

まずは、npmコマンドを initした場所で打ちます。

次にiosフォルダに移動してからpodの内容をインストールします。

これは、Xcodeがreact-nativeを利用するためのツールをxcode側でインストールする処理です。

インストールが終わった後、initした場所に戻り、react-native-cliコマンドを打ちます。

すると、info Building …. とドットが沢山続いてきます。Buildingが終わると新しいコマンド画面が立ち上がってシミュレータも立ち上がります。

Simulator Screen Shot - iPhone X - 2019-07-25 at 01.56.27

 

 

まとめ

 

今回は、React Nativeの最初の一歩としてReact Nativeのツールを使ってプロジェクトの立ち上げ方をまとめました。

React Nativeは、まだまだ発展途上でバージョンがドンドンあがり今回の立ち上げ方法が古くなっているかもしれません。

簡単にiOS Androidを作れるかもしれませんが、環境構築で私自身もつまづいた部分が多かったためまとめました。

 

次は、モジュールや書き方なども書いていきますので、お楽しみに!

 


Sponsored Link

コメントを残す

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