React Native

出典: フリー百科事典『ウィキペディア(Wikipedia)』
ナビゲーションに移動 検索に移動
React > React Native
React Native
React-icon.svg
開発元 Facebookとコミュニティ
初版 2015年3月26日(5年前) (2015-03-26[1]
最新版

0.61.4 - 2019年11月5日(8か月前) (2019-11-05[2]

[3][±]
リポジトリ https://github.com/facebook/react-native
プログラミング言語 JavaScript, Java, C++, Objective-C, Objective-C++, Python
ライセンス MIT License
公式サイト facebook.github.io/react-native/
テンプレートを表示

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

さらに、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プログラムは次のようになる。

 1 import React, { Component } from 'react';
 2 import { AppRegistry, Text } from 'react-native';
 3 
 4 export default class HelloWorldApp extends Component {
 5   render() {
 6     return (
 7       <Text>Hello world!</Text>
 8     );
 9   }
10 }
11 
12 // Skip this line if using Create React Native App
13 AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);
14 
15 // The ReactJS code can also be imported into another component with the following code:
16 
17 import HelloWorldApp from './HelloWorldApp';

出典[編集]

[脚注の使い方]
  1. ^ React Native: Bringing modern web techniques to mobile”. 2019年11月6日閲覧。
  2. ^ Release v0.61.4 · facebook/react-native · GitHub” (2019年11月5日). 2019年11月6日閲覧。
  3. ^ Releases – Facebook/React”. GitHub. 2019年11月6日閲覧。
  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. ^ https://github.com/status-im/react-native-desktop
  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日閲覧。