React Native

React > React Native

React Native（リアクト・ネイティヴ）は、Facebookが作成したオープンソースのモバイルアプリケーションフレームワークである^[4]。開発者がネイティブプラットフォーム機能とともにReactを使用できるようにすることで、Android^[5]、iOS、Web^[6]およびUWP^[7]アプリケーションを開発するために使用される。

React Native

開発元	Facebookとコミュニティ
初版	2015年3月26日 (8年前) (2015-03-26)^[1]
最新版	0.63.4 - 2020年12月1日 (2年前) (2020-12-01)^[2] ^[3] [±]
リポジトリ	https://github.com/facebook/react-native
プログラミング 言語	JavaScript, Java, , Objective-C, , Python
ライセンス	MIT License
公式サイト	facebook.github.io/react-native/
(テンプレートを表示)

さらに、Qtの不完全なポートも存在する^[8]。

歴史

2012年、マーク・ザッカーバーグは、「会社として犯した最大の間違いは、ネイティブではなくHTMLにあまりにも賭け過ぎたことだ」とコメントした^[9]。彼は、Facebookがまもなく優れたモバイルエクスペリエンスを提供すると約束した。

Facebookの内部で、(ジョーダン・ウォーク)は、バックグラウンドJavaScriptスレッドからiOSのUI要素を生成する方法を見つけた^{[出典無効]}。彼らは、このテクノロジーを使用してネイティブアプリを構築できるように、このプロトタイプを完成させるための社内ハッカソンを組織することにした^[10]。

数か月の開発の後、Facebookは2015年にReact JavaScript Configurationの最初のバージョンを公開した。テクニカルトークで^[11](Christopher Chedeau)は、Facebookがグループアプリと広告管理アプリの本番で既にReact Nativeを使用していると説明した^[12]。

実装

React Nativeの動作原理は、React Nativeが(仮想DOM)を介してDOMを操作しないことを除いて、Reactとほぼ同じである。バックエンドプロセス（開発者によって記述されたJavaScriptを解釈する）においてエンドデバイス上で直接実行され、シリアライゼーション、非同期、およびバッチブリッジを介してネイティブプラットフォームと通信する^[13][14][15]。

Reactコンポーネントは、既存のネイティブコードをラップし、Reactの宣言的なUIパラダイムとJavaScriptを介してネイティブAPIと対話する。これにより、まったく新しい開発者チームによるネイティブアプリ開発が可能になり、既存のネイティブチームの作業がはるかに高速になる^[要出典]。

React NativeはHTMLを使用しない。代わりに、JavaScriptスレッドからのメッセージがネイティブビューの操作に使用される。

Hello worldの例

React NativeのHello worldプログラムの一例を以下に示す。

import React from 'react'; import { AppRegistry, Text } from 'react-native';  const HelloWorldApp = () => {  return <Text>Hello world!</Text>; }  export default HelloWorldApp;  AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp); 

次のコードで別のコンポーネントにHelloWorldAppをインポートして使うこともできる。

import HelloWorldApp from './HelloWorldApp'; 

出典

[脚注の使い方]

1. ^ “React Native: Bringing modern web techniques to mobile”. 2019年11月6日閲覧。
2. ^ “Release v0.63.4 · facebook/react-native · GitHub” (2020年12月1日). 2021年1月2日閲覧。
3. ^ “Releases – Facebook/React”. GitHub. 2021年1月2日閲覧。
4. ^ “React Native · A framework for building native apps using React”. 2019年11月6日閲覧。
5. ^ “React Native for Android: How we built the first cross-platform React Native app - Facebook Engineering”. 2019年11月6日閲覧。
6. ^ “React Native for Web”. 2019年11月6日閲覧。
7. ^ Windows Apps Team (2016年4月13日). “React Native on the Universal Windows Platform”. blogs.windows.com. 2016年11月6日閲覧。
8. ^ React Native Desktop ·, Status, (2023-02-22), https://github.com/status-im/react-native-desktop-qt 2023年2月26日閲覧。 
9. ^ “Zuckerberg's Biggest Mistake? 'Betting on HTML5'”. Mashable. 2018年4月7日閲覧。
10. ^ “A short Story about React Native”. 2018年1月16日閲覧。
11. ^ Christopher. “A Deep Dive into React Native”. YouTube. 2018年1月16日閲覧。
12. ^ “React Native: Bringing modern web techniques to mobile - Facebook Engineering”. 2019年11月6日閲覧。
13. ^ “Bridging in React Native” (2015年10月14日). 2018年1月16日閲覧。
14. ^ “React Native vs Flutter: Which Cross-Platform Framework is Better?”. 2019年11月6日閲覧。
15. ^ “How we build React Native app: 7 things which save your development time. Part 2”. 2019年11月6日閲覧。