「Meguro.css #6 @ oRo」に参加してきました

  • Meguro.css #6 @ oRoに参加してきました。

megurocss.connpass.com

タイトル 発表者
レガシーフロントエンドで頑張ってCSS設計した話 etawin
CSSイラストレーション deren @study_dedede
段組と印刷の地雷 吉川雅彦@行程さん社長 @masahiko888
すたいるQ Ko.Yelie (エリー) @ko_yelie
Scoped CSS + RSCSS のすすめ すわくん @ztrehagem

レガシーフロントエンドで頑張ってCSS設計した話

  • etawinさん

従来の環境

  • CSSトランスパイラなし
  • JavaScriptUIライブラリなし

改修後

  • stylus
    • なぜSassじゃないか
    • JSっぽく変数書ける
    • CSSプロパティライクにmixinを表現できる
  • BEM

工夫

実装序盤

  • 無理して共通化するよりも愚直に書いた方がいいケースも多い
  • 雛形になるクラス作ってそれプラスαって感じで使うと良かった

実装中盤

  • 意味のある単位であとからまとめていった
    • stylusのmixinが便利

実装終盤

  • 抽象のしかた細かく考えだすと不毛な時間に
  • 何者かでなく何を指し示すかで分類

最終的な構造

  • デザイン規約
  • 雛形クラス
  • CSSクラス

CSSイラストレーション

  • derenさん

CSS/JS学びたい

  • CodePenのぞくと面白いと教えてもらった
  • CSSだけで作品を作れる

私流イラストレーション

  • 1.下絵を書く
  • 2.パーツごとにdiv化
    • BEMでつけるといい
    • クラス名詳細に書いてるのでぱっと見でわかりやすい
    • デメリットはクラス名が長いことくらい
  • 3.パーツの形をひたすら制作
    • before/after使うとタグが無駄に増えないからいい

よく使うプロパティ

overflow

  • はみ出た要素の表示方法を指定
  • overflow: hidden; -はみ出た要素非表示

transform

  • 要素の表示位置の変更
  • transform: translate(10px, 10px); top: 10px;left: 10px;と同じ

transform-origin

  • 中心点の変更

CSSで何か作りたい人

https://codepen.io/challenges/codepen.io

段組と印刷の地雷

  • 吉川雅彦さん

段組みを印刷

  • 段組みをプレビューして印刷するというものを作った
  • すべてのブラウザに対応できない
    • IE,FFは印刷プレビューを出しにくい
    • Chromeだけ対応
  • PuppeteerとヘッドレスChromeでやるとよさそう

難しかったところ

  • 紙の余白を指定したい
    • @pageで指定
  • 文字が途中で切れてしまう
    • display: blockとかdisplay: tableで対応
  • h2/h3のサブタイトルのあとで改行したくない
    • break-inside: avoid使った
  • PDF印刷したら文字が欠ける
    • ウェブフォント適用で解決
  • Androidで絵文字を入れると1MBくらいファイルサイズが増える
    • わからない・・・

まとめ

  • 段組み+印刷大変
  • CSS/JS/デザインなどなどで解決していく
  • 割り切りも大事

すたいるQ

  • Ko.Yelie (エリー)さん

Q1

  • Q
    • margin/paddingを全て%で指定した場合基準になるのはそれぞれ親要素?自身の要素
  • A
    • どの方向で指定しても全て親要素の幅が基準になる

Q2

  • Q
    • flexで横に並べた要素の最後だけ右寄せにしたい
  • A
    • margin-left: autoをつけると右寄せになる

Q3

  • Q
    • transformにいろいろ指定した場合にどうなるか
  • A
    • transformのプロパティは左から順に適用されていく

Scoped CSS + RSCSS のすすめ

  • すわくんさん

ScopedCSS

RSCSS

  • BEMの簡単版みたいなやつ
  • シンプルな規則
    • Components
    • Elements
    • Variants
  • 書きやすい読みやすい捨てやすい

ScopedCSS + RSCSS

  • より安全なScopedCSS
  • より単純なRSCSS

「React.js meetup #8 初心者歓迎 LT会」に参加してきました

  • React.js meetup #8 初心者歓迎 LT会に参加してきました。

reactjs-meetup.connpass.com

タイトル 発表者
Gatsby紹介&Gatsbyのビルドをザックリ理解 kon_shouさん
Storeで扱う状態のライフサイクル @as_masaさん
React Hooks - カスタムフックとカプセル化 @sonatardさん
Reactから始めるリプレイス生活 fff_komatsuさん
connectの要らないreact-redux @natural_clarさん

