React Native for Webとは何かについて解説

React Native for Webとは？について解説します。

ReactNativeについてはこちらで解説しています。

ReactNativeとは何かをわかりやすく解説

React Native for Webとは？

React NativeのComponentをWebでも使えるようにしたもの。

react-native-webというライブラリとして提供されており、Githubはこちらです。(約2万スターがついています)

Web上で動作するReactから始まり、iOS/Androidのモバイルで動作するReact Nativeが生まれて、次はReact NativeのComponentをWebでも使えるようにしたというような流れです。

React Native for Webの仕組み

React Nativeは、主要なComponentを用意しており開発ではそれらを利用しています。

例えば、こちらのコードのようなものです。

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

const SampleComp = () => (
  <View>
    <Text>Hello</Text>
  </View>
);

export default SampleComp;

react-native-webは、それらのComponentをHTMLのタグに変換しています。

React Native for Webの利点

コードの共通化

モバイル向けに書いたコードをWebでそのまま使えたり、Web向けに書いたコードをモバイルで使えたりする点が大きなメリットです。

iOS/Android/Webそれぞれで異なる挙動を実装することもサポートしているので結構柔軟に開発できます。

React NativeのComponentが便利

React Nativeには、基本のComponentとしてActivityIndicatorやScrollViewなどが備わっており他のライブラリを使わなくても標準のComponentが便利です。

それらをWebでも使えるので、サードパーティのライブラリに依存しなくても細かいUI/UXが作れるのもメリットの1つです。

React Native for Webの懸念

対応していないComponentやライブラリがある

いくつか対応していないComponentや特定のライブラリ内で動作しない場合ががあるので、その場合は独自で頑張らないといけないので少し辛いです。

規模が大きいプロダクトに途中で導入しようとすると辛い点があるかもしれないので、初期に導入することをお勧めしたいです。(一部分に導入するといったこともいいと思います)

React Native for Webの事例

有名どころだと、Twitter Liteに使われています。

他にも、下記のサービスやライブラリで利用されているようです。(公式ドキュメント参考)

react-native-webを始める

react-native-webを使う場合、ReactのアプリをReact Native for Web化するパターンと、React NativeのアプリをReact Native for Web化するパターンがあります。

それぞれこれらの記事で解説していますので、参考にしてみてください。

react-native-webの基本的な使い方も理解ができると思います。

ReactアプリをReact Native for Web

Create React AppしたReactアプリをReact Native for Web化する方法を解説

React NativeアプリをReact Native for Web

React NativeアプリをReact Native for Web化する方法について解説

まとめ

React Native for Webとは？について解説しました。

最後に要点をまとめておきます。