massa142's blog

くり返す このポリリズム

合同勉強会・忘年会議に参加できなかった

この記事は、大都会岡山 Advent Calendar 2017 24日目の記事になります。

adventar.org

合同勉強会・忘年会議ってなに?

gbdaitokai.connpass.com

bonenkaigi.connpass.com

結果

体調を崩して風邪を引いてしまい、参加を泣く泣くキャンセルしました。本当に申し訳なかったです。

これに合わせて@rhoboroが住んでる尾道にも遊びに行こうと思ってたのに残念。

3年連続で年末のこの時期に体調を崩してるので、来年はなんとか対策を講じたい。

そして2018年こそ大都会岡山に遊びにいくぞい。

『Webフロントエンド ハイパフォーマンス チューニング』を読んだ

Webフロントエンド ハイパフォーマンス チューニング

Webフロントエンド ハイパフォーマンス チューニング

本書では高速化という課題に対し、きちんと対処できる知識と実力を身に付けます。基礎となるブラウザのレンダリングから、個別の問題に対する対応例、今後を見据えた設計の基礎などその場しのぎではない本質的な高速化を学びます。

この書籍のなかでも指摘されているけど、自分は巷で話題のベストプラクティスとかを調べて満足しちゃうタイプなので体系的に学べる本書はとても勉強になった。特にチューニングの話に入る前に、ネットワークとブラウザのレンダリングの仕組みについて解説されているのがめちゃくちゃ良い。

後半のところで書かれているテクニック(特にCSS関連のもの)は、否定していた『小さな最適化』のように感じられたが、全体として基礎をきちんと抑えることができる内容だったと思う。

また少し前に話題になったdev.toの速さの解説記事を合わせて読むことで、理解が深まって楽しめた。

フロントエンドのパフォーマンスについての興味が高まってるから、次にこの2つを読んでいきたい。

超速!  Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)

超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)

パフォーマンス向上のためのデザイン設計

パフォーマンス向上のためのデザイン設計

読書メモ

第2章 ブラウザのレンダリングの仕組み

第3章 チューニングの基礎

第4章 リソース読み込みのチューニング

  • HTML/CSS/JavaSriptを最小化する
  • 適切な画像形式を選択する
    • dev.to は Cloudinaly を利用
    • Cloudinalyは、ブラウザごとに最適な拡張子(webp/jpeg)の選択をしてくれる
  • CSSのimportを避ける
  • JavaScriptの同期的な読み込みを避ける
    • script要素によるJSの読み込みは、ドキュメントのパースをブロック
    • defer属性
      • DOMツリーが構築されてから実行
      • 実行順序は宣言の順に従う
    • async属性
      • 実行タイミングと実行順を保証しない
      • ファイルが取得された時点で実行される
  • バイスピクセル比ごとに読み込む画像を切り替える
    • srcset属性
    • <picture>要素やsizes属性とも合わせて
  • CSSのメディアクエリを適切に指定する
    • FOUC(Flash of Unstyled Content)を回避するために、最初のレンダリングを行う前にCSSファイルの読み込みを待つ
    • link要素のmedia属性を適切に指定することで、CSSの読み込みがレンダリングをブロックしないようになる
