React Native

React Nativeとは

React Nativeは、Meta（旧Facebook）が開発したオープンソースのモバイルアプリケーションフレームワークです。このフレームワークは、開発者がReactの知識を活かしつつ、Android、iOS、Web、MacOS、UWPといった多様なプラットフォーム向けのアプリケーションを開発できるように設計されています。さらに、Qtの不完全なポートも存在し、幅広いプラットフォームへの対応を試みています。

歴史

2012年、MetaのCEOであるマーク・ザッカーバーグは、「ネイティブアプリではなくHTMLに注力しすぎたことが、会社として最大の過ちだった」と述べています。彼は、Facebookが今後優れたモバイルエクスペリエンスを提供することを約束しました。

この目標を達成するために、Facebookのエンジニアであるジョーダン・ウォークは、バックグラウンドのJavaScriptスレッドからiOSのUI要素を生成する方法を発見しました。この技術を用いてネイティブアプリを構築するために、社内ハッカソンを開催し、プロトタイプの完成を目指しました。

数ヶ月の開発期間を経て、Facebookは2015年にReact JavaScript Configurationの最初のバージョンを公開しました。テクニカルトークにおいて、クリストファー・チェドーは、Facebookが既にグループアプリと広告管理アプリの本番環境でReact Nativeを使用していることを明らかにしました。

実装

React Nativeの動作原理は、Reactとほぼ同じですが、仮想DOMを介してDOMを操作しない点が異なります。React Nativeは、バックグラウンドプロセスでJavaScriptを解釈し、エンドデバイス上で直接実行します。そして、シリアライゼーション、非同期、およびバッチブリッジを通じて、ネイティブプラットフォームと通信を行います。

Reactコンポーネントは、既存のネイティブコードをラップし、Reactの宣言的なUIパラダイムとJavaScriptを通して、ネイティブAPIを操作します。このアプローチによって、非ネイティブアプリ開発者であるWebエンジニアが開発に参入しやすくなり、iOSとAndroid間でのクロスプラットフォーム開発を効率的に進めることが可能になります。

重要な点として、React NativeはHTMLを使用しません。代わりに、JavaScriptスレッドからのメッセージを用いて、ネイティブビューの操作を行います。

Hello Worldの例

以下に、React Nativeで「Hello world|Hello_world」と表示する基本的なプログラムの例を示します。

javascript
import React from 'react';
import { Text, View } from 'react-native';

const HelloWorldApp = () => {
return (
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
Hello, world!

);
};

export default HelloWorldApp;


また、上記のHelloWorldAppコンポーネントは、別のコンポーネントでインポートして利用することも可能です。

javascript
import React from 'react';
import { View } from 'react-native';
import HelloWorldApp from './HelloWorldApp'; // HelloWorldApp.jsがあるディレクトリからの相対パス

const App = () => {
return (



);
};

export default App;

まとめ

React Nativeは、Reactの知識を活かして、多様なプラットフォームで動作するネイティブアプリを効率的に開発できる強力なフレームワークです。Web技術者にとって参入障壁が低く、クロスプラットフォーム開発を加速させるため、多くの開発現場で採用されています。

もう一度検索