*本記事は旧TechblogからCOLORSに統合した記事です。
自己紹介
こんにちは。株式会社エイアイ・フィールドのY.Tと申します。
今回は React naiveでアプリ開発する際にとても便利な「Expo」を紹介します。
目次
- Expoとは
- メリット・デメリット
- 環境構築のやり方
- まとめ
Expoとは
Expoとは、簡単に言うとReact Nativeを使って快適な開発環境を実現するフレームワークです。通常のReact Nativeによる開発より、効率的かつ迅速な開発を可能とします。では実際にどのような特徴があり、開発の効率化に繋がるのかについては、後述のメリット・デメリットの項目をご参照ください。
メリット・デメリット
メリット１・・・実機での確認がすぐできる
専用のExpoのアプリをAndroidまたはiOSのスマートフォンにインストールすると、コードを書いてすぐにアプリの挙動を実機上で試すことができます。デザインなども実機で実際どのように見えるか試しながら、変更したいと思えばコードを修正すればすぐに実機に反映されます。
またAndroidの場合に限りますが、同時発行されるQRコードを使えば、作者の端末でなくても簡単に試すことができます。iOSは作者のみです。
メリット２・・・リリース・ビルドが簡単
Expo上ではコマンド一つでリリース・ビルドが簡単にできてしまいます。Androidで言えばGoogle Play Store、iOSで言えばApp Storeにリリースまでが簡単にできてしまいます。
※iOSに関しては審査があるので、即時リリースとはいきませんが、リリースまでの工程が格段に短くなるのに変わりはありません。
またコードに修正があった場合も、同様にコマンド一つでユーザにも反映されます。他にもPush通知が簡単に実装できる…etc.などあります。
上記のようにアプリ開発の効率化が凄まじいExpoですが、もちろんデメリットもあります。
デメリット１・・・外部のライブラリなどは併用できない
基本的にはExpoがサポートしていないものは使用できません。ただExpoのライブラリは豊富で大抵のことはできます。また現在進行形で開発中なので、今後色々な拡張や対応が期待できるかもしれません。
デメリット２・・・ネイティブモジュールをいじれない
Expoが対応していないネイティブモジュールについては使えません。例えば開発したアプリのバックグランドでの実行には対応していません。対応していないものを使うようなアプリであれば、使用は諦めるしかないでしょう。
その他にも制限はありますが、そちらについては公式HPでご確認ください。
→ https://docs.expo.io/introduction/why-not-expo/#limitations-of-the-managed-workflow
環境構築のやり方
前提としてMacでの構築方法について解説していきます。また後続の作業をする前にGitのインストールとGithubのアカウントの作成はしておいてください。
まずNode.jsをインストールします。今回は複数のバージョンを簡単に切り替えられるNVSを用いてインストールします。以下URL先の「Set Up」の項目にOS別のインストールコマンドがあるので、ターミナル上で実行します。MACの場合は画像のとおりです。
インストールができたら「nvs –version」と入力するとnvsのバージョンが表示されます。
nvsがインストールできたら、node.jsをインストールしましょう。インストール前にnode.jsの公式HPに行き、最新バージョンを確認しましょう。」
この記事を作成している時点での推奨バージョンは14.15.5なので、「nvs add 14.15.5」とターミナルに入力します。
正常にインストールできたら、使用したいnode.jsのバージョンを指定します。先述のとおり、様々なバージョンのnode.jsをインストールしていても、次のコマンドでバージョンを使い分けることができます。
例えばバージョン14.15.5のnode.jsを使用したい場合は、「nvs use 14.15.5」とターミナルに入力します。入力できた後に「node –version」と入力してみると、現在使用しているnode.jsのバージョンが表示されます。別のバージョンに切り替えたい場合は、「nvs use」のあとに使いたいバージョンを指定すればOKです。
次にExpoのアカウントを作成します。ターミナルはまたすぐ使うので、そのままの状態にしておいてください。
公式HPに移動します。→ https://expo.io/
「Sign Up」ボタンをクリックして、必要項目を入力してアカウントを作成します。
アカウントの作成が完了したら、先ほどのターミナル画面に戻ります。
まずは「npm show expo-cli」と入力して、Expoの最新バージョンを確認します。すると以下のような表示になります。
下のほうに「latest 4.1.6」とあるので、最新のバージョンが4.1.6とわかります。こちらもあくまで本記事の作成時点の最新バージョンとなりますので、ご自分の画面に表示されたバージョンをインストールしてください。
インストールコマンドは「npm install -g expo-cli@4.1.6」となります。「＠」のあとにバージョンを付け加える形です。インストールが完了したら、「expo –version」と入力するとexpoのバージョンが表示されます。
次に先ほど作成したExpoのアカウントを使ってターミナル上からログインします。
まずは「expo login」と入力します。するとユーザネームまたは登録したメールアドレスを聞かれるので、入力します。入力してEnterを押すと、次はパスワードを聞かれるので続けて入力します。ログインできたら「success」と表示されます。ここで「expo whoami」と入力すると、自分のユーザ名が表示されるので、ログインできたことを確認できます。
最後にExpoのプロジェクトを作成していきます
まずはデスクトップなど適当な場所にExpoのプロジェクトフォルダを作成します。コマンドは「mkdir “フォルダ名”」です。ここではProjectというフォルダを作成します。フォルダを作成したらcdコマンドで作成したフォルダに移動してから、「expo init –npm」と入力し、Expoのプロジェクトを作成します。
入力すると「What would you like to name your app?」と作成したいアプリの名前を聞かれます。ここでは適当に「HelloApp」と入力します。
その次はテンプレートメニューの選択画面なります。↓キーでメニューを選択できます。
ここでは一番上「blank」を選択して、Enterを押します。これでExpoに必要なものが準備され、フォルダ内に様々なファイルが作成され、「Your project is ready!」と準備ができたメッセージが表示されます。
これで作成したProjectというフォルダに下にHelloAppというExpoのフォルダが作成されます。lsコマンドを入力すると確認できると思います。
ここでcdコマンドでHelloAppフォルダ内に移動し、「expo start」と入力すると、ウェブブラウザ上でExpoの開発ツールが開きます。
スマホに「Expo Go」というアプリをインストールして、Expoの開発ツールの左下にあるQRコードを読み込むと、この時点でアプリを起動することができてしまいます。
もちろん現段階では何もアプリのコードを書いていないので、最初は「Hello there, friend!」と書かれたアプリの初期画面が表示され、「Got it」というボタンをクリックすると、「Open up App.js to start working on your app!」というメッセージが表示されるだけです。ここからプロジェクトフォルダ内に自分の開発したいコードを書いていくだけで、すぐにアプリの挙動をスマホ上で確認できるわけです。
最後に一旦ターミナル上でのExpoアプリの起動をControl + Cで停止してから、「expo publish」というコマンドを入力すると、実行結果の最後の行に「Project page :」URLが発行されます。こちらを開くとQRコードが書かれたアプリのページが表示されるので、こちらのURLを共有したい人に送れば、他の人もそのQRコードを読み込んですぐにアプリを試せるわけです。
※共有はAndroidのみです。iOSは審査が必要なため、すぐの共有はできません。開発者自身での確認はできます。
まとめ
開発しながらすぐに実機での確認や共有ができてしまうので、Expoを使えば効率的に高速でアプリ開発ができてしまいます。デメリットに記載した機能を使わないアプリの開発であれば、一度検討されてみてはいかがでしょうか。
