SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ExpoとEASで始める快適モバイルアプリ開発

モバイルアプリ開発の総合インフラ「Expo」でアプリ開発を始めよう

ExpoとEASで始める快適モバイルアプリ開発 第1回

  • X ポスト
  • このエントリーをはてなブックマークに追加

React Nativeを快適に扱うためのExpo

 次はいよいよ、本連載の軸となるExpoについて解説します。Expoは、React Nativeを簡便に扱うためのフレームワークです。前述のReact Nativeの煩雑さを隠蔽し、より開発者がアプリ開発に集中するために割り切った設計になっています。

 React Native単独での開発との差が最もわかりやすい点として、プロジェクト構成がシンプルであることが挙げられます。Expoのプロジェクト作成コマンドを npx create-expo-app@latest --template blank のように実行すると、図5のプロジェクトが作成されます。

図5:Expoプロジェクトの構成
図5:Expoプロジェクトの構成

 npmプロジェクトの範疇で、かなりシンプルな構成になっていますね。信じがたいかもしれませんが、この内容で図3のプロジェクトと同等の画面を実装できます。なぜ可能なのかと言うと、ExpoのプロジェクトではJavaScriptによるReactアプリケーションのコードと、画像等のアセットしか扱わない作りになっているためです。

 Expoによるアプリ開発において、プロジェクト内ではJavaScript部分のビルドだけを行います。しかし、図4のアーキテクチャを満たさなければ、React Nativeのアプリとして動作できません。では、どうやってアプリとして動作させるのかと言うと、Expoがあらかじめ用意しているベースプロジェクトに、作成したReactアプリケーションを後から組み込むのです。

 デバッグ時とリリースビルド時では、このベースプロジェクトの使い方が異なります。リリースビルド時の話題は後述することにして、ここではデバッグ時の話をしましょう。デバッグ時は、Expoが提供するExpo Goというアプリを使って、ネイティブアプリのように動作させることができます。

 Expo Goは、App StoreやGoogle Playからダウンロードできるアプリです。Expoプロジェクトの開発サーバーが発行するQRコードを読み取ることで、開発サーバーからJavaScriptバンドルをアプリにダウンロードして、動作させることができます。このため、開発中のアプリを実機で動作確認する際に、ネイティブ部分のビルドの手間を省くことができます。図4のアーキテクチャ図を踏襲する形でイメージ図を描くと、図6のようになります。

図6:Expoの動作確認のイメージ
図6:Expoの動作確認のイメージ

 React Nativeのアーキテクチャの大半がExpoによって隠蔽されているため、開発者はJavaScriptのコードを書くだけで、アプリの動作を実機で確認できるというわけです。こうした開発体験は、ReactやJavaScriptに慣れ親しんでいるエンジニアにとっては、非常に魅力的なものでしょう。

 なお、副次的な効果として、開発マシンがWindowsである場合にも、Expo GoがインストールされたiPhoneがあれば、iOSアプリの動作確認が可能です。JavaScriptのビルド環境さえあればいいという特性が、開発環境の選択肢を広げることにもつながります。

アプリ運用をサポートするExpo Application Service

 さて、Expoを用いることで、開発マシン内にはNode.js環境だけを用意すればよさそうなことがわかってきました。開発が終わったら、次はリリースビルドをしたり、App Store ConnectやGoogle Playコンソールにアプリをアップロードしたり、継続的にアップデートしていきたいですね。Expoでは、これらの作業をサポートするためのExpo Application Service(EAS、イーエーエス)というサービスが提供されています。

 EASは、アプリのビルド等を支援するためのSaaSと、それを操作するためのコマンドラインツール(eas-cli)の総称です。EASを使うことで、アプリのビルドやリリース、アップデートの作業を、手動で行うよりも簡単に行うことができます。EASの機能は、大別して次のようなものがあります。

  • EAS Build:アプリをビルドしてaabやipaファイルを生成する
  • EAS Submit:アプリをストアにアップロードする
  • EAS Update:アプリのアップデートを配信する

 EAS Buildは、動作確認の時点でExpo Goが肩代わりしてくれていた部分を、本物のアプリとしてビルドするためのサービスです。ビルドサーバーにJavaScriptとアセットをアップロードすると、Androidアプリのaabファイルや、iOSアプリのipaファイルを生成して、ダウンロードできるようになります(図7)。

図7:EAS Buildのイメージ]
図7:EAS Buildのイメージ

 ビルドのために、事前にAndroidのキーストアやiOSの証明書をEASに登録しておく必要があるのですが、それに付随して、非常に大きなメリットがあります。証明書の更新もEASのコマンドラインツールがサポートしてくれるのです。Apple Developer Programの証明書更新は、毎年のように行わなければならない作業ですが、EASを使うことで簡略化することができます。

 EAS Submitは、生成したaabファイルやipaファイルをApp Store ConnectやGoogle Playコンソールにアップロードするためのサービスです。こちらも事前にAPIキーを登録しておくことで、アップロード作業を自動化することができます。

 EAS Updateは、ストアを通さずにアプリのアップデートを配信するためのサービスです。Expo Goの仕組みを本番環境に応用した仕組みで、リリース後のアプリが新しいJavaScriptバンドルをダウンロードして、アプリの挙動を変更する仕組みを組み込めます。

 これらの仕組みを活用することで、より簡単に、柔軟に、アプリを運用できるのです。EASを使えるというだけで、Expoの採用には大きなメリットがあります。

次のページ
はじめてのExpoプロジェクト

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
この記事の著者

WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/20328 2024/10/31 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング