サービス

ジャンル

職種：エンジニア

職種：ビジネス職

職種：デザイナー

職種：バックオフィス

職種：その他職種

技術

<h2>はじめに</h2>

<p>こんにちは。動画配信開発部 配信基盤グループの今西(<a href="https://x.com/nisshii0313" target="_blank">nisshii0313</a>)です。</p>

<p>先月末に札幌で開催された<a href="https://www.frontend-conf.jp/" target="_blank">フロントエンドカンファレンス北海道2024</a>に参加してきました。&nbsp;</p>

<p>本記事では、セッションの内容や当日の雰囲気をお伝えできればと思います。</p>

<h2>セッション感想</h2>

<p>当日参加して印象に残ったセッションを3つほど取り上げて、その紹介と感想を書いていきたいと思います。</p>

<ul>
	<li>
	<h3><a href="https://fortee.jp/frontend-conf-hokkaido-2024/proposal/199ecdd7-6320-4d69-b1fd-6bbbb511fa32" rel="nofollow">React Aria のコントリビューターが思う React Aria の良いところ・これからなところを5分でお話します！ by まっつー</a></h3>
	</li>
</ul>

<div data-oembed-url="https://speakerdeck.com/ryo_manba/5fen-defen-karu-react-aria-no-liang-itokorokorekaranatokoro">
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;"><iframe allowfullscreen="" scrolling="no" src="https://speakerdeck.com/player/d42d61cd3e8d4501b0b27309172205be" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" tabindex="-1"></iframe></div>
</div>

<p><br />
Adobeが提供するHeadless UIライブラリであるReact Ariaについて、コントリビューターの目線から見た良いところ・これからなところについて、という内容でした。</p>

<p><a href="https://zenn.dev/cybozu_frontend/articles/react-aria-component-design" rel="nofollow">こちらのzennの記事</a>を読んで、コンポジション設計における内部の状態管理の実現にcontext APIを利用している点など、React Ariaの実装自体に興味を持っていました。</p>

<p>発表では、コントリビューター視点の他のHeadless UIライブラリと比較した強みや、課題感を抱えている部分についての具体的な展望を知ることができました。</p>

<p>特に、コンポジションによるカスタマイズ性の高さについてはコントリビューター目線でも推しているポイントだと感じました。</p>

<p>数々のHeadless UIライブラリの思想にも表れているように(例:&nbsp;<a href="https://v2.chakra-ui.com/getting-started/principles" rel="nofollow">chakra UI</a>)、コンポジション設計は拡張性の高いUIコンポーネントの実現に欠かせない要素となっていることを実感しました。</p>

<ul>
	<li>
	<h3><a href="https://fortee.jp/frontend-conf-hokkaido-2024/proposal/923208ce-e2e1-4b6c-8c4f-123f8a4fc1f9" rel="nofollow">CSSレイアウト再入門:完全に理解してCSSを記述するために by berlysia</a></h3>
	</li>
</ul>

<div data-oembed-url="https://speakerdeck.com/berlysia/revisiting-css-layout-mastering-css-for-writing-with-complete-understanding">
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;"><iframe allowfullscreen="" scrolling="no" src="https://speakerdeck.com/player/1f6ed800523d4c1d845b26afd908c7c7" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" tabindex="-1"></iframe></div>
</div>

<p><br />
整形コンテキスト、包含ブロック、重ね合わせコンテキストの概念を知り、CSSによるレイアウトの理解を深める取っ掛かりにしようという内容でした。</p>

<p>自分自身、レイアウトの適用について経験則的な理解に留まっている部分があり、体系的な知識の整理として大きな学びがありました。</p>

<p>CSSに苦手意識を抱く大きな要因として、トラブルシューティングの行き当たりばったり感が挙げられると思います。ここをロジカルに解説するための足がかりが得られました。</p>

<p>例年、新卒研修でCSSのデバッグに苦労しているメンバーをちらほら見かけるので、この内容を活かしたコンテンツを来年以降の新卒研修に盛り込んでみようと思います。</p>

<ul>
	<li>
	<h3><a href="https://fortee.jp/frontend-conf-hokkaido-2024/proposal/20113974-2260-43c0-9a3a-9be997711296" rel="nofollow">ESLint Plugin により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ by Shinyaigeek/Shinobu Hayashi</a></h3>
	</li>
</ul>

<div data-oembed-url="https://speakerdeck.com/shinyaigeek/eslint-rule-niyorishi-ye-ji-shu-domeinniyan-tutazhi-yue-toshi-yue-wofu-yan-saseruapurotinosu-me-796c5458-d929-455c-90cf-f4914b91621f">
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;"><iframe allowfullscreen="" scrolling="no" src="https://speakerdeck.com/player/be6e42d126ae48b38369d97f69461717" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" tabindex="-1"></iframe></div>
</div>

<p><br />
開発チームごとに抱えている固有の状況に合わせたESLint Ruleによる機械的なコードベース検査によって、属人的な努力に依存しないルール遵守を実現しようという内容でした。</p>

