今年の5月にインプルへジョインした堀江＠2児の父です。
インプルはReact Nativeをはじめとしたスマートフォンアプリ開発を強みとした会社であり、かくいう私も前職でReact Nativeを使用したアプリ開発の経験があってまだまだアプリ開発のスキルを伸ばしていきたいと思い、ジョインしたという経緯があります。
元々はWeb分野でシステムエンジニアをやっていたのですが、PHPとJavaScriptの経験しかなかった私がスマートフォンアプリを開発できるようになったきっかけが、React Nativeでの開発を更に簡単にしてくれるExpoという技術でした。
初めてスマホ実機で書いたコードが動いているのをみた時は「こんな簡単にアプリが作れるのか！」と感動し、最初に執筆する記事はぜひExpoにしたいなと思っていたので、ExpoとクラウドIDEを使ったスマートフォンアプリ開発環境の作り方をご紹介します。
はじめに
本記事では、GitHubとGitHub Codespacesの例を紹介しますので、GitHubの登録を事前に済ませてください。（登録方法は割愛します）
また、記事執筆時点ではGitHub Codespacesは個人向けプランのみ無料となっていますが、将来的に有料プランへ移行する可能性があります。あらかじめご了承ください。
Expo Goアプリをインストールする
手持ちのスマートフォンのストアアプリからExpo Goアプリを検索して、インストールします。
リポジトリを作成する
「Create Repository」でリポジトリを1つ作成します。本記事ではリポジトリ名をtest-expoとしています。
この時、README.mdファイルの追加にチェックを入れてください。（理由は後述）
開発環境を作る
Codespacesを起動する
リポジトリのメニューから「Codespaces」を選択します。
次の画面に表示される「New codespaces」のボタンを押下すると、Codespacesの設定画面が表示されるので、先ほど作成したリポジトリを選択し「Create codespaces」を押下します。
※リポジトリにファイルが未登録だとcodespaceが作成できないようになっているため、ここでそのようなメッセージが表示される場合は、何かしらファイルを登録しておきましょう。（README.mdを作ったのはこのためです）
無事codespaceが作成されると、見慣れたエディタの画面が表示されます。
せっかくなので、画面下に表示されたターミナルで下記のコマンドを実行してみましょう。
$ node -v
↑のようにv20.9.0のようなバージョン番号が表示されればOKです。
Expoのテンプレートを入れる
ターミナルで下記のコマンドを実行します。
$ npx create-expo-app
What is your app named?で入力した名前のフォルダができるので、カレントディレクトリを切り替えておきます。
$ cd app名package.jsonを開き、
"start": "expo start",と記載されている行を下記のように書き換えて保存します。
"start": "expo start --host tunnel",Expo Goアプリで動作確認する
ターミナルで下記のコマンドを実行します。
$ npm run start途中で「The package @expo/ngrok…」というメッセージが表示されたらyと入力してください。
しばらくすると下記のようなQRコードが表示されます。
このQRコードを、Expo Goアプリでスキャンしてみましょう。
アプリのロードが完了すると「Open up App.js to start working on your app!」と記載された画面が表示されると思います。
コードを編集するとリアルタイムでExpo Goアプリの方にも反映されるので、それを試してみます。
App.jsファイルをCodespaceのエディタで開き、
backgroundColor: '#fff',と記載された部分を下記のように書き換えてみてください。
backgroundColor: '#ff0',
また、
<Text>Open up App.js to start working on your app!</Text>を
<Text>Expoで作ったテストアプリ！</Text>にすると、テキストが変わることも確認できるかと思います。
大まかな流れとしては以上になります！
他にもこうすればこう変わるんじゃないか…？と思うようなことを色々試してみてみましょう！
あとがき
いかがでしたでしょうか？
開発環境は作るのも維持するのも面倒なイメージがありますが、今やGitHub CodespacesのようなクラウドIDEを使うことで、手軽に開発環境を作ることができます。
更にExpoなら、面倒な設定要らずでリアルタイムにスマホ実機での動作確認も可能です！
更に更に、クラウドIDEはWebで動くのでiPadのようなタブレット端末でも使えますし、がんばればスマホのWebブラウザからCodespaceを起動して、スマホだけで開発する…なんてことも可能です！
この記事がExpo(React Native)でのアプリ開発を始めるきっかけになりましたら幸いです。ぜひチャレンジしてみてください！