リアクトネイティブ
リアクトネイティブ
開発者メタとコミュニティ
初回リリース2015年3月26日[ 1 ] （2015年3月26日）
安定版リリース
0.83.0 [ 2 ] ウィキデータで編集する / 2025年12月10日 （2025年12月10日）
リポジトリgithub.com /facebook / react-native
書かれたC++、Java、JavaScript、Objective-C、Kotlin
プラットフォームAndroid、Android TV、iOS、macOS、tvOS、Web、Windows、UWP、VR、visionOS
タイプアプリケーションフレームワーク
ライセンスMITライセンス
Webサイト反応ネイティブ.dev

React Nativeは、Meta Platforms（旧Facebook Inc.）が開発したオープンソースのUIソフトウェアフレームワークです。 [ 3 ] Android 、[ 4 ]：§第1章 [ 5 ] [ 6 ] Android TV、[ 7 ] iOS、[ 4 ]：§第1章 [ 6 ] macOS、[ 8 ] tvOS、[ 9 ] Web、[ 10 ] Windows [ 8 ] UWP [ 11 ]向けのアプリケーション開発に使用され、開発者はReactフレームワークをネイティブプラットフォームの機能とともに使用できるようになります。[ 12 ] Facebook、Microsoft、Shopifyでは、AndroidおよびiOSアプリケーションの開発に使用されています。[ 13 ]また、 Oculusでは仮想現実アプリケーションの開発に使用されています。[ 14 ]

歴史

2012年にマーク・ザッカーバーグは「会社として私たちが犯した最大の過ちは、ネイティブではなくHTML5に賭けすぎたことだった」とコメントした。 [ 15 ] [ 16 ] Facebookのモバイル版にHTML5を使用した結果、データの取得が遅くなる不安定なアプリケーションが生まれた。 [ 17 ]彼はFacebookがすぐにより良いモバイル体験を提供すると約束した。

Facebook社内では、ジョーダン・ウォークがバックグラウンドのJavaScriptスレッドからiOS用のUI要素を生成するソフトウェアを開発しました。これはReactウェブフレームワークの基盤となりました。彼らは、この技術を用いてネイティブアプリを開発できるよう、このプロトタイプを完成させるための社内ハッカソンを開催することを決定しました。[ 18 ]

2015年、数ヶ月にわたる開発を経て、FacebookはReact JavaScript Configurationの最初のバージョンをリリースしました。技術講演[ 19 ]の中で、 Christopher Chedeau氏は、Facebookが既にグループアプリと広告マネージャアプリでReact Nativeを本番環境で使用していると説明しました。[ 20 ]

2025年10月、MetaはReact、React Native、JSX（JavaScript XML ）をLinux Foundationの一部である新しいReact Foundationに寄贈すると発表した。[ 21 ]

実装

React Nativeの動作原理は、 React Nativeが仮想DOMを介してDOMを操作しないことを除けば、Reactと実質的に同一である。[ 4 ]：§第2章 エンドデバイス上で直接バックグラウンドプロセス（開発者が記述したJavaScriptを解釈する）で実行され、非同期かつバッチ処理されたブリッジを介してシリアル化されたデータを介してネイティブ[ 4 ]：§第2章 プラットフォームと通信する。[ 22 ] [ 23 ]

Reactコンポーネントは既存のネイティブコードをラップし、Reactの宣言型UIパラダイムとJavaScriptを介してネイティブAPIと対話します。[ 24 ] TypeScriptは型の安全性が向上しているため、最近のReact NativeアプリケーションではJavaScriptよりもよく使用されます。[ 25 ]

React NativeのスタイリングはCSSに似た構文ですが、 HTMLやCSSは使用しません。[ 4 ] : §第5章 [ 26 ]代わりに、 JavaScriptスレッドからのメッセージを使用してネイティブビューを操作します。プラグインを使用することで、TailwindもReact Nativeで使用できます。

React Native はWindowsとmacOS の両方で利用可能であり、現在はMicrosoftによってメンテナンスされています。

Hello Worldの例

React Native の Hello, World プログラムは次のようになり ます。

'react-native'から{ AppRegistry 、Text 、View 、Button }をインポートします。'react'からReactをインポートします。const HelloWorldApp = () => {const [ count , setCount ] = React.useState ( 0 ) ;​定数増分カウント= () => {setCount ((前のカウント) =>前のカウント+ 1 );};戻る（<表示><テキスト>こんにちは世界！< / テキスト><テキスト> {カウント} < / テキスト>< Button onPress = { incrementCount } title = "カウントを増やす" />< /表示>）;};デフォルトのHelloWorldAppをエクスポートします。AppRegistry .registerComponent ( 'HelloWorld' , () => HelloWorldApp ) ;

