「React Nativeを学ぶ! 〜 SonicGarden Tech #2 浜松」に参加してきた

「React Nativeを学ぶ! 〜 SonicGarden Tech #2 浜松」に参加してきた

# そもそもの経緯

プログラマとして働き始めた早い時期からソニックガーデンという会社を目にする機会が多く、興味があった。どんな方達なのかなと思い、いつかお会いしたいなと思っていた。

CEOの倉貫さんは「納品のない受託開発」というビジネスモデルを確立された人で、下記の書籍などを書かれている。ブログなども継続的に内容の濃いものを書かれていて、読むと勉強になるのでおすすめ。

# 勉強会に参加するまで

6月初め頃だったか、倉貫さんのTwitterから今回の勉強会の告知があったため、参加するに至った。
開催場所が静岡県浜松市ということで二の足を踏みそうだったが、お昼休憩の30分で気持ちに整理をつけて、参加を決意した。

余談だが、一週間前に、どうせならその日宿泊する場所をAirBnBを使ってみようと思ったのたが、すべて埋まってしまっていたため、今回は利用できなかった。

結局、宿泊先は、静岡駅まで戻り「おふろカフェ」という健康ランド的なところに雑魚寝する形で一夜を過ごした。

おふろcafe 美肌湯

今回たまたま利用するに至ったが、この日の施設の利用者数はぼくの目から見て、結構多かったと思う。
駅からも結構離れていて、歩いて30分ぐらいかかる場所なのだが、すごい人気のようだった。
地方にこういう施設がもっと増えていったら良いなと思った次第。

当日、せっかくだから各駅の電車を乗り継いで行ってみようと思い、朝早くから出発し、東京→神奈川→静岡とトコトコと揺られて行った。
見所は特になかったが、強いて言えば、窓から見える熱海の海はきれいだった。いつか行ってみたいな。
ただ、冷房が効いていなかったからすごい暑かったのと、よく駅と駅の間で止まって、勉強会に間に合いそうになかったので、途中から新幹線に乗りました。

# 勉強会について

  • 「React Nativeから始めるアプリ開発」
  • 「React Nativeを一緒にやる仲間の見つけ方」
  • 「React Nativeでも書きたいテストコード」
  • 「React Nativeで審査のないアプリリリースを実現する」
  • LT

1.「React Nativeから始めるアプリ開発」

発表されたプログラマの方は若い方で、ぼくと同い年か±1歳ぐらいの方だった。

発表された内容については、正直高度な内容ではなく、どちらかと言えば初学者向けの内容だった。

ただ、勉強会の企画から準備をされていて、さらに今回のプレゼン資料を準備し発表されていたことはすごいこと。

色々、触発されたのであった。

人前でプレゼンするという経験は自分もやってみたいなと思ったのと、プレゼン資料を作ったことがなかったから、作ってみようと思った次第。

現在は、社内の勉強会に向けて、初めてkeynoteで勉強会の資料を作成している。
ちなみにお題は「テスト自動化」と「開発実装のアンチパターン」で、社内のエンジニア全員でそれぞれPDF一枚以上にまとめて発表するという形式である。

下記、発表された内容のメモ。

react-native-cli
ディレクトリ構造
重要なファイルが2つ
index.js
App.js ← 土台となるファイル

違い
・ネイティブアプリ
GUI ドラッグ&ドロップ
・react native
HTML/CSSベース

featchを使ってAPI通信
・Ajax、ES6、Promise

Firebaseでデータ永続化
・クラウドにデータを保存

=>
READMEのgetting startを見ながら行うが、ネイティブコードも書かなければいけない。。
エラーが出た時にどこが問題なのか切り分けにくい。。

expo
・nodeなどの環境構築が少なくて済む
・JSのみでアプリを開発・ビルドする環境 → ネイティブコードを書かなくていい
・QRコードで配布
・ios/androidの環境の違いに悩まなくていい

cliでbuildしたときに
ios
android
というディレクトリがない

凝ったことをしようとした時に困る。。
そんな時は、
デタッチ

=> 簡単なアプリならexpoでいいのでは??


2.「React Nativeを一緒にやる仲間の見つけ方」

ソニックガーデンさんはReactNative導入時、既にRuby on Railsの開発やiOS/Androidの開発で事業は順調だったという。
そのような中で、新しい言語を採用し、それを社内に広めていっている過程は、今後僕自身このような立場になったときに参考にしたいなと思った所存。

下記、発表された内容のメモ。

201X年〜 ネイティブアプリ開発の需要が高まる

技術選定 → ボトムアップ、ディスカッション

