GDG DevFest Tokyo 2019に参加したら、Webの未来にワクワクした
GDG DevFest Tokyo 2019というイベントに参加してきました。
最近はプライベートの都合上、中々時間が取れていませんでした。
しかし今回、会社の都合上、良い感じに時間を確保できたため、こちらのイベントに参加してきました。
大阪→東京 でわざわざ新幹線を使ってまで参加しましたが、それに見合う発見が多くありました。
今回、私が学んだ内容について、報告しようかなと思います。
- GDG DevFest Tokyo 2019
- DevFests
- Google Developer Experts (GDE)
- Sessions
- 終わりに
GDG DevFest Tokyo 2019
DevFest は、Google Developer Group (GDG) コミュニティによって世界各地で開かれるデベロッパー向けイベントです。東京では、Android、Google Cloud Platform（GCP）、Web、Firebase、Machine Learning （ML）、Assistant、Flutter、Goといった様々な技術の最新情報や現場でのノウハウを一日で学べるコミュニティイベントとして開催しています。去年に引き続き 4 回目の開催となります。 tokyo.gdgjapan.org
| 名称 | GDG DevFest Tokyo 2019 |
|---|---|
| DevFest Day1 2019年12月14日（土） |
Sessions、Codelab、After Party 11:00 開始（開場10:30予定）18:00終了 ※終了後、懇親会パーティ開催します。 開催場所：国立大学法人電気通信大学 〒182-8585東京都調布市調布ヶ丘1-5-1 |
| DevFest Day1 2019年12月15日（日） |
Special Hands-on、Office Tour 14:00 〜 17:00予定 ※14日にご参加いただいた方の中から抽選で100名ご招待 開催場所：Google Japan 〒150-0002 東京都渋谷区渋谷3丁目21−3 |
私は、DevFest Day1のみの参加でした。 開催場所は、電気通信大学です。スタッフさんの多くは学生さんだったと思います。積極的にサポートされていた姿は、立派だなと勉強になりました。
DevFests
DevFests are community-led developer events hosted by Google Developer Groups around the globe. GDGs are focused on community building and learning about Google’s technologies. devfest.withgoogle.com
DevFests自体は、グローバルで活動されているGDGがホストのイベントです。 下の図は、2019年の活動実績&予定です。全国各地で広く活発的に行われていることが分かると思います。
また、コミュニティのYoutubeのチャンネルもあります。 www.youtube.com 動画には、文字起こしとして 英語(自動生成)だけでなく、 英語(CC) もあります。 英語のリスニングが苦手な人でも、文字から理解できるようになっています。こういう配慮はさすがですね。
Google Developer Experts (GDE)
今回登壇されている方の多くが、 Google Developer Experts (GDE) という言葉を仰っていました。 最初は『Google社内の何かしらのポジションか？』と思っていましたが、違っていました。
A global program to recognize individuals who are experts and thought leaders in one or more Google technologies. These professionals actively contribute and support the developer and startup ecosystems around the world, helping them build and launch highly innovative apps. developers.google.com
GDEの人は、端的に言うと『Googleのテクノロジを開発者やスタートアップ企業らに対して支援・啓蒙活動をしているGoogle外の人』です。 GDEになるためには、Google、Googleパートナーからの紹介から入る必要があるそうです。
Sessions
今回のセッションでは、次のようなカテゴリでグループ分けされていました。
- Android
- Assistant
- Cloud
- Design
- Firebase
- Flutter
- Go
- ML
- Web
- misc (otherかな)
私は、Webが好きな人なので、そのカテゴリを積極的に選んでいきました。
Keynote2: 円周率世界記録への道
Speaker: 岩尾 エマ はるかさん
こちらの記事が、今回の話のテーマとなります。 it.srad.jp 岩尾 エマ はるかさんのお話は、おおよそWikiに記載があるとおりです。
今回の発表の話にあった、以下の話が印象的でした。
- Linkedin経由でGoogleからのオファーがあり、『５回面接をして、ようやく合格した』
岩尾さんは、『面接するのは無料』という精神で、何度もTryし続けて合格を勝ち取った人です。同じ大阪出身だそうで、納得しました。（笑）
また、元々英語は得意な方ではなかったという話も紹介されていました。
私も英語について悩んでおり、とても共感する部分が多かったです。
英語ができることによって、選択肢は広がる という当たり前の話があったのですが、
『語学が苦手だけど、Google(海外)で勤務できるようになった』という岩尾さんの経歴を知ると、頑張ってみようと思えました。
とても感謝しています。
Chrome Dev Summit 2019: Recap
Speaker: 矢倉 眞隆さん
Chrome Dev Summit(CDS) は、今まで以下のようなテーマが中心でした。
- 2013
- Web API, パフォーマンス
- 2015
- PWA
そして、今回のCDSでは今までの ゴリゴリのJS 話から少し外れたものもいくつかあり、 その紹介をされていました。
HTMLとCSS
HTML isn't done.
HTMLは、まだ成熟されたものではなく、まだまだ改善の余地があるという考えから、 いくつかの改善提案の話が紹介されていました。 いくつか例の紹介をされていましたが、次のqiitaの記事がわかりやすかったです。 qiita.com
丸裸な純粋のHTMLでも、わかりやすいUIを標準で表現できるのであれば、ユーザーにとっては ありがたいことですよね。だって、いろんなサイトのいろんなUIを知らなくて済むのですから。 個人的(開発者)には、EdgeがChromiumベースになることが、とても嬉しいです。 リリースが2020年1月15日だそうなので、もう間もなくですね。
Next-generation web styling
以下の記事にあるようなStylingの機能が提案中となっています。 qiita.com 例えば、scroll-snapという機能は、スクロールの制御をCSSで実現しようとしています。 従来は、Javascriptでハックな技を駆使していましたが、不要となります。 デザイナーだけでなく、JSを担当するエンジニアも必見です。
JS +SEO
SEOの話がありました。 www.suzukikenichi.com
Googlebotが最新のChromiumベースになったことで、Chromeでブラウザを動かすのと同じような振る舞いになるそうです。 今までは、Chrome 41ベースでGooglebotが動いていたため、新しいJavaScript構文やブラウザAPIを使えなかったそうです。 また、ShadowDOMにも対応しているので、これはWebComponentsを推進していることになるのでしょうか。
リアルワールド指向のパフォーマンス
開発環境でJavascriptを動かしたとしても、本番環境で動かすと実は遅かったりします。 それは、Javascriptによる処理が複雑化していることも要因となります。 この現象は、ネットワーク通信が悪い環境（海外）であれば、より明確に実感するはずです。 このようなケースを考慮したテスト環境が必要なのではないかと、私は思います。
以下の記事にある通り、Googleは「遅い」と感じるページに警告を出してくれます。
パフォーマンス計測ツールを活用することで、事前に確認しておきましょう。
- web.dev
- PageSpeed Insights
- Lighthouse
また、Javascriptをシングルスレッドによる低パフォーマンスに対するアプローチ方法を紹介されていました。
詳しくは、下記をご参考下さい。
ネイティブアプリとWebアプリの差を埋めるには：Project Fuguとマルチスレッドプログラミング
Speaker: 清水 智公さん
ネイティブアプリとWebアプリの差
Webアプリは、ブラウザ上で動作するのものです。ブラウザから提供されているAPIを通して、Webアプリを構築します。 しかし、ブラウザからマシンのネイティブな部分、例えばマシンにあるファイルにアクセスしたり、ファイルをマシンに 保存したりする操作はできません。この制限は、ブラウザが安全性を担保するためのトレードオフであり、仕方がありません。
Project Fugu
Fugu’s mission is to close the capabilities gap with native to enable developers to build new experiences on the web while preserving everything that is great about the web. www.chromium.org
Project Fuguとは、ネイティブとのギャップを縮めるために、(Chrome)ブラウザからネイティブな部分を操作する試みのプロジェクトのことです。 ネイティブ部分を操作するため、誤った使い方をするととても危険です。 そのような危険性を、『毒』を持つふぐの名前を借りてProject Fuguというそうです。
提案中の機能一覧は、下記のシートになります。
goo.gle この中には、例えば『Contact Picker API』というものがあります。 名前の通り、ネイティブアプリに登録されている電話帳にアクセスできるようになります。 これにより、例えば『シェアしたいユーザーの情報を電話帳より取得する』ことが実現できます。
Worker
ブラウザは、Task(Event→Scripting→Rendering→Painting)という単位で動作します。 これは、1つのメインスレッドのみで動作します。
ブラウザにおけるfpsの目標値は60fpsだそうです。
60fps のフレームレートがなめらかなパフォーマンスの目標値であり、あるイベントに対して必要なすべての更新に与えられた時間は 16.7 ミリ秒です。 developer.mozilla.org
1Taskを実行するのに16.7ミリ秒を超えてしまうと、ガタガタした動作になってしまいます。 そこで、Web Workerという技術で解決しようと考えました。
Web Worker は、ウェブコンテンツがスクリプトをバックグラウンドのスレッドで実行するためのシンプルな手段です。 developer.mozilla.org
しかし、スレッド間のメッセージパッシングが複雑化してしまう問題があるそうです。 その問題を、さらに解決するため、GoogleChromeLabsは、comlinkなるライブラリを開発しました。
Comlink makes WebWorkers enjoyable. Comlink is a tiny library (1.1kB), that removes the mental barrier of thinking about postMessage and hides the fact that you are working with workers. github.com
Web Workerにおけるメッセージパッシングの複雑さがcomlinkによって減少するそうです。
※ atomics.wait() atomics.notify()の話もありました。
How to Distribute Your Web App? 「インストール」可能なウェブアプリ
Speaker: 宍戸 俊哉さん
タイトル通り、Webアプリをどのようにして配布するのかというテーマで、
様々な手段の紹介をされていました。
PWA
Web好きならご存知のProgressive Web App (PWA)のお話です。 Webアプリに対して、よくあるPWA機能は次のとおりです。
- オフラインで閲覧
- Push通知
- フルスクリーン
PWAは、Webアプリでありながら、ネイティブアプリにとても近い存在に位置しています。
例えば、サンタトラッカーというWebアプリがとても良い例です。 santatracker.google.com
ソースコードも公開されており、PWAとして良い参考例になります。 github.com
このWebアプリを『ホーム画面に追加』し、その追加されたアプリを起動してみて下さい。 ネイティブアプリと似たユーザー体験ができるはずです。
ブラウザのブックマークで良いのでは？
わざわざ『ホーム画面に追加』しなくても、ブックマークを使えばよいのでは？ という議論がありました。 話の主となっていたのは、モバイルファーストというキーワードでした。 現在、モバイルからのブックマーク利用率はとても小さいみたいですが、 『え？普通に利用しているけど』と反感してしまいました。私が遅れているのでしょうか。 今の時代、『ホーム画面に追加』が多いのでしょうか。少し疑問です。
インストールを促す手段
PWAをインストールしてもらう場合、Mini-infobarというもので誘導します。 ただ、このMini-infobarはヘルパーとして使われるため、別途UIを用意する必要があるそうです。
The mini-infobar is only meant as a helper, and it will go away in the future. developers.google.com
ただ、既にネイティブアプリがある場合、PWAのインストール要求したくありません。 そんなときは、『既にネイティブアプリをインストールしているかどうか』判断する仕組みが既にあるそうです。(origin trials) web.dev
Desktop PWA
モバイルだけでなく、DesktopにもPWAを適用できます。
先程紹介したサンタトラッカーは、Desktop PWAにも対応しています。 santatracker.google.com アドレスバーにある+ボタンよりインストールできます。
Trusted Web Activities (TWA)
Trusted Web Activity は、Android アプリ内で Chrome ブラウザを全画面で実行します。 developers-jp.googleblog.com
Androidアプリでも、PWAが実現できるみたいです。
TWA は、Android アプリの全画面ウェブ コンテンツで WebView では利用できない Chrome 機能を使いたい場合や、Chrome ブラウザとオリジン ストレージを共有することでユーザーのナビゲーションが便利になる場合などに適しています。
私はAndroidユーザーはないので、GooglePlayからアプリをダウンロードできません。
- Rakuten Pasha
- OYO Rooms
のようなものがTWA対応しているそうです。 会社内で使うアプリ(勤怠, 経費, etc)を、TWAとして配信することも１つの使い道と紹介されていました。
TWAの開発には、次のライブラリが便利だそうです。 github.com
Web Packaging
PWAやDestop PWA, TWAといったもので、様々なところからWebアプリを 配布する手段が増えました。では、オフラインの場合はどうでしょうか。 その場合は、Web PackagingのWeb Bundlesが使えます。
Web Packagingには、大きく２つのものが含まれています。
- Signed HTTP exchanges
- Web Bundles
前者は、AMPページのURLをgoogleホストから元のホストへ戻す際に有効だそうです。 amp.dev
後者は、Webのアプリケーションを人まとまりにし、オフライン上で提供することができるそうです。
※ chrome canaryフラグを有効化する必要あり
Yearly Web 2019
Speaker: Jxckさん
2019に起きたWebに関するTopicをざっくりと紹介されていました。
ご本人のブログに、詳細が載っていますので、こちらでは項目だけリストアップします。
| Topics | 補足 |
|---|---|
| Dark Mode, High Contrast Mode | |
| portal tag | 画面遷移をCSSでアレンジするアレ。まだバグが多い |
| WebAssembly | |
| WebAuthN | Authenticatorを使った認証API |
| ES2019 | nullish coalescing/ optional chaining |
| Intelligent Tracking Prevention | 合意のないトラッキングはダメ!ゼッタイ! |
| Project Fugu | |
| DNS over HTTPS/TLS | DNSクエリも暗号化 |
| Edge Chromium | |
| WebPackaging | |
| WebTransport WebCodecs | ゲームで役立つ? |
| WebComponents v0 → v1 | |
| Same Site Cookie Lax by default | Cookieを同じサイトでしか送られなくする |
| TLS 1.0/1.1 → 1.2 |
（宣伝：WebComponentsの入門書、いいぞ〜！） booth.pm
Perspective of Angular in 2020
Speaker:稲富 駿さん
セッション内容は、Angularにおける2019年のアップデート内容と、2020年とその先の未来についてです。 docs.google.com
以下を要チェック！
ちなみに、私はAugularのv2で止まっています。（笑）
Updates in 2019
Angularの価値(values)は、
- Apps That users to use
- Apps That developers to use
- Community where everyone feels welcome
という3点あるそうです。私にとっては、v2へのアップデートで大変つらい記憶がありますが...。
2019年,2020年におけるAngularのバージョンは、
- 2019-05
- v7.x
- v8.x
- 2020-Q1
- v9.x
- 2020-Q3
- v10.x
こうみると、メジャーアップデートの更新がとても早いですね。 追いつくのが大変そうです。
v7.x
- Size Budgets by default
- バンドル時のサイズを制限する機能
- パフォーマンス向上を期待
- CDK Drag&Drop
- 手軽にDrag&Dropを実行可能
- Virtual Scroll
- 画面に見えているものだけDOM構築される
- パフォーマンス向上を期待
- Bazel
- gulpのようなビルドシステム
- Opt-in support
v8.x
- Differential Loading by Default
- ブラウザによって、polyfillの量をコントロール
- レガシーの部分はそのまま。モダンブラウザのpolyfillの量が削減
- パフォーマンス向上を期待
- Dynamic Import for Lazy Loading
- Support Module Web Worker
- ng deploy
- production buildしていないdeployが多くなかった。
- かならず --prodとなる。
主にパフォーマンス向上に取り組んだ1年だったそうです。 AngularはAll-in-Oneなフレームワークなため、どうしてもアプリケーションのコード量が 他フレームワークに比べると多いと思います。そうすると、アプリケーションを読み込む際に、 必要以上にロードされ、パフォーマンスが問題視されていたのでしょうか。
Roadmap 2020
2020年のAngularはどんなものになるのか、紹介されていました。
v9.x
- Ivy by Default
- Ivyは、angularの次世代コンパイラだそうです
- CDK Clipboard API
- CDK Testing Harness
- コンポーネントのテストをより抽象化
- await 処理が簡単になった
- @angular/components
- Strict Type -checking in templates
2019年はパフォーマンスというユーザーのための取り組みで、 2020年は開発者向けの取り組みが多いという印象でした。
Imagine the Future
今までのAngularは、エンタープライズ向けのアプリや、 小規模のアプリに使われていました。
次は、Billionのユーザ向けアプリをターゲットにするそうです。 そのためには、そのアプリに寄り添った機能提供ができるようにと考えているみたいです。 例えば、SEOやアクセシビリティ、国際化といった観点です。
終わりに
Webの進化は早いなと実感した濃い一日でした。 吸収しすぎて、消化が追いつかないですね、ワクワクが止まらないです。
GDEの方々は、どの方も専門領域がとても詳しく、かつ、説明の仕方が上手という印象を持ちました。 私もGDEになってみたいので、得意分野を見つけるところから始めようと思います。
また来年GDGイベントありましたら、参加したいなと思います！
