みなさんお久しぶりです！
株式会社ナレッジワークのソフトウェアエンジニアのはぎはらです！
本記事では2024年3月28日に開催した勉強会 Encraft #12 Frontend Quiz Night の開催レポートをお届けいたします。
Encraftとは？
Encraft（エンクラフト）は株式会社ナレッジワークが提供する、 "Enablement" と "Craftsmanship" をテーマにした勉強会です。技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を作りたいと思っています。
過去のイベントの開催レポートは以下からご覧ください。
- Encraft #1「フロントエンド × 設計」開催レポート
- Encraft #2「サーバーとクラインアントを結ぶ技術」開催レポート
- Encraft #3「エンジニアイネーブルメント - 共有・育成・評価・効率化 -」開催レポート
- Encraft #4「React/Next.js 最前線」開催レポート
- Encraft #5「Go1.21+ 最前線」開催レポート
- Encraft #6「Focus on UI Component 実装」開催レポート
- Encraft #7「AppDev with Google Cloud」開催レポート
- Encraft #8「Engineers Career」開催レポート
- Encraft #9 「QA Enablement - Practical Test Design -」開催レポート
- Encraft #10 「Go 1.22+ Enablement Lesson」開催レポート
- Encraft #11 「LLMとエンタープライズの距離感」開催レポート
オフラインで参加することが難しい方などに向けて、今回も 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のイベントでも改めて聞かれるとどれだっけ...？と思わず唸ってしまうような内容で、弊社のフロントエンドエンジニアも悩んでいました（笑）
以下のアーカイブ動画から残りの問題も解説込みで視聴できますのでぜひ御覧ください！
セッション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に自信のある方は以下のアーカイブ動画から挑戦してみてください！
セッション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://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ライブラリなので、少しでもお役にたてれば嬉しいです。
オフライン・オンライン問わず、ご回答いただいた皆様、ありがとうございました！
開催の様子
次回予告
そして、次回のEncraft #13はQA会です！
テーマは「QA Enablement - Insight by QA activity」。
テスト・QA業界の関係者が日々の業務を改善するための情報交換の場としてQA Enablementと題し、今回は「Insight by QA activity」というタイトルで「品質保証活動からの情報提供」をテーマとして取り上げます。
ぜひご参加ください！
Encraft は今後も定期的に学びと交流の場として開催を予定しています！
Connpass でグループメンバーになっていただけると開催通知メールが送られますので、開催を知りたい方は以下より是非グループメンバー登録をよろしくお願いします。
セッションをオンラインでご覧いただいた方も、感想などハッシュタグ#encraftでツイートしていただけたら嬉しいです！
それでは、また次のEncraftでお会いしましょう！
Discussion