TypeScriptの例

TypeScript では、カウンター コンポーネントは次のようになります。

「react-native」から{ Button 、Text 、View }をインポートします。「react」からReactをインポートします。インターフェースCounterProps {title : string ; // 必須のプロパティbaseNumber? : number ; // オプションのプロパティ}constカウンター: React.FC < CounterProps > = ({ title , baseNumber }) => {const [ count , setCount ] = React.useState <number> ( baseNumber || 0 ) ;​​​const incrementCount = () : void => setCount (( prevCount ) => prevCount + 1 );戻る（<表示><テキスト> {カウント} < / テキスト>< Button onPress = { incrementCount } title = { title } >< /Button>< /表示>）;};

参照

引用

  1. ^ 「React Native: 最新のウェブ技術をモバイルに導入」 2015年3月26日。
  2. ^ 「リリース 0.83.0」。2025年12月10日。 2025年12月11日閲覧。
  3. ^ 「第1章 React Nativeとは？」 oreilly.com O'Reilly Media, Inc. 2020年7月30日閲覧。
  4. ^ a b c d eアイゼンマン 2016 .
  5. ^ 「React NativeのAndroidリリース」 2015年9月14日。
  6. ^ a b Shankland, Stephen (2018年3月29日). 「Mozillaの急進的なオープンソース化は、テクノロジーのルールを書き換えるのに役立った」 . CNET . 2022年5月11日閲覧。
  7. ^ 「TVデバイス向けのビルド · React Native」 . reactnative.dev . 2020年10月2日閲覧。
  8. ^ a b「React Native for Windows + macOS · Javascript と React を使用してネイティブ Windows および macOS アプリを構築する」 . microsoft.github.io . 2020年10月2日閲覧。
  9. ^ 「React Native for Apple TV」。React Native for Apple TV。2020年9月21日時点のオリジナルよりアーカイブ。 2020年10月2日閲覧。
  10. ^ 「React Native for Web」 . GitHub . 2019年11月6日閲覧。
  11. ^ Windows Apps Team (2016年4月13日). 「ユニバーサルWindowsプラットフォーム上のReact Native」 . blogs.windows.com . 2016年11月6日閲覧。
  12. ^ 「Out-of-Tree Platforms」 . reactnative.dev . Facebook, Inc. 2020年7月30日閲覧。
  13. ^ 「React Nativeショーケース」 . react.native.dev . 2023年4月4日閲覧。
  14. ^ 「React Native in H2 2021 · React Native」 . reactnative.dev . 2021年8月20日閲覧。
  15. ^ 「ザッカーバーグの最大の失敗？『HTML5への賭け』「 . Mashable . 2018年4月7日閲覧。
  16. ^ザッカーバーグ、マーク (2012年9月12日). 「Facebook創設者兼CEOマーク・ザッカーバーグとの対談」 . TechCrunch (インタビュー) . 2021年8月16日閲覧。
  17. ^ウォーレン、クリスティーナ。「ザッカーバーグの最大の失敗？『HTML5への賭け』」「 . Mashable . 2020年10月29日閲覧。
  18. ^ 「React Nativeについての短い物語」jobninja.com。2023年6月5日時点のオリジナルよりアーカイブ。2018年1月16日閲覧。
  19. ^ Christopher, Chedeau. 「React Nativeを深く掘り下げて」 YouTube . 2018年1月16日閲覧。
  20. ^ 「React Native: 最新のウェブ技術をモバイルに導入」 2015年3月26日。
  21. ^ 「Metaはベンダー支配への懸念に対処するため、ReactをLinux Foundationに移管する」 The Register、2025年10月9日。
  22. ^ 「React Nativeでのブリッジング」 2015年10月14日. 2018年1月16日閲覧。
  23. ^ 「React Nativeアプリの構築方法：開発時間を節約する7つのポイント。パート2」 。 2019年11月6日閲覧。
  24. ^ 「React Nativeドキュメントスキャナーの作成方法」 . sdk.docutain.com . INFOSOFT . 2024年9月6日閲覧。
  25. ^ 「TypeScriptの使用」 . reactnative.dev . Meta Platforms, Inc. 2023年7月14日閲覧。
  26. ^ 「React Native Style」 。 2021年2月24日閲覧。

参考文献

「 https://en.wikipedia.org/w/index.php?title=React_Native&oldid=1327339043」から取得