スマホアプリを開発したいけれど、SwiftやKotlinは難しそう… という方におすすめなのが「React Native」です。
React Nativeなら、JavaScriptの知識があればiOS・Androidアプリを同時に開発できるので、Web開発者にも人気のフレームワークです。
本記事では、React Nativeの環境構築から基本的な使い方までを初心者向けに解説します！
1. React Nativeとは？
React Native（リアクトネイティブ）とは、Meta（旧Facebook）が開発したモバイルアプリ開発用のフレームワークです。
JavaScript + Reactを使ってiOS・Androidアプリを作成できるのが特徴で、Web開発者にも馴染みやすい技術です。
✅ React Nativeの特徴
- 1つのコードでiOS/Android両方のアプリを開発できる
- Web開発の知識を活かせる（HTML/CSSは使えないが、JSXで記述）
- ホットリロード機能で開発スピードが速い
- Expoを使えば簡単に環境構築できる
2. React Nativeの環境構築
React Nativeの開発環境は、Expoを使う方法とReact Native CLIを使う方法の2種類があります。
ExpoとReact Native CLIの違い
| 比較項目 | Expo | React Native CLI |
|---|---|---|
| 導入の簡単さ | ◎（簡単） | △（やや難しい） |
| 開発スピード | ◎（手軽にスタート） | ○（柔軟だが準備が必要） |
| ネイティブ機能（カメラ、GPSなど） | 制限あり | すべて対応可 |
| ビルド方法 | Expo Goアプリで実行可能 | Xcode/Android Studioが必要 |
初心者におすすめ：Expoで環境構築
まずは、簡単に始められるExpoを使う方法を紹介します。
① Node.jsをインストール
React NativeはJavaScriptで動作するため、Node.jsをインストールする必要があります。
👉 Node.js公式サイト からLTS（長期サポート版）をダウンロードしてインストールしてください。
② Expo CLIをインストール
次に、ターミナル（またはコマンドプロンプト）で以下のコマンドを実行します。
npm install -g expo-cli
③ React Nativeプロジェクトを作成
以下のコマンドで、新しいReact Nativeプロジェクトを作成します。
npx create-expo-app MyApp
「MyApp」の部分は好きなプロジェクト名に変更可能です。
④ プロジェクトを起動する
作成したディレクトリに移動して、アプリを起動します。
cd MyApp
npm start
すると、Expo開発サーバーが起動し、QRコードが表示されます。
スマホにExpo Goアプリ（iOS/Android対応）をインストールし、QRコードをスキャンすれば、アプリを実機で確認できます！
3. React Nativeの基本的な使い方
① React Nativeのファイル構成
プロジェクトを作成すると、以下のようなファイル構成になります。
MyApp/
│── node_modules/ # 依存ライブラリ
│── assets/ # 画像やフォント
│── app.json # Expoの設定ファイル
│── package.json # プロジェクト情報
│── App.js # アプリのメインファイル
│── babel.config.js # Babelの設定
React Nativeでは、App.js がアプリのエントリーポイント（起点）となります。
② React Nativeで画面を作成する
まずは、シンプルな「Hello, React Native!」を表示してみましょう。
App.jsを編集
import React from "react";
import { Text, View, StyleSheet } from "react-native";
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello, React Native!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#f0f0f0",
},
text: {
fontSize: 20,
fontWeight: "bold",
color: "#333",
},
});
📌 ポイント
<View>はHTMLの<div>のような役割<Text>はHTMLの<p>のような役割StyleSheet.create()を使ってCSSのようにスタイルを定義
このコードを保存すると、ホットリロード機能により即座に画面が更新されます。
4. よく使うReact Nativeのコンポーネント
React Nativeには、モバイルアプリ開発に特化したUIコンポーネントが用意されています。
① 画面レイアウト
<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
<Text>左</Text>
<Text>右</Text>
</View>
✅ flexDirection を row にすると、横並び配置にできる
② ボタン
import { Button } from "react-native";
<Button title="押してね" onPress={() => alert("ボタンが押されました！")} />;
✅ onPress に関数を渡して、ボタン押下時の処理を設定
③ テキスト入力
import { TextInput } from "react-native";
<TextInput placeholder="名前を入力してください" style={{ borderBottomWidth: 1 }} />;
✅ placeholder で入力のヒントを表示
5. まとめ：React Nativeでアプリ開発を始めよう！
✅ React Nativeの特徴
- JavaScriptでiOS/Androidアプリを開発できる
- Expoを使えば簡単に環境構築が可能
- ホットリロードで開発スピードが速い
✅ React Nativeの基本の流れ
- Node.jsをインストール
- Expoでプロジェクトを作成
- App.jsを編集してUIを作成
- コンポーネント（View、Text、Buttonなど）を活用
React Nativeを使えば、Web開発の知識を活かして、手軽にスマホアプリを開発できます！
まずは、シンプルなアプリを作成して、React Nativeの基本を体験してみましょう！ 🚀
コメント