はじめに

こんにちは！ FM_Harmonyです。 Rakus Developers Blogでは3回目の投稿になります。

↓ 前回の記事はコチラ

ech-blog.rakus.co.jp

先日、React Nativeを使ったスマホアプリ開発についての勉強会に参加しました。 なので、今回はその時学んだこと + 後から自分で調べたこと
についてまとめました。

この記事が、「Reactやってみたいなー」という方の参考になれば嬉しいです。

• はじめに
• 前置き〜スマホアプリの分類
• React Native とは？
• Expoとは？
• Hello World をやってみる
• • 環境構築
  • プロジェクト作成
  • サンプルを確認してみる
  • Hello World!
• 困ったところ
• • アプリが起動できない！
  • 実機で動かせない！
• 感想

前置き〜スマホアプリの分類

いわゆるスマホアプリは大きく分けて2種類あります。*1

• Webアプリ
  ブラウザ上で動作するアプリケーションです。 HTMLやCSSなどを使って開発します。
• ネイティブアプリ
  スマホ上で直接動作するアプリです。 例えば、Android向けアプリだったらAndroid Studioを使って開発します。

今回お話しするのは、ネイティブアプリの開発についてです。

React Native とは？

React Nativeとは、ネイティブアプリをJavaScriptとReactでビルドするためのフレームワークです。 素のJavaScriptのみでアプリ開発を行うことができます。

特徴としては、アプリケーションの更新を即座に反映させることができることがあります。 ビルドしなおさなくても、読込みし直すだけで変更を確認することができるので開発速度の向上につながります。

Expoとは？

端的にいえば、React Nativeでの開発をサポートするツールです。 博覧会じゃありません もともとはExponentという名前だったそうです。

Expoの特徴はいくつかありますが、一つは基本的にiOS/Androidアプリの区別をすることなく開発を進められる事が挙げられます。 Expoはネイティブ層を隠しているので、両者の違いを意識しなくて済む・・・らしいです。

さらに、実機での検証が簡単に行えることも特徴の一つです。 これについては、またあとで触れたいと思います。

Hello World をやってみる

それでは、ExpoでHello Worldをやってみましょう。 今回のゴールは、スマホの画面にHello World!
と表示させることです。

なお、作業はmacOSで行っています。 Windowsでもできますが、説明は省略します。

環境構築

まず、開発環境を構築しましょう。 Expoで開発を行うためには、以下のものが必要になります。

• npm（もしくはyarn）
• Node.js
• watchman
• create-react-native-app

この内、watchmanとcreate-react-native-appについて説明します。

watchman
これがないとアプリケーションを動かすことができません。 Homebrewでインストール可能なので、やっておきましょう。

create-react-native-app
プロジェクトを作成する際に必要です。 こちらはnpmでインストール可能です。 インストールの際には、グローバルオプションを付けておきましょう。

プロジェクト作成

では、次にプロジェクトを作成します。 次のコマンドを実行すると、カレントディレクトリ直下にプロジェクトのひな形が作成されます。

サンプルを確認してみる

プロジェクトが完成したら、すぐに動かすことができます。 先ほど作成されたプロジェクトのディレクトリへ移動して、以下のコマンドを実行してみます。

↓npm の場合

↓yarn の場合

起動に成功すると、大きなQRコードが表示されると思います。
↓ QRコードが表示されています（読み込みできないように一部塗りつぶしています）

ExpoではこのQRコードをスマホ上で読み込むことで、簡単に動作確認を行うことができます。 ただし、QRコードの読み込みには専用のアプリケーションが必要です。
iOSならExpo Cliant
、AndroidならExpo
をそれぞれマーケット上で検索すればすぐ見つかるはずです。

では、今回はiOSでQRコードを読み込んでみましょう。 アプリの読込後に、画像のような画面が表示されていれば成功です。

↓ アプリの画面（諸事情によりエミュレータ上で動かしています）

Hello World!

上の画像にも書いてありましたが、アプリケーションはApp.js
を編集することで変更が可能です。
そこで、アプリを読み込んだままApp.js
を開いてみましょう。

すると、<View> ... </View>
で囲まれたブロック内に、<Text>...</Text>
のようにタグで囲まれたコードがあるはずです。 この部分を次のように変更して保存します。

↓ ...
の部分は変更しないでください

実機を確認すると、画面が自動的に変更されたことが確認できます。

↓ Hello World! になっている！

ということで、ExpoでHello Worldができましたね！
今回は簡単な例でしたが、Expoを使うと簡単、かつお手軽にスマホアプリ開発ができることが分かりました。

困ったところ

今回、この`Expoを触ってみて幾つか困った点があったので紹介します。

アプリが起動できない！

プロジェクトの作成も完了し、さてどんな風に動くのかなとアプリを起動させたところ・・・

↓こんなエラーが出ました。

そこで調べた結果、watchmanが必要なことを知ったのでした。

実機で動かせない！

簡単に実機で動作確認できることがExpoの売りですが、自分の場合実機での確認ができませんでした。
実機で動作確認するためには、作業用PCと実機が同じネットワークにある必要があるのですが、どうもそこのところで上手くいかなかったようです。

↓QRコードを読み込んでも、こういう画面が出てきてしまう。

なので、そういう場合はエミュレータで動作確認しましょう。

macOSの場合、XCodeに付属しているエミュレータを利用することができます。 アプリケーションを立ち上げた後に、i
ボタンを押せばiOSのエミュレータ上で動作確認が行えます。

ただし、その場合はxcode-select -s /Application/Xcode.app
みたいな感じで、コマンドを実行しておく必要があります。 これは、XCodeのコマンドラインツールを指定しているらしい*2です。

感想

なんといっても動作確認の手軽さがすごく便利です。 ビルドのわずらわしさから解放されるだけで、かなりサクサク開発が進むなあと感じました。

あと、今回は残念ながらできませんでしたが、実機での動作確認がQRコードを読み込むだけだというのもお手軽で魅力的です。

私が今回のテーマについて勉強しようと思った理由は、「Reactってよく聞くし始めてみようかな」くらいの軽いものでした。 なので、こういう手軽なところからアプリ開発に親しみつつ、Reactについて勉強することで効率よく学習できそうだと思いました。