BLOG

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

2019-11-14

この記事の内容

  1. React Nativeとは？
    1. React Nativeのメリット
    2. React Nativeのデメリット
  2. React Nativeを試しましょう
  3. React Nativeの開発環境設定
    1. 開発環境
    2. Node.jsとNpmのインストール
    3. Expo-clのインストール
  4. 最初のアプリを作ってみよう
    1. セットアップ
    2. アプリスタート
    3. 修正してみよう
  5. React Nativeのコードについて
  6. 印象
  7. 次回
  8. 参考のリンク

1.React Nativeとは？

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

■React Nativeのメリット

  • Facebook社が作っており、Facebook, Skype, Instagram, Uber Eatsなど人気なアプリはReact Nativeで作られているので未来的にサポートは続きそうです。
  • 一つのプログラムを書いて、iOSアプリにもAndroidアプリにもなるのでOSを選ばずにみんなが使えるアプリになります。React Nativeは最初はAndroidとiOSのためのものでしたが、コミュニティーがサポートしているプラットフォームはWindows、macOS、ウェブ、tvOSなどもあります。
  • JavaScriptと「JSX」というマークアップ言語だけでアプリが作れるのでJavaScriptができる人にはとても使いやすいです。
  • React Nativeの開発のビルドは早いです。コードを更新した結果を早く見ることができます。
  • node.jsの環境なのでnpmにあるパッケージが全部使えます。Node.jsはサーバーとして使われているJavaScriptを実行するものです。npmはnode.jsのパッケージマネージャで、色々な人によって作られたオープンソースの関数が使えます。日付フォーマットなどよく必要になるパッケージもReact Native向けのパッケージがあります。

■React Nativeのデメリット

  • React Nativeはまだ歴史が浅いのでツールやパッケージはエラーがでる可能性があります。エラーをグーグルで検索してもまだだれも対応方法が分からない可能性があります。
  • 歴史が浅いフレームワークなので、もし必要な特定の機能がReact Nativeで作れない場合、自分で作らなければいけません。React Nativeで使えるネイティブな機能は多いですが、特別な機能が必要ならiOSとAndroidのエンジニアが必要な時もあります。

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の開発との違いは大きくないと思います。

環境設定前の環境

  • Windows 10
  • iPhone 6S (iOS 12.4.1)
  • VS Code 1.39.2 (テキストエディターはお好みで)

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

  • Expo モバイルアプリ
  • Node.js 12.13.0
  • Npm 6.12.0
  • Expo-cli 3.4.1

■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.参考のリンク


これからエンジニア転職を考えている方へ
ロックシステムではエンジニアスクール「ロックシステムアカデミー」を運営しています。
プログラミングの基礎知識から本格的な開発ノウハウまでしっかり教えます！

教室は生のIT企業！
◆　実際の開発プロジェクトを通して経験できる！
◆　現役エンジニアが直接指導！
◆　20代の転職成功率100％！

是非公式ホームページもご覧ください
未経験からITエンジニアをめざすならロックシステムアカデミー
大阪市福島駅すぐの現役SE直接指導のプログラミングスクール開校
https://rocksystem.co.jp/academy/

株式会社ロックシステム

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

他の記事へ

CATEGORY