<p>Custom Linter Ruleの実装を同一リポジトリ内に配置することで、ルール決めの経緯がcommit logに残る他、メインのアプリケーションと同じ管理フローを踏めて依存ライブラリ管理のコストが軽減できるという話はとても納得感がありました。</p>

<p>実際、弊チームでもCustom Linter Ruleの策定は時折話題に挙がるので、管理の際にこの手法を真似してみようと思いました。</p>

<p>余談ですが、日経電子版ではCDNでのShared Cacheで9割捌いているそうです。すごい！</p>

<p><img alt="" height="805" src="https://image.dmm-corp.com/yb8wef6xx3m1m5mvkcazbhfa6keu" width="800" /></p>

<h2>スポンサーブース</h2>

<p>当日回らせていただいたスポンサーブースのうち、ここではサイボウズさんとさくらインターネットさんのスポンサーブースを取り上げさせていただきます。</p>

<p>サイボウズさんのスポンサーブースでは、FEクイズと称してフロントエンドエンジニア向けのクイズが用意されており、正解するとアクリルスタンドなどの景品がもらえました。</p>

<p>自分も無事クイズに正解し、アクスタをいただきました。自分の場合は「Core Web VitalsのTBLって何の略？」といったクイズでした。噂によれば、被りが無いようにものすごい量の問題を用意されていたらしいです。すごい！</p>

<p><img alt="サイボウズさんからいただいたアクスタ" height="562" src="https://image.dmm-corp.com/q3isn3i6qad7zk3lwpa0p884vx30" width="400" /></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>さくらインターネットさんのスポンサーブースでは、<a href="https://speakerdeck.com/bcrikko/frontend-conference-2024" target="_blank">スポンサーセッション</a>で気になった内容を登壇者の方に直接質問させていただきました。</p>

<p>1つ目はデザインエンジニアの採用についてです。</p>

<p>デザインシステムを構築する際のいわゆるデザインエンジニアのメンバーは、主にフロントエンド領域に明るいデザイナーさんを採用することで確保されたそうでした。</p>

<p>リファクタなどフロントエンド領域への参入障壁を低くする取り組みを行うことで、垣根を外して共に課題に取り組む環境整備をされているそうで、見習うべき部分が多いなと感じました。</p>

<p>2つ目は社内向け勉強会の具体的な運営方法についてです。</p>

<p>社内勉強会は何種類かあるうち、ノンテーマで気になった記事を持ち寄る雑談スタイルでの開催が多いそうでした。</p>

<p>他ドメインのエンジニアも集まってくるので、各々が気になるポイントが分散することで議論が活発化するそうです。</p>

<p>テーマを固く決めないことで、参加メンバーの自主性・好奇心による盛り上がりがあるのかなと思い、弊社で行なっている社内勉強会の参考にさせていただこうと思いました。</p>

<h2>懇親会</h2>

<p>メインセッションの発表が全て終わった後、懇親会LTを含む懇親会が開催されました。</p>

<p>他の参加者の方々と、当日のセッションの内容に限らず、普段の業務の話などをざっくばらんにできて楽しかったです。</p>

<p>特にチームラボさんの登壇内容について、具体的なリプレースまでの道のりなどを深掘ってお伺いすることができました。</p>

<h2>終わりに</h2>

<p>今回、弊社のカンファレンス参加支援制度と呼ばれる福利厚生制度を用いて参加しました。カンファレンス参加費用(現地までの旅費・宿泊費を含む)をまるっと会社が負担してくれる素晴らしい制度です。DMMには他にも素敵なエンジニア支援福利厚生制度があるので、興味のある方はご覧ください。<br />
<a href="https://inside.dmm.com/articles/dmm-tech-welfare/" target="_blank">技術職限定福利厚生「DMM Tech Empowerment」</a></p>

<p>自分にとって、オフラインのカンファレンス参加は学生の頃以来だったので良い刺激になりました。ブースや懇親会で他社のエンジニアの方とコミュニケーションが取りやすいのがオフライン開催の嬉しいところですね。</p>

<p>また今回はレガシーな技術との向き合い方についてのマインドセット的な発表も多く、早速業務に活かしていっています。</p>

<p>&nbsp;</p>

<p>最後になりますが、弊社でも<a href="https://inside.dmm.com/articles/think-frontend-6/" target="_blank">Think ! FrontEnd</a>という社外向けのフロントエンド勉強会を開催しております。</p>

<p>次回は12月にオフラインで開催できるように準備を進めておりますので、楽しみに待っていていただければと思います。それでは！</p>


2024年8月24日に札幌のDeep Tech CORE in Sapporoにて開催されたフロントエンドカンファレンス北海道2024に参加してきました。本記事では、セッションの内容や当日の雰囲気をお伝えできればと思います。

フロントエンドカンファレンス北海道2024に参加してきました

シェア

一緒に働く仲間を募集しています！