ネイティブ言語だと、あるエンジニアに案件が集中してしまう

・webの技術を基本としているため、理解しやすい
・開発体験が、webと近い
chrome debugger がwebと同じように動く

検証アプリをつくる
・社内の日記アプリのネイティブアプリ版

社外の勉強会に行った
・先行して実践している相談相手を見つけることができた

社内で部活を作った
・プロトタイプで、相互にノウハウを共有

社内のアプリに導入
・Remottyの製品版をリリース

受託開発にも導入
・実践でのノウハウ

宣言大会
・みんなにSGの普及技術にしたいと宣言した

まとめ
・目的大事
=> SGの守備範囲を広げる
・小さく始める
=>
小さな実績を積み重ねる
コツは失敗してもいいと思うこと、すぐに捨てられること
・アウトプットする
・巻き込む

今後の課題
・継続性
=> webアプリ中心で、片手間になりがち
・Airbnb問題
=>
大規模な企業には不要 → ニーズの違い。ios/androidエンジニアを集められるならいらないのでは
ライブラリの保守性・バージョン互換
テストの仕組み


3.「React Nativeでも書きたいテストコード」

発表内容は技術的に高度な内容だった(ぼくの現在のレベルでは)。

普段仕事でAngularを使用しているから、WebComponent志向の実装の考え方は分かっているつもりだが、Reduxなどのmiddleware周りが話に登場してくると途端に難しく感じてしまう。
ただ、話されている方が、そのような初学者の方にも分かるように噛み砕いて話されていていてありがたかったし、自分がそっちの立場になったときには、初学者に対して「自分で考えろ」というスタンスではなく、目線を同じ高さにして話ができるプログラマでありたいと思った。

下記、発表された内容のメモ。

大変なこと
・コンポーネントの粒度が自由すぎて責務がわからない
・どこまでも入り込むreduxのconnect
・containerとscreenの違いとは…
・ちょっと変えるとピタゴラ連鎖で動かない…

・テスタビリティの低いコードではテストかけない
=> 疎結合

自動テスト化に対する考え
・不具合が発生した際など、必要に応じて追加する
・テストしやすい設計にする

Reactの利点とは
・疎結合なUIコンポーネントを作れる
=> 方針として、Atomic Designに則って設計すると良い

reduxと兼ね合いを考えると、、
connectしない → Reactのみで書くカンジ。状態をもたないから、propsのみで完結して、描画できる
=>
・atoms
・molecules

==> 自動テスト作成する

connectする
=>
・organisms
・template
・pages
==>手動でテストする

===> 関心ごとを分離することができた

所感
・コンポーネントがきちんとレンダリングされているか確認しながらできる

質問
・atomic designにおいてどこからstoreに依存するのか?
=> template画面がsotreに依存するくらいがちょうどいいのではないか
・storybookのstoryshotのテスト
というのはrenderしてエラーが起きないようなテストのこと
storyを追加するごとにcomponentが実行されているか確認できる。ズレが発生していないかを確認できる。


「React Nativeで審査のないアプリリリースを実現する」

発表中、僕のPCがフリーズしてしまい動かなくなる自体が発生しメモがあまり取れなかった。残念。

下記、発表された内容のメモ。

ReactNativeでアプリのアップデートが楽になる
・ネイティブ言語だとbuildの待ち時間とAppStore審査の待ち時間がある →ちょっとした修正がしづらい。一回につき、1日から3日かかる
=> JSBundleのファイルだけ送れば短縮できる → 1日3回でもできる。

そもそもRNの仕組みは?
Native App
Url でreact のソースコードを見に行っている

Code Push(by Microsoft/VisualStudio AppCenter)アプリを使用して、
JSBundelファイルのみを送る

Native実装の変更を伴うリリース
・Nativeアプリをビルドする必要がある
・react nativeのバージョンが上がった

JSのみの変更
・JS側バグ修正
・UIの変更 → 画面増、レイアウト変更
・API呼び出し修正
・JSライブラリの変更・追加


LT

ソニックガーデン以外の方のエンジニアの個人開発のお話が聞けた。
作られていたプロダクトの内容がおもしろかった。


# 飲み会

勉強会のあとで飲み会があった。

ソニックガーデンはスキルの高いエンジニアが多いことで有名だが、そういう人たちとプログラミングのこと、今までプログラマとしてどのように働かれてきたのかについてお話をするのは楽しい。

# 所感

勉強会は知識を得るためだけに行くことのではない。
勉強会に行くことで、普段の閉じられたコミュニティから一歩外に出て、刺激を受けることが良い。