iimon TECH BLOG

iimonエンジニアが得られた経験や知識を共有して世の中をイイモンにしていくためのブログです

スマホ向けアプリを気軽に作れる 「React Native EXPO」

こんにちは!!

iimonでエンジニアをしているいまいです。

折角プログラミングやっていることだしおもしろいものを作りたいですよね!

というわけで今回はお気軽にスマホ向けアプリを開発できる『react expo』の紹介と実際に使ってみた感想をまとめます!

react expo とは???

 その解説の前に『React Native』を説明する必要があります。

 React Nativeとは Facebook(現Meta社)が開発した、1つのコード(例えばJavascript)でiPhoneAndroidアプリの両方を作れる開発用フレームワークです。通常、iPhoneアプリはSwift、AndroidアプリはKotlinという別々の言語で開発する必要がありましたが、React Nativeはそれを1つにまとめました。

 そのような利点がある一方で、ちょっとめんどくさいところもあったりします。React Native単体でのアプリ開発は環境構築の段階から一定のハードルがあります。例えばアプリを完成させる「ビルド」作業のために、自分のPCにXcodeAndroid Studioをインストールすることが必須となります。つまり、React Nativeを利用してアプリを開発してもビルドして公開するためには結局XcodeAndroid Studioを通す必要があるというわけです。

 対してexpoはReact Nativeの問題点を解消した拡張機能のようなものとして捉えられます。expoではビルド作業をExpo Application Services(EAS)というexpo上のクラウドが実行してくれるためXcodeAndroid Studioを介する必要がなくなり、より直線的でスムーズなアプリ開発を可能にしてくれます。さらに、開発中の動作確認が驚くほど簡単なのも魅力です。「Expo Go」という専用アプリをスマホに入れ、QRコードを読み取るだけで書いている途中のアプリを手元のスマホでリアルタイムに動かすことができます。この仕組みのおかげで通常はMacでしかできなかったiPhoneアプリのビルドがWindowsLinuxの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

https://note.com/happy_avocet7237/n/n1f7d6060d147

https://engineer-style.jp/articles/9632