今回やっていくのはReact Nativeの環境構築です。
個人的に麻雀が好きで実際に牌を触りながら遊ぶことがあるのですが、普段はネット対戦ばかりのために点数計算は友人任せです。
そんな友人を点数計算の呪縛から解き放つべく、点数計算アプリを作ろうと思いつきました。
出先で使うことを考えるとネイティブアプリの方が良さそうなのでReact Nativeを選択し、その前準備として環境構築を行ったのでまとめてみました。
使用技術
・React Native
・Expo
・Docker
・WSL2
使用技術解説
React Nativeとは？
React NativeはFacebook製のクロスプラットフォーム開発用のフレームワークです。
一つのコードでAndroid・iosの両プラットフォームで動作するため、人気を博しています。
開発言語がJavaScriptであり、特にReact開発を行ったことがある人にとっては使いやすいのではないでしょうか。
同じクロスプラットフォーム開発用のフレームワークとしてFlutterがありますが、ネイティブアプリ開発自体経験がないため今回はReact Nativeを選択しました。
Expoとは？
一言で言うとReact Nativeの開発ツールの1つです。
通常必要なXcodeやAndroid Studioが不要で、実機確認もQRコードを読み込むだけで行うことが出来ます。
作成するものによるとは思うのですが、デメリットとしてハードウェア部分の制御に制限があるようです。基本的には使用できるものの、Bluetoothやカメラなどを使用する際には確認を取る必要がありそうです。
今回はお試しということで手軽に始められるExpoを採用しました。
環境構築
前提：DockerとWSL2の設定は既に完了しているものとします。
■プロジェクトフォルダ
┣app
┣docker-compose.yml
┗Dockerfileversion: '3'
services:
app:
build: ./
volumes:
- ./app/:/usr/src/app
tty: true
stdin_open: true
environment:
- REACT_NATIVE_PACKAGER_HOSTNAME={ipconfig}
ports:
- "19006:19006"FROM node:latest
WORKDIR /usr/src/app
RUN yarn global add expo-cli構築手順
まずはコンテナのビルドと起動を行います。
docker-compose up -dコンテナが起動したらコンテナ内に入り、expoのプロジェクトを作成します。
docker compose run --rm app bash --login
expo init .ここでテンプレートの選択ができますのでお好みのものを選択してください。
そしたら最後にExpoサーバーを起動して完了です。
npx expo start実機確認
サーバーの起動を行うとQRコードが表示されたかと思います。
こちらを実機のカメラで読み込むことでページの表示が可能なのですが、そのためには準備が必要です。
①Expoアカウントの作成
②Expo Goのダウンロード
まずはexpo.ioでアカウントの作成を行います。
その後各ストアでExpo Goをダウンロードしてください。
先ほど作成したアカウントでログインすれば準備完了です。
注意点として、実機の接続先は開発環境と同じである必要があります。
先ほど表示されたQRコードをカメラで読み込むことで自動的にExpo Goが起動し、ページを確認することが出来ます。
おわりに
今回はReact Nativeの環境構築についてでした。
思いのほか簡単に環境を用意できたため、初めてでも取り組みやすく感じました。
ネイティブアプリに興味がある方はぜひ試してみてください。
ここまでご覧いただきありがとうございました！
