2019-12-12

React Nativeでパフォーマンスチューニングするときに役立ちそうなライブラリ紹介

この記事はReact Native Advent Calendar 2019の 12 日目の記事です。
10 日目は、React Native の iOS/Android ビルドする bitrise.yml を晒してみる&ビルド高速化などでした。

パフォーマンスチューニングをしようとした際に、Weak Point を調べるライブラリを調べていたので、紹介したいと思います 🤘

ライブラリ紹介

why-did-you-render

コンポーネントが再 Rendering されたときに、何が起因で再 Rendering が起こったのかを console に出してくれる君。
Statefull な Component が多いときに入れておくと便利そう。

welldone-software/why-did-you-render

使い方は、Root となる箇所で以下のように書いとくだけ。
すべての Component で更新がかかったときにログを出してくれる。

import whyDidYouRender from "@welldone-software/why-did-you-render"
import React from "react"

if (__DEV__) {
  whyDidYouRender(React)
}

React Hooks を使っている場合は、useWhyDidYouUpdateなるものを見つけたので、こちらを使ってみると良いかも。

useWhyDidYouUpdate React Hook - useHooks

react-native-slowlog

処理に 16ms 以上かかりフレーム落ちが発生した際に Yellow Box や console.log を出して知らせてくれる君。

jondot/react-native-slowlog

こちらは、各 component の constructor で呼び出してやる必要がある。
whyDidYouRender のようにシュッといかないのがちょっと不便。

import slowlog from "react-native-slowlog"
import React from "react"

class Master extends Component {
  constructor(props) {
    super(props)
    // __DEV__を見て、よしなにログを出さないようにしてくれる
    slowlog(this, /.*/)
  }
}

React Profiler API

React 16.9 から導入された、Component の Rendering 時間を細かく出してくれる君。
公式なので追加ライブラリなしに使えて、とても良い気がしている。

Profiler API – React

チェックしたい Component を React.Profiler で Wrap してやると、実際に掛かった Rendering 時間をcallbackで返してくれる。

const component = props => (
  <React.Profiler id="MyComponent" onRender={onRenderCallback}>
    <MyComponent />
  </React.Profiler>
)

function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime,
  interactions
) {
  console.log(
    `id: ${id}, phase: ${phase}, actualDuration: ${actualDuration}, baseDuration: ${baseDuration}, startTime: ${startTime}, commitTime: ${commitTime}, interaction: ${interaction}`
  )
}

React Native v0.61 から React 16.9 になっているので、追従している人は使える。
Expo も数日前のリリースで v0.61 に追いついたので、Expo の人も更新すれば使える。

Expo SDK 36 is now available - Exposition

おわり

重くなりやすい大きめな画面に入れておいて、動作確認をシュッとできるようにしとくと便利で良いですね。無駄にRenderingしないように気をつけていきましょう😇

明日はtsukueさんです！

2019-03-04

戸越銀座お散歩

雑記

たまには日記的なの書いてみたくなった。

地元で売られている音更の餃子が食べたくなりました。 ggってみると、戸越銀座にアンテナショップ的なものがあると知りました。そんなわけで、餃子ゲットを目標に戸越銀座にいってきました。

お昼ごはん

お昼時についたので、お友達がオススメしてたシチューを食べた。

巨人のシチューハウス - 下神明/西洋各国料理（その他） [食べログ]

マッシュポテト多すぎワロタ(美味しい)

ラムのシチューとソーダパン、マッシュポテトを頼んだ。ポテトが小鉢程度と思ってたので量が多すぎワロタ。たぶん、250gぐらいあった。味はめちゃおいしくてQoLが上がった。

温泉に入りそこねた

戸越住みの人から「戸越は銭湯があって最高」という話をよく聞いてたので、いってきた。

戸越銀座温泉

が、雨降って寒かったせいか、人がいっぱいでロッカーが空かず、入れなかった😇どんまい

餃子巡り

本命の餃子を買った。実家にいたときにたまに食べてた。餃子鍋したくて「ネットでポチるかーーー」とggったら実店舗あると知ったので行く機運になった。にんにくとニラがぎっしり目でビールが最高な餃子。

音更ぎょうざ餃子の宝永戸越銀座店 - 戸越/餃子 [食べログ]

ほかにも、ここの餃子が美味しいと聞いたが荷物の都合で断念(戸越に店舗があるのだけどサイトがみつからんかった)。次行ったらときには買いたい。

