ryokatsu.dev

GDG DevFest Tokyo 2019

GDG DevFest Tokyoに行ってきたのでメモしたことをそのままこのブログに記録として残す。

Opening

  • カンファレンスの説明
  • スポンサー企業のご紹介

Keynote1: 世界に広がるGDGコミュニティとDevFest

Speaker:鈴木拓生

Devfestとは？

  • Google主催ではない。GDGグループの方々が主催している
  • 近年では、アフリカで開催増えている
  • いろんな場所でやっている（教会、体育館など）

なんで広がったの？

以下の要因がある。

  • インターネットの普及
  • エンジニアの開発環境の変化
  • コミュニティの健全さ
  • ガイドラインの策定

Keynote2: 円周率世界記録への道

Speaker:岩尾 エマ はるか

円周率と計算機

円周率の難しさ

  • 桁数が多いとメモリ要件が高い
  • とにかくメモリが必要。

世界最速のコンピュータ（Summit）

  • 世界最速にしても並列化など計算が複雑になりやすい
  • クラウドで初めて計算した記録
  • 121日間PC止めずに計算し続けた。
  • y-cruncherを使用した（Linuxよりwindowsの方がはやいっぽい）
  • 費用は20万ドルかかった。（当時2200万程度）
    • 今は技術の進歩で300万円ぐらいになっている

クラウドを使用した理由

  • 数分でクラスタが作成できる
  • 存在するプログラムをそのまま実行できる
  • ハードウェア障害が少ない、メンテンスが少ない
  • スナップショットでバックアップを取得できる
  • リモートでできる

モニタリング

  • Stackdriverとdatadogを設定してモニタリング
    • やばかったらアラート飛んでくる。

周りの同僚など

  • 色々支えられた結果よかった。
  • Googleすげー 資源を結構無料で使える

振り返り

  • ネットワークドライブで31兆桁できると思ってなかった。。
  • 単一のVMを4ヶ月動かせるとは思わなかった。。
  • 固定概念に囚われないで

エマさんのこれまでの人生を振り返った話など

  • 11歳のときからプログラミングやり始めた。
  • お父さんの影響
  • 中学校のときは英語わからなかった。
    • ソースコードは丸コピで変数名に日本語とか使ってた
    • 頑張って勉強して今ではアメリカで生活している。
  • 日本では円周率の記録保持者が結構いる

パネルディスカッション

エンジニアキャリアパス

  • 及川さん実はえーじさんに転職相談してたww

エンジニアキャリアパス多様化

  • 新しい技術に興味を持ち続ける。
  • 慣れていないことに抵抗感を持たない
  • 計画的にキャリアを考える
  • 1万時間勉強

新卒が就職するなら大企業かベンチャーか？

  • 会社の中を知ることが大事
  • 大規模開発しているところ。

Chrome Dev Summit 2019: Recap

Speaker:矢倉 眞隆

Chrome Dev Summitでどんな発表があったか興味深いものをピックアップして紹介（ご本人は現地には行っていない）

HTML isn’t done!

https://www.youtube.com/watch?v=ZFvPLrKZywA

フォームの見た目を改善しようよという動きがある。

  • virtual scroller
  • トグルスイッチ

マイクロソフトの貢献

  • フォームの見た目をモダンに
  • ハイコントラストモードのサポート

next-generation web styling

https://www.youtube.com/watch?v=-oyeaIirVC0&feature=emb_logo

  • scroll snap、dark mode
  • Custom properties api
  • animation worklet, scroll timeline

結構API増えた

JS+SEO的なセッション

  • how to make you content shine on google search
  • https://www.youtube.com/watch?v=4pOH8Smd0Xs
  • googlebotが最新のchromiumベースになる
  • 前まではChrome41ベースのエンジンだった
  • 中央値で5分ぐらいでindexされるようになった。前までは１週間ぐらいかかっていた。

リアルワールド志向のパフォーマンス

jsゴリゴリなサイトが増えてパフォーマンスが悪くなったきている。色々な計測方法が研究されているが指標がマシンのスペックになりがち。

本当にユーザーが悪いと感じているかを知らないといけない

遅いサイトに行かせない

  • 既に検索結果の順位を下げている
  • 読込中にここ遅いよみたいなUIを出そうとしている。

https://gigazine.net/news/20191112-chrome-towards-faster-web/

UXを損ねる指標をパフォーマンス指標にする

  • LCP
    • 画像やテキストが遅い
  • TBT
    • タップしてから反応まで時間がかかる
  • CLS
  • ページを操作中にガタッとしてしまう。
  • 画像などの読み込みが遅く、ユーザーが見ている画面などがずれる

これらはツールを使って問題を知る

speed tooling evolutins 2019

