［追記］SpotifyじゃなくてShopify
ShopifyがネイティブからReactNativeへ移行するとのことで界隈が盛り上がってます。
ここまでの企業がネイティブアプリをReactNativeに作り変えるのは初めてじゃないでしょうか。
移行の理由としては
- ReactNative強強企業を買収して検証とかしてたっぽい
- WebとアプリでReactのノウハウを共有できる強み
- パフォーマンスも上がってきてる
というのを上げてました。
1つ目はShopifyだけの理由ですが、他2つについては同じ意見ですね。やはりWebやってもアプリやってもReact(JS/TSも)のノウハウが生きるのはホント強い…
そしてもう1つ、ブログで述べられていたのが
「At Shopify we’ll be doing some React Native Web experiments in 2020.」
React Native Web も実験的に使っていくとのこと。
あと面白かったのは
- iOSアプリのクラシュが減った
ってところですね。やはりUIの状態管理の難しさがクラッシュに繋がることが多いようですね。
ということでいきなりReact Nativeはキツい人向けのReact Native Webで始めるReact Native入門です。
入門…というかreact-native-webの誤解を解く
react-native-webってreact-nativeをWebで動かすなんか凄いFWみたいな勘違いをされている人を結構見かけます。
コレ全然そんな事無くて、ただのWeb用のReactのコンポーネントライブラリなんですよね。
なのでReactNative知らなくてもReactがわかれば使えます。
yarn add react-native-web
で
import React from "react";
import { View, Text } from "react-native-web";
export default () => (
<View>
<Text>Hello React Native Web</Text>
</View>
);
何がReactNativeなのかというと、ライブラリのインポートの仕方とかコンポーネントのスタイル、Propsの定義などが同じです（一部違いますが…）
React Nativeだとインポート先が 'react-native-web' から 'react-native' になるだけです。
なので、React Native が分かる人がWebをやる場合はReact Native Webを使うとすんなりWebアプリが実装出来ます。
逆にWebしかわからない人がReact Native Webに慣れているとReact Nativeでアプリの実装出来ます。（もちろんUI部分だけの話です）
そもそもReactを使う時点でノウハウの共有ができるのに加えて、React Native/React Native Webを使うことでコンポーネント自体も共有することができます。
仮にWeb ReactしかやらないエンジニアとReact Nativeしかやらないエンジニアがいたとしても、Web ReactのエンジニアにReact Native Webを使ってなれてもらえばReact NativeのUI部分もある程度任せることができます。
なかなかWebアプリエンジニアとネイティブアプリエンジニアが設計で共通の話題をするのは難しいように思いますが、React Native/React Native Web を使うことでUIや状態管理の部分でWebエンジニアとアプリエンジニアが設計やノウハウを共有できるというのは非常に強いと思います。
むしろ僕なんかはWebもアプリもReact, Next.js, React Nativeで作るのでUI部分に関しては変にコンテキストスイッチしなくていいのがめちゃくちゃ良いです。
ちなみに、styled-componentsもreact-native対応していて
import styled from 'styled-components/native' const Wrapper = styled.View` flex: 1; `
みたいな感じで使えます。
Web Reactエンジニアが始めるなら
1.React Native Web
「WebのReactは書けるけどネイティブアプリ全然わかない」って人はまず React Native Webを使ってWebのアプリケーションを作るとことから始めると良いでしょう。
そこでReact Native Webのコンポーネントの使い方を学べばReact NativeでもすんなりUIが組めるようになるはずです。
2. Expo
次に、いきなり素のReact Nativeに行くのではなく、Expoを使いましょう。
Expoは簡単にいうと素のReact Nativeで触る必要のあるネイティブ部分をすべてラップしてJSだけでアプリが完結できるようにしてくれるフレームワークです。
これだと、WebのReactがわかっていてReact Native Webがわかっていればアプリが組めるようになるはずです。素のReactNativeでは入れるのが面倒な便利機能がたくさんあるので実際に動かして見てほしいです。
ちなみにExpoならWindowsパソコンでiOSアプリが開発出来ます。実機があればデバッグ・テストしながらも開発出来ます。便利ですね。
Web上でコードを試し書きできる snack.expoというサービスもあります。とりあえずこれで遊んでみるといいですね。
3. 素のReact Native
Expoの欠点はネイティブの機能を自分で追加できないという所です。おそらく仕様の決定権を持っていないと、多くの場合はExpoでカバー出来ない仕様が実装必要になると思います。
そうなってくると素のReact Nativeを使うしかありません。
iOSアプリを作るためにMacが必要ですし、iOS/Androidアプリのエンジニアが必要になってきます。
Webエンジニア目線で行くと素のReact Nativeを触るのはExpoからの差を考えるととんでもなくハードルが高いです。
その場合はかならずネイティブアプリ のエンジニアに相談できる環境を整えましょう。
まとめ
Web Rectエンジニアもアプリ触るの億劫だなーと思う人ると思うのですが、react-native-webやってExpoやって〜ってしていくと案外すんなりアプリが作れる様になると思うので 、ぜひ試してほしいです。