<link href="style.css" rel="stylesheet" media="screen"> 
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 920px)"> 
  • CSSスプライトを使って複数の画像をまとめる
    • HTTP/2以降では意味なし
  • リソースを事前読み込みしておく
    • DNSプリフェッチ <link rel="dns=prefetch" href="http://example.com">
    • リソースのプリフェッチ <link rel="prefetch" href="./image.gif">
    • プリレンダリング <link rel="prerender" href="//example.com/prerender.html">
    • 接続の投機的開始 <link rel="preconnect" href="http://example.com">
  • Gzip圧縮を有効にする
  • CDNを用いてリソースを配信する
  • ドメインシャーディング
    • HTTP/2以降では意味なし
  • リダイレクトしない
    • URLの最後のスラッシュを付けるようにしておく
  • ブラウザのキャッシュを活用する
    • 強いキャッシュ(期限が切れるかキャッシュファイルが削除されるまで有効)
      • Expiresヘッダー
        • Expires: Mon, 02 Nov 2015 13:19:30 GMT
        • サーバーとクライアントの時間設定がずれてるとだめ
      • Cache-Controlヘッダー
        • Cache-Control:max-age=600
        • ExpiresとCache-Control両方が設定されていれば、Cache-Controlを優先
        • モダンなブラウザではCache-Controlに対応してるから、Cache-Control設定のみでOK
    • 弱いキャッシュ(条件付きGETリクエスト<=>304 Not Modified)
      • Last-Modifiedヘッダー
        • Last-Modified: Wed, 15 Nov 1995 04:58:08 GMT
        • If-Modified-Since: Wed, 15 Nov 1995 04:58:08 GMT
      • ETagヘッダー
        • ETag: "7797921b867ce392cad8415b729ffa97"
        • If-None-Match: "7797921b867ce392cad8415b729ffa97"
        • Last-ModifiedよりETagを優先
        • ETagは複数の結果をキャッシュできるのでより柔軟
        • 配信サーバーが複数の場合はETag値が異ならないように注意が必要
  • Service Workerの利用
  • HTTP/2の利用
    • バイナリ化したプロトコル
      • HTTP/1.1まではテキストベース
    • HTTP/1.1のセマンティクスの再利用
    • リクエストとレスポンスの多重化
      • 1つのTCP接続で複数のリクエストとレスポンスが並列で扱える
      • ブラウザの同時接続数の制限がなくなる
    • HTTPヘッダーの圧縮(HPACK)
      • 以前送信したものからの差分だけ送信できるように
    • TLSが事実上必須
  • QUICプロトコル
    • Googleが開発したネットワークプロトコル
    • TCPではなくUDP上に構築
    • 以前接続したことのあるサーバーとの通信であればゼロラウンドトリップ可能
    • 最初の接続もTCP+TLS相当のコネクション確立がラウンドトリップ1回で可能
    • Source Address Tokenをやりとりする
    • Head-of-Line Blockingがない(パケットは同時並行で送信される)
    • UDP上でありながら、TCP持つがパケットロス検出や誤り検出が可能
    • TLCが提供している盗聴・改ざん防止の機能も
    • Google Chromeのみ対応

第5章 JavaScript実行のチューニング

  • メモリリークを防ぐ
    • メモリ使用量が増えるとメモリスワッピングを引き起こす
      • メモリをハードディスクなどに退避させてメモリを解放する
    • console.log()によるメモリリーク
      • いつでもコンソールに表示できるようにするために特殊な参照が付いてGCの対象から外れる
    • WeakMapとWeakSet
  • Web Workersの利用
    • Web WorkersのスレッドとUIスレッド間の通信には、非同期でデータを通信しあうメッセージパッシングで行う
      • データは共有されずに、コピーしたものを送信する
      • Transferableインターフェースを持つオブジェクトは、所有権を扱える
        • データコピーする必要がなくなって、そのオーバーヘッドを回避できる
    • モバイル端末でも4コアな機種が多い
    • DOM要素・document/window/parentオブジェクトはWeb Workersからは使えない
  • asm.jsによるJavaScript高速化
    • Mozillaが設計したJavaScriptのサブセット
      • 計算はすべて静的型付け
      • 計算で利用できる方はintとdoubleとfloatの3つのみ
      • asm.jsモジュール内部では仮想的にGCが利用不可
    • EmscriptenC/C++のコードをasm.jsにトランスパイル
    • WebAssemblyに置き換えられる流れ
      • asm.jsはあくまでJavaScriptのサブセット
      • WebAssemblyブラウザ上で実行可能なバイナリフォーマット
  • SIMD.jsの利用
    • 複数の値の計算を一度に行うことができるSIMD(Single Instrauction Multiple Data)を扱えるAPI
    • WebAssemblyに置き換えられていくのが予想され、正式な仕様にはならない見通し
  • 高頻度で発火するイベントの抑制
  • モバイル端末でのclickイベントの遅延をなくす
    • touchendイベント後300ms待ってからclickイベントが発火
      • ダブルタップかどうかを判断するため
    • meta要素によるviewportを適切に設定すればOK
      • <meta name="viewport" content="width=device-width, user-scalable=no">
  • Passive Event Listenerでスクロールのパフォーマンスを改善する
    • イベントリスナがスクロールをブロックするScroll Jank問題
    • {passive: true}オプション
      • イベントリスナないでevent.preventDefault()が無効になることを保証
  • 無駄なForced Synchronous Layoutを減らす
    • DOM操作した後にレイアウト情報を参照するとレンダリングエンジンが最新の正しいレイアウト情報を返すために引き起こされる
      • DOM操作する前にレイアウト情報を参照しておく
      • requestAnimationFrame()を使用する
      • requestAnimationFrame()に渡したコールバックが呼び出されるタイミングは、DOM操作が終わり再レンダリングが終わってから

