更新情報

Frontend Conference Fukuoka 2019 開催レポート / Slido 利用データ

2019.12.16

統計情報

テスト投稿を除外した利用統計は以下の通りです。

アクティブユーザー数: 84
投稿数: 123
Like 数: 163

ルームA: HTML Optimization for Web Performance

こういったさまざまなパフォーマンスのメトリクスについてはどこでキャッチアップされていますか？ (Like: 11)
CSSをどれだけ分割するかは、リクエストのオーバーヘッドもあるので、とにかく分割すれば良いというわけではない、んですかね？ (Like: 0)
CSSの結合しないでOKとのことですが、あまり細かく分割された状態だとリクエストが増えすぎる気がします。どの程度の粒度でCSSファイルを作るイメージなんでしょうか？ (Like: 2)
ネイティブの lazy loading は viewport に入ったあとでないと発火しない？（入りそう、で読むことは可能？） (Like: 0)
CSSの分割って、HTTP 1.1だと上限考えた方がよい、であってますか？ブラウザによって上限値は異なるけれど、同時に用意できるTCPのコネクションにmaxがかかってると思うので。 (Like: 2)
Native lazy-loadingはブラウザの対応が微妙だと聞いていたけどどうなんでしょう？ (Like: 0)
preload, importance=“high”, pre-fetchの細かい違いがよく分かりませんでした！ (Like: 0)
PerformanceObserver APIを使ってユーザー環境毎のPerformanceを計測されてGoogleAnalyticsに送信するということを業務でされているかと思いますが、それらのデータを日々の開発にどのように活用されていますか？ (Like: 1)
やっぱりコンテンツの圧縮はbrotliがいいんでしょうか？ (Like: 0)
表示は早いにこしたことはないのですが、prerenderまでくると人類（主に操作不慣れな人）にとって早すぎるかなと思ってて逆にユーザー体験が損なわれる気がするのですがどう思われますでしょうか (Like: 2)
scriptタグのdeferはasyncと併用することで、どのような挙動になるのでしょうか。 (Like: 1)
merpayさんでは、実際にどんなパフォーマンス目標を置いていますか？また、そのような目標を追うチームが存在するのですか？ (Like: 6)
このような最適化は「意識しながら作る」 or 「作ったあとに手を加える」のどちらがよろしいでしょうか (Like: 4)
ブラウザが暇な時に処理を行うという話をしていましたが、暇な時というのは具体的に条件があるんでしょうか？ (Like: 1)
最適化する上でメトリクスが存在することはわかりましたが、目標の設定をどのように行なっているのか (Like: 0)

ルームA: 世界を変えるためのデザインシステム

