「フロントエンドカンファレンス福岡」に初めて参加しました!

フロントエンドカンファレンス福岡に初めて参加してきました WEB

こんにちは。トミー です。
20191116日(土)に開催された「フロントエンドカンファレンス福岡2019」に参加してきました。

フロントエンドカンファレンス福岡2019

Frontend Conference Fukuoka 2019
2019年11月16日(土) 福岡にてフロントエンドカンファレンスを開催します。開発現場における「イマ」を知れるイベントです。会場は九州産業大学となっております。公式Twitter:@fec_fukuoka ハッシュタグ:#fec_fukuoka

ぼっち参戦!

とある日、「フロントエンドカンファレンス福岡2019」の情報を教えてもらい、早割1,000円という安さに惹かれ参加予約しました。

予約当初は登壇内容が発表されておらず、どんな内容になるかわからなかったため、知り合いを誘うこともできず、ぼっち参戦することにしました。

写真:九産大前

イベント会場は九州産業大学。
福岡に住んでますが、初めて九産大に行きました!

ぼっち参戦で、縁もゆかりも無い土地を訪れてドキドキ。
久々に楽しみよりも不安が勝り、九産大を目前で帰ろうかなと思いました(^^;;笑

ドキドキしながら九産大のキャンパス内に足を踏み入れると、建物が123号館まであり、とても広く不安が倍増…

写真:九産大キャンパス内

田舎者感丸出しで周りをキョロキョロしながら会場の12号館まで向かいました!

そして、、、

無事に到着!!!

写真:九産大キャンパス内

会場に到着すると、スタッフの方々が笑顔で出迎えてくれました!
スタッフの中には知ってる方もたくさんいて、ありがたいことに声をかけていただけたので、ほっと一安心。

しかし、安心したのも束の間、オープニングまで40分も時間がある、、、
ボーッと一人で待つのが寂しく、お隣の方と交流し、意気投合♪

さらに、久々にお会いできた方もいて、みんなで意気投合し、スポンサーブース巡りへ。

スポンサーブース巡り

おかげさまで大量収穫!!!

チームラボ株式会社

写真:チームラボステッカー

幻想的な光と音のアートで有名なチームラボ株式会社
ステッカーが大量に置いてあり「好きなだけどうぞ!」と言われたので、お言葉に甘えて3枚もいただきました♪

サイボウズ株式会社

写真:サイボウズのノートとペン

kintoneやサイボウズOfficeで有名なサイボウズ株式会社
ノートとペンをいただきました。

なんと、このノート、、、

専用アプリでノートを撮影すると、ノートに書いた情報がOCRにより文字データへ変換される便利なノートでした!!!

LINE株式会社

写真:LINEのステッカーなど

みなさんお世話になっているLINE株式会社
かわいいステッカーとエンジニアについての紹介本をいただきました。

LINE株式会社では「LINE Developer Meetup」というイベントが定期的に開催されています。
いつも行ってみたいけど、ハードル高いなと思っていたのですが、実際に働いてある方とお話しができ、今度参加してみようかなと思うきっかけになりました♪

株式会社メルカリ

写真:メルカリのノート、ステッカー、ペン、SIM入れ

フリマアプリで有名な株式会社メルカリ
ノート、ステッカー、ペン、そしてSIMカード入れをいただきました。

SIMカード入れ初めてみました!中はこんな感じです。

需要がある方には最高の品ですね!
また、中を外せば名刺入れとしても利用できます。

ヤフー株式会社

写真:YAHOO!のうまい棒

写真:フロントエンドカンファレンスのロゴとキリ番カウンターがープリントされたマシュマロ

人生で初めてウェブと繋がった時に見たのはYAHOO!でした!
そんな長い付き合い(勝手に片思い)のヤフー株式会社

おやつ&ドリンクスポンサーで参加されていたため、フロントエンドカンファレンス福岡とコラボしたパッケージの「うまい棒」やフロントエンドカンファレンスのロゴや懐かしのキリ番カウンターが転写された「マシュマロ」をいただきました。

写真:花待ち雨珈琲

フリードリンクコーナーもあり、ソフトドリンクをはじめ、美味しい珈琲「小さな焙煎所 花待ち雨珈琲」が無料提供してありました。

長時間のセミナーでホッと一息つける珈琲があるのは本当嬉しい。

他にも、株式会社ディーゼロや、株式会社セキュアスカイ・テクノロジー、always LUNCHなどを開発している株式会社イジゲンなどがありました。

初めてスポンサーブース巡りで大満足しました!
ありがとうございました!!!

登壇内容

フロントエンドカンファレンス福岡の内容

タイトルに公開されている登壇スライドのリンクを貼っています。

ルームA

HTML Optimization for Web Performance
株式会社メルペイ/泉水 翔吾

世界を変えるためのデザインシステム
freee株式会社/山本 伶

チームラボのフロントエンドアーキテクチャ
チームラボ株式会社/田村 亮弥

デザイナーにエンジニアから10の質問
株式会社ディーゼロ/新津 圭祐・平尾 ゆうてん

Visual Regression Testing in Action
倉見 洋輔

音楽、数学、タイポグラフィ
株式会社シフトブレイン/鈴木 丈

ルームB

歴史から学ぶ現代のフロントエンド
サイボウズ株式会社/外松 俊尚

フロントエンドにおけるアーキテクチャとの向きあい方
日本事務器株式会社/甲斐田 亮一

明日からはじめるテストのあるフロントエンド開発
サイボウズ株式会社/向井 咲人

SPAについてとVSCodeの実装について
株式会社Groovenauts/花田 恒一

JavaScriptの読み込みを考える〜場所、async、defer、その仕組みと使い所〜
株式会社オミカレ/前川 昌幸

ウェブフォント今昔物語
株式会社FOLIO/大木 尊紀

これからのフロントエンドセキュリティ
株式会社セキュアスカイ・テクノロジー/長谷川 陽介

ルームC

ワークショップ:はじめてのVue.js
フリーランス/井関 健人・フリーランス/渋田 達也

ワークショップ:Webアクセシビリティ向上につながる実装を体験!
株式会社スタンス/宮本 采佳・株式会社ディーゼロ/平尾 ゆうてん

参加内容

HTML Optimization for Web Performance

株式会社メルペイ/泉水 翔吾

HTML Optimization for Web Performance
HTML Optimization for Web Perfomance Frontend Conference Fukuoka 2019 Shogo SENSUI (@1000ch)

HTMLの最適化について考えるためには、「クリティカルレンダリングパス」を理解する必要があり、基本的にウェブページは「HTML→CSS→Render Tree→Layout」の流れで読み込みが行われています。

JavaScriptはHTML→CSS間で読み込まれており、JavaScriptの読み込みと実行のタイミングを変えることでサイト表示が高速化につながるそうです。

ユーザーが求めている情報に合わせて、JavaScriptの読み込み順を優先させた方が良いことがあります。
例えば、YouTubeだったら、動画が最優先で読み込まれるべきですよね。
HTML/CSSが優先で読み込まれたとしても、再生ボタンを押して動画が動かなければ問題が生じます。
そのため、動画を最優先で読み込ませるために、JavaScriptの読み込む順番を早める方法が色々あります。

といった感じの話でしたが、話が難しくついていけていませんでした(^^;;
いつか問題に直面した時に対応をがんばりたいと思います。

また、表示スピードを評価してくれるサービスについても紹介してありましたので、気になる方はプレゼン資料をご覧ください。

 

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

freee株式会社/山本 伶

freee株式会社では、デザイナーとエンジニアでサービスを作っており、フロントエンドエンジニアの枠が不明(サーバーサイド/フロントエンドの区別がない)とのこと。

フロントエンドエンジニアがいないことにより、CSSを書くのが苦手な人が多く、CSSディレクトリがカオスになったそうです。

これを統一するために「Vibs(バイブス)」が誕生!
「Vibs」ができたことにより、高品質で統一感のあるUIを爆速で実装でき、エンジニアがCSSを書かなくて良くなったそうです。
※「Vibs」の詳細については関係者にお問い合わせください。(ワタシ、ヨクワカリマセン…)

正式に社内で「Vibs」の運用が開始された時は、想定外の使われ方をしてしまったことがあり、小さな声も聞き逃さないように下記を実行されたそうです。

  • GitにIssueを立てる際のハードルを低くした
  • Slackで「vibs,バイブス,ヴァィブス」などのキーワードが社内で飛び交ったら通知が来るようにエゴサーチした

このようにすることで「Vibs」について悩んでいたら、すぐさま手を差し伸べる環境を構築されたそうです。

非常に面白い!

freee株式会社が「Vibs」を作るのは、「世界を変える」という視点を意識しているため!

最適なUIにこだわることで誰でも使えるサービスを目指しているという、かっこいい信念が伝わってきました。

また、アクセシビリティにも力を入れてあり、実際に全盲のエンジニアや色弱者の方にサービスをテストしてもらい、アクセシビリティ向上をされてるそうです。

抜かりないですね!

 

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

チームラボ株式会社/田村 亮弥

幻想的な光と音のアートで有名なチームラボ株式会社。
フロントエンドチームがあり、ウェブサイトを作っていることに驚きました。

フロントエンドチームは、メンバー12人で運営されているそうです。

仕事内容は、フロントエンド〜バックエンドまでと幅が広いそうで、難しい内容のお話でした。
そのため、私は話がついていけませんでした(^_^;)

 

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

株式会社ディーゼロ/新津 圭祐・平尾 ゆうてん

最初の入りが、まさかの「Bootstrapじゃダメなの?」から始まり、思ってたのと違うかも…と少し不安になりましたが、話が進むに連れて共感できる部分もあり楽しい内容でした。

「色ってどうやって決めてるの?」の質問では、クライアントのキーカラーを基本的に使うそうで、色の面積を考えながら作っているとのこと。
強調する部分に色を入れるのはもちろん、全体の調和や美しさを考慮しながら色を入れているとのことでした。

また、「情報ってどうやって整理してるの?」の質問では、ワイヤーを見た時点で、各ブロックにどんな情報が入っているかわかるので、ブロックごとに情報を整理しているそうです。

ワイヤーフレームで「情報の重要度」「一番伝えたいこと」を定義し、重要度をもとに粒度を調整してカンプに落とし込んでいるそうです。
今後の仕事で活かしていきたいと思いました!

デザイナー視点・エンジニア視点の会話が続き、最後は「エンジニアとどんな会話ができるとデザインしやすい?」や「 頼れるエンジニア像ってある?」などの話があり、「話を聞いてくれる人が嬉しい。『デザイン視点』を理解してくれる人が良い。」とのこと。
デザイナーとエンジニアのお互いの壁を無くすためにもコミュニケーションが大切だなと改めて思いました。

 

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

株式会社オミカレ/前川 昌幸

1番目に「HTML Optimization for Web Performance」のお話を聞いてたので、少し理解できながら、話を聞くことができました!!!
早速インプット効果が出てきた気がします(笑)

<script> の「async」と「defer」についての話で、その中でも<script>の読み込み向上のために「リクエストのタイミング」と「実行のタイミング」について掘り下げて説明がありました。

<script> には「async」もしくは「defer」をつける

<script type=”text/javascript” src=”foo.js” async>
<script type=”text/javascript” src=”bar.js” defer>

従来のJavaScriptの読み込みは、HTMLパース→JavaScript読み込みと実行の際はHTMLパースは止まっています。

「async(アシンク)」では、HTMLパース→JavaScript読み込み時はHTMLパースは読み込んでいるが、実行の際はHTMLパースは止まっている。

  • 読み込みが完了したスクリプトから実行
  • HTML内の記述の順番に拘束されない

「defer(デファー)」では、HTMLパース読み込み時JS読み込みも同時に行なっているが、JSの実行は最後に行われている。

  • HTML内の記述の順番で実行

どちらを使用するかは目的を考えて選択する

asyncとdeferどっちを使えばいいのかは、「ケースバイケース」です。
どのような目的のスクリプト化を考えて選択するのがいいとのこと。

  • asyncが向いてるもの(速めに読み込める)
    • ユーザートラッキング系
    • DOMよりも下層のレイヤーを握るもの
  • deferが向いてるもの
    • UI操作系(絶対deferが良い!)
    • DLC(DOMContentLoaded)で発火するもの

<head>内に書くのがオススメ

JavaScriptの記述位置は、</body>の前に記述すると、非同期読み込みの特性が生かせないので<head>内に書くのがオススメだそうです。

今回聞いた話を活かして、今後「async」と「defer」を使う機会ができた場合は使いどころを見極めていけたらなと思います。

ウェブフォント今昔物語

株式会社FOLIO/大木 尊紀

デバイスにあるフォントを使ったウェブサイトが多いが、デバイスに入っているフォントが使えなくなった際にそのデザインはどうなるの問題。
デバイスに影響されないためにもウェブフォントを使用した方がいいそうです!

ユーザー目線で見たときに、読み込みが遅い、フォントデータが重い、無駄に通信料を消費しないで欲しいなどがありますが、大きな画像の通信料に比べたら、フォントの読み込みは大したことではないと思います。

Googleフォントはキャッシュが残るので、一度通信して落としてくれば、あとはキャッシュから読み込まれるため、通信料を抑えることもでき、文字のチラつきも軽減できるそうです。(環境によっては不向きな場合もあります)

また、ディスレクシア(読字障害)や弱視者でも読みやすいフォントを選択するためにも、ウェブフォントの使用を勧めてありました。
文字の視認性が悪いと可読性を落とすため、いくらUIが綺麗でも読みズラさでUIが低下してしまう恐れがあります。

今後は、アクセシビリティの観点からも可読性を向上させるフォント選びが大事になり、ウェブフォントを使用する場面が増えていきそうですね。

しかし、ウェブフォント周りはライセンスが複雑で、訴えられるケースもあるので、使用する際は十分に気をつけて使いましょう!
配信サービスされてるものを使うのが安全ですが、もし、フォントをアップロードして使う場合は、開発元に確認するのが大事とのこと。
ウェブフォントとして使うには、「フォントの改変(拡張子を変換することがあるため)」「再配布(ネットよりダウンロードできるため)」の許可が必要になるので注意しておきましょう。

 

これからのフロントエンドセキュリティ

株式会社セキュアスカイ・テクノロジー/長谷川 陽介

最後のセキュリティのお話は、オリジン(プロトコル、ホスト、ポートの組み合わせ)がわからないとついていけない内容でした。
オリジンは聞いたことあるけど、全く理解できてないので、意識飛びそうになりながら聞いてました。

セキュリティと聞くと、多くの部分はバックエンド側ですが、フロントエンドの部分も無関係ではないそうです。

攻撃者の与えた文字列(ソース)をもとにHTMLを操作(シンク)することで脆弱性が生まれることがあるため、フロントエンドエンジニアもセキュリティについて意識しておきましょう。

staticなウェブサイトでも脆弱性が生まれる可能性があり、実際に404エラーで脆弱性が見つかったこともあるそうです。

怖いですね…でも、知識なさすぎて対策の方法が全然わかんない(´・ω・`)

ノベルティ

フロントエンドカンファレンス福岡のノベルティ

参加者へのノベルティは、フロントエンドカンファレンスとゴールドスポンサーのロゴが入ったトートバッグをいただきました。
中には、珪藻土のコースタ(ロゴ柄、コード柄)、メガネ拭き、ロゴシールが入ってました。

メガネ拭きと珪藻土のコースターには、同じコードが書いてありました。

写真:フロントエンドカンファレンス福岡でもらったコードが書かれたメガネ拭き

何のコードか気になります。
その日に写経コーディングしたら、フロントエンドカンファレンス福岡のロゴでした!!!

まとめ

久々に大きなイベントに参加でき、色々な話を聞くことで、たくさんの刺激をいただきました。
私のレベルが低すぎて、ついていけない内容が多々ありましたが、新たな情報がインプットできたと思い、今後の課題で直面した時はフロントエンドカンファレンスで聞いた内容だなと思い出したいです。
また、久々にウェブ界隈の方々とお会いできて嬉しかったです。
とても有意義な時間を過ごすことができました。

登壇者の方々、スタッフの方々、ありがとうございました!そして、お疲れさまでした!
また、来年も参加したいと思います。

タイトルとURLをコピーしました