https://www.youtube.com/watch?v=iaWLXf1FgI0

lighthouseとかlighthouseCIとかユーザーからのレポート

フレームワークを含めてウェブの向上も

Next.jsチームと協力してパフォーマンス改善

  • チャンク分割の最適化
  • @babel/preset-module
  • デバイスの能力に合わせた出し分けなども開発中

プラットフォームの機能も活用

メインスレッド（UIスレッド）の処理をオフロードする

そのほか webPの話、JSON.parseの話

まとめ

  • 基本的なHTML、CSSなどはやっぱり大事
  • 検索結果からの流入はちゃんとやろう
  • JSゴリゴリの場合はちゃんとプロファイルしよう
  • 速さ体験ユーザーの感覚を大事にしよう

Goの10年の道のりとその変遷

Speaker:山口 能迪

誕生

  • 2009/10/30にお披露目
  • 2009/11/01にローンチ
    • 当時から速さを意識していた

1960-2007

ALGOL(全ての言語の先祖)

クリエイション

  • 45分ビルドかかる。つらい。
  • 社内でC++の発表会あるから来てね。
    • 35個の機能追加するよ→そんなにいるの？？
    • newsqueak→並行処理
    • 3人が集まってGoができた。ジェネリクスがない
    • シンプルに作ろうという思想
    • 当初はプログラミングの歴史を無視した実装になっているんじゃないかみたいな批判があった。
      • 複雑さをとにかくなくす
      • No is Temporary, Yes is Forever→Dockerの創始者の言葉

Goがそれぞれどんな遍歴を歩んできたのか。

2009

  • 最初のはGobuildできなかった。
    • 6g/8g/5g makefile
  • gofmt
  • gotest
  • godoc
  • 機能は削ぎ落としたが開発者の助けになる周辺ツールはローンチ時にあった

2010

  • prof
  • govet
  • goinstall
  • append関数がビルトインで入った
  • The Go Blogが公開される

2011

  • gofix
    • このころは破壊的なへんこうがあった（パッケージや、パス名の変更）これらを解決してくれる
  • goninstall for build
    • 公式のbuildツール

2012

  • go get
  • go tool x
    • 6g/8g/5gとかでやってたやつがこれになる
  • Go1がリリースされた。

2013

  • go1.1→1.2
    • エンコーディングやパフォーマンスなどを改善。
      • このあたりからクラウド系でGoが使われるようになった

2014

  • go1.3
    • GCが50-70%　pause timeした
    • Runtimeが入った。C→Goになった　go gogenerateが出た。
    • パッケージ管理ツールが出る　クーバネティス

2015

  • go1.5
  • コンパイラーがC→goになった。

2016-2018

  • HTTP/2
  • パッケージ管理強化など
  • WASMとか

2019

  • moduleの機能など
  • GDN(Go Developer Network)
  • go playground

これから

  • go.dev（go プラットフォーム）
    • 教育用のサイト
    • go2への取り組み
  • 言語仕様
    • module管理の強化（ツールチェイン）、静的解析など

マイクロサービスの開発とテストファースト/テスト駆動開発

満席で見れなかった。。。

How to Distribute Your Web App? 「インストール」可能なウェブアプリ

Speaker:宍戸 俊哉

PWA事例

  • スタバUS→決済もできる

PWAの特徴

  • 信頼性
  • 高速、オフライン
  • 高速な表示
  • エンゲージメント性

PWAなんで？PWAの背景

  • ブックマークがあるのに何故？
  • モバイルブラウザだと使わなくね？？
  • 理由：UX的にどこにあるか分からない
  • よりリッチな機能
    • フルスクリーン
    • web share api ネイティブアプリだとあるけどwebでもやろうよ navigator.shareから取ってくる

PWAのインストール,使い方

  • ホームから起動
  • タスクスイッチャー
  • シェアできる

サンタトラッカー(PWA) https://santatracker.google.com/intl/ja/

  • web App Manifest
  • メタデータ用のjson
  • 多言語ようだとパスを変えて複数manifestファイルを用意する
  • app shortcuts
  • web share target

manifestを生成するツール

  • manifest Builder

  • mini infobar

  • いろんな場所にインストールバーを入れることができる

  • PWAのインストール数の集計、分析もできる

  • ネイティブアプリをインストールしていないかしているかの判定もできる。

  • ドメインが同じなのを担保していれば

  • spotify PWA

  • 初回利用率54%向上

  • まずはweb→そしてネイティブでも使える

  • huluもPWAしている

TWA

  • PWAをAndroidアプリに簡単に埋め込む
  • デジタルアセットリンク
  • 楽天Pasha TWAしている
  • lamama pack
    • PWA→TWAに出力するコマンドライン

