Frontend Conference Fukuoka 2018 に参加してきた

こんにちは、 @masaakikunsan です。

カンファレンス代及び、交通費等を会社が負担してくれ、されに土日の参加でも出勤扱いになるので気軽に地方でのカンファレンス参加が可能になり感謝です。今回は福利厚生を使い、12/08 のFrontend Conference Fukuoka 2018 に参加してきましたので、カンファレンスの模様を伝えます。

frontend-conf.fukuoka.jp

初開催となる今年のテーマは、開発現場の「イマ」を知って、フロントエンドをもっと楽しもう でした。そのテーマに相応しい登壇者と発表内容だったのでとても満足度の高いカンファレンスでした！

それでは、僕が聞いた内容をまとめていきます。

発表

2019年までに見直しておきたいCSS・JavaScriptの手法 @tonkotsuboy_com

speakerdeck.com

鹿野さんが CSS・JavaScriptの「イマ」を採用事例も交えながら発表してくれました。モダンなフロントエンド開発をできていない人は一度目を通した方がいい「イマ」が詰まっていました。簡単に内容をまとめていきます。

CSS の見直し
- ボックスレイアウトには float より Flexbox や CSS Grid を使う
- Flexbox は複数行レイアウトが苦手なのでその場合は CSS Grid で対応する
- Edge が Chromium ベースになったことにより CSS の新機能の普及が進む可能性がある
- CSS の最新機能や対応状況は各ブラウザーの公式ブログと Can I useで追える
JavaScript の見直し
- ES2016~2018 の便利な機能の紹介
- 2019年以降の新機能は AltJS で対応可能
- JS の最新機能や対応状況は tc39/proposals と ECMAScript 6 compatibility table と各ブラウザーの公式ブログで追える
ツールの見直し
- IEのサポートはまだまだ続くので IE 対応が必要なものは Autoprefixer で自動変換
- コードフォーマットは開発者任せではなく Prettier を使う
- パッケージマネージャーは npm から yarn に！
  - install が高速
  - ワークスペース機能により node_modules を最適配置が可能
Build 環境はツールに任せる
- 各フレームワークの CLI を使おう

これからのWebアプリケーションに求められるアクセシビリティの設計と実装

ヌーラボさんとディーゼロさんが backlog のアクセシビリティ向上においての問題点・実際の様子などを踏まえアクセシビリティの重要性について発表してくれました。この発表を聞くまで、サービスの使用者において健常者の方が圧倒的に多いだろうとアクセシビリティをないがしろにしてきました。この発表内容を聞き考えを改め、優先順位こそ高くないかもしれないがこれは会社で取り組まないといけない問題だとものすごく反省しました。

スクリーンリーダー
- 全盲の人がまずどうやってサービス・WEBを使っているか調査した
- スクリーンリーダーは読み上げがものすごく早く健常者はほぼ聞き取れないが全盲の人はこれを聞き取れている
- テキストでの説明はしっかりと合ったほうがスクリーンリーダーを使っているユーザーには良いのでは？
alt 属性
- 地図の画像のalt 属性に地図とだけ書いても全盲の人にはなにもわからない
- 地図の詳細を記入しても情報量が多く伝わらない
- 電話での道案内をイメージ。目立つ場所から目的地までを説明でわかりやすくなる
- 視覚情報がなしでどうやれば伝わりやすいかを考える
一時的障害
- 例えば、突然骨折をしてキーボードが使えなくなったり、キーボードやマウスが壊れたりも一つの障害
- アクセシビリティは以外と身近な話
- 自分がもし普段どおりのことができなくなったらと考えることが大事

この発表は今回の Frontend Conference Fukuoka で一番個人的に刺さった発表でした。弊社はHRTech事業を展開していて、全人類が対象ユーザーになっているので僕が率先して社内でアクセシビリティの取り組みをやっていきます！

500日のトライエラーから生まれた大規模設計ノウハウ @okunokentaro

speakerdeck.com

奥野さんが初期から長期に渡っての設計のノウハウを発表してくれました。エンジニアは目を通しておくノウハウが詰まっていました。設計はプログラミングだけではなく、チームのことも考える必要があるという内容には確かになぁとなり、今後 PM としてDXにももっと注力しないとなと感じました。

設計とは
- 負債は生まれるもの、返済を常に意識する
- 設計に終わりはない
- 根本的設計から始まり中長期設計から短期設計の繰り返し
- フェーズごとにヤバいを予見することが大事
根本的設計
- 根本的設計は基本的に返済が難しいので慎重に取り組む必要がある
- 本質を見抜きどういう技術選定をするべきか考える
- 少人数で高速な意思決定を心がける
中長期設計
- 開発メンバーが変わったり無茶振りの対応だったりと日々流動的である
- ここから設計スキルより、開発する上での環境の設備が大事
- コードレビューをする
- コードだけではなくチームの品質にも目を光らせる
- メンバーの得手不得手を理解し円滑な開発を進めるにはどうすれば良いか
- 意思決定を減らすために規約の導入・客観的な根拠を導入する
- リファクタリングを目的にせずなぜするのかを考える
短期設計
- 捨てやすい開発をする
- 中長期設計が苦手なメンバーに開発をさせて中長期設計が得意なメンバーがレビューすると良い
まとめ
- 自分が心がけて良きレビューと良き仕組みを設計しよう

仕組みを作る仕組みを、作る仕組みを作る @agektmr

えーじさんが web 2.0 から「イマ」に至る流れを通し WEBの進化と今後について発表してくれました。自分の知らない機能やイマのWebを知れてとても勉強になりました。個人的にAMPの話とWeb Authenticationの話をとても聞いててよかったです。

Webの進化
- 誰もがデバイスを持ち、Webを見れば欲しい情報が手に入る時代に
- Web Authentication
  - 指紋での本人認証をサービスに導入できる。Yahoo!がプロダクトに導入したらしい(すごい)
AMP
- 規約を設けることで高速でコンテンツの表示を可能にしている
PWA
- web share target等の紹介