上場おめでとうございます！ (Like: 0)
正しい理解がなければ保守性が担保できない、正にその通り・・・。 (Like: 0)
なぜ atomic design しなくなったんですか？ (Like: 6)
仕様変更や拡張を予期した設計を行うべきということ？ (Like: 0)
WCAGとはなんですか？ (Like: 1)
全盲のエンジニアがいるってすごい (Like: 1)
デザインシステムのブランドイメージ構築・担保などはどのようにされていましたか。メンバーによってブランドイメージの認識に差があったりしたときにその差分をどのように埋めていったのかなど気になりました。また、ブランドイメージの構築はエンジニアとデザイナーだけで会話していたのですか？ (Like: 4)
全盲エンジニアの方はどういう経緯で採用されたのでしょう？ (Like: 3)
有識者の経験をチーム内でシェアするにあたって、いい方法はないでしょうか？ (Like: 0)
デザインシステムを本格的に推進するにあたりエンジニアチームからデザインチームに異動したと話されていましたが、どういう課題感があって異動されたのでしょうか。また、異動してどういう良いことが起きたのか気になりました。 (Like: 0)
エンジニア、デザイナー間コミュニケーションの齟齬を無くすために心がけてることは (Like: 3)
Vibesが正式なプロジェクトになったときの社員数は何人くらいでしたか？エンジニア、デザイナーやPMの規模感が気になりました。今からデザインシステムを作ろうとしている会社があるとき、社員数が多いといきなりデザインシステムの必要性を全員がすんなり受け入れるというのがハードル高いと思っていて、参考までに知りたい感じです。 (Like: 2)
vibesのコンポーネントをカスタマイズしたい場合はどうしてるんですか？ (Like: 0)
vibesでreduxはどういうふうに使われてるんですか？ (Like: 1)
デザインシステムに取り組むデザイナーとエンジニアは何名ぐらいいるんですか？ (Like: 1)
Vibes ではデザイナーの方も自然にアクセシビリティに配慮した実装ができるようになっているのでしょうか？（この点がコーディング自動化で最も難しい点だと思っています） (Like: 1)
どうやって、コンポーネント/Sketch/Storybook が腐らない対策をとっていますか/とっていきたいですか。出来れば自動的なアプローチを知りたいです。 (Like: 1)
スライド共有ありますか？ (Like: 1)
slackのエゴさをもっと詳しく (Like: 2)
Vibesはサーバーサイド（Rails）のView側とは分離できた純粋なフロントエンド開発となってますでしょうか？ (Like: 0)
給与明細以外にドッグフーディングできているものってありますか？ (Like: 0)
マテリアルデザインを採用すると(vibesと比較して)高品質なものを爆速で作ることに支障がでるのでしょうか。 (Like: 1)
material-ui だと表現できない freee のビジョンというのは具体的にはどのようなものになるのでしょうか？ (Like: 1)
アクセシビリティって社内的に優先度が低くなりがちだと思うんですがどのように社内に浸透させていったのでしょうか？ (Like: 2)

ルームA: チームラボのフロントエンドアーキテクチャ

なぜ Next ではなく Nuxt に？ (Like: 0)
Nuxt.js以外に検討したものはなにかありますか？そしてなぜNuxt.jsを選んだんですか？ (Like: 0)
マークアップ時のコーディングガイドラインみたいなのはあったりしますか (Like: 2)
なぜPugを選んだのか。知見があったから (Like: 0)
WebpackとPercelを使い分ける際の規模に対する基準があれば、教えてもらいたいです。 (Like: 1)

ルームA: デザイナーにエンジニアから10の質問

bootstrapっぽい感じをなくすやり方知りたいです (Like: 0)
ベース：メイン：アクセント = 6:3:1 とのことですが、そもそもベース・メイン・アクセントの区別は面積が多い順なのかなとも思うのですが、ディーゼロさんはどのような定義をされているのでしょうか？ (Like: 0)
デザインとフロント実装の兼務をしてる人はいますか？ (Like: 1)
デザイナーとして、エンジニアとして、絶対に譲れないものを教えてください (Like: 6)
重要度や一番伝えたいことはクライアントから引き出してるんですか？ (Like: 1)
ブラウザ別、スマホの機種別でテキストの行数が統一されないことがあり、縦幅がデザインから変わるときってあるけど背景でリピートできないようなパターン画像を敷くのはなぜ？ (Like: 1)
デザイナーはマークアップの知識がある人が少なくなってきている？ (Like: 2)
定番、ってどうやって見つけますか？設計はどうやって学べばいいんですか？ (Like: 1)
スタイリング後に機能を盛り込む際に受ける制約とは具体的にどのようなものがあるのでしょうか。またどのようなコミュニケーションをとることで意思疎通・解決をなされているのでしょうか。 (Like: 1)
デザイナーの方はどういった情報を日々取り入れていっているのか (Like: 5)
デザイナーからみてエンジニアがやらかしがちなよくないことってありますか？ (Like: 3)
アニメーションの動きとかはデザイナーとエンジニアどちらが考えるべきですか？ (Like: 2)
デバイスのフォントは何を優先して決めていますか？ (Like: 1)

ルームA: Visual Regression Testing in Action

