Lab.AboutBlogWorksPhotoRunningsContactフロントエンドカンファレンス福岡2019に参加してきました2019/11/20Web2019年11月16日に九州産業大学12号館で開催された、フロントエンドカンファレンス福岡2019に参加してきました。今年のフロントエンドカンファレンス福岡は合計200名の参加者が集う、大きなカンファレンスとなりました。今年は「新しい視点を見つけよう」のテーマのもと、JSフレームワークやライブラリに依らない様々なセッションが行われ、どれもとても参考になる素晴らしいセッションだったようです。いったセッションがあったかについてはフロントエンドカンファレンス福岡の公式サイトをご確認ください。フロントエンドカンファレンス福岡2019私はどれも興味のあるセッションで、どれに参加するか非常に迷いましたが、結局下記のセッションに参加してきました。Performance世界を変えるためのデザインシステムSPAについてとVSCodeの実装についてJavaScriptの読み込みを考える〜場所、async、defer、その仕組みと使い所〜ウェブフォント今昔物語これからのフロントエンドセキュリティ元々は「明日からはじめるテストのあるフロントエンド開発」を聴く予定にしていたのですが、「世界を変えるためのデザインシステム」がとても面白く、途中で抜けるのはもったいないと感じて結局聴きに行けませんでした。泉水さんといえば「超速!Webページ速度改善ガイド」の著者の一人で、このセッションで語られる内容もこの本に載っている内容に近い部分が多々ありました。笑1年ほど前、私もパフォーマンスを学ぼうと思って、超速本はもちろんいくつかの本を読んだりもして取り組んでいたりもしましたが、少しの間パフォーマンス改善から離れていたこともあり、忘れかけていた知識を思い出させていただきました。怜さん資料フロントエンドが相当不慣れな人でもフロントエンドを実装したりするという文化のfreeeさんのセッション。「スタイルシートのディレクトリがカオス」だったり、「見た目が揃わない」「同じ見た目なのに挙動が異なる」だったり、それなりの規模になるとだいたい発生する問題をfreeeさんも抱えていたようです。これに対応するために、高品質で統一感があり、アクセシビリティも担保され、かつfreeeさんらしさも併せ持つデザインシステムが作られていったそうです。定着させるためには様々な苦労があったようです。ペアプロとコードレビューで自力でフロントエンドを作れるチームを作るいざ導入してもらうと、想定していない使われ方や似て日なるものが勝手に実装されてしまった設計思想を文章化React未経験のデザイナーさんにReactを書いてもらうワークショップSlackでエゴサーチこれだけ大変な苦労をしてでもデザインシステムを導入する理由が会社のビジョンを満たすため、アクセシビリティなどを犠牲にしないようにするためと言う熱い想いで、日頃ぬるく生きている私にとってはとても深く突き刺さるセッションでした。恒一さんこのセッションでとにかく耳が痛かったのが「コードを読もう」ということでした。歴史に学ぶ実装を学ぶコードを読む・書くことが大事だということでした。私はコードを書いたり、ざっくり歴史や実装を学んだりはしていましたが、コードを真剣に読んだり、歴史・実装を根幹から学んだりということはあまり経験がありませんでした。それゆえにエディタの実装の話などはほとんど理解ができなくて、自分のスキルの無さに悔しい思いをしました。コードを読むときは全てを読もうとはせず、ファイル名を眺めて設計を把握したりしながら仮説を立てて読むのが良いようです。暇を見つけて実践していきたいところです。昌幸さん資料HTMLのパフォーマンス改善の中から、JavaScriptの読み込み位置・使い方にフォーカスしたセッション。リクエストと実行のタイミングなどについての説明でした。つけてしまうと、エラーになるというお話でした。要素内に書くのがおすすめだ、という点でした。これもケースバイケースだとは思いますが、ちょっと再考してみたいところです。尊紀さん資料ウェブフォントの本を出すほどフォントが好きだという大木さんのセッション。ウェブフォントは重かったり日本語フォントが少なかったりであまり好まれなかった傾向にありましたが、最近はそういうこともないよ、というのがこのセッションの主題でした。フォントデータが重いということ自体はどうにもならないことのようですが、読み込みの遅さを感じさせない実装やキャッシュをうまく使用した実装をすることでユーザーの負担を軽減できる、とのことでした。そのための技術というのが下記のようなものたちとのことです。よる表示タイミングのコントロールが有効とのことでした。ちなみに自前でウェブフォントをアップして使う場合は、フォントのライセンスに細心の注意が必要とのことでした。フォントの改変、再配布の両方が許可されていないとウェブフォントとして使用するのは難しいそうです。ウェブフォントを使用することで、ディスレクシアや弱視の方々でも読みやすいフォントを選択できるようになるというのはとても良いなと思っています。陽介さん資料セキュリティはサーバーサイドに限ったことではなく、フロントエンドの部分でもきちんと考えなければならない、という話でした。XSSやオープンリダイレクトなどの脆弱性は、静的なサイトでも十分発生しうるため、注意が必要とのことでした。そのために、以下のような技術を使用してきちんとオリジン間での保護を設定することが重要とのことです。(リンククリックでのページ遷移以外ではCookieが送信されなくなる)になる何かあってからでは遅いので、この辺りはきちんと理解して設定しておきたいなと思いました。約1年ぶりのフロントエンドカンファレンスは最高に楽しい1日でした。今回学んだ知識は仕事やプライベートでどんどん活かしていけたらなと思っています。このカンファレンスを通して、私自身のスキルの低さを目の当たりにしたところもあったので、もう一度しっかり基礎から学びなおしたいな、という気持ちにもなりました。1年後は胸を張っていられるよう、しっかり頑張っていきます。さんの美味しいコーヒーをいただけたり、たくさんのノベルティをいただけたりと、本当に力の入ったカンファレンスでした。スタッフの方々、登壇者の方々、スポンサーの方々、一般参加者の方々、本当にありがとうございました。ちなみに、今回のスタッフには知り合いの方も多かったこともあり、何人かに「なんでスタッフじゃないの?」と声をかけられました。そのように言っていただけたのがとても嬉しかったし、2年連続で楽しませていただいたりもしているので、無事に来年も開催ということになれば、次はスタッフになりたいと考えています。長くなりましたが、最後まで読んでいただきありがとうございました。Analyticsを利用しております。その目的において、Cookieを使用しています。