Zenn
Open5

Webアプリをクロスプラットフォーム展開したい

Android
iOS
Web
紫村紫村

前提

  • React.jsでアプリケーションを作成している
  • 開発PCはWindows 10 Pro
    • WSL2のUbuntu20.04内で開発
  • WebアプリケーションをiOS、Androidアプリケーション向けに展開したい
  • JSをネイティブ言語に書き換えるのに億劫
    • KotlinやSwiftへの書き換え労力が……

目次

紫村紫村

React Native

  • Facebook製
  • 各プラットフォーム向けに、ほとんど同一プログラムでコーディングが可能
  • TypeScriptで書ける
    • TSX記法が使える

実績

  • Facebook
  • Instagram
  • CookPad
  • メルカリ

開発環境

  • Node.js
  • Android Studio (Androidビルド)
  • Xcode (iOSビルド)
  • react-native-cli もしくは Expo(プロジェクト作成や起動)
    • react-native-cli: Xcodeの知識が必要
    • Expo: ネイティブ機能が使えないことあり
  • cocoapods (iOSライブラリ管理)

感想

  • 自分がExpoコードは書いたことある
  • UIはさておき、ロジック周りは既存プロジェクトから流用できる
  • 環境構築の選択肢が多くて迷う
    • Dockerに任せちゃえば、複数人でもまあ何とかなるか……? (個人開発ですが)

参考

紫村紫村

Flutter

  • Google製
  • iOS, Android, Win, Mac, Linuxといったクロスプラットフォーム開発が可能
  • Dart言語
  • Flutter for web で Web 向けにも開発可能
  • ホットリロード機能がよく紹介される

実績

  • Google Ads
  • Google Assistant
  • JTBアプリ

開発環境

  • Flutter SDK
  • Android Studio (Androidビルド)
  • Xcode (iOSビルド)

感想

  • for Web の方はまだまだ開発中なのかな？
  • Win, Mac, Linux向けにも開発可能で凄い
    • が、これらのプラットフォーム向けにリリース予定なし
  • ネイティブ版のみ Flutter にするのはそれはそれでありなのか？
    • iOSとAndroidを別々の言語で作るよりはって感じ
  • Dartに入門する学習コストはある
    • React-Native ならそれがない
  • 先輩が個人開発で使っていたので、気になってはいる
  • Dockerで環境作れそうなので敷居は下がる

参考

紫村紫村

PWA

  • 現状のアプリをそのまま使える
  • アプリっぽい見た目でブラウザ機能を使える
  • プッシュ通知も可能
  • プリキャッシュでオフライン動作も可能
  • 検索バー分レイアウトの乱れが生じる可能性あり
  • ページリロードがブラウザのようにはできない

実績

  • Qiita
  • Twitter
  • Instagram

感想

  • 1番導入コストが低い
    • 設定ファイルの追加など
  • ブラウザを開いて検索する手間が無くなる
  • 自身が少しやったことがある
  • 色々とネイティブアプリに比べて融通の効かない部分もあったりなかったり

参考