目黒ぎょうざ宝舞

塩屋さん

「戸越のオススメください」と雑に聞いたところ教えてもらった。粗塩ぐらいしか買ってないし、よさげなの買ってみるか！！と行ってみた。

戸越銀座「solco（ソルコ）」は自分好みの『塩』を見つけられる専門店 - macaroni

が、なんかお店混んでたので断念😇

お菓子屋さん

「戸越のオススメください」と雑に聞いたところ教えてもらった。

f:id:symmt9302:20190304230953j:plain

田舎パイがオススメと聞いたので買った。ノースマンっぽかった。

f:id:symmt9302:20190304231040j:plain

桃のお酒も買った

瀬尾商店

ぶらぶらしてたら発見したので入店。

店舗情報 | 瀬尾商店

おしゃな雑貨とDIY用品がいっぱいでときめいた。売られてたコートにときめいて散財した。

楽天もあるそうな。

【楽天市場】瀬尾商店　online market

カルディ

カルディみつけると吸い込まれないですか？？？？？？？

デイリーポータルの調味料選手権みたいな記事読んだばかりだったので、麻辣ペッパーミルと同僚がシラチャーソース美味しいと言ってたの思い出して買った。

f:id:symmt9302:20190304231144j:plain

おわり

ひとりでぶらっとお出かけするの、いいですね。雑にやって行きたいですね。餃子と温泉のために、また近々再チャレンジしたい。

2019-02-21

DroidKaigi 2019にて登壇しました

先日開催されたDroidKaigi2019で「React NativeとExpoを用いたクロスプラットフォーム開発入門」というタイトルで発表してきました💪 雑に振り返り記事を書いておきます。

資料とか動画とか

DroidKaigi2019のタイムテーブル

React NativeとExpoを用いたクロスプラットフォーム開発入門 - DroidKaigi 2019

スライド

元のスライド(原稿付き)

リンクをシュッと開きたい人は、ここから元のが落とせます Google Drive

動画

セッションについて

2日目の朝イチ&React Nativeの話しということで、あまり人いないんだろうなーーーと思ったのですが、多くの方が足を運んでくださって嬉しかったです！発表手前、同僚の@seto_hiさんが絡んでくれたり、@nkznさんが毎年やっていた挙手アンケートやったり、和めました😌 発表は、早口だったのか発表は5分ぐらい早めに終わってしまいましたが、内容については事前にテキストを書き出していたこともあり、伝えようと思っていたことはしゃべりきれたかなと思っています。自分的には70点ぐらいはあげたいお気持ちです🙂

登壇してみた感想

発表までの3ヶ月がしんどかった...。発表内容の大枠決めるまでのコレでいいの感、資料作っている最中のコレで伝わるの感、わかっていたつもりではいたが書き起こすとわかっていないことを自覚する虚無感など、なんで発表申し込んでしまったんだ！！！！！！😇と思うこと多かったです。きっと登壇者あるあるでしょう。これもあるあるでしょうが、発表のためにきちんとエビデンスをとっていったので、発表前よりはReact NativeやらExpoについての知識や理解は圧倒的成長した気がします。最終的に、登壇しといてよかった！と思いました。

また、社内での発表練習も3回ほどやりました。資料の校正から言葉遣い、説明が伝わらない点の指摘やスライドのフォントなど、発表慣れ&情報のまとめ方が下手くそなおかげで、無限にアドバイスをいただきました🙏 普段の業務のドキュメント書きやら、今後の発表の機会に活かせるような気づきをたくさん得れたので活かしていきたいですね！

おわり

当日発表を聞きにくださった方々、ありがとうございました！

また発表まで期間は、同僚である@tackeさん、@seto_hiさん、@tebasakyuさん、社外では@nkznさん、@hmktsuさんにとてもお世話になりました！ありがとうございました！

2018-11-15

React NativeとExpoの話題でDroidKaigiに登壇することになりました

登壇することになりました

あばばばば。

「React NativeとExpoを用いたクロスプラットフォーム開発入門」というセッションでDroidKaigi登壇することになりました。yatteikiです。 💪 #droidkaigi
— とらい (@mrtry_) 2018年11月12日

前職で生React Nativeで音楽再生アプリを作ってて、最近は副業でExpoを触っている感じでした。その流れで「Expo最高じゃん？？？」というお気持ちになっていたので、シュッとしました。

