💯

Encraft #12「Frontend Quiz Night」開催レポート

Eringi_V3

2024/04/08に公開

みなさんお久しぶりです！
株式会社ナレッジワークのソフトウェアエンジニアのはぎはらです！
本記事では2024年3月28日に開催した勉強会 Encraft #12 Frontend Quiz Night の開催レポートをお届けいたします。

Encraftとは？

Encraft（エンクラフト）は株式会社ナレッジワークが提供する、 "Enablement" と "Craftsmanship" をテーマにした勉強会です。技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を作りたいと思っています。
過去のイベントの開催レポートは以下からご覧ください。

オフラインで参加することが難しい方などに向けて、今回も YouTube での Live 配信も行いました。
また、感想をハッシュタグ #encraft でつぶやいていただけると嬉しいです。

クイズ形式での初開催！

今回はオンライン参加の方でも一体感を持って楽しんでいただけるようクイズ形式での開催となりました。
クイズと投票にはAhaSlidesというSaaSを使いました。
こちらが参加者からも登壇者からも非常に評判が良く、参加者はリアクションや回答を送信することができ、登壇者は参加者の方々のリアクションをリアルタイムに確認しながら話すことができるので会場も明るい雰囲気でクイズを楽しんでいただけたと思います！🙌

セッション1: DOM Quiz by @yoshiko

yoshikoさんからはDOMに関するクイズを４問出題していただきました！
2つピックアップしたので挑戦してみてください！

「最初の1回だけ呼び出したいイベントリスナー」を設定できるコードはどれ？

  addEventListenerOnce('click', fn);
  addEventListener('clickOnce', fn);
  addEventListener('click', fn, { once: true });
  addEventListener('click', fn, true);

typeがnumberやrangeのinputで、値を数値で取得できる方法はどれ？

  event.target.valueAsNumber
  event.target.value.ToNumber()
  event.target.value.cast()
  <input type="number" autoCast />

意外と普段使っているDOMのイベントでも改めて聞かれるとどれだっけ...？と思わず唸ってしまうような内容で、弊社のフロントエンドエンジニアも悩んでいました（笑）
以下のアーカイブ動画から残りの問題も解説込みで視聴できますのでぜひ御覧ください！

https://youtu.be/QDCVYhVTDzI

発表資料: https://share.app.stg.knowledgework.cloud/shared/EB-icPg0OyqIVTvBB0N7tahsVccv7lAGiO3VPu-KC_jS?itemId=25a1af31-1734-46dc-bf72-6fce3766a40e

セッション2: CSS Quiz by @zi-dot

ziさんからはCSSに関するクイズを4問出題していただきました！
こちらも2問ピックアップしたので気になる方はぜひアーカイブ動画から残りの問題と解説を御覧ください！

次のHTML/CSSの時、「test」の色はどれ？（セレクタの詳細度）

<div id="wrapper">
  <div class="content">
    <p id="text">test</p>
  </div>
</div>

#wrapper .content p {
  color: red;
}
.content > p {
  color: blue;
}
#wrapper p#text {
  color: green;
}
#wrapper .content > p {
  color: purple;
}

「flex: 1;」はflex関連のプロパティの糖衣構文ですが、以下のどれの糖衣構文でしょう？

  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;

  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;

  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;

  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;

特にflex: 1; の問題は正答率が非常に低く、なんと正解者は2人しかいませんでした！
CSSに自信のある方は以下のアーカイブ動画から挑戦してみてください！

https://youtu.be/UotNnjnyM0g

発表資料: https://share.app.stg.knowledgework.cloud/shared/EB-icPg0OyqIVTvBB0N7tahsVccv7lAGiO3VPu-KC_jS?itemId=eab8f0df-3a04-4a6b-a704-db5759985ef6

セッション3: TypeScript Quiz by @uhyo

uhyoさんからはTypeScriptに関するクイズを4問出題していただきました！

普段業務でTypeScriptを書いている私でも自信を持って回答することのできない難問揃いでした！
2問ピックアップさせていただいたので型ヂカラを上げたい方はぜひ挑戦してみてください！

KeysとValuesはどんな型？

const values = {
  foo: 123,
  bar: 456,
} satisfies Record<string, number>;

type Keys = keyof typeof values;
type Values = typeof values[Keys];

以下のコードでOutput型はどれになる？

type Not<B extends boolean> = B extends true ? false : true;
type IsString<T> = T extends string ? true : false;
type IsNotString<T> = Not<IsString<T>>;

type Output = IsNotString<string | number>;

残りの問題と解説は以下のアーカイブ動画から閲覧できます！

https://youtu.be/hrDuuNn8oPc

発表資料: https://speakerdeck.com/uhyo/typescript-quiz-encraft-number-12-frontend-quiz-night

Triple-WINアンケート

Encraftでは、参加者のアンケート回答に連動してナレッジワーク社が OSS プロジェクトに寄付をする試みを行っております。参加者の 1 回答当たり 8 ドルをナレッジワークが OSS に寄付することで、参加者と OSS プロジェクトをナレッジワーク社が繋ぐ仕組みです。
今回は42名の方がアンケートに回答してくださり、うち計上対象となる38名ぶんの304ドルをopen collective経由で Day.js プロジェクトに寄付いたしました。
Day.jsはナレッジワークでも日々利用しているOSSライブラリなので、少しでもお役にたてれば嬉しいです。
オフライン・オンライン問わず、ご回答いただいた皆様、ありがとうございました！

https://github.com/iamkun/dayjs/