アニメーションのテストをしたいと思ったらどうしますか？ (Like: 0)
Storycap使わせてもらっています。lazyloadしてる画像が出る時と出ない時があり差分が出てしまうのですがどう対処したら良いでしょう？ (Like: 1)
逆にVRTが検出できなかったが修正が必要だったということはありますか？ (Like: 3)
false positive の原因はどういったことがあるのでしょうか？文字のアンチエイリアス程度であれば差分率等で吸収できそうですが、実用的な判定が難しいレベルの端末間の差異となるとどのようなものがあるのでしょうか？ (Like: 1)
reg-suit は今後どのように進化していく計画なのでしょうか。 (Like: 0)
状態が動的に変わる場合もテスト可能ですか？ (Like: 0)
reg-viz以外の競合OSSは有りますか？あればそれらとの比較を聞いてみたいです (Like: 4)
Bitbucket integrationの開発予定はありますか？ (Like: 0)
OSS開発に携わる上での楽しさや苦しさなどあれば教えて下さい (Like: 0)
スナップショットテストと別にe2eテストも書く必要があると思いますが、e2eがアサーションすべき領域ってどこまでの範囲なんでしょう？ (Like: 2)
iframeみたいな要素とかはテストできるもんなのでしょうか (Like: 2)

ルームA: 音楽、数学、タイポグラフィ

タイポグラフィーが不協和の場合はどのようなものになるのかなぁ。 (Like: 2)
対数だ。 (Like: 0)
マイナースケール、メジャースケールとどう絡むようになるのか？とか考えるのも面白いなぁ。 (Like: 2)
font-weight もサイズと同じような考え方が適用できるのでしょうか？ (Like: 1)
文字の線量や要素の色の濃さなどによって必要となる余白等も微妙に変わってくるのではないかと思っています。たとえばダークモードだと設定すべき余白感などが変化するのではないかと思います。こういった細かい調整は最終的には人間の感覚により行うことになるのでしょうか？ (Like: 5)
タイポグラフィについてデザインチームとどのように議論しているのでしょうか？プロジェクトごとに都度行われるのでしょうか。 (Like: 1)
何か参考になる書籍などはございますか？ (Like: 4)
タイポグラフィを学ぶ際におすすめの本があれば教えていただきたいです。 (Like: 2)
一画面における情報量の数にも、数学的ロジックが使われるのでしょうか。 (Like: 1)

ルームB: 歴史から学ぶ現代のフロントエンド

投稿なし

ルームB: フロントエンドにおけるアーキテクチャとの向きあい方

UIとApplicationの状態を別々に管理する理由は何でしょうか？ (Like: 2)
頷きながら聞いている。 (Like: 0)
「モダンだから優れた保守性があるわけではないい」というのとてもわかる… (Like: 1)
jQueryでも保守性高くできるかというとそうではない？ (Like: 2)
有識者の経験をチーム内でシェアするにあたって、いい方法はないでしょうか？ (Like: 4)
アーキテクチャにはさまざまな切り口（コンポーネント設計やフォルダ構成など）があるという話がありましたが、prjという限られた時間のなかで、どういったアーキテクチャを一番重要視していますか？ (Like: 5)
フロントエンドのデザインパターン的なものはないのか？ (Like: 1)
今は必要無いと言われてるのに入れておきましょうって、オーバーエンジニアリングと反対のこと言ってませんか？ (Like: 0)
捨てる勇気の蓄え方が知りたいです (Like: 0)
学び・・・フォルダ構成とコンポーネント構成を重要視している (Like: 0)

ルームB: 明日からはじめるテストのあるフロントエンド開発

フロントエンドのUTは何を目的とすべき？カバレッジの担保？ (Like: 0)
IntegrationTestもテストコードを書くべきでしょうか？ (Like: 0)
テストコードのレビューはされていますか？テストシナリオの漏れ等がないかを、どのタイミングでチェックしているか、知見を教えて頂けましたら幸いです。 (Like: 1)
SeleniumでなくCypressを選定した理由はありますか？ (Like: 2)
Cypressについてよくわからなかったのですが、人的にやってたテストを自動でやってくれるようなイメージであってますか？ (Like: 1)
e2eではapiモックサーバを、利用してますか？ (Like: 1)
テストコードを書かない文化のチームが、テストを書けるようになるコツなどあれば教えていただきたいです (Like: 4)

ルームB: SPAについてとVSCodeの実装について

