リリース・改善中
Framework · 2015年公開
React Native は React と JavaScript・TypeScript で Android・iOS アプリを作るオープンソースのフレームワークで、一つのコードから両プラットフォームのネイティブ UI を描画します。
React Native は Meta が 2015 年に公開したオープンソースのフレームワークで、React のコンポーネントモデルのまま Android と iOS のアプリを作れます。画面は WebView ではなく各プラットフォームのネイティブビューで描画されるため、通常のネイティブアプリと同じ見た目と操作感になります。現在は Meta とコミュニティ、パートナー企業が共同で開発しており、標準で有効な New Architecture が JavaScript とネイティブコードをより直接的につなぎます。
React Native は、Web で React を使っているチームが同じ知識とツールでモバイルアプリを作る場面で特に力を発揮します。一つのコードベースで両プラットフォームを開発しながら、必要な部分は Kotlin や Swift のネイティブコードで拡張でき、Fast Refresh で保存した瞬間に結果を確認できます。EC、SNS、社内業務アプリのように画面が多くリリースの速いアプリで広く使われており、既存のネイティブアプリの一部の画面だけに組み込むこともできます。
はじめるなら、公式ドキュメントが推奨するとおり Expo でプロジェクトを作るのが最も簡単です。Node.js をインストールして create-expo-app でプロジェクトを作成し、スマートフォンに Expo Go を入れて QR コードを読み取ればすぐに動かせます。まず React の基礎を身につけ、公式ドキュメントのコアコンポーネントの解説と Expo のチュートリアルに沿って小さなアプリを作ってみることをおすすめします。
View、Text、Image などのコンポーネントが各プラットフォームのネイティブビューとして描画され、そのプラットフォームらしい見た目になります。
コンポーネント、props、state、フックといった React の考え方を、TypeScript や npm のエコシステムとともにそのまま使えます。
Fast Refresh が状態を保ったまま変更を反映し、React Native DevTools でデバッグできます。
New Architecture の Turbo Native Module と Fabric コンポーネントで、Kotlin・Swift のコードを直接つなげられます。
React Native のツールは Node.js 上で動きます。nodejs.org から LTS 版をインストールし、バージョンが表示されることを確認します。Android エミュレーターには Android Studio、iOS シミュレーターには macOS と Xcode が必要です。
node --version公式ドキュメントが推奨する Expo で新しいプロジェクトを作ります。TypeScript とファイルベースルーティング（Expo Router）が設定済みのテンプレートが作られます。
npx create-expo-app@latest my-appプロジェクトフォルダーで開発サーバーを起動し、スマートフォンの Expo Go で QR コードを読み取るか、ターミナルで a（Android）または i（iOS）を押してアプリを開きます。
cd my-app && npx expo startblank-typescript テンプレートで作ったプロジェクトでは、App.tsx がアプリのルートコンポーネントです。View はレイアウト用の箱、Text は文字を表示するコアコンポーネントで、文字列はすべて Text の中に置く必要があります。StyleSheet.create で作ったスタイルが Flexbox で内容を画面中央に配置します。コードを編集して保存すると、Fast Refresh が実行中のアプリにすぐ反映します。
App.tsx
import { StyleSheet, Text, View } from "react-native";
export default function App() {
return (
<View style={styles.container}>
<Text>Hello, world!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, alignItems: "center", justifyContent: "center" },
});
npx create-expo-app@latest hello --template blank-typescript && cd hello && npx expo startインストールから React Native の中心となる考え方まで、6 章で順を追って学びます。
React Native について質問し、経験を共有し、意見を交わす場所です。
まだディスカッションはありません。最初の話題を始めましょう。
コメント 0件
ログイン · ログインするとコメントできます。
最初のコメントを書いてみましょう。