【りあくとねいてぃぶ】

React Native とは?

💡 1つのコードで2つのOS、React使いのモバイル最短ルート
📌 このページのポイント
React Native:1つのコードで複数プラットフォーム JavaScript / React 共通コードベース コンポーネント + ロジック iOS アプリ UIKit ネイティブUI Web アプリ React Native for Web Android アプリ Android ネイティブUI WebViewではなくネイティブUIコンポーネントを使用 → ネイティブに近いパフォーマンス
React Native:1つのJavaScriptコードからiOS・Android・Webアプリを生成
ひよこ ひよこ

React NativeってReactと何が違うの?

ペンギン先生 ペンギン先生

ReactはWebブラウザ上で動くUIを作るライブラリだけど、React Nativeはその考え方をモバイルアプリに応用したものだよ。HTMLの代わりにといったネイティブコンポーネントを使うんだ。

ひよこ ひよこ

Flutterとどっちがいいの?

ペンギン先生 ペンギン先生

React Nativeは「すでにReactJavaScriptに慣れたチーム」に強い。Flutterは「独自の描画エンジンで見た目の一貫性を重視」する場合に向いている。既存のWebチームがモバイルにも手を広げたいならReact Nativeが入りやすいね。

ひよこ ひよこ

ネイティブアプリと比べて遅くならない?

ペンギン先生 ペンギン先生

昔はJavaScriptとネイティブの間にブリッジがあってボトルネックになることがあったけど、新しいアーキテクチャ(JSI + TurboModules)で直接やり取りできるようになって大幅に改善されたよ。InstagramやDiscordReact Native製なんだ。

ひよこ ひよこ

Expoってよく聞くけど何?

ペンギン先生 ペンギン先生

React Nativeの開発体験を劇的に良くするツールセットだよ。XcodeAndroid Studioの面倒なセットアップ不要で、QRコードをスマホで読むだけで実機プレビューできる。最近はExpo Routerでファイルベースルーティングもできるようになったんだ。

ひよこ ひよこ

Web版も同じコードで作れたりする?

ペンギン先生 ペンギン先生

React Native for Webを使えばある程度共通化できるよ。さらにExpoのユニバーサルアプリ機能を使えば、iOSAndroid・Webを1つのプロジェクトで管理できる。ただし完全に100%共有というよりは、ビジネスロジックを共通にしてUIは各プラットフォームに合わせるのが現実的だね。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
React Native」って出てきたら「ReactiOS/Androidアプリを一気に作れるフレームワーク」と思えればだいたいOK!
📖 おまけ:英語の意味
「React Native」 = ネイティブに反応する
💬 Webで人気のReactの思想を「ネイティブ」アプリ開発に持ち込んだことが名前の由来だよ
← 用語集にもどる