ここでいう「GUI」は何を指してますか？ (Like: 0)
「履歴を管理するのはViewModelの方が筋が良い」という意味合いのことがあったかと思いますが、なぜでしょうか？説明頂いてたのですが、ちょっと頭が追いつかず、もういちど説明して頂けると。。。 (Like: 2)
行単位管理する場合、文字列の分割は、どうやって考えてるのでしょうか？ (Like: 0)
今回はvscodeの話でしたがと Inteliji 系のエディタのソース読んだことあります？？面白い話が聞ければ！ (Like: 0)
↑設計の違いなど？ (Like: 0)
お勧めのソフトウェア技術論文の探し方 (Like: 3)
設計ってどうやって学びますか？定番ってどうやって知りますか？ (Like: 1)
スライドほちぃ (Like: 1)

ルームB: JavaScriptの読み込みを考える〜場所、async、defer、その仕組みと使い所〜

投稿なし

ルームB: ウェブフォント今昔物語

macOS CatalinaのChromeで多くのサイトのフォントがミンチョ体になるという事件がありましたが、ウェブフォント使えばそんな悲しみも回避できますか？ (Like: 0)
円錐角膜のような強度の不正乱視でも読みやすいフォントがあれば教えてください。 (Like: 1)
有料ウェブフォントを導入する場合は、デザイン時にフォントをローカルに入れたいが、フォント購入するコストが増える？ (Like: 0)
自前Webフォントのサブセットのおすすめのやり方ありますか？ (Like: 1)

ルームB: これからのフロントエンドセキュリティ

スライドの共有ありますか？ (Like: 5)
これらを検出できるツールやサービスなどありますか？ (Like: 0)
情報のキャッチアップはどのようにされていますか？ (Like: 0)

ルームC: ワークショップ：はじめてのVue.js

どんどん書いていってください！見てるので拾っていきます！ (Like: 1)
コンポーネントに予約語というか、使ってはいけない文字とかあったりするんでしょうか？ (Like: 0)
index.js の最後「;」っていらないんでしょうか？「})」？「});」？https://jp.vuejs.org/v2/guide/index.html見たらいらないっぽいですねー (Like: 0)
オブジェクト指向になるんでしょうか？ (Like: 0)
`index.js の最後「;」っていらないんでしょうか？「})」？「});」？` JSの仕様としてはなくても大丈夫です (Like: 1)
> index.js の最後「;」っていらないんでしょうか？「})」？「});」？ (Like: 0)
`オブジェクト指向になるんでしょうか？` -> コンポーネント指向と言った方がよいかもしれません。ここでは簡単な説明になってしまうので、休憩時間などに質問にきていただければ答えられる限り答えます。 (Like: 1)
「...」に目が慣れないw これはどのように捉えたらすーっと腑に落ちますかー？w (Like: 0)
`「...」に目が慣れないw これはどのように捉えたらすーっと腑に落ちますかー？w` -> うーん、慣れなところがありますねw 「...」（スプレッド構文）は展開するという意味なので、[...items] は itemsを展開して新しい配列にしている（コピーを作っている）という認識がよいかもしれません。 (Like: 1)
((a, b) => a.price - b.price)これはどういう計算式になってますかー？ (Like: 0)
`((a, b) => a.price - b.price)これはどういう計算式になってますかー？` -> sort という Array のメソッドの引数に与えられる関数になってます。（続く） (Like: 1)
そもそもアロー関数という書き方で書いてるので読みづらいかもしれませんがこれは「function(a, b) { return a.price - b.price }」と同じ書き方になります。そしてsortに与えられた関数の返り値が0未満か0より大きいかにより、配列の要素が並び変わります。（続く） (Like: 0)
Array の sort については MDN に詳しく書かれているので、より詳細な仕様はそちらをご確認いただければと思います。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort (Like: 1)
「Webアクセシビリティ向上につながる実装を体験！」もRoom Dになったけど引き続き、ここでOKですかー？ (Like: 0)

※「ワークショップ：Webアクセシビリティ向上につながる実装を体験！」では Slido は使用していません。