walk diagonally

基本的にはプログラミングの話のつもり。フロントエンドよりです。

Inside Frontend #3 レポート

Inside Frontendに参加してみました。

Inside Frontend card

inside-frontend.com

ゴリゴリのフロントエンド要素が強い内容にも興味はあったのですが、できれば今の仕事にも活かせるような内容を持って帰れるほうがいいなと思い、デザイン関連のものを見てみました。

基本的にはCの部屋にへばりついてました。

以下、資料がupされてるものに関しては、個人的によかったなと思うところをとかAMAであがってた内容を書いていきます(詳細はスライドを見たほうが絶対いい)
* 極力聞いた言葉をそのまま転用するようにしてますが、間違っていたらすみません。
* 全部はとてもじゃないけど拾えない。そろそろgoogle docsに音声入力か・・・

Seminer A-1 : TypeScript: Why and how we adopted it at Slack

Felix Rieseberg
シニアエンジニア @ slack
もともとは OSSエンジニア from マイクロソフト

発表内容

Slackにtypescriptを導入した話

Introduction

  • Battlefield1 is written by react typescript
  • Electronをベースに作られているslackだが、C++のモジュールで書かれているものもあるとのこと
  • アプリがクラッシュすること、クラッシュしてもログがでない(?)ことに対して危機感

巨大なコードhandlingする必要がある

  • ドキュメントをまとめたり、jsDocを書いたりするがだめだった(信用できない)
  • More js More worries
  • vanillaは勉強必要
typescriptを導入
typescriptのいいところ
  • jsのsupersetだから、変える必要がない(筆者注釈 : jsで書いていたものがそのままtsで使える)
  • editorのサポートがいい
  • npmでのインテグレーションができる
  • 型制御
  • 他のモジュールと共有できる
js -> tsに変換する

hoge.js -> hoge.ts - editor上でエラーがわかる - 実行する前にわかる - tsconfi内、jsへのコンパイルes6 と設定すればClassとして書いたものをがes6のClass表記でかかれ、 es5 と設定すればclosureを用いてよしなに変換されていた(といったかんじのデモがあった)

typescriptを導入してみて
  • もともとslackではtypescriptを多用するつもりはなかったが、そっちで書いていったほうがいいよねとなった
  • editorのオートコンプリートが強い
  • 意外と簡単にtypescriptを使えるようになった
  • クラッシュの危機感が低くなってよい
  • コードの書き方が多少汚いPRを混ぜてしまっても、クラッシュは一旦しないだろうという安心感がある
  • tslintがまだ弱い

SEMINAR A-2 : Introduction to Lucet

Adam Foltzer

発表内容

Lucetの紹介

github.com

いろいろメモしてきたけど、WebAssembly まわりの知識がなさすぎてちゃんと書き連ねる自信がないので割愛。
こちらの記事が参考になりそうだなと思いました。

efcl.info

SEMINAR C-3 : デザインエンジニアとフロントエンド

Shinichi Kogiso

speakerdeck.com

pickupしたい点

  • デザインエンジニアという職種に対してまだまだ認知度が低い(UXエンジニアやデザインテクノロジストといった別呼称があったりも)
  • デザインエンジニアはデザイナーとフロントエンドの架け橋となり、開発を円滑に進めていくポジション
  • 専門性とスピードが求められる
  • 違う景色(社内だけでは得られない経験等)を見続けることがだいじ

AMA

app2.sli.do

デザインエンジニアの職能とかワークフローが曖昧。どう振る舞うか

-> デザイナー側やフロントエンド側に足を運び、なにか困ってないかを聞いたりして、手助けする。

意見の対立とかのコミュニケーションを取るか

-> Slackだけだと温かみがない
共有会をしてちゃんと双方向のやりとりを促す
インフラ系はあまり興味がなかったりするところに対してはちゃんと説明してあげる

若くしてデザインエンジニアを名乗れるか?

-> 可能だと思う。 各会社で新卒から採用してたりする(かも)
募集かけたらくるのでは?(取る側の話) 好奇心がある人が向いている気がする

デザインエンジニアのあとのキャリア設計(その後どうなるか)

-> フルスタックエンジニアかディレクターとかになるんじゃないかな

「なんでもできるようだけど、何が得意なの?」となることがある
弱い人が多気がするけど、なにかひとつ「これ強い」って言えたほうがいいよね

コンポーネント設計に対してデザインからの文脈とエンジニアからの文脈があるけど、どう考える/どう対処する

デザインとしたら1pxのズレや、アニメーションの違和感があったりとか。
エンジニアからしたら、なんでこれ分けるの?これいらなくない?
-> デザイナーはsketchとかでアニメーションをつけて見せたりして齟齬をなくす

実装時のコンポーネント分割と、デザインのコンポーネントの分割がずれるときは?
-> 資料とか作ってちゃんと説明する。命名規則で困ったらそれも都度MTG

デザインエンジニアと名乗るには?

-> ある特筆した能力がある上で、もう一つ能力がある、ってなったときに名乗ったらいいのでは?

副業とかに時間のバランスは?

-> 平均2~3時間、土日どちらかにがっつり時間をとる。

レガシー環境をvueなどを入れて改善したいが・・・

-> チームのモチベーションはあがる
売上とは関連するかどうかは怪しいよね
空きを見て順次導入していくほうがいいのでは。

なんでデザインエンジニアになったのか(どういう思いか)

-> 両方やりたかった

SEMINAR C-4 : いちからデザインシステムを作ってみて学んだこと

Kengo Haruno

speakerdeck.com

