ExpoGoではじめてのモバイルアプリを爆速で作る

この記事では、create-expo-appを使用してExpoプロジェクトを作成し、スマホで「Hello World」を表示するまでの手順を説明します。ExpoはReact Nativeをベースとしたフレームワークで、iOSとAndroidアプリを簡単に開発できる環境を提供しています。

開発環境
プロジェクトの作成
プロジェクトのディレクトリ構成
“Hello World”を表示するコードの作成
開発サーバーの起動
Expo Goを使ってスマホでアプリをテスト

開発環境

開発には、Github Codespacesを使います。
詳しい使い方は以下の記事で紹介しています。

CodespacesとExpoで爆速でアプリ開発環境を作る方法

GitHub CodespacesでExpo Goを使ってローカル環境を一切汚さずに、爆速で、Androidアプリ開発を行う方法を紹介します。まずは、「Hello World」を表示するアプリを作成する方法を説明します。 GitHub C...

プロジェクトの作成

まず、create-expo-appを実行して、新しいExpoプロジェクトを作成します。

npx create-expo-app hello-world-expo

このコマンドを実行すると、hello-world-expoという名前の新しいフォルダが作成され、その中に基本的なプロジェクト構造が生成されます。

プロジェクトのディレクトリ構成

create-expo-appを使って生成されたプロジェクトは、次のようなディレクトリ構造になっています。

hello-world-expo/
├── app/
│   └── (tabs)/
│       └── index.tsx
├── assets/
├── node_modules/
├── package.json
└── ...

この構造の中で、app/(tabs)/index.tsxがメインのファイルになります。よく記事ではApp.jsを編集している例が見られますが、このファイルに代わり、app/(tabs)/index.tsxがアプリの主要なコードを含むファイルになります。

“Hello World”を表示するコードの作成

次に、app/(tabs)/index.tsxを編集して、”Hello World”を表示する簡単なコンポーネントを作成します。

import { Text, View, StyleSheet, Platform } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Platform.OS === 'web' ? 'white' : 'lightblue', // スマホ向けの背景色を設定
  },
  text: {
    fontSize: 24,
    color: 'black',
  },
});

このコードでは、View と Text コンポーネントを使用して、中央に “Hello World” を表示しています。StyleSheet を使ってスタイルを定義し、背景色やテキストのスタイルを設定しています。