Frontend Conference Fukuoka 2018 に参加してきた

こんにちは、 @masaakikunsan です。

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

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

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

発表

2019年までに見直しておきたいCSS・JavaScriptの手法 @tonkotsuboy_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


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

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

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

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

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

Webは誰にも所有されない唯一のプラットフォームという内容には確かになぁと感じました。 メモが少なくこれぐらいしかまとめられませんすみません...

感想

最後は運営委員長の @mya_ake さんが今回のカンファレンスの目的や2019やるかもという発表をしてくれました。 福岡のフロントエンドがもっと盛り上がるといいなぁ東京から思っております(福岡で仕事したい) 久々に参加して良かったと心から思える勉強会でまた来年も開催をお願いします!

P.S.

LINE Fukuoka まじぱないの! (オフィスが神すぎた)


さいごに

SCOUTER社では一緒に頑張ってくれる方を募集しております。 デザイナー、エンジニアの皆さん興味のある方はご応募お願いします!

フロントエンドエンジニア
最新技術で成長業界の波に乗りたいVue.jsフロントエンドエンジニア募集!
ROXXは「人を想い、社会に問う」をビジョンに、2013年に設立。この先何十年も使い続けられるような社会的意義のあるサービスを目指し、現在はHRTechサービスを展開しています。 ■月額制リファレンスチェックサービス『back check』( https://backcheck.jp )  書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、リファレンスチェックサービスです。業界水準の1/10ほどの低コストで実施ができ、大手企業からスタートアップベンチャーまで、幅広い企業様にご利用いただくことができます。 ■ 採用企業と人材紹介会社を繋ぐ、求人プラットフォーム『agent bank』  サービス上に掲載されている1,500社以上の求人情報を、自社で抱える求職者へ自由に紹介することができる求人プラットフォームです。人材紹介会社は、自社で無駄な営業コストを抱えず、目の前の転職者支援に注力することができます。今後は、AIを活用した書類の自動作成、求職者に適した求人提案の自動化などのエージェント業務の大幅な効率化を進めていきます。中小規模の人材紹介会社を集約し、数年後には日本最大の人材紹介会社になることを目指します。
株式会社ROXX
UI/UX designer
ユーザーの行動設計を変えていく!話題のSaaSデザイナー募集!
ROXXは「人を想い、社会に問う」をビジョンに、2013年に設立。この先何十年も使い続けられるような社会的意義のあるサービスを目指し、現在はHRTechサービスを展開しています。 ■月額制リファレンスチェックサービス『back check』( https://backcheck.jp )  書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、リファレンスチェックサービスです。業界水準の1/10ほどの低コストで実施ができ、大手企業からスタートアップベンチャーまで、幅広い企業様にご利用いただくことができます。 ■ 採用企業と人材紹介会社を繋ぐ、求人プラットフォーム『agent bank』  サービス上に掲載されている1,500社以上の求人情報を、自社で抱える求職者へ自由に紹介することができる求人プラットフォームです。人材紹介会社は、自社で無駄な営業コストを抱えず、目の前の転職者支援に注力することができます。今後は、AIを活用した書類の自動作成、求職者に適した求人提案の自動化などのエージェント業務の大幅な効率化を進めていきます。中小規模の人材紹介会社を集約し、数年後には日本最大の人材紹介会社になることを目指します。
株式会社ROXX
株式会社ROXX's job postings
1 Likes
1 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more