Gatsby紹介&Gatsbyのビルドをザックリ理解

  • kon_shouさん

Gatsbyとは

  • Reactで書ける静的サイトジェネレーターe
  • viewはReact
  • データやりとりはGraphQL
  • Reactの公式サイトもGatsbyでできてる
  • starterkitが豊富

www.gatsbyjs.org

Storeで扱う状態のライフサイクル

Storeの設計

  • 1Store=1model?1Store=複数model?
  • ローカルステート使う?

アプリ特性によって考える

  • 全部載せ系
    • ページ遷移しない
    • タイムライン系
  • ページ遷移系

全部載せ系

  • アプリ起動から終了までのライフサイクルしかない

ページ遷移系

  • アプリ起動から終了までのライフサイクル
  • ページを表示してから別ページに遷移するまでのライフサイクル
  • ページごとの型を定義できる
    • Topページ型とかUserページ型とか

ローカルステート使うか

  • 同じライフサイクルで管理したいのでStoreで管理したい

React Hooks - カスタムフックとカプセル化

  • @sonatardさん

ReactHooks

  • React16.8で追加された
  • statteなどの機能をclassを使わずに書ける
  • useXxxというものが公式で10個公開されている
  • custom hookとして独自のものも作れる

カスタムフックの例

  • ロジックをカスタムフックに隠蔽することでViewをすっきりさせることができる
  • 可読性向上
  • 再利用性向上

カスタムフック

  • いろいろ公開されているから作る前に検索すると見つかるかも

github.com

github.com

nikgraf.github.io

Reactから始めるリプレイス生活

意図せぬコンポーネントの破壊

  • コンポーネントAを変更したらコンポーネントAに依存するコンポーネントBが知らないうちに壊れてた
    • Storybookを使ってればStoryShotsがお手軽で便利
  • styled-componentsのcreateGlobalStyleで意図せず壊れた
    • divタグにstyle定義してそれで囲うことでスコープを狭めた
    • 既存コードに影響ないようにできた

connectの要らないreact-redux

  • @natural_clarさん

react-redux

  • reactでreduxを使うためのラッパー

従来の使い方

  • mapStateToPropsとかmapDispatchToProps使ってconnectする

react-redux v7.1

  • hooksを使ったSPI
    • useSelector
    • useDispatch
  • これらをつかうとconnectを使わなくてよくなる

useSelector

  • 特定のselectorを使って値をとってくるhooks
  • mapStateToPropsの代わり
  • selectorの結果が変更されたときだけrerenderされる

useDispatch

  • 今までのdispatchと同じ感じ
  • mapDispatchToPropsの代わり

「UIT meetup vol.7 集まれ!(タブン)実務では使わないフロントエンド芸発表会」に参加してきました

  • UIT meetup vol.7 集まれ!(タブン)実務では使わないフロントエンド芸発表会に参加してきました。

uit.connpass.com

タイトル 発表者
@1-div challenge kawasako3
SVGで作るワードアート hashrock
React.js と動くもの、鳴るもの Leonardo
本気でCSS芸やりたい人ためのbox-shadow講座 ダーシノ
CSS PANICを支える技術 GeckoTang

SVGで作るワードアート

  • hashrockさん
  • SVG芸人

何でSVG

  • なくてもフロントエンドは作れる
  • やってて楽しくなる系

ワードアート

  • MS Wordで作れる
  • パワポとかエクセルでもできる

SVGでワードアート

  • SVG
    • <svg>
    • d属性で曲線
  • SVG DOM
    • ReactとかVueで扱える
  • ベジェ曲線
  • SVGの世界は単位がない世界
    • ブラウザのスクリーンの世界はpx
    • クリックされた位置を取得する時にSVGの世界の単位に変換しないといけない
  • SVGフィルタ
    • drop shadowみたいなものも作れる

React.js と動くもの、鳴るもの

  • Leonardoさん(LINE)

React + ReduxでWebGL

  • レンダリングのタイミングが大切
  • Three.jsのレンダリング
    • composer.render()を繰り返し呼ぶ
  • オブジェクトがぐるぐるしてるだけのアプリはあまりない
    • ユーザの操作にあわせて動かしたり
  • requestAnimationFrame()でrender呼ぶ
    • Reactのライフサイクルで呼んでstate管理するとかなり重い

