飽き性の頭の中
Reactでウェブとアプリを最速で開発する方法を模索した話のサムネイル
IT技術メモ

Reactでウェブとアプリを最速で開発する方法を模索した話

2018-09-30
# React# React Native# React Native Web

とある勉強会で話した内容を、整理してまとめてみる。

ウェブとアプリを両方いい感じに作れるクロスプラットフォーム開発を実現できれば、PMF をスピーディに探れるエンジニアリング組織ができると思い技術検証をしてみた。

ウェブとアプリの両方を作るのは結構時間がかかる

ウェブを作るために SPA 開発をし、スマホアプリを作るために Swift やら Kotlin で開発するのが、それぞれの質を上げるにはまだ一番方法な気がする。

しかし、まだサービスの在り方が固まってないときに JavaScript / Swift / Kotilin をそれぞれ書くにはだいぶ時間がかかってしまうし無駄が多い。

そこで質は多少下がったとしても、開発速度を上げて PMF(Product Market Fit)を早く得られる状況をエンジニアリングの立場から作れるかを模索した。

medium.com

クロスプラットフォームを実現する技術

クロスプラットフォーム開発を実現する技術はいくつかある。

  • Apache Cordova

Apache Cordova

  • React / React Native

React – A JavaScript library for building user interfaces

React Native · A framework for building native apps using React

Apache Cordova も事前に検討したが、React のほうが望ましそうな所感を得たのでこちらをさらに検証した。

React / React Native で試したこと

  1. React / React Native を同じリポジトリに置いてデータ周りを共通化する
  2. React Native に React Native for Web を導入する

React / React Native を同じリポジトリに置いてデータ周りを共通化する

どういうこと?

これはクロスプラットフォーム開発というよりは、React でウェブを開発、React Native でアプリを開発する順当な構成。

しかし、両者で共通で使うはずのデータ周りの処理を共通化させればある程度効率化できるのではないかという試み。

【ディレクトリ構成】

.
├── common
│   ├── reducers
│   └── actions
├── native
│   ├── ios
│   ├── android
│   ├── src
│   ├── package.json
│   ├── tsconfig.json
│   ├── tslint.json
│   └── yarn.lock
└── web
    ├── package.json
    ├── public
    ├── src
    ├── tsconfig.json
    ├── tslint.json
    ├── webpack.config.js
    └── yarn.lock

よかったこと

こうした構成にしたことで、React / React Native でできることはすべてできるはず。

ウェブ向けのコードをアプリ用にビルドするわけでも、その逆でもないのでツラミが少なめ。

さらに、データ周りの処理が別フォルダに切り出されているので意識的に切り分けていけそうなところがよさそう。

微妙だったこと

しかし、React / React Native それぞれの package.json があるので管理するものが多い。

Typescript の場合は似たような tsconfig.json と tslint.json が必要なので結構煩雑になる。

共通化したとはいえ、そこまでスピード感を持って開発できるのかは懐疑的。

React Native に React Native for Web を導入する

React Native for Web とは

github.com

React Native for Web とは React Native のプロジェクトに後から入れることができるモジュール。

React Native のコンポーネントを Web で使える形にトランスパイルしてくれるので、React Native のコードがあればウェブ用のビルドもできるようになる。

React Native をそのままが使えるので View も共通化できるので、別々に実装するよりだいぶ効率化できそう。

React Dom と React Native が共存できる

React Dom も混ぜることができる。React Dom 入りの View をアプリ用にビルドするともちろん落ちるのだが、ウェブ向けにはビルドできる。

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

export default class WebApp extends React.Component {
  render() {
    return (
      <View>
        <Text style={{ fontSize: 20, color: "blue" }}>ネイティブ</Text>
        <div style={{ fontSize: 20, color: "red" }}>ウェブ</div>
      </View>
    );
  }
}

これだとあまり実用性はないが、ウェブ向けとアプリ向けのどちらのビルドかによって出し分けることで活用できるように感じた。

export default class App extends React.Component {
  render() {
    if (Platform.OS == "web") {
      return (
        <View style={styles.container}>
          <div style={{ fontSize: 20, color: "red" }}>ウェブ</div>
        </View>
      );
    } else {
      return (
        <View style={styles.container}>
          <Text style={{ fontSize: 20, color: "blue" }}>ネイティブ</Text>
        </View>
      );
    }
  }
}

Platform.OS で判定できるので、出し分けてあげるとこんな感じになる。

20180930134143.png

よかったこと

純粋な React Native のプロジェクトに後から入れることができるので、まずは React Native でアプリを作るのに専念できるのはかなりありがたい。

最初から、ウェブのこともアプリのことも考えて環境構築や開発するのは結構厳しい。

しかも、React Native コンポーネントの変換具合も結構いい感じそう。

React Native examples

まとめ

クロスプラットフォーム開発をする方法は世の中に幾つもあるが、React が一番良さそうだと思って検証した。

React を使ったやり方を模索してみた結果、React Native for Web を使うのが安定感とスピード感があって良さそうだと感じた。

これから本格的に実装をしていく予定なので、また所感があればまとめる。

関連記事


タグ一覧

# 福岡:39# 東京:19# 移住:10# エナジードリンク:9# 大学院:9# Google:8# ブロックチェーン:8# Webエンジニア:7# Mac:6# Sony:6# Apple:5# Googleフォト:5# インドネシア:5# サントリー:5# 埼玉:5# 英語:5# AWS:4# Canon:4# EOS 8000D:4# Kindle:4# ZONe:4# 京都:4# 仮想通貨:4# 鴨川シーワールド:4# Docker:3# EOS8000D:3# Lightroom:3# Markdown:3# Pixel:3# React Native:3# iPad:3# iPad mini:3# アマルティア・セン:3# アメリカ:3# セブンイレブン:3# ラーメン:3# レッドブル:3# 卒業旅行:3# 紅葉:3# 長崎:3# API:2# ECR:2# ERC20:2# Expo.io:2# Firebase:2# Kindle Oasis:2# Kindle Paperwhite:2# LINE:2# MacBook Pro:2# NestJS:2# Next.js:2# Notion:2# Oculus:2# Oculus Quest:2# Pixel Buds:2# React:2# a7iii:2# iPhone:2# pandoc:2# re:Invent:2# zsh:2# かき小屋:2# カフェ:2# ギグワーカー:2# サーチコンソール:2# ジャカルタ:2# スターバックス:2# ステーキ:2# スマートウォッチ:2# ソラマチ:2# チョコレート:2# ニューヨーク:2# バリ島:2# パンとエスプレッソと:2# ヒュッゲ:2# ビーチ:2# ブックスタンド:2# マクドナルド:2# ミズマチ:2# モンスターエナジー:2# ワイヤレスイヤホン:2# 三千院:2# 両国:2# 修士論文:2# 兵庫:2# 千葉:2# 博多:2# 堀江貴文:2# 宮崎:2# 寿司:2# 嵐山:2# 川越:2# 広島:2# 新宿御苑:2# 日米学生会議:2# 有馬温泉:2# 東寺:2# 歴史:2# 江ノ島:2# 清澄白河:2# 独自ドメイン:2# 社会人:2# 神奈川:2# 神戸:2# 転職:2

©2022 tawachan All Rights Reserved.