React Nativeでモバイルアプリ開発を始める際の基礎知識

作成日 2025.03.05
React
React

React Nativeを使ってモバイルアプリを開発する際に必要な基礎知識を、実際のコード例と共に解説します。React Nativeは、JavaScriptとReactの知識を活用して、iOSやAndroidの両方で動作するアプリを効率的に作成できるフレームワークです。

1. 1. React Nativeとは？
2. 2. 開発環境のセットアップ
3. 3. React Nativeのプロジェクト構成
4. 4. 必要なエディタの選定
5. 5. コンポーネントの基本
6. 6. スタイルの適用方法
7. 7. ナビゲーションの実装
8. 8. デバイス機能へのアクセス
9. 9. ネイティブモジュールの使用
10. 10. 状態管理
11. 11. アプリのデバッグ方法
12. 12. アプリのビルドとデプロイ

1. React Nativeとは？

React Nativeは、Reactライブラリを基にしたフレームワークで、ネイティブアプリケーションを開発するためのツールです。iOSとAndroidの両方に対応しており、単一のコードベースでモバイルアプリを作成できます。

2. 開発環境のセットアップ

React Nativeで開発を始めるためには、Node.js、npmまたはYarn、Android StudioやXcodeなど、必要なツールをインストールする必要があります。

brew install node
npm install -g react-native-cli
react-native init MyNewApp
cd MyNewApp
npm run android // Androidエミュレータで実行
npm run ios // iOSエミュレータで実行

3. React Nativeのプロジェクト構成

React Nativeのプロジェクトには、Android、iOSそれぞれのネイティブコードと、共有されるJavaScriptコードが含まれています。プロジェクトのディレクトリ構造を理解して、どこにコードを追加すべきか把握しましょう。

4. 必要なエディタの選定

React Nativeの開発には、Visual Studio Code、Atom、Sublime Textなど、どのエディタでも問題なく使用できますが、エディタに関連する拡張機能を活用することで開発効率が向上します。

5. コンポーネントの基本

React Nativeでは、ユーザーインターフェースはコンポーネントとして構築されます。Reactのコンポーネントと同様、StateやPropsを利用してUIの状態を管理します。

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

const App = () => {
  return (
    <View>
      <Text>Hello, React Native!</Text>
    </View>
  );
};

export default App;

6. スタイルの適用方法

React Nativeでは、CSSの代わりにJavaScriptでスタイルを記述します。StyleSheetを使用して、コンポーネントにスタイルを適用します。

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    color: 'blue',
  },
});

7. ナビゲーションの実装

React Nativeでは、React Navigationライブラリを使って、画面遷移やタブの切り替えなど、アプリ内のナビゲーションを実装できます。

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

8. デバイス機能へのアクセス

React Nativeでは、カメラ、位置情報、センサーなど、デバイスのネイティブ機能にアクセスするためのAPIが提供されています。これらの機能を活用することで、より高度なアプリケーションを作成できます。

9. ネイティブモジュールの使用

React Nativeは、ネイティブモジュールを使って、JavaScriptで直接アクセスできないネイティブのコードを操作できます。これにより、より高度なカスタマイズが可能になります。

10. 状態管理

React Nativeでは、状態管理のためにReactのuseStateやuseReducerを使用します。また、ReduxやContext APIを利用して、より複雑なアプリケーションの状態を管理することができます。

import { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Button title="Increase" onPress={() => setCount(count + 1)} />
      <Text>{count}</Text>
    </View>
  );
};