見出し画像

フロントエンドカンファレンス_2024_Hokkaido、行ってよかったなぁというお話

Sea10(しーてん)

はじめまして！

　はじめまして、普段は福岡で情報系の大学生をやっています。Sea10(しーてん)です。この記事は、2024/08/24に開催されたフロントエンドカンファレンスHokkaidoに参加した記録になります。
　カンファレンスに関して以外のことも書いているので本編をご覧になりたい方は Frontend Conference HOKKAIDO 2024 本編からお読みください。
　では、はじまりはじまり〜。

どうして福岡から北海道へ？

　ハッカソンなどでデザイン/フロントエンドを担当しているため、「フロントエンド寄りのエンジニアとして活動している方々の話を聞きたい！」という想いと、「純粋にカンファレンスが好きだから行きたい」という衝動からチケットを公開されてすぐ学生枠を確保させていただきました。
　オンラインという選択肢もありましたが、やっぱりオフラインでの熱量が好きですし、「福岡からわざわざ参加されたんですか？」と驚かれることもよくありますが、カンファレンスは今年三月に行われたOOCに参加して以来、積極的に参加したいと思うようになり、県外でも抵抗感はあまりないのです。(このためにアルバイト等々を頑張っているとも言える)

北海道到着 🛬 +イベント会場へ走る

　22日の夕方に北海道に到着し、すぐにInside Development at KnowledgeWork ＠Sapporo に参加させていただきました。(飛行機の遅延により数分の遅刻、、、🙇)
　このイベントは、知り合いが参加するので、「自分もちょっと話を聞きに行こうかな〜」くらいのノリで参加していましたが、とても発見が多く、参加してよかったです。
　よしこさんによるナレッジワークのフロントエンドでの取り組みや工夫のお話、はぎはらさんによる札幌からのリモートワークで気をつけていることや工夫していることのお話を聞き、「エンジニア組織を形成していく上でエンジニア間でのコミュニケーションは本当に重要だなぁ。登壇者の方々、普段から思いやりに溢れてそうだなぁ。エンジニアとしても仕事量は多そうだけどもとても充実してそう。」と素敵な組織体系を垣間見て、ほっこりしていました。
　私個人としては、tettanさんのQAエンジニアの業務と社内におけるQA組織の取り組みのお話から、「こんな職業があったのか！」と衝撃を受けました。「QAエンジニアっていう名前は聞いたことあるけど実際に何をしているのか全然知らないなぁ」という認識でしたので、、、。
　懇親会でも北海道で働かれている方も多く、色々なお話ができて楽しかったです。ありがとうございました！


Frontend Conference HOKKAIDO 2024 本編

　会場は札幌駅から徒歩5分ほどで到着しました。会場が駅から近いのはとても嬉しい！入り口の自動ドアがもう素敵。

オープニング

　受付ではノベルティのトートバックをいただきました！（肩掛けの紐、とてもありがたい、、、サイズ感もちょうどいい、、何より、可愛い、、、日常的に使わせていただきます！）
ネームプレートに名前を書き、いざ出陣。

Frontend Conference HOKKAIDO 2024のロゴ入りトートバック。肩掛けの紐と持ち手がついていおり、小さすぎず大きすぎないちょうどいい大きさ。
ノベルティのトートバック

オープニング動画もとても素敵で、ワクワクした状態でスタートです！


ダークテーマとアクセシビリティの融合したカラートークンの設計　by 出口 裕貴 さん

プロポーザル / 登壇資料

　最初のセッションでは、Qiitaのダークテーマ実装の実例をもとにしたカラートークンの設計方法に関するセッションへ。
　このセッションでは、いかに自分がカラートークンを適当に決めてきたかを思い知りました。そもそもダークテーマの実装においてダークテーマも考慮した設計をしたことがなかったもので、、、。ダークモードの重要性は痛感していたのですが、なかなか難しく感じていて、避けてきちゃっていたんですね。
　今回のセッションを受けて、私はまずは以下のステップでダークテーマも配慮したカラートークンを設計してみようと心に決めました。(発表されていた手順通りにできる気がしないので、まずは一旦自分ができそうな範囲でやってみる。)

  1. カラーパレット全体の設定

    1. メインカラー、プライマリーカラーを大体決める。

    2. スケールについて考える(ここ、自信ないのでできるかは不明)

      1. グレー：色相・彩度調整してグレースケールを決める(メインカラーに寄せたグレーにしたい)

      2. 有彩色：色相、彩度の調整をして全ての色のカラースケールを決める。

      3. ライトモードとダークモードで各色のコントラスト比の基準を満たすように調節

  2. カラートークンの設定

    1. Base/Container/Text/Borderを整理

    2. 特定のコンポーネントでのみ使う色は別で設定

  3. カラートークンの命名(正直、これはずっと適当に決めてきていたので反省)

 　やはり、実装の工数を考えても両モードで同じカラーパレットで調節した方が良いですが、なかなかこの設定は難しそう、、、ですが、やってみなきゃわからないので楽しみです(ワクワク)。

