id:masawada くんが教えてくれたプリントスというグッズが今月の中旬に発売されて手に入って以来ずっと遊んでいるのですが、最高のグッズなので紹介します。
スマホで写真を表示した状態で上に載せてシャッターを切るとチェキフィルムに転写されるというグッズです。
電源も要らないしスマホの画面に出せれば良いので、過去の写真とかインターネット上の素材とかでも印刷し放題で便利。
僕が買ってからプリントスで印刷したものの一部を紹介します
CTOのサイン入りチェキです pic.twitter.com/JXBLLk2Oki
— マジカルペンネくん🍝 (@pastak) 2017年12月28日
年末年始もこれでどんどん遊ぶ予定です。皆さんも是非。（Amazonは定価超えてるので気をつけて）
みねむらさんのやられているカフェでクリスマスパーティーをやると聞いたので見に行った
そのときの様子です
僕のことをステッカーで知ってくださっている方がいらしゃっていて*1、その方にキラステッカーをお渡ししたら他の方々も貼ってくださってこういう光景になった*2。
キラステッカーそろそろ無くなってきていて年明けに新しいのを作ろうと思っています。メリークリスマス！！！！！！！
118万円+扶養親族等の数×38万円+社会保険料控除等
http://www.nenkin.go.jp/service/kokunen/menjo/20150514.html
会話
年金払ったところ一気に金がなくなったので年越せるか怪しくなった
— サブカルペンネくん (@pastak) 2017年12月20日
年金、今まで学生特例で請求来てなかったけど、突然今年は請求の督促みたいなのが来たからビビって払ったけど、所得が範囲内なはずだから年金事務所突然すれば良かった気がしてきた
— サブカルペンネくん (@pastak) 2017年12月20日
年金のtipsですが、請求を無視すると、その分浮いたお金で飲みに行けます
— ウイウ (@uiureo) 2017年12月20日
この記事ははてなエンジニアアドベントカレンダー2017の14日目*1であり、且つ後輩が徳島旅行に行っているので、日程がスワップされた結果KMC Advent Calendar 2017の14日目の記事でもあります*2。
はてなエンジニアアドベントカレンダーの13日目の記事は 
id:amagitakayosi さんのインターネット溶かすボタンできた - マルシテイアでした。KMCアドベントカレンダーの13日目の記事は 
id:opesan くんの 聖地巡礼記2017 - おぺの日記でした。
さて、今年2017年は素晴らしい年で、フロントエンドのパフォーマンスチューニングに関する良い書籍が2冊も出ました。
超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)
フロントエンドのパフォーマンスチューニングに関する具体的なテクニックは上記の書籍などに譲るとして、この記事ではそもそもフロントエンドのパフォーマンスチューニングをやる必要があるのか、取り組むとしたら何に手をつけると良さそうなのかということに、ひとまず 大雑把に目星を付ける という話をします。具体的には、ひとまず15分くらい取り組んでみて、以下の点についてざっとチーム内などで共有できることを目指します。
（Mac上のChrome v63 の Developer Tools を用いた操作や画面の説明を掲載しています。他のOSやブラウザ、Chromeのバージョンの違いに依って異なる場合があります）
まず、そもそもボトルネックがフロントエンドの実装、特にJavaScriptの層にあるのかどうか判断することが必要です。例えば、APIサーバーのレスポンスが遅い場合などはそちらを対処すべきですし、レンダリングが遅いのは画像の配信が遅いことに引っ張られている可能性もあります。Devloper ToolのNetworkタブでそれらに関するヒントを得ることができます。
Networkタブを開いた状態であるページをロードしたときの結果の一部を挙げます。
Networkタブの結果の棒グラフは色々な情報がある*3のですが、ここではざっくりと以下の２点を観察することにします。
これを念頭に置いて先ほどのグラフを見ると、画面中央の辺りでいくつかの緑のグラフが4000msec〜6000msec分あることが分かります。 緑はサーバからのレスポンスが到達し始めるまでの時間なので、これらのエンドポイントはサーバサイドでAPIレスポンスを生成するまでに問題がありそうなことが分かります。この部分に関してはフロントエンドよりもまずはAPIの設計や実装を見直すと良さそうです。
詳細な時間やAPIのレスポンス内容について知りたい場合、name部分をクリックすることでレスポンスのヘッダーや時間の詳細を見ることが出来ます。
Networkタブでウェブアプリケーションの通信に関する部分を観察したので、次に本丸のフロントエンドのパフォーマンスについて観察していきたいと思います。
ChromeのDeveloper ToolにはPerformanceというタブがある*4ので、今回はそれを観察します。Macの場合、Command + Shift + Eでリロード→集計開始をやってくれます。
先ほどNetworkタブで素振りをしたのと同様に次の2色について着目してひとまず観察することにします。
というわけで、あるウェブサイトで集計した例を提示します。
橙もなんとかしたいのですが、今回は特徴的な中央右寄りの紫の部分を今回は観察することにします。紫の部分はレンダリングに関する部分で、要素のwidth/height/left/topなどを取り扱うフェイズです。特にこの紫の部分がボトルネックになっている場合、強制同期レイアウト(Forced Synchronous Layout)*5が発生している可能性が考えられます。
この強制同期レイアウトが頻出してFPSが下がっている場合、次のような橙と紫の関係性のグラフになっていることが多いので、このようなときは注意が必要です。
from https://developers.google.com/web/tools/chrome-devtools/rendering-tools/forced-synchronous-layouts
では、前述のグラフから怪しそうな紫色が大半を占める部分を拡大して見てみることで何が原因になっているか探ってみます。
(文字が隠れていて見えませんが)Recalculated StyleとLayoutに時間がかかっていることが分かります。紫のバーの右上に赤い三角があるのは強制同期レイアウトが起きている印なので、これによってScriptの実行がブロックされていることが分かります。さらにそれらの出来事は whenXS という名前の関数内で発生していることが分かります。
この強制同期レイアウトの原因を取り除く*6と次のような状態になって、ここから先はXHRのReadyStateChangeのあとに起きていることなどをつぶさに観察してJSのロジックなどを改善していけば良さそうという方針が立てられそうです。
Performanceタブではその他にもJSのヒープやCPUの使用量についても観察できるので適宜参考にすると良さそうです。またレンダリングやアニメーションについて深く追いたい場合はDeveloper ToolのMoreToolからLayersタブを開いたりすると良い情報が得られるかもしれませんし、JavaScriptの実行について詳しく追いたい場合は同じ場所から開くことが出来るJavaScript Profilerなどを使うと良いでしょう。
フロントエンドのパフォーマンスチューニングに問題がありそうな時に、ひとまずシュッとウェブサイトの状態を観察してボトルネックらしき箇所を特定するときに僕が取り組んでいるアプローチについて紹介しました。
また、フロントエンドのパフォーマンスチューニングに関する代表的なテクニックや基本的な向き合い方などは過去の発表資料で紹介しているので、良ければそちらも御覧ください。
*1:9月末からはてなでマンガビューワーのフロントエンドをやるアルバイトをしています
*2:本当は別々の記事を書こうと思っていたのですが、許してください
*3:https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#timing-explanation
*4:詳細は https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
*5:https://developers.google.com/web/tools/chrome-devtools/rendering-tools/forced-synchronous-layouts
*6:詳細は省きますが、強制同期レイアウトを呼び起こす関数の利用をとにかく回避する
12月になりましたね。12月は可能な限り毎日ブログ更新するか（いわゆる1人アドベントカレンダーやるか）と思っていたけど、いきなり失敗したので、記憶を呼び出しつつやっていきます。
【ここにDJ中の写真を貼りたいのでお持ちの方はお知らせください】
今年の春に誘ってもらって初DJしてから早半年、ついにSMTP++は3度目の開催、個人的には4度目のDJということでやっていきました。
今回はこれまででDJ面白くなってきたので、キラキラ光る板を卒業して、DDJ-RBを買って挑みました。
SMTP++は開催するたびに周囲の人々がDJを始めたり始めようとしたりするので良い会という感じがする。
今回の選曲、BPM160と100を行き来するという感じで、遊びに来てくれた後輩が最前列でめちゃくちゃ煽ってきたので盛り上がりがあって良かった。次回は後輩に煽られないような感じにしていきたい。
(最初にAnthem of NAGOYAを1分ほど流した。名古屋J1昇格おめでとうございます)
（今年は毎月のマンガをしなかったので、毎日1冊ずつ振り返りを軽くしようという試み）
しがない高校生の妖平はある日、学校の屋上で地縛霊の輪子さんと出会う。死んでからずっと一人ぼっちの輪子さんは「友達作り」を手伝ってほしいと言い出して…？ポンコツヒロイン界に新風を巻き起こす、コミュ症の幽霊JKラブコメディ!!
帯コメが『からかい上手の高木さん』の山本崇一朗先生だったので買ってみたやつ。山本先生が帯コメしているだけあって女の子の可愛さバッチリのラブコメだった。 ポンコツヒロイン系のラブコメが好きな人は読むと良さそう。テンポも上手で幽霊（学校の怪談）の使い方も上手でコメディ部分も面白かった。
