これまでずっとUnity開発ばっかしてきましたが、たまにはSNSみたいなものも作ってみたいな～と急に思いました。

「プラットフォーム革命」という本を読んだ影響かもしれません。

色々調べた結果、どうやらWebアプリが今ホットらしいぞという事が分かりました。

 

要件

例えばtwitterみたいなSNSを開発する事を想像してください。

twitterにはブラウザで見れるWebアプリと、iOSアプリ、Androidアプリがありますよね。

しかし開発メンバーは私一人しかいません。私はjavascriptもSwiftもKotlinもほとんどさわった事無いです。

３つも言語覚えてられないし、全部のプラットフォームにそれぞれアプリ作るなんて物理的に無理です。

 

じゃあどうすんの

じゃあそれぞれのプラットフォームにビルドできるクロスプラットフォーム開発すればいいじゃないと考えますよね。

でもWeb、iOS、Android全てに対応してるクロスプラットフォーム環境って実はあんま無いです。

Unityなら可能だし開発に慣れてるんだからUnityで作る事も考えました。

しかしUnityで作ったアプリは電池をモリモリ消耗します。何故なら毎フレーム画面を全部再レンダリングするからです。

ゲームならしょうがないですが、Unity製のSNSなんて自分だってあんま使いたくないと思ったのでボツです。

 

Webアプリだけ作ってCordovaでそのまんまアプリ化してガワネイティブアプリとしてiOS、Androidに出すという手も考えられます。

しかし、Appleは既存のWebページをWebViewを表示するだけのガワアプリを認めてません。

Cordova使うにしてもちゃんとWebより良いユーザー体験を達成しないとリジェクトされる可能性が高そうです。

 

もうWebだけでよくね

そもそも一人でストアへのアプリ申請やアップデート申請するのはすんごい面倒くさいです。

じゃあもうWebアプリだけでいいんじゃね？

そもそもWebじゃなくてネイティブアプリじゃないといけない理由ってなんでしょうか？

ネイティブアプリのメリット

１．サクサク動く

２．ストアで検索して出てくるので見つけてもらいやすい

３．オフラインで動く

４．GPSなどの端末機能にアクセスできる

５．ホームにアイコンが表示されてすぐ開ける

６．プッシュ通知が出せる

 

昔はたしかにそうでしたが、実は最近はWebアプリ（PWA）でも同じような事ができるようになってきています。

Webアプリの進歩

１．〇端末の性能がメチャクチャ上がってるのと、SPA（シングルページアプリケーション）の技術でイチイチサーバからページ読み込みしなくなってWebアプリもサクサク動くようになった

２．×PWAのストアとかはまだ無い（Windows10にはあるらしい）けど、AndroidにはGoogleMapのPWAがストアに出てるらしいので、その内誰でもPWAがストアに出せる可能性もあるかもしれない

３．〇PWAもページがローカルにキャッシュされてオフラインでも動く

４．〇WebアプリもGPSとかにアクセスできるようになった

５．〇PWAもホーム画面にアイコンインストールできる

６．〇今ではWebアプリもプッシュ通知出せる

 

SPAというのはフロントのjavascriptだけで画面を作ってるWebアプリです。
従来のWebアプリは画面遷移するたびにサーバに問い合わせてSSR（サーバサイドレンダリング）してもらうのでページ読み込みに時間がかかってましたが、SPAはサーバ読み込みを待たずに別画面が開けるのでサクサク動きます。

PWA（プログレッシブウェブアプリ）というのはネイティブアプリみたいなWebアプリの事です。
主な機能としてページをローカルにキャッシュしてオフライン時も表示できます。
アプリみたいにホーム画面にインストール（といってもほぼブックマークをホームに置いただけ）する事もできます。
インストールして開くとアドレスバーとかが消えてネイティブアプリっぽく表示できます。AndroidだとWebページでアイコンインストールを促すポップを出せます

SPAならPWAのオフライン機能が最大限発揮されます。何故ならSPAなら最初のページに全機能入ってるのでこれだけキャッシュしておけばOKですが、SSRだとオンライン時にキャッシュしてないページはオフラインで開けないからです。

普通にブラウザからWebアプリを開く人にとってもキャッシュから爆速で表示されるようになるのは嬉しいですね。

 

PWAならWebならではのメリットもあります

１．アップデート申請とか要らないので更新がラク

２．AppleやGoogleにプラットフォーム手数料払わなくていい

３．端末容量を圧迫しない（途上国だと貧弱な端末が主流だったりして端末容量にシビア。通信回線が細かったりしてアプリサイズにもシビア）

 

PWAすばらしいですね。

ユーザーのメリットというより開発者が手抜きできるメリットが主な感じですが、私みたいに一人でやんないといけない場合にはラクできるというのは大いにありがたいです。

３Dゲームとかならやはりネイティブアプリじゃないとキビしいですが、普通のアプリならPWAで事足りるケースも多くなってくるのかもしれません。

というわけでPWAという選択肢を探ってみたいと思います。

 

Firebaseという選択肢

いくらSPAがフロントだけで完結してると言っても、twitterで言えばそれぞれのユーザー情報やツイートコンテンツを管理するバックエンドが必要です。

でも私はサーバーサイドの開発はあんまり詳しくないです。

イチからサーバサイド開発を学習するのも面倒ですし、そもそもサーバの監視とかメンテとかの作業やりたくないです。

だから面倒なバックエンドの事は全部Firebaseに投げましょう。

フロントのjavascriptから直接FirebaseのAPIを叩くだけなのでサーバーは要りません。

認証、セキュリティ周りもいい感じにしてくれます。

 

Firebaseならサービスが流行るまでは無料でほっといて維持できますし、もし流行ったら有料プランにして従量課金でスケールできます。

とにかくラクそう。

 

Reactで開発

というわけでフロントを書くためにReactを勉強しています。

 

Reactはデザイナーとエンジニアが一緒に作るのに向いてないと言われています。

詳しくないですが、Webアプリは普通はデザイナーがデザインとか完全に作り込んだHTMLファイルを作って、それをエンジニアがjavascriptで動かすのが普通だそうです。

しかしReactはHTML部分（というかJSX）が色んなコンポーネントのファイルに散らばっています。

だからエンジニアが全部組まざるを得なくなったりします。

 

でも私はどうせ一人で作んなきゃいけないからそういうデメリットは関係無いです。

React以外だとHTMLをDOM操作するらしいですが、Reactはそういうの必要無いらしいので良さそうと思いました。

あとReactはコンポーネントを色々作って組み立てる感じがちょっとUnityに似てる気がした。

 

Reactは昔は環境構築が大変だったそうですが、今ではcreate-react-appというコマンド一発でアプリの叩き台が用意されます。

これのすごい所は最初から諸々のPWA対応してくれててPWAとして動くところです。（完全にPWAにするにはアイコン画像の設定が必要）

 

Reactで作ったWebアプリが好評なら、やっぱりネイティブアプリも作ろうという話になるかもしれませんが、その時もReactNativeを使えばReactの知識ほとんどそのままに活かしてネイティブアプリが作れるそうです。

 

思った事

サービスって作るの大変ですが、実はやろうと思えばかなりラクできる選択肢があるんですね。

React+Firebase+SPA+PWAの組み合わせなら、一人でもサクッとサービス構築できそうな気がしてきました。

いい時代だな～。