TOP

BLOG

技術研究ブログ

【React Native】基礎知識とExpoを使用した開発環境構築!

【React Native】基礎知識とExpoを使用した開発環境構築!

2019-11-14

1.React Nativeとは?


React NativeはJavaScriptでAndroidとiOSアプリを作るためのオープンソースのフレームワークです。AndroidとiOSのコードにコンパイルせずに、デバイスでJavaScriptを実行することができます。React NativeはReactJSを使いますが、ReactJSを知らなくてもReact Nativeでアプリが作れます。Facebookによって2015年3月にリリースされました。

■React Nativeのメリット

■React Nativeのデメリット


2.React Nativeを試しましょう


開発環境構築をする前に、まずはReact NativeがどんなものかExpo Snackというサービスで試してみましょう。

Expo Snack はReact Nativeのコードを書くことができ、HTMLのcodepenと同じようにすぐに画面を確認できるサービスです。

Expo Snack のリンクをクリックしたら下記のような画面が見えます。右にあるWebのボタンをクリックして、コードを変更したら結果が見えます。

下のようにコードを書いたら右に見えます。snackはReact Nativeの勉強の時と早く結果みたい時も便利そうです。

自分の携帯でもテストができます。

まず携帯にExpoのアプリをインストールしていきます。

上の画面のRunをクリックして、iPhoneを使っている場合はGet iOS Appをクリックして、Androidを使っていたらGet Android Appをクリックしたら、必要なアプリが表示されます。

今回はiPhoneなのでアップストアから携帯にダウンロードします。アプリを開いて、左側「Projects」をタップすると下の画面のようにDevice IDがあります。そのIDを入れたら、携帯でブラウザーと同じようにコードの結果がすぐ確認できます。


3.開発環境設定


では、さっそく準備をしていきましょう。

今回はExpoというオープンソースのReact Nativeで開発するための無料ツールを使用します。

ExpoはXcode(iOSの統合開発環境)やAndroid Studio(Androidの統合開発環境)を使わなくてもアプリを作れる便利なツールです。React NativeのオフィシャルサイトでもExpoがすすめられています。

■開発環境

今回の開発環境は下記の通りです。こちらはWindowsとiPhoneですが、MacとAndroidの開発との違いは大きくないと思います。

環境設定前の環境

この記事でインストールするもの

■Node.js とNpmのインストール

node.jsからインストールできるのでLTS推奨版をダウンロードします。

許可にチェックしてください。

ここは保存先です。変更する場合は「Change」から変更してください。

CustomSetupは下記のようにデフォルトのままで大丈夫です。

下に書いていることは「C/C++からコンパイルが必要なnpmモジュールがあります。このようなパッケージが必要であればPython 2、Visual Studio Build Toolsなどツールが必要です。チェックしたらツールをインストールします。」という内容なので今回はチェックを外しても大丈夫です。

インストールが終わったらコマンドで確認できます。下記のコマンドを実行して、バージョンが表示されたら、インストールは成功です。

node --version
npm --version

■Expo-clのインストール

次は、npmを使ってexpo-cliをインストールしましょう。

管理者としてコマンドを開き下記のコマンドでインストールできます。

管理者ではない場合、エラーが出てくるので気を付けてください。

npm install expo-cli --global

これですべてインストールは完了です。


4.最初のアプリを作ってみよう


expo-cliのインストールが完了したらアプリを作りましょう。

■セットアップ

使いたいフォルダに移動します

cd フォルダへのディレクトリ

下のコマンドを書いたらオプションが選べます。

expo init my-new-project

プロジェクトのテンプレートが選べます。どれを選択してもいいですが一番目のblankを選びました。

次に、アプリの名前が変更できます。


最後にnpmに必要なパッケージがダウンロードされて、セットアップ完了。

■アプリスタート

次に、新しく作られたダイレクトリーに移動したらアプリをスタートできます。パソコンと携帯のネットワークは同じであれば--tunnelが必要じゃないですが、--tunnelを追加したらネットワークの設定を考えずに接続できます。

cd my-new-project
expo start --tunnel

※エラーが出た場合

「Metro Bundler process exited with code 1」のエラーがでてきたら「~\my-new-project\node_modules\metro-config\src\defaults\blacklist.js」のファイルで14行目くらいにある コードを修正したらエラーがなくなります。このエラーはWindowsだけのエラーらしいです。

修正前のコード

var sharedBlacklist = [
    /node_modules[/\\]react[/\\]dist[/\\].*/,
    /website\/node_modules\/.*/,
    /heapCapture\/bundle\.js/,
    /.*\/__tests__\/.*/ ];

修正後のコード

var sharedBlacklist = [
   /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
   /website\/node_modules\/.*/,
   /heapCapture\/bundle\.js/,
   /.*\/__tests__\/.*/ ];

問題なければQR Codeが表示されます。Expoのアプリ(snackで使用した同じアプリ)は携帯にインストールしていればQR Codeをスキャンしたらアプリはビルドされて携帯で使えます。iOSは普通のカメラアプリで、AndroidはExpoのアプリでQR Code をスキャンできます。

携帯でこんな画面が見えます。

■修正してみよう

App.jsをVS Codeで開いてなにか変更し保存をすると、自動に携帯に再ビルドされて変更後のアプリがすぐ見えます。例えば、App.jsのbackgroundColorは#fffから”yellow”に変更したら黄色のアプリになります。

補足: -wのフラグを使ったらウェブでもビルドできます!

expo start -w

5.React Nativeのコードについて


このコードを見たらJavascriptコードのように見えないですが、HTMLと似ている があります。これはJSXというマークアップ言語です。React Nativeの開発のほとんどの場合はJSXを使います。ビルドしたら自動的にJavaScriptのコードになります。

JSXについては下記の記事で説明しています。
【React Native】JSXとは?

6.印象


モバイルアプリを作るときはReact NativeとExpoを使いたいと思います。XCodeとAndroid Studioを使うのはややこしいので自動に処理されるのは楽だと思いました。ビルドのスピードもいい印象があります。悪い印象はExpoのエラーがでてきたことだけです。まだ若いツールだから他のバグもあるかもしれません。


7.次回


次回はReact Nativeで簡単なアプリを作ります。


8.参考のリンク



株式会社ロックシステム
「ブラック企業をやっつけろ!!」を企業理念にエンジニアが働きやすい環境をつきつめる大阪のシステム開発会社。2014年会社設立以来、残業時間ほぼゼロを達成し、高い従業員還元率でエンジニアファーストな会社としてIT業界に蔓延るブラックなイメージをホワイトに変えられる起爆剤となるべく日々活動中!絶賛エンジニア募集中。

他の記事へ