React + ReduxでWebAudioAPI

  • AudioNodeどこで持つか
    • 全部Storeで持つようにした

参考

qiita.com

本気でCSS芸やりたい人ためのbox-shadow講座

  • ダーシノさん

box-shadowの基礎

  • 影のサイズは要素と同じ
  • 影は要素の背面に表示される
  • 影はカンマ区切りで複数指定し表示させることができる

box-shadowでファミコン風UI

nostalgic-css.github.io

  • NES.cssはbox-shadowを使っていろいろやっている
    • inputの枠とかbuttonの外枠とか

box-shadowでドット絵

  • もとの要素のheight/widthを1pxにする
    • 影のサイズは要素と同じだから

box-shadow芸のハマリポイント

  • ギガを消費する
    • 大量のピクセル情報を持っている
    • ドット絵だとピクセル単位でたくさん定義が必要
    • 複数サイズ用意する場合サイズごとにbox-shadowの指定が必要
  • ギガを抑える
    • currentcolorを使う
    • サイズの調整はtransform: scale(x)を使う
  • メンテできない
    • box-shadowの定義が大きすぎてどこを変えたいかわからない
    • Sassをうまく使って頑張る

まとめ

  • box-shadowはアイデア次第でいろんなことができる

「Node学園 34時限目 jsconf.eu 報告会」に参加してきました

  • Node学園 34時限目 jsconf.eu 報告会に参加してきました。

nodejs.connpass.com

2019.jsconf.eu

タイトル 登壇者
JavaScript Package Manager 2019 yosuke_furukawa
Cloudflare Workersの紹介 dorayakikun
Node.jsとWebAPIのこれまで、現在、これから Leko
jsconf.eu 報告会 Performance Empathy 編 tomonari-takahashi
TypeScriptでコマンドラインパーサー Akito0107

JavaScript Package Manager 2019

  • yosuke_furukawaさん

JSのPackageManager

  • npm
    • npm inc
    • npm cli
    • npm reistry
  • yarn

npm

  • npmの仕組み
    1. ローカル依存ファイルを読む(package-lock.jsonとか)
    2. 存在しないpackageのメタデータをfetch
    3. 木構造を計算して実行
    4. packageのtarをダウンロード
    5. インストールスクリプト実行
  • ダウンロードが高負荷
    • fetchしてgunzipしてコピーする
    • Network負荷
    • CPU負荷
    • FileIO負荷

tink

  • 新しいパッケージマネージャー
  • npm cliをもとにして作られてるもの
    • ゆくゆくはnpmに統合
  • npm iの処理を実行時にやればいいのでは
    • node_modulesを仮想上のフォルダにする
    • ランタイムでモジュール解決するからnpm iがいらない
      • コピーしないからFileIO改善
      • cloneして実行するだけでよくなる
  • zero install
  • node main.jsではなくtink sh main.jsとするtinkで実行できる
  • prepareとunwind
    • prepareは事前にmoduleをfetch(本番はこれでやるとよい)
    • unwindは事前にnode_modulesを実体化

loadmap

  • npm v8でtinkがnpmに統合される

yarn

  • yarnのv2でも同じzero installに取り組んでいる

今後

  • npmもyarnもzero installになっていく
  • npmとyarnどちらも有意差はまだない
  • まだexperimentalな段階

JavaScript Registryの今後

  • JavaScript Registryとは
    • Packageをバックで管理するサービス
  • JavaScriptのRegistryをビジネス的に成功させるのは難しい
    • public moduleは無償で提供
    • アクセスコントロールするなら有償
  • npmは100万モジュールある
    • rubyのgemは30万
  • Entropic
    • 中央集権ではなく分散管理していこう
    • npmにつながる新しいregistry
    • みんなで治験を高めて分散管理できる状態を目指す

Cloudflare Workersの紹介

  • dorayakikunさん

wasm

  • ここ1~2年盛り上がってきた
  • JSConf EUでのwasmのセッション3つ

Webの現状

  • JSのbyteサイズが年々上昇している
    • この3年でモバイルは50%増加
  • Time To Interactive
    • TTIの平均値9秒以上

既存の戦略

  • SSR + Cache
    • Time to First Byteが遅い
  • CSR + Cache
    • FCPからTTIまでラグがある
  • どれもトレードオフがある
  • => Edge Side Rendering

Edge Side Rendering

  • エッジサーバでhtmlをrendering
  • SSRCSRのいいとこ取り

