React Native Web を使ってみる

React NativeではiOSとAndroidの両方のアプリを作れる「クロスプラットフォーム開発」が可能です。 少し前からWebサイトの開発も可能になる「React Native Web」というものも存在しるので、そちらを使ってみた記録です。

ずばり、同じソースコードでアプリに加えてWebサイトも作れるというものです。画期的ですね。

結論を先に言うと

簡単にWebも実装できました。もしかするとローカルのテスト時なんかには活用できるかもしれません。

ただ、「アプリを作って、全く同じモノをWebにも作る」という状況がどんなときに使うのでしょうか。 Webサービスのアプリ化はよくある話ですが、UIが異なることが多いと思うので、別で実装するのがこれまでの一般的なやり方ではないでしょうか。

確かに、同じソースコードで実装が可能なので、開発・管理・運用はとても楽になると思います。 利用できるとすれば例えば以下でしょうか。

• アプリ作ったのでおためし版をWebで公開
• スマホでの利用はアプリで、PCではWebで利用するサービス
• コンポーネントをWeb、アプリで共通化できる

まだ、プラットフォームによる挙動の差異があるようで、それを吸収する場合分けなどが必要です。 その部分でソースコードが冗長になるかもしれませんが、これからの可能性を感じる機能でした。

作ってみたもの

React Native flex style creater

React NativeのflexスタイルのルールはWebとはすこし異なります。それをブラウザ上で触って確かめることができます。 ReactNativeで作っていますので、アプリでの実際の挙動になっているはず。
styleのソースコードも表示できるので、簡単なものであればここでソースコードを用意できます。

サイトはNetlifyにて配信しています。

もちろんこのプログラムをビルドすればスマホアプリにもできます。iOSとAndroid両方のアプリがビルド可能というわけです。

ドキュメント

https://docs.expo.io/versions/v35.0.0/guides/running-in-the-browser/

expoのドキュメントに手順が書かれています。

インストール

create-react-native-appでテンプレートを作成した場合はすぐに利用できます。
expo start --webコマンドで、webサーバが立ち上がりアクセスするとブラウザ上で動作します。 またはexpo startを実行してから、wキーを押すとサーバが立ち上がります。

そうでなければ必要なものをインストールします。 react-native-web react-domあたりが該当します。

実装

app.jsonのplatformsにwebを追加

    "platforms": [
      "ios",
      "android",
      "web"
    ],

プログラムは基本アプリを構築するときと同じです。好きなものを作るも良し、すでに作ったものをwebで動かしてみるも良しです。
いくつかwebでは利用できないパッケージもあるので注意しましょう。admobなどが例としてあげられています。場合分けが必要であれば、react-nativeのPlatformを使うことでwebかどうか判定が可能です。

import { Platform } from 'react-native';

~~~
    if(Platform.OS === 'web'){}
~~~

先ほど紹介したアプリ React Native flex style creater ではreact-navigationなどを利用しています。

感想

アプリと全く同じというわけにはいかないようですが、ざっくりとの動作の確認であればweb上でできそうです。
アプリ開発時のローカルチェックなどで端末やエミュレータを使わずに、ブラウザで確認ということもできると思います。最終的なチェックはしっかりと端末で行う必要がありそうです。

Netlifyにデプロイするときに躓いたこと

Netlifyの設定で以下の設定をしてビルドを行います。

• Build command
  expo build:web
• Publish directory
  web-build/

ビルドコマンドが見つからないとうメッセージが出力され、ビルドに失敗しました。
expo-cliがNetlifyのサーバにないのが原因です。package.jsonにexpo-cliを追加することで解決できました。

おわりに

先に述べた結論のとおりですが、簡単にWebも実装できました。 ローカルの開発テスト時に活用できるかもしれません。

確かに、同じソースコードで実装が可能なので、開発・管理・運用はとても楽になると思います。 以下のような構築が必要な場合や、もっと新しい構築フローでは役に立つのではないでしょうか。

• アプリ作ったのでおためし版をWebで公開
• スマホでの利用はアプリで、PCではWebで利用するサービス
• コンポーネントをWeb、アプリで共通化できる

まだ、プラットフォームによる挙動の差異がありますので少し注意を払う必要があります。 これからの可能性を大いに感じられますので発展に期待です。