しゃべる予定の内容

https://droidkaigi.jp/2019/proposals/ からシュッと抜粋

React NativeとExpoを用いたクロスプラットフォーム開発入門
発表者: mrtry
近年、クロスプラットフォーム開発環境のひとつとしてReact Nativeに注目が集まっています。
2018年だけでも、React Native自体の大幅なアップデートや、react-native-domの登場、AirbnbのReact Nativeリプレイスなど、話題に事欠きません。
キャッチーな話題が多いReact Nativeですが、実際の開発まわりになると「触ったこと無いし、実際よくわからない」という方が多いのではないでしょうか。
そんな方に向けて、本セッションでは、React NativeとそのtoolchainであるExpoを用いたアプリ開発の実際について紹介します。
React Nativeを触ったことがない方が、実際にアプリを作るための足がかりになれば、と思っております。

■目次(仮)
- React NativeとExpoのそれぞれの概要
- React NativeとExpoを用いたアプリ開発の利点/欠点とユースケース
  - 利点
    - 環境構築の容易さ、便利なライブラリ群、Build設定まわりの管理移譲、など
  - 欠点
    - apkサイズ、OSS選定のつらさ、ネイティブ実装による独自拡張ができない、など
  - React NativeとExpoを採用できるユースケース
- Hello, Worldから味わうExpoでの開発の雰囲気
  - プロジェクトの作成
  - 利用するエディタ
  - Reactの雰囲気
  - Hot Reloading
  - など
- 実際に開発する上で知っておきたいTips
  - TypeScriptの導入
  - よく使われるライブラリの紹介
  - ライブラリの探し方
  - CI上でのBuildやテスト、配信
  - パフォーマンスチューニングの基礎
  - Over The Air 
  - など

受講対象者

- React Nativeを用いたクロスプラットフォームなアプリ開発に興味がある方
- Androidエンジニアの文脈で、React Nativeの良し悪しを知りたい方
- アプリエンジニアのリソースが不足しているチームでアプリ開発に取り組みたい方

気持ち的には、去年のkonifarさんのセッションのExpo版という感じになるかと思います。スライド事前公開できたらいいなあ。

おわりに

やっていき💪

2018-08-20

EdgeRouter設定記(とりあえずPPPoE接続するまで)

Network EdgeRouter

以前、EdgeRouterを買ってた

Ubiquiti Networks - EdgeRouter™ X

家のルーターにしてたけど、引っ越したときになんかつながらくなり、発狂していた(これはあとで、PPPoEの設定が変わったからということに気づく)。

リセットして再設定してみたので、その時の雑な作業ログ

やったこと

ほぼ、こちらに書かれているブログと同じことをしただけ - EdgeRouter X - 1. 初期設定 | yabe.jp

はまったところ

MacがUSB LANを認識しない

家のNintendo Switch用にUSB LANを元々持っていた

KINIVA Nintendo Switch LANアダプター USB3.0 有線LANアダプタ【任天堂スイッチ動作確認済】ギガビット対応 1000Mbps高品質超高速高耐久性日本語マニュアル付 by KINIVA

出版社/メーカー: KINIVA
メディア: Video Game
この商品を含むブログを見る

これを使って、EdgeRouterと接続を試みたが、つながらない

見たところ、そもそもMacに認識されてないようだった

ネットワーク機器の一覧を見てもそれっぽいのないし、

f:id:symmt9302:20180820230343p:plain

システム情報のUSBの項目見てもなにもない

f:id:symmt9302:20180820230410p:plain

結局、ドライバーがアレば良いということで、自分で落としてきて入れた。以下のサイトのDriverのところのApple Mac OS X 10.9 and above Drivers Installerを落として入れた - AX88179 - USB 3.0 to Gigabit Ethernet (GbE,GigE) | ASIX

入れて再起動とかしたら、こんな感じで認識された f:id:symmt9302:20180820230716p:plain

EdgeRouterをうまくリセットできなかった

その後、今度は管理画面が開けなくて泣いた。リセットボタンをテキトーに押してみても、どうも上手くいかなかった。その後、公式ドキュメントを見つけて、落ち着いてその通りやったらできた。

EdgeRouter - Reset to Factory Defaults – Ubiquiti Networks Support and Help Center

EdgeRouterとWifiをつなぐも、Wifiがつながらない

