Expo環境構築とRNコアコンポーネント

HTML、CSS、React（またはNext.js）が書けるなら、おめでとうございます！あなたはすでにiOSとAndroidのネイティブアプリを開発する能力を持っています！

以前は、iOSアプリ開発にはSwiftとXcode、Android開発にはKotlinとAndroid Studioが必要でした。全く異なる2つのコードベースをメンテナンスすることは、個人開発者にとって悪夢でした。

**React Native（RN）**はこの障壁を打ち破りました。JavaScriptでロジックを記述すると、基盤となるシステムが自動的にそのコードを真のネイティブモバイルコンポーネントにコンパイルします（WebViewにウェブページを詰め込むのではありません）。

そしてExpoはRN上に構築された究極のフレームワークです。Next.jsがReactに対して行うように、Expoはすべての面倒な基盤設定を処理し、わずか数分でホットリロード（Hot Reload）可能なアプリをスマートフォン上で確認できるようにします！

1. 環境構築：たった1行のコマンドで

数十GBのXcodeやAndroid Studioをインストールする必要はありません。必要なのはNode.jsだけ！

ターミナルを開き、次のコマンドを入力：

# 新しいExpoプロジェクトを作成
npx create-expo-app@latest my-first-app

# プロジェクトディレクトリに移動
cd my-first-app

# 開発サーバーを起動
npm run start

すると、ターミナルに巨大なQRコードが表示されます。

スマートフォンでプレビューする方法

iPhoneまたはAndroidスマートフォンを用意
App Store/Google PlayでExpo Goアプリを検索・ダウンロード
iPhoneの場合は内蔵カメラでQRコードをスキャン、Androidの場合はExpo Goアプリで「Scan QR Code」をタップ

魔法のようにスマートフォン画面にアプリの原型が表示されます。これ以降、PCでファイルを保存するたびに、1秒もかからずスマートフォン画面が更新される「ホットリロード」を体験できます！

2. HTMLタグは忘れよう！ネイティブコンポーネントの世界

React Nativeの世界では、<div>、<span>、<p>などのタグは存在しません。スマートフォンはHTMLを理解できないからです。代わりに、react-nativeから専用のネイティブコンポーネントをインポートします：

app/index.tsx（またはApp.js）を書き換えてみましょう：

import { StyleSheet, Text, View, Image, TouchableOpacity, Alert } from 'react-native';

export default function App() {
  const handlePress = () => {
    // Alert.alertはネイティブの警告ダイアログを表示！
    Alert.alert("素晴らしい", "ボタンのクリックに成功しました！");
  };

  return (
    <View style={styles.container}>
      <Image 
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={styles.logo}
      />
      <Text style={styles.title}>Hello Vibe Tutor!</Text>
      <Text style={styles.subtitle}>私の初めてのネイティブアプリ 📱</Text>
      
      <TouchableOpacity style={styles.button} onPress={handlePress}>
        <Text style={styles.buttonText}>クリックテスト</Text>
      </TouchableOpacity>
    </View>
  );
}

3. CSSクラスは不要！StyleSheetの世界

RNでは、すべてのスタイルはJavaScriptオブジェクトで定義され、Flexboxレイアウトを使用します。

[!WARNING] レイアウトの落とし穴

RNのflexDirectionデフォルトはcolumn（縦並び）で、ウェブCSSのデフォルトrow（横並び）と逆！

すべてのサイズ値に単位不要（pxやremは書かず、width: 100と記述）

一部の複雑なCSSプロパティは非対応（box-shadowなどは複数のプロパティに分解）

先ほどの例のスタイルシートを見てみましょう：

const styles = StyleSheet.create({
  container: {
    flex: 1, // 画面全体を占有
    backgroundColor: '#fff',
    alignItems: 'center', // 水平方向中央寄せ
    justifyContent: 'center', // 垂直方向中央寄せ
  },
  logo: {
    width: 100,
    height: 100,
    marginBottom: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginTop: 8,
    marginBottom: 32,
  },
  button: {
    backgroundColor: '#3b82f6',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  }
});

[!TIP] Tailwind CSSを使いたい？ 可能です！NativeWindパッケージをインストールすれば、RNで<View className="flex-1 items-center justify-center bg-white">のようなお馴染みの構文が使えます。Web開発者にとって大きな福音です。

4. SafeAreaView：ノッチとダイナミックアイランド対策

上記のコードをiPhoneで実行すると、画面上部の「ノッチ」や「タイムディスプレイ」にテキストが隠れてしまうかもしれません！

モバイル開発では、システムの「セーフエリア」を尊重する必要があります。最外層のコンテナを<SafeAreaView>に置き換える習慣を身につけましょう：

import { SafeAreaView } from 'react-native-safe-area-context';

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
      <View style={styles.container}>
        {/* ...コンテンツ... */}
      </View>
    </SafeAreaView>
  );
}

これで、iPhone 14のノッチやiPhone 15 Proのダイナミックアイランドがあっても、UIが安全な表示領域内に完璧に収まります！

次章では、アプリの最も重要な骨格であるマルチページナビゲーションを学びます！