コードレビュアー「見習い」になったぞ！！  by 中村 優太 さん

　プロポーザル 

　私自身、今月の鹿児島で行われたハッカソンの際、チームないでレビュー制度を取り入れ、Approveしなければmergeできないような開発環境だったのですが、私はチームメンバーの書いているコードに対して何をコードレビューすれば良いのかまっったくわかりませんでした。もう、私は何かコードが書かれていたらApproveボタンをポチっと押すレベル。(何の意味があるんだぁぁぁ！、、、、反省。)
　自分より技術力が高い相手のレビューなんて、、、、という感じだったのですが、このセッションを聴き、「わからないところは、ここはわかりませんと言っていい。」「ここいいですね、勉強になりますというコメントでもいい。」「何書いているのか全くわからなければ一旦ChatGPTに投げてみよ。」という３つの言葉を心に留めてレビューに挑戦してみようと思います！

ブラウザ互換の重要性 - あらゆるユーザーに価値を届けるために必要なこと　　by 大山奥人

プロポーザル / 資料

　ブラウザの歴史、全然知りませんでしたっ！
ただ、ブラウザの互換性に関してはちょっと調べて使う、、くらいの意識しかありませんでしたが、セッションを聞いて各ブラウザでの機能開発や新機能のリリースについての情報のチェック、今後は積極的に情報収集していこうと思います。調べる経路や記事の紹介、本当にありがたい。

web-platform-testsというWeb標準に準拠しているかの確認のテストもできるんですね。State of JavaScriptもBaselineも知らないことだらけでしたが、互換性の重要性を今後意識していこうと思います。

Webサイトをキュッと引き締めるモーションデザイン　　by 道家陽介

プロポーザル / 発表資料

　モーションはかっこいいけれども、不利に働く場合への理解と配慮が必要ということを突きつけられたこのセッション。自分が作るときにユーザーのメンタルモデルを考えることは多少していたつもりでしたが、まだまだ勉強することが多いです。
　まず注意すべきことは、「一貫した動きのルールは確かに決めておいた方がいい」ということ。いろんなアニメーションの種類がありますが、法則性なくアニメーションが作動すると確かに鬱陶しく思う原因になるかもしれない。
　モーションの目的に合わせてサイズ感の調整というのは「ハッ」とさせられました。

小さいモーション
・ホバー
・ステート変化
中くらいのモーション
・ドロワー（移動量）
大きいモーション
・画面遷移

無意識にこれを実行することはあれど、言語化して把握しておくのとしていないのでは大違いだなぁ。
　また、モーションの体感上の重心を考え、エイジング、加速度の調整をすること、「スケールを「ゼロからイチ」により、タイムスライスして短い時間で意図を伝える」こと。勉強することはたくさんあるな。

スクリーンリーダーを使ったアクセシビリティ検証のすすめ by himi

プロポーザル / 資料

　個人的にアクセシビリティに関する関心も高い今日この頃、とりあえずbiomeに注意されたら見直すようにはなりましたが、まだまだ実装のときにアクセシビリティを考えられていないことは自覚していましたが、そんなときに聞いたこのセッション。
　スクリーンリーダーで見出しの調整等々は教えてもらったこともあり、開発のときにも(毎回できるほどまだ自分の中に定着していないのですが、)気づいたら聞いてみることはありました。ただ、DOMの順序や空白文字の検出、フェッチに関して、ローディングが開始したら完了の通知を入れること、全く頭になかった視点です。
　勉強になりました！

一旦締め

　まだまだ聞いたセッションで書き残しておきたいことはたくさんありますが、一旦ここまでをまとめて記録にしたいと思います！残りは実践に取り入れつつぼちぼちと書き残していけたらいいな。
　会場もワクワクする仕様で、ノベルティも綺麗で、勉強になるセッションをたくさん聞けて、さらには最後の抽選でスタンプラリーコンプリート者の中から２人に送られるアクスタを当ててしまいました。まさか当たるとは、、、。(「綺麗だなぁ」と思っていたので本当に嬉しいです！)
　そして、最後に、、、、Sea10は「しーてん」と呼んでいただけると嬉しいです(確かに、このニックネームは初見で読めない、、、今度からふりがなを振ろうと思います、、、)！

　運営の方々、登壇者の方々、参加者の皆さん、ありがとうございました！！本当に楽しく、学びの多いカンファレンスでした！

ゲットした幻のアクスタ

追記

　サイボウズさんのブースにて、Frontend Expert QUIZに参加しました。運のいいことに(勘任せでしたが)、正解し、さらに希少性の高い(?)アイマスクを当てました！(やったー)
　帰りの飛行機の中でこのアイマスクをつけて寝ました✌️快眠だったなぁ。周りからどう見えていたかは、、、、気にしない！面白い感じになっていて誰か笑ってくれたことを願ってます笑


いいなと思ったら応援しよう！