第6章 レイアウトツリー構築のチューニング

  • レイアウトツリー構築の流れ
    • CSSセレクタは右から左に向けて処理される
    • セレクタの記述を増やせば増やすほどマッチング処理に時間がかかる
    • レンダリングの際は、すべてのDOM要素のスタイルが再計算されるのではなく、新たに計算し直さないといけないところのみ
  • 高速なCSSセレクタの記述
  • BEMを用いる
    • Block・Element・Modifier
    • 基本的に1つのクラスセレクタのみを用いるのでパフォーマンスに優れる
  • レイアウトを減らす非表示
    • visibility: hiddenはペイント処理は行われないが、レイアウトツリーには含まれたまま
    • display: noneはレイアウトの対象からも外すことができる
  • img要素のサイズを固定する

第7章 レンダリング結果の描画のチューニング

  • 再描画
    • Composite Layersのみ引き起こされる場合
      • opacityプロパティの値が更新
      • transformプロパティの値が更新
  • translateZハック
    • 描画結果そのものは変えずにGPUによるレイヤー合成を行う
    • GPUへの転送時間やGPUのVRAMの容量などもあるので、必要なときだけ用いる
.target {
    transform: translateZ(0);
}

第8章 高度なチューニング

.foobar {
    contain: content;
}                   

第9章 認知的チューニング

  • インジケータを用いる
    • 1秒を超えるようであれば適用するのが望ましい
  • インターフェースプレビューを用いる
  • 処理が終わったように振る舞う
    • 楽観的UI(Optimistic UI)と呼ばれる
  • 無限スクロールを用いる
  • 投機的なリソースの先読み
    • Ajaxでデータを取得してアプリケーションレベルのキャッシュに保持する
      • IndexDBやLocalStorageなどのストレージor単なるJavaScriptの変数で保持
    • Resource Hintsを用いる

2017年買ってよかったもの

この記事は、今年買ってよかったもの Advent Calendar 2017 18日目の記事になります。

adventar.org

AirPods

使ってたイヤホンが壊れたのをきっかけに、「試してみるかー」っていう軽い気持ちで購入。

使ってみた感想は

メリット

  • ワイヤレス最&高
    • AirPods使ってみて初めて、コードがかなりストレスだったということに気づいた
    • 長時間つけてても、耳と首が疲れない
  • イヤホンを外したら音楽が自動停止になるの便利
    • 片耳だけ外した場合は、付け直したら自動再開されるのめっちゃ便利
  • 全然耳から落ちない安定感

デメリット

  • まあ高いっちゃ高い
    • 他のワイヤレスイヤホンに安くていいのがあるかも
  • 見た目がうどんでしかない
  • 音質は普通らしい
    • 音質にこだわりないから個人的には気にならない

ってところです。

おわりに

あなたも Let's 耳からうどん生活

日報を使った情報共有

はじめに

この記事は、コミュニケーション Advent Calendar 2017 10日目の記事です。

qiita.com

日報のいいところ

個人ではWikiHubの日報を普段使ってる。会社でも最近GitHubTeam discussionsを使っての日報共有がはじまった。

日報によって

  • 自分の作業ログ・思考ログが残せる
  • 他人の作業ログ・思考ログが見える

このことが、自分にとって心地いいし情報共有として役立ってる。

アンチパターン

  • 毎日の投稿が義務として「やらされている」
  • 「今日の学び」みたいに意識高い系なことを求められる

やらされてるんじゃなくて、書きたいときに書きたいことを書くっていうやり方が好きだし、長続きすると思う。

まとめ

SNSっぽくゆるい感じで日報書いていきましょう。

コミュニケーションがうまくいかない時の心理パターン

はじめに

この記事は コミュニケーション Advent Calendar 2017 9日目の記事です。

qiita.com

「なんか今日うまくコミュニケーションいかないなー」っていう感覚が自分には割とあって、その時は「なんか無愛想でめっちゃ申し訳ない...」とは内心思いつつもどうしようもなくなっている。

この対策としてとりあえず、どういったときにこの感覚に陥っているかをまとめてみた。

1. 寝不足でイライラ

睡眠不足が続くと自律神経のバランスが乱れて、イライラしやすくなる。寝不足は集中力も落ちるしやっぱりいいことはない。

2. 余裕がなくてテンパってる

色々抱え込んだせいで余裕がなくてテンパってると、相手の話が頭に入ってこない感覚になる。あとこっちから連絡しておかないといけないことがあっても、自分のタスクを整理できてないから連絡が遅れるみたいなこともおきがち。