Cloudflare Workers

  • エッジサーバ上でserverlessアプリを動かせるサービス
  • 言語はjsかwasm
  • デプロイはwebかwrangler
  • 要素技術
    • V8のIsolate

Edge Side Renderingは有効か

  • グローバルなサービスだと旨味がありそう
  • エッジサーバで何させるかは議論の余地ある

Terrarium

  • Fastlyが提供するEdge Computing Platform
  • wasmのみ

Node.jsとWebAPIのこれまで、現在、これから

  • Lekoさん

NodeとWebAPIのこれまで

  • ブラウザのJSの仕様/NodeのJSの仕様
  • 片方にあったやつをもう片方でも実装されたりとか
    • 同じようなことなのに微妙に違うとか
  • NodeとWebAPIを近づけようとしてる
    • URLSearchParams
    • TextEncoder
    • Wrker Threads
    • Performance Timing API
  • 議論中
    • StreamsAPI
    • FetchAPI
      • 仕様がとても複雑
      • Nodeで全部再現できるのか、再現する必要があるのか

まとめ

  • 多くのWebAPIがNodeに取り入れられている
  • ワークフローを改善してより改善されていく

参考

blog.leko.jp

jsconf.eu 報告会 Performance Empathy 編

  • tomonari-takahashiさん

パフォーマンスに関して大切なこと

  • デフォルト/デファクトツールを使う
    • ブラウザデフォルトでできるようになってることも多い
    • lazy loading
    • virtual-scroller
  • パフォーマンスをマネジメント
    • Performance budget

TypeScriptでコマンドラインパーサー

  • Akito0107さん

コマンドラインパーサーを作る

  • 有名なライブラリがいろいろある
    • minimist
    • commander
  • オプションが複雑だとどれもつらい
    • 型がほしい
    • => 作った

github.com

「PORT Firebase × Flutter」に参加してきました

  • PORT Firebase × Flutterに参加してきました。

stamp.connpass.com

タイトル 発表者
Flutterで使うCloud Firestore Shogo Yamada
Flutter × Firebase Crashlytics 菊池 紘
Firestoreのトランザクション 村本 章憲

Flutterで使うCloud Firestore

FlutterとFirebase

  • FlutterでFirebaseを使うプラグインが豊富
    • 基本的に全部ある
    • Firestoreのincrementも最近対応
  • 使い心地はWeb版Firebaseっぽい
  • Flutterだから使えないみたいな話は基本的になし
  • ネイティブでドキュメント通り実装されたものをFlutterから呼んでるだけ

開発スピード

  • Flitterはホットリロードあるし快適
  • Firebase使えばサーバサイドメンテ必要なし
  • Flutterの知識やFirestoreの知識は必要

今後の動き

  • Firestoreに新機能がでるとFlutter側にissue立ってすぐ対応される
  • Flutter × Firestoreではやってる実績はまだ見ない

Flutter × Firebase Crashlytics

  • 菊池 紘さん(Diverse)

youbrideというアプリ

  • 既存アプリをFlutterに置き換えている
  • ScopedModelアーキテクチャ
  • gRPCでサーバと通信

Flutterをproductionで運用

  • クラッシュレポートどう取得する
    • firebase_clashlyticsという公式のプラグイン(まだ開発段階のもの)
    • 導入面倒だけどマニュアル通りやればよい
  • 端末で発生した例外を記録してサーバに送ってくれる
  • Dartの例外のでかたがまだ微妙
    • 全部非致命的エラーになる
    • 拡張子が.javaになる
    • 例外の種別不明
    • 難読化マップ非対応

競合サービス

  • Fabric Crashlytics
    • Firebase Clashlyticsとほぼ同じ
    • 2020/3/31に終了予定
  • Sentry
    • 有料
    • 難読化マップ非対応?

Firestoreのトランザクション

  • 村本 章憲さん(Stamp)

FireStoreでtransaction

  • 同時に更新しようとしたときに問題が起きる
  • update time
    • 1/sec
    • 一秒に一回しか更新できない
  • runTransaction()
    • read/write/observe/commit/rollback
    • read -> write -> commit
    • observerがwriteを監視してる
    • 他でwriteされてたらrollbackしてretry
    • 5回retryしてだめだとそこで終わる
    • 1秒間に100更新が来たら95は失敗する
  • Distributed counter
    • shardingする
    • 増やせばいいというものでもないのでどれくらいshard数にするかは設計しだい

firebase.google.com

メモ

  • FlutterでCI

www.bitrise.io

codemagic.io