React Naitive を触ってみた

React Native を触ってみた

最近、React Native を使ってモバイルアプリ開発を体験してみました。今回は、その実体験の記録をみなさんにご紹介します。

1. なぜ React Native？

普段は ウェブアプリを触ることが多いのですが、スマホアプリにも興味があり、クロスプラットフォーム対応の React Native を選びました。

選んだ理由：

• JavaScript / TypeScript の経験が活かせる
• iOS / Android 両対応
• Expo を使えば環境構築が簡単

前提条件

React Native / Expo CLI を動かす前に、以下の環境を用意しました。

• Node.js 18 以上 (npm 9+)

• npm

• Git

• **スマホ実機 **

2. 開発環境の構築

今回は手軽に始めたかったので Expo CLI を選びました。

npm install -g expo-cli
expo init my-first-app
cd my-first-app
expo start

スマホに Expo Go アプリを入れて QR コードを読み込めば即実行。とても簡単！

3. 実際に書いてみたコード

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

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Hello, React Native!</Text>
    </View>
  );
}

最初は Web のように div を使いたくなりますが、React Native では View と Text が基本。
CSS のようなスタイルはオブジェクト形式で書きます。

4. 詰まったところ

• SafeAreaView を使わないと iPhone のノッチに被ることがある
• 画像の扱いが Web と少し違う（require or uri）
• react-native-reanimated の設定がやや面倒

5. 触ってみた感想

React の知識がある人なら、とっつきやすさは抜群です。
ただ、Web と UI の考え方が微妙に違うので、慣れは必要。特にフレックスボックスの挙動に最初は戸惑いました。

6. 今後やりたいこと

• react-navigation を使った画面遷移
• カメラやローカルストレージとの連携
• TypeScript + ESLint + Prettier 環境整備

まとめ

React Native は想像よりもずっと簡単に始められ、スマホアプリを開発するにはちょうど良かったです。

これからアプリ開発に挑戦したい方は、ぜひ一度触ってみてください！