web packaging

  • Exchange
  • Signed Exchange
    • paypayモール
  • web Bundle
    • Chromecanaryで動かせる
      • webコンテンツをwbnファイルにしてオフラインで閲覧できる。

Yearly Web 2019

Speaker:Jxck

今年WEB業界で起こったことについて振り返りを行う。

ダークモード、ハイコントラストモード

まだ始まったばっかり Media Queries Level5

  • 別に白黒だけじゃない。

portal

  • 画面を遷移でcssでアレンジ
  • 展開できるiframe
    • 中身を操作できない
    • postMessageは可能

WASM/WASI

  • 元々Cで書かれた資産をwasmでコンパイルしてwebで配信
  • WASI
    • システムプログラミングしたい。
    • posixではなくモダンな設計にしよう
    • Bytecode Alliance
    • Mozilla、Fastlyなどが参画
    • WASM　W3cが使っていいいよとなる。勧告

WebAuthn

Authenticatorで認証するAPIがで実例できてきている

  • 二段階認証ができる
    • yubiketとかtouchIDなど
  • ログインの選択肢が増加
    • どう実装するのが正解かは難しい
    • まだユーザーのリテラシーがなさそう。

ES/JS

  • ES2019の動き

private Class Fields

今パブリックしかない。

Nullish CoalescingとOptional Chaining

Nullish Coalescingは??と書くとnull/undefinedであった場合は上書きができる。

param = param || 'default'
param = param ?? 'default'

Optional Chainingについては別でブログを書きたい。一応スライドに出てたコードを。

a?.b   // a == null ? undefined : a.b
a?.b() // a == null ? undefined : a.b()
a?.[x] // a == null ? undefined : a[x]

Promise.allsettled

  • 全部完了するまで実施
  • 今は途中で失敗したら後続処理に進まない
  • これだと途中で失敗しても後続処理は進む。
  • 地味にうれしみ。

Promise.any

  • どれかが成功するまで実施

ITP

  • 合意のないトラッキングは禁止
  • 3rd Party Cookieなどの制限へ

Project Fugu

  • アプリにあるAPIをwebでもやろうよ
  • Native　File System API
  • Contact Piker API
  • SMS Receiver API

DNS over HTTPS/TLS

  • DNSクエリも暗号化
  • プライバシー保護
    • 今まで平文
    • できないことも増える
  • ペアレンタルコントロールとか
  • フィルタリング

Edge

来年リリースするね。多分。

webtransport

  • 主にゲーム業界
  • fetchでもwebSocetでもWebRTCでもないものがほしい
  • Client/ServerでもUDPで使いたい
  • STUDIAで使える

終わった系

  • web　Components
  • ちょっと遅れ気味
  • Same SIte Cookie Lax by default
  • TLS1.0/1.1→TLS1.2以降を使うべき

Perspective of Angular in 2020

Speaker:稲富 駿(lacoさん)

updates in2019

最初からvaluesを掲げている。 to use to build Community

v7

  • size Budgets

    • Bundleサイズのチェック
    • 細かい設定ができる
    • 一定のファイルでサイズを制限する
    • cssのサイズもチェックもできる

  • CDK Drag & Drop

    • ドラッグの機能が簡単にできる

  • CDK Virtual scroll 一定のDOMの中で描画するDOMを制限できる

  • Bazel

    • GoogleのあらゆるビルドはBazelでやってる
    • gulpみたいなやつ
    • GCP上でAngularをビルドしたい。→ローカルではなく。

v8

  • differential Lodaing

    • 必要なpolyfillだけしようよ
    • どうやって判断しているの
    • babelーpreset-envとかpostcssとかで使っている定義ファイルとかを参照にしている

  • Dynamic import() support

  • code spilting

  • web worker

  • ng-deploy

  • どこかにビルドするためのコマンドnetlifyとか

2020

  • ivy by default

    • ビルドはやくする
    • デバッグ簡単
    • プラグイン開発者は10まで待って

  • CDK clipboard API

    • Angular用に使いやすいようにしたクリップボード

  • CDK TestHarness

    • ハーネスに抽象化したものを作成してそこからコンポーネントをテストする。
    • 宣言的に書ける

  • 各種コンポーネントの追加

    • angular用のyoutubeとgoogle-mapのコンポーネントができる

今後

  • 今まではエンタープライズにvalueが寄っていたが簡単に作れるようにvalueを向けていく
  • 軽量につかえる。 UIbakeryなどでUI上でプロトタイピングしてAngularのソースにするなど
  • Ionic
  • 国際化
  • コンポーネント単位でlazy-loading
  • static site Generator scully.io

とにかくパフォーマンスをよくしたい。