React Nativeの光と闇について喋ってきました #上越TechMeetup

7月21日（土）に新潟県上越市で行われた、上越TechMeetup#2に参加してきました。

jtm.connpass.com

町家を改装したイベントスペース「高田小町」で、総勢15名での、和やかな雰囲気での開催となりました。

なんでいったの

主催の五十川さんがRNの話を聞きたいということでお呼ばれしました。上越は地元なので、地元で行われるIT勉強会にお呼ばれなんて、テンションがダダ上がりになる事案です。

個人的なところとして、2010年ごろに上越である程度の規模のIT勉強会を開催することを諦めて新潟市で開催していたという事情がありまして、自分が諦めたことを実現した勉強会を是非応援したいという気持ちもありました。

なにしたの

React Nativeの光と闇というタイトルで講演してきました。スライドは次のとおりです。

React Nativeの光と闇 from Yukiya Nakagawa

www.slideshare.net

細かい内容は後述します。

他の方の発表

印象に残ったお話だけ。

writer.appの話

https://writer-app.com/

自動文字起こしのWebアプリです。実用上のニーズから生まれているので、使いやすさはピカイチとのこと。

FirebaseやGCPをモリモリ使っているのは楽しそうだなあと思いました。

EventEmitterの話

@lightnet328さんから。ブラウザの文脈にEventEmitterを持ち込むと、Reactで小さいアプリを作るときにpropsのたらい回しとかしないで済むことがあって良いよ、というお話でした。

序盤は「えー、いうてEventEmitter氏、大規模に乱用するとプロジェクトが崩壊するじゃないですかー」と思いながら聞いていました。途中で当人から「まあ、規模が大きくなってくるとReduxとかのほうが管理しやすくなるんですけどね」という話があったので、安心して聞いていられました。

SOC2の話

クラスメソッドの植木さんから。↓の裏話について。

classmethod.jp

ISMSなんかも「面倒くさそうだなあ」と思いながら傍から見ていたのですが、これは輪をかけて面倒くさいやつのようです。

「おおお、そこまで監査するんだ偉い」みたいな気持ちで聞いていましたが、自分たちではあんまりやりたくないですね・・・。

React Nativeの光と闇

ざっくりとした内容としてはこんな感じです。

光パート

• Reactはレイアウトツリーの差分更新が得意なライブラリだよ
• React NativeはReactの得意分野をネイティブビューの更新に持ち込んだやつだよ
• AndroidとiOSの同時開発ができるのは嬉しいね
• react-native initで作ったプロジェクトはXcode/Android Studio経由でビルドすることが多いよ
• デモ：ハロワとちょっとしたLive Reload
• React NativeはC++処理系の上で動くJavaScriptCoreの上で、バベったJSを動かしてるよ
• JSとC++の間の通信方式はWebKitが担保してるので素性がいいね
• C++とObj-C/Javaの間の通信もそれぞれのOSで普通のやり方があるので素性がいいね
• デモ：create-react-native-app（Expo）でQRコードリーダーを作る
  • デバッグ時に突如コンソールに現れるQRコード
  • カメラパーミッションの請求も、カメラプレビューの配置も、読み込んだQRコードのデータ受け取りも、Expoならサクサクやれちゃう
  • JANã‚„IMEIのバーコードも読めちゃう
  • ねっ、簡単でしょ？
• Expoクライアントアプリが色々隠蔽してくれてます
• 活用事例
  • Quipper社のスタディサプリ
  • 弊社面積計算
  • Togetter
  • ä»– react-native-jp/react-native-apps-jp
  • React Native for Webというのもあってな
    • https://mobile.twitter.com
    • React Native for Webをプロダクションで使ってみました - WaterCell Developer's Blog
  • ReactXPというのもあってな
    • SkypeとかOffice 2019とか
    • MSも手探り感あるので、我々一般のエンジニアが使えるようになるまで2年くらいかかるんじゃないか（私見）

闇パート

• 万人にオススメできるわけではない
• 無理を通した帳尻合わせを、腕力で何とかしている部分がある
• 腕力の例
  • エラーメッセージを読む力
    • JSC, Android, iOSのエラーメッセージが混在するので、メンバーの誰かはそれを読めないとしんどい
  • ビルドする力
    • リリースビルドするときは、JS文化圏、Android文化圏、iOS文化圏のそれぞれのお作法を押さえておく必要がある
    • なお、Expoは知らないままビルドしても何とかなる部分が多い
    • Expoは楽なんだけど、本来のやり方を知らないままでいくとトラブったときに身動きが取れなくなるので、やはり本来のお作法を知っている人間はいたほうがよい
  • ストアにリリースする力
    • Google Play ConsoleとかAppStore Connectを使うのは同じ
    • 何にせよAppleの審査員とは闘う
  • バージョンアップする力
    • RN自体のバージョンアップが結構しんどい
    • アップグレードコマンドも失敗することがある
    • マジiOSお前
    • 困ったらreact-native initから環境構築をやり直したほうが早いというのが現状

光と闇のはざまで

• 技術選択は組織と事業に見合ったものを選ぶべき
• 普段使っている、責務が小さいライブラリなら、組織や事業との相性を深く考えなくてもリスク少なめで採用できたりする（失敗しづらい）
• RNはメリットもデメリットも大きいので、よく考えないと採用しづらい
• Airbnbは結果的に去ってしまったけれど、どんな組織と事業にマッチしそうなものなのかを僕らに考えさせてくれた
• メリットは最大限享受して、デメリットを可能な限り回避したり打倒したりできる、そんな組織や事業で採用したいですね
• もしあなたが目指す組織・事業の途上でRNが役立てられそうなところがあったら、使ってみてください

感想

「光と闇」なんて大風呂敷を広げてしまったせいで、自分の中での意見のバランス調整が大変でした。闇パートを先に仕上げたのですが、気持ちがネガティブになってしまい、なかなか光パートを書き始められないという事故があったり。

僕はRNの話をするときに一番怖いのは、オーディエンスが「React Nativeは銀の弾丸である」と思って、誤ったワクワクを持って帰ることです。そのため、普段から闇の話を多めにすることにしていますが、おかげで「お前はRNが嫌いなのか？」と言われることもあります。そうじゃないのです。闇って言っちゃってますが、実際には解決すべき課題たちなのです。課題を解決するためのコストがメリットに対してめちゃくちゃ軽いならば、限られた条件において銀の弾丸っぽいものになることはあると思います。結局は組織と事業にマッチするかどうかです。

とはいえ心配ばかりしていてもReact Nativeの良いところが世の中に伝わらないんだよなあ、とも思っていたので、今回は思い切って光の話もしてみました。Webの人がブラウザ上ではどうやっても獲得できないQRコード読み込みを、超サクッとやってみせるというデモをしただけですが、刺さる人には刺さったんじゃないでしょうか。

また、ノージャンルのIT勉強会だったので、オーディエンスにどの程度の知識を要求したらいいのかという点でもかなり迷いました。ざっくりとReactという概念を先に説明することで、なんとかJSに普段触れ合っていない人向けにも理解度を上げられたのではないかと思います。

今までRNの話は東京でコンテキストの近い人たち向けに喋ることが多かったわけですが、今回の資料作りで新潟向けの難易度調整みたいなところが分かってきた気がするので、今後はもうちょっと県内でも喋ってみたいです。

懇親会

写真を取り忘れましたが、ビアバッシュでした。おしゃべりしてたらほとんど食べてない（いつものこと）。

うちこういう仕事すること多いんだけど、RNマッチすると思う？みたいな話をちらほらもらいました。

総括

主に現地の上越や、新潟県内からの参加者が多い感じでしたが、長野や石川からの参加者もおり、上越地方ならではの顔ぶれという感じの特色あるイベントになっていたと思います。

10年前にこのイベントがあれば私は新潟市に移住しなかったかもしれないもしもの話をしても詮無いことなのですが、是非育ってほしいイベントです。

今後とも発表を中心に、応援していけたらと思います。