React Nativeでアプリ開発環境を整えよう

この記事はKogakuin Univ Advent Calendar 2022の12日目です．

やったこと
アプリ開発の選択肢
開発手順

やったこと

React Nativeの開発環境を整えた．

アプリ開発の選択肢

アプリを楽に作るために開発用のツールを使用する．

ツールの選択肢としては以下の画像がわかりやすかったため引用．

引用元：クロスプラットフォームアプリ開発技術の比較（React Native、Flutter…etc.） - NCDC株式会社

今回はクロスプラットフォーム，つまりAndroidとiosのどちらでも動作するアプリが作りたかったためReact Nativeを採用．

React NativeやFlutterなどの詳細については各自調べてください．

開発手順

www.youtube.com

この動画シリーズを参考に作った．そのためこの記事の内容はこの動画シリーズと大いに重複することにご注意．

余談だが，プログラム系の情報は更新が速いため本を買ってもすぐに使い物にならないことが少なくない．

まずは金のかからないインターネットの情報や公式ドキュメントを参考にしたほうが良いだろう．

コピペもできるし，issueなどの情報も豊富である．

余談終了．

1．開発環境を整える

node.jsをインストール
- 公式サイトからダウンロード
expo-cliをインストール
- npm install expo-cli --global
スマホ側で「Expo」をインストール
インストールしていなければVisual Studio Codeをインストール

2．環境の動作確認

Expoの起動
- cd [所望のディレクトリ]
- expo init [プロジェクト名]
- cd [プロジェクト名]
- expo login
- expo start --tunnel
スマホ側のExpoアプリ内でカメラを起動
expo start --tunnel`の実行結果で表示されたQRコードにカメラをかざす

コマンドを実行する場所は動画を要確認．

ExpoはAndroid Studioを使用しないで実機で動作テストすることができるツール．

ノートPCでAndroid Studioが重くてテストできないなんてことはよくある難点だがExpoならストレスフリーにテストできる．

これで自動的にスマホにサンプルのアプリが表示されたはず．

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!!!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

↑App.jsの中はこんな感じ

VSCodeでこれを編集して保存すると，すぐにアプリ側で変更が反映される．

3．本格的な開発

開発環境は整った．

ここから本格的にアプリ開発していく．

今回はここまで．いつか同じブログで開発本編を書くかもしれない．