こんにちは!!
iimonでエンジニアをしているいまいです。
折角プログラミングやっていることだしおもしろいものを作りたいですよね!
というわけで今回はお気軽にスマホ向けアプリを開発できる『react expo』の紹介と実際に使ってみた感想をまとめます!
react expo とは???
その解説の前に『React Native』を説明する必要があります。
React Nativeとは Facebook(現Meta社)が開発した、1つのコード(例えばJavascript)でiPhone、Androidアプリの両方を作れる開発用フレームワークです。通常、iPhoneアプリはSwift、AndroidアプリはKotlinという別々の言語で開発する必要がありましたが、React Nativeはそれを1つにまとめました。
そのような利点がある一方で、ちょっとめんどくさいところもあったりします。React Native単体でのアプリ開発は環境構築の段階から一定のハードルがあります。例えばアプリを完成させる「ビルド」作業のために、自分のPCにXcodeとAndroid Studioをインストールすることが必須となります。つまり、React Nativeを利用してアプリを開発してもビルドして公開するためには結局XcodeやAndroid Studioを通す必要があるというわけです。
対してexpoはReact Nativeの問題点を解消した拡張機能のようなものとして捉えられます。expoではビルド作業をExpo Application Services(EAS)というexpo上のクラウドが実行してくれるためXcodeやAndroid Studioを介する必要がなくなり、より直線的でスムーズなアプリ開発を可能にしてくれます。さらに、開発中の動作確認が驚くほど簡単なのも魅力です。「Expo Go」という専用アプリをスマホに入れ、QRコードを読み取るだけで書いている途中のアプリを手元のスマホでリアルタイムに動かすことができます。この仕組みのおかげで通常はMacでしかできなかったiPhoneアプリのビルドがWindowsやLinuxのPCでも可能になります。何気にありがたいですよね。
react expo 実際に使ってみた。
・まずは公式サイトでアカウント登録をしましょう
・次に動作確認のために「Expo Go」という専用アプリをスマホにインストールしておきましょう
iOS https://apps.apple.com/jp/app/expo-go/id982107779
Android https://play.google.com/store/apps/details?id=host.exp.exponent&pli=1
・プロジェクトを作る〜開発サーバーを起動、実機確認まで
プロジェクトを作成したい場所で、以下のコマンドを実行します。
npx create-expo-app アプリ名
次に先ほど作成したフォルダに移動します
cd アプリ名
開発サーバーを起動します
npx expo start
・これを実行するとQRコードが表示されるので、先ほどインストールしたスマホの「Expo Go」アプリで読み取ればすぐに実機で動作確認ができます!
読み込むとこんな感じになります!

そしたら次に以下のコマンドを実行します
npm run reset-project
このコマンドを使うことで npx create-expo-app を実行した時に設定されたサンプルコードを退避させることができます。 ここでもう一度、 npx expo start を実行しQRを読み込むと以下のようになります

あとは目的に合わせたアプリを開発するだけです!!
おまけ
試しにささっとこんなのを作ってみました。できることの幅が広くなると楽しいですね


まとめ
ここまでお読みいただき、ありがとうございます! 次回は実際にちゃんとしたアプリ開発の体験記でも書こうかなと思います!
弊社ではエンジニアを募集しております。
この記事を読んで少しでも興味を持ってくださった方は、ぜひカジュアル面談でお話ししましょう!
下記リンクよりご応募お待ちしております!
iimon採用サイト / Wantedly / Green
参考文献・記事
https://zenn.dev/cloud_ace/articles/b14fa9fc56ecb6
https://swallow-incubate.com/archives/blog/20190930/
https://qiita.com/Akihiro0711/items/bf9e96c36cc808052094