NECのWifiを使っているのだが、設定されたEdgeRouterからWifiのほうのWANにつないでも、つながらん。 Wifiの設定画面を見てみると、動作モードをPPPoEルーターにしてた。これをローカルルータに戻して、ちゃんと動作することを確認できた。

f:id:symmt9302:20180820231203p:plain

やりはじめに、ルーターのIPがわからず発狂しかけたが、NECのルータのデフォルトのIPは192.168.10.1 or 192.168.0.1ということを知ったので、事なきを得た。

参考

2018-08-12

鴨居フックとワイヤーネットでケーブルトレーもどきを実装する

ライフハック DIY

机周りを整理しているとき、配線をきれいにしたいなと思いました。

ケーブルトレーあればキレイになるよね、なんて思いましたが、微妙に高い。

イーサプライケーブルトレーケーブルオーガナイザ配線収納隠しデスク電源タップ W420 EEX-CBH01

出版社/メーカー: イーサプライ
メディア: エレクトロニクス
この商品を含むブログを見る

これ100均の何かでそれっぽいのできないかとやったメモです。

鴨居フックとワイヤーネットでいい感じやる

100均にいくと、鴨居フックなるものが売ってます。

ノムラテックカモイダブルフックロング (幅5~80mm対応) N-3334

出版社/メーカー: ノムラテック
メディア: Tools & Hardware
この商品を含むブログを見る

鴨居のところにひっかけて、フックが増設できるというやつです。

こいつにワイヤーネットをかけて、棚つければ、いい感じでは？と思ったのです。

ルミナスポール径25mm用パーツ収納性アップパーツサイドネット取付用S字フック付き 41×75cm NT4576

出版社/メーカー: ドウシシャ(Doshisha)
メディア: ホーム&キッチン
この商品を含むブログを見る

てなわけで、やってみました。432円の割にはいい感じです。

f:id:symmt9302:20180812171644j:plain

余った配線は、チューブでまとめるなり、ネットの穴を通せばいい感じになります。

ELECOM ケーブルまとめスパイラルチューブ内径10mm 長さ2.0m クリア BST-10

出版社/メーカー: エレコム
メディア: Personal Computers
購入: 2人クリック: 6回
この商品を含むブログ (1件) を見る

配線もまとまって、足元の掃除もしやすくなったので、満足です( ˘ω˘)

2018-07-08

はてブしたらSlackに通知するGASを書いた

ライフハック Google Apps Script

はてブしたやつのタイムラインあったらいいな、と思ってたらこんな記事を発見した。

はてなブックマークのお気に入りのブックマークをSlackに投稿する

あはーん。便利そう。そんなわけで、記事を参考にしつつやったので、その作業ログ。

できたもの

自分のアカウントで、はてブをキメると、こんな感じでSlackに流れる。

f:id:symmt9302:20180708162019p:plain

完成までの流れ

大体は、以下の記事と一緒。

はてなブックマークのお気に入りのブックマークをSlackに投稿する

Slack側の準備

1.以下から、SlackのTokeの取得しておく

Legacy tokens | Slack

2.はてブの通知を受け取りたいチャンネルを準備しておく

GASの下準備

下準備として、Slackのライブラリ追加と環境変数の設定をする

リソース→ライブラリを開きライブラリを追加にM3W5Ut3Q39AaIwLquryEPMwV62A3znfOOを入力して、SlackAppを追加しておく

f:id:symmt9302:20180708162043p:plain

ファイル→プロジェクトのプロパティ→スクリプトのプロパティにて、SlackのTokenとチャンネルを登録する

f:id:symmt9302:20180708162200p:plain

GASのスクリプト

こんな感じのを書いた

元のスクリプトの差分としては以下のような感じ

アイコンをブックマーク登録者のアイコンから、公式アイコンへ変更
はてブを新規追加したときのみ通知する
- 元のをそのまま使うと、更新や削除でも通知が来る
Slack用の設定で、OGPが表示されるようにした
- slack.postMessageは公式のAPIのoptionがそのまま使える
  - postMessage(string channelId, string text, Object option)を参考
  - Library Documentation
- unfurl_links: trueとすると、SlackにOGPが出る
  - Unfurling links in messages | Slack
  - chat.postMessage method | Slack
エントリー情報へのリンクがつくようにした
- 以下のようなページのこと
- はてなブックマーク - 物件契約時の初期費用を交渉したときのメモ - お気持ちの表明