pickupしたい点

  • 「componentの名前付けで時間がかかる」ところに対して、「そのcomponentの役割から名前を考える」ということと「全員が納得するまで議論」する(というところがひとつ模範解答だと考える)
  • 将来的にCSSフレームワークとして提供できるよう、またデザイナーがわかりやすいようにsassでcssを書く
  • フロントエンド側(実装都合)がわかる人がコンポーネント作成のところに入ることで、「hover時のアクション」といった平面のデザインだけでは気づきにくい動的なところまで事前に調整することができた
  • デザインシステムは巨大なプロダクトなので、部分的にはじめるのでもよいかもしれない

完全に所管

デザインシステムのくだりを見て、前職でやってたことをちょっと思い出し、書いてみました

walk-diagonally.hatenablog.com

AMA

https://app2.sli.do/event/5ktrtkpp/live/questions

コンポーネントの分割ルールはどうなっていたか?

-> Atomic designを最初やってた
中間層があいまいになった。また他のメンバーとかの認識ズレが起きる
独自コンポーネントなどでAtomsなのかMoleculesなのかと不明瞭に。

-> そのため、特別ルールをつくった Iconやbuttonとかの細分化できないものは element 他は component としてあつかう

storybookのスタイルガイド化はどう?

-> 他plugin(ts用)とかとの相性が悪かったりする。
もし相性がよくなればstorybookによせる
一応挑戦はしているが、まだまだ。仕様とかは手書き

再実装するならどう考え

-> 段階的に実装をするという手法でもよかった。運用フローでばたついた

SEMINAR C-5 : AbemaTVにおけるCSS is too fragile問題に対する解

Shota Kubota

speakerdeck.com

pickupしたい点

AMA

https://app2.sli.do/event/vdvxniys/live/questions

ドメインまたぎの共通コンポーネントは?

-> srcより上にある?
client/src/components-common(?口頭だったので信憑性が低い)

デグレの確認は?

-> 目視確認
QAチームが別途いてその人達が確認

css in jsは人類にはやかったか

-> Webはw3cの規定とかあって、webに向いてなかったかもしれない
react-nativeとかにありなんじゃない?(まあそもそもcssないし)

次かえるとしたら?

-> 具体的なところはなし

コンポーネント内包したらBEMくずれるのでは?

-> コンポーネント単位で保証しているので崩れることはない またはコードビューではじく

特定のドメインないでしか使われないコンポーネントはどこ?

-> /featureA/src/components/.. みたいなかんじ?

上着きやめる、はなかったの?

-> とりあえずデグレを対処しなきゃいけなかった
コンポーネントの数と使ってる場所が多すぎたので、場当たり的対処になってしまったところはある

コンポーネント感のマージンってどうなってる?

-> Atom / molecules /とかでは極力やってない

コンポーネントガイドとかスタイルガイドとかは?

-> 独自のものがある、がしかしちゃんと運用されてない

lintどの程度きつくしているか

-> Evalとかのやばいのはerror
ほかはコーディングしているのが苦しくなりすぎないようにwarnとかにしておいてる

SEMINAR C-6 : 品質と開発速度を両立させるために捨てたものと守ったもの

Tsuyoshi Wada & Soichi Masuda

docs.google.com

pickupしたい点

  • あたりまえ(過去の実践済み / すでに世の中に知見がある)を積み重ねる
  • Development policy - Accessibility の展開
  • ある程度負債を許容する(見極めつつ)

AMA

https://app2.sli.do/event/5idlaspx/live/questions

ユーザーのフィードバックあんまりないのでは?

-> ユーザー層的には多くはない
きたものは見るようにしてる。 ユーザーの行動から判断とかはやりたい

アクセシビリティの配慮どうやったのか?

-> 開発からディレクターに対してそのあたりは考慮してもらえた。

品質の定義は?

アクセシビリティ
-> マークアップとかはエンジニア間でズレていた(厳密には定義をしなかった) -> develop ment policyを作ってそれで定義する

GraphQLの導入は?

-> server-side側を巻き込むのが難しかったからそもそも考慮していなかった

脱Reactしたかったのか?

-> 飽きたからしたかった笑
Edgeに寄せたくてもっとちっちゃいjsとかの利用は少し検討した
しかし100ページ近くの画面があり、巨大な負債になることを恐れた

spのフォーカスもできているのか

-> componentはレスポンシブに対応させているのでpc共通。そのため双方で対応できている

IEの対応は?

-> 年齢層高いし対応はしている。 Abemaの実況見ながらとかの利用も想定はしている。 全く動かないとかはない

importはページ単位?

-> Yes。チャンクが違う

納期伸びなかったらどっち?

-> 品質を諦めた。速度優先

競輪知らなかったようだがどうしたか?

-> 自分たちで体験とかもした

いろいろやってたことが多岐にわたってたけどどうしてたの?

-> できる人がやっていた(チーム内で自然と)

パフォーマンス手法はどこから?

-> チームメンバーから もしくはツイッターとかから入手

focus管理は?

-> ライブラリは自前で作った

accesibiltyはかるルールは?

-> ない

PWAの理由

-> Google play app にギャンブルないからお察し

ディレクションとの競合は?

-> 与えられた予算で頑張る

jsテストは?

-> visual regression test

アクセシビリティ / パフォーマンスについてどこからやるか


- アクセシビリティ : ユースケース、ユーザー想定とかからちゃんと認識を固定する
- パフォーマンス : 調べ方を調べる、FCPとかの単語とかを把握する(そうしたら検索することができる)

全体を通しての所管

各技術の組み合わせのパターンや、枝葉のところでまだまだ知らないことがあるのかなと思ったので、積極的に情報収集していきたい