一歩引いて自力で整理できたらベストだけど、とりあえず「自分いまパツッてます!」ってアラートを出すだけでも経験上よかったりした。

3. 自分だけが頑張ってるという感情

konifar-zatsu.hatenadiary.jp

このブログめちゃくちゃ共感できた。「俺はこんな頑張ってるのに..」みたいな感情湧くこと誰でもあると思う。この感覚に陥ると、「みんなもっと頑張れよ」的なイライラに繋がってしまう。

ただこの場合、他の人が頑張っているところを自分が知らないだけだったり、自分の勘違いだったということが往々にしてある。まずは冷静になって、HRT(Humility・Respect・Trust)の原則を思い出したい。

4. コードに集中していて頭が切り替わらない

コードを書くことに集中してると、なかなか人とのコミュニケーションに頭が切り替わらないっていうこともよくある。マシンとプログラミング言語で会話してる世界から抜け出せない感覚。

5分くらい時間をおかないと、相手の話が入ってこないで頭の中では続きのコードを考えてる。

まとめ

気持ちのコントロールって難しいね。

もっと余裕をもてるように頑張っていきたいぞ。

2017年11月の振り返り

仕事

アウトプット

連載

ブログ

イベント

音楽

  • Everyday
    • Perfumeに囲まれる!没入感!


[MV] Perfume「Everyday」-AWA DANCE 360°VR ver.-

  • Fusion
    • ヤスタカ神!
    • watashi to fusion!!!


FUTURE-EXPERIMENT VOL.01 距離をなくせ。

映画・ドラマ・アニメ

N/A

ラクロス

  • クラブ選手権1回戦 vsOPEC VORTEX 16-8 Win
  • クラブ選手権準決勝 vsFALCONS 7-16 Lose

これをもって今シーズン終了!

目標と成果

  1. △ Web連載第2回執筆
    • 半分くらいの進捗しかでなかった 
  2. × 書籍のサンプルアプリケーション作成と第5章執筆
    • 手が回ってなくてつらい
  3. ○ JS本執筆の準備
    • デザインスプリントやった
  4. △ 出社チャレンジ頑張る
    • 今後も頑張っていきたい
  5. ○ ライブに向けてBAND-MAIDの予習
    • ライブ当日にapple musicで聴いた
  6. × Advent Calendarの準備
    • まったく準備できなかった
  7. × Rustの勉強を再開
    • 進捗ダメでした
    • 業務が忙しかったからなのか目標ほとんどできてないな

12月に向けて

  • Web連載第2回執筆
  • 書籍のサンプルアプリケーション作成と第5章執筆
  • JS本執筆
  • 出社チャレンジもっと頑張る
  • Advent Calendar完走
  • 合同勉強会 in 大都会岡山 楽しんでくる

Yasutaka Nakata presents OTONOKO[オトノコ] 2017 に参戦してきた #prfm

この記事は Perfume Advent Calendar 2017 3日目の記事です。

2017/12/02 金沢で開催されたOTONOKOに参戦してきたので、Perfumeについてのレポートになります。

www.otonoko.com

2003年からPerfumeのプロデューサーであるヤスタカと初めて同じステージに立つということで、記念すべき日となりました。

セトリ

1 GLITTER
2 FLASH
- MC -
- P.T.A.のコーナー -
3 FAKE IT
4 チョコレイト・ディスコ (2012-Mix)
- MC -
5 TOKYO GIRL
6 Fusion (with DJ 中田ヤスタカ)

※ これに加えてDJ 中田ヤスタカのところで、Perfumeが再登場して『If you wanna』を演奏

チームわけ

恒例のチーム分けの名前は「ナ」「カ」「タ」でした。

感想

若干期待してたけど、本当にやるとは思っていなかった新曲『Fusion』を初披露!

『Fusion』はこの前の Perfume×ドコモ 『FUTURE-EXPERIMENT VOL.1 距離をなくせ』で披露した新曲。


FUTURE-EXPERIMENT VOL.01 距離をなくせ。

これだけでもテンションめっちゃ上がったのに、なんとヤスタカがDJとして登場!!

Pefumeの頭上のDJブースにライトが照らされて、ヤスタカの姿が現れた瞬間はもう興奮して嬉しすぎて泣きそうでした...

ヤスタカが普段よりも嬉しそうに観客を煽ってる姿が、ほんとにもう最高でした。

まとめ

ヤスタカはやっぱり神でした