「Meguro.es #17」に参加してきました

• Meguro.es #17に参加してきました。
• 初参加でしたが幅広い分野で初めて知ることも多く勉強になりました！
• さっそく試してみたいと思える話もありとても有意義でした！

meguroes.connpass.com

タイトル	発表者
10分でわかるReact fire	kdnk
ゼロから学ぶWeb Authentication API	kobayang
React.js の render-props と Function as child の紹介	mori-dev
Caching Data Apollo Client	takanori_oki_9
DoczをPJに入れてみた	mki_skt
Diagnoses your Node.js app (intro)	darai0512

• 以下メモ書きです

10分でわかるReact

• firekdnkさん

React Fire

背景

• ReactDOMの近代化
• Reactv17に入る???
• issue#13525

github.com

概要

• 新機能というよりは既存機能をよりわかりやすくするもの
• nativeの挙動に合わせることで思わぬバグを減らす

input value

• inputのvalue属性に反映させるのをやめる
• propertyとattrは違う
  • propはjs
  • attrはhtml

attach events

• イベントをdocumentじゃなくてReactのRootにattachするようにする

onChange -> onInput

• onChangeをやめてonInputに変える
• 理想的にはevent.targetを使いたくない

イベントシステムをシンプルに

• 独自のイベントシステムをDOMのイベントに近づける
• イベント周りで不要なものが入ってるからReactDOMのバンドルサイズが大きい

className -> class

• classNameがclassに変わる

ゼロから学ぶWeb Authentication API

• kobayangさん

Motivation

• chrome70からmacでwebの指紋認証できるようになる
• Web Authentication APIを使ってるらしい

Web Authentication API

• Credential Management APIの拡張

Credential Management API

• ログインフローをシンプルにするAPI

処理の流れ

Registration Phase

• navigator.credentials.store
  • 引数で渡した認証情報を保存する

Authentication Phase

• navigator.credentials.get
  • 保存した情報を取得する

Web Authentication APIに仕組み

• Authnticatorを呼んで暗号鍵認証できる

参考記事

blog.jxck.io

React.js の render-props と Function as child の紹介

• mori-devさん

きっかけ

• HOCを使っていた
• render-propsを使うともっと良いというブログを読んだ

親から子へコンポーネントを渡す

• jsxタグの属性で渡す
• 文字列でもオブジェクトでも関数でも渡せる
• コンポーネントを返す関数も渡せる
• コンポーネントそのものも渡せる
• childrenという属性名だ渡す場合は<Child children={xxx} />と<Child>{xxx}</Child>が同じ

Caching Data Apollo Client

• takanori_oki_9さん

Apollo Client

• GraphQLサーバにアクセスするクライアントサイドライブラリ
  • 類似ライブラリはRelay(facebook製)
  • facebookの人も最近はApollo使ってる

Apollo Link

• Client - Link(URLセット) - Link(Tokenセット) - Server
• Linkはミドルウェアみたいなもの

apollo-cache-inmemory

• ApolloClientデフォルトのキャッシュ
  • ReduxのStore的な
  • APIをアグリゲートするところでReduxのStore使わなくて良くなる

InMemoryCache

• アクセスするときはGraphQLのクエリを投げる
• ローカルのキャッシュを柔軟にいじれて便利
  • オフライン対応で役立つ

DoczをPJに入れてみた

• mki_sktさん

Doczとは

www.docz.site

• コンポーネントガイド
  • storybookみたいな
• ゼロコンフィグ
• mdxにも対応

Docz導入

• 手間をかけずにコンポーネントガイドを作りたい
  • storybookで挫折
• mdxで書く
  • markdown + jsx

上手くいかなかったこと

• ゼロコンフィグの条件がある
  • webpackv4であること
  • babelv7であること
• cssが反映されない
  • css in js使ってないと一手間いる

まとめ

• コンポーネントガイドだけほしいなら選択肢としてあり
• ShapshotTestとかしたいならStorybookで

Diagnoses your Node.js app (intro)

• darai0512さん

Node Summit 2018

www.nodesummit.com

• サンフランシスコ
• $660
• 3日間
• 1000人くらい(うち日本人6人)
• nodeのコミッターがたくさん参加してる

Diagnose

• Monitoring
  • モニタリングして問題を察知
• Profiling
  • プロファイリングをとる
• Tracing
  • stack-trace
  • AsyncHooks
  • プラットフォームに非依存なv8トレーシングを目指してる