今回は、先日開催された第28回社内勉強会の様子をお伝えします。

GIGでは毎月社外の方でも参加していただける勉強会を開催しています。connpass上で随時参加を受け付けておりますので、どうぞご参加ください！

前半のテーマは「遅いMarkdownアプリを速くする！Reactアプリのパフォーマンスチューニング」

前半はプログラマーの荒井 雄治朗さんが登壇し「遅いMarkdownアプリを速くする！！Reactアプリのパフォーマンスチューニング」を解説してくれました。

荒井 雄治朗（あらい ゆうじろう）：GIGのプログラマー。10年間システム開発会社でLaravel/React/ReactNativeなどの幅広い開発を経験し、GIGに入社。個人開発も行い世界的なサービスを生み出すことを目標に日々サービスを産み育てている。

当日使用したスライドは以下からご覧いただけます。

遅いMarkdownアプリを速くする！！Reactアプリのパフォーマンスチューニング from GIG inc.

まずは開発したノートアプリの紹介

「世の中のインフラとなるようなすごいサービスを生み出したい」と、GIGだけでなく、個人でもサービス開発を行なっている荒井さん。実際に開発したノートアプリを例にお話してくれました。

荒井さんが開発したのは『Classicc』というノートアプリ。ページ遷移でノートを表示するアプリが多い中、このアプリではノートが横に並んでいます。これなら以前のノートにすぐアクセスできますね。

パフォーマンス改善で最初にやるべきは「遅いところを見つける」こと

「本当の意味で使わなければ、我々はその遅さに気づくことができない」と熱く語る荒井さん。これはどんな意味でしょうか？

荒井：「これは『デバッグ』と『使う』は驚くほど違うということです」

自分で実際にアプリを使ってみて、デバックでは問題だと認識できなかった文字入力の際の反応の遅れ、「詰ってる感」に気が付いたと言います。

荒井：「自分がこの詰まってる感にムカついたなら、いつか他のユーザーもムカつくはずです。僕はそれを先に潰しておくことで、将来ユーザーをムカつかせないことができる。だから、本当のユーザーにならなければいけません」

次に、「遅い原因を特定する」作業

こちらは、アプリの画面。表示されているのはノートの1ページと半分ほどです。

こちらはGoogle Chromeの開発者ツールで確認できるタイムラインパネルです。先ほどの表示されているページは紫で小さく囲われた部分。赤く囲われているのが見えていないノートです。本来は見えないはずの領域まで更新しているため、速度が遅くなってしまうそう。

遅い原因を特定できたら「速くする」

「速くする方法は、shouldComponentUpdateを書くことと、windowingすることです」と荒井さん。

まずは「shouldComponentUpdateを書く」から見ていきましょう。

親であるC1の値に変更があると、その子のC2、C3も変更されます。ただ、C2、C3の値が変わっていないのにC2、C3を更新するのは無駄な動きです。

荒井：「コンポーネントのプロップ数が参照型の場合、JavaScriptは同じものと判定せず、子に伝播して無駄にレンダリングされてしまいます。shouldComponentUpdateを書けば同じ値として判定させることができます」

「windowing」とは、アプリの画面に映っていないノートのページを表示させないようにすること。

アプリでは見えていないページも、レンダリングされています。

※レンダリング：ブラウザで見える状態にすること

見えていないページををレンダリングさせなくする技術をwindowingと言います。この二つでパフォーマンス向上が見込めます。

後半のテーマは「React Native + Expoでアプリを開発してみた話」

フロントエンジニアの石黒 雄介さんが登壇し、「React Native + Expoでアプリを開発してみた話」についてお話してくれました。

石黒 雄介（いしぐろ ゆうすけ）：名古屋のWeb制作会社で大手企業サイトのマークアップ、UI設計、保守運用を4年間おこなう。2018年4月より、GIGが提供するスキルシェアサービス「Workship」のフロントエンドエンジニア/テックリードとして参画。
Twitter → @kokushing

当日使用したスライドは以下からご覧いただけます。

React Native + Expoでアプリを開発してみた話 from GIG inc.

React Nativeとは

React NativeはFacebookが作ったアプリの開発フレームワークです。iOSとAndroidのアプリを両方同時に作ることができます。今後は、Windows向けアプリの開発も可能となる見込みで、さらなる需要の高まりが予想されます。

特徴はReact.jsに似たシンタックスで、モバイルアプリの開発が簡単にできることです。

Expoとは

ExpoはReact Nativeの開発支援ツールで、ビルド周りを簡略化できます。

実際に石黒さんが作ったものを動かしながら見せてくれました。

作ったものの紹介

石黒：「Instagramのようなアプリを作ってみました。写真が撮れて、コメント付きで投稿できて、いいねができて、フォローできるものです。下に引っ張って画面を更新する動作もExpoを利用すれば簡単に実装できます」

石黒：「もう一つ、マッチングアプリも作ってみました。Tinderのように好き、嫌いを左右にスワイプできます。このUIもreact-native-deck-swiperのライブラリを読み込むと簡単に実装できます。サードパーティ製のコンポーネントを組み合わせるだけである程度形になってしまうので、実装していて達成感があります」

最後に振り返って

初めてのアプリ開発だったという石黒さん。今回の振り返りと次回以降の抱負を語ってくれました。

石黒：「今後は、ストア公開までやりたいです。あとは、Expoなしでの開発やType Scriptを導入してどのくらい使いやすくなるのか検証してみたいです」

勉強会の後はピザパーティー！

勉強会の後は、ドリンクを片手にピザパーティー！

登壇者も社外の方との交流で、新しい知見を得られます。

一緒に働く仲間を募集しています！

GIGでは「一緒に学びながら成長していきたい！」と意欲のある仲間を募集しています。

興味のある方はWantedlyからどうぞ！