1年以上続けている社内勉強会のネタを一挙公開！【フロントエンド・ネットワーク編】

社内で1年以上、「10分勉強会」という取り組みを続けており、延べ80回以上開催してきました。
本記事では、これまで開催したときの発表ネタを一挙公開します（多すぎて書くのが大変なのである程度選抜したうえで、フロントエンド・ネットワーク編として一旦まとめました）。

こんな方にぜひ読んでいただきたい記事です。

• 社内で勉強会をやりたいけど、どんなネタを採用すればいいのだろう？
  • 弊社の場合はかなりライトなネタで続けています。ぜひ参考にしてください！
• マナリンクの勉強会にお邪魔してみたい！
  • ありがとうございます！ゲスト参加を常に歓迎しておりますので、本記事を読んでこんなネタ聞きたい、あんなネタで話したいというものがありましたらご連絡ください！

勉強会の概要

以下の記事に詳細を記載していますが、簡潔にいうと以下の感じで運営しています。
https://zenn.dev/manalink_dev/articles/manalink-ten-minutes-study

• 週2回、火曜と木曜の15時〜から10分ほど開催
  • 業務都合に応じて中止してOKだが、最悪でも2週間以上は間を空けないようにしている
• 毎回1名がLTする。資料はなく簡単な口頭 + 社内ドキュメントツールのesaにメモ書き程度でOK
  • 本記事はこのesaから転記していきます
• 月に1回程度、社外からゲストの方（主に知人を頼っています）をお呼びして平日夜に開催
  • 随時募集しているのでぜひお気軽にお声がけください
  • この辺柔軟にしていて、平日15時からビデオ通話つないで他社さんのエンジニア数名と合同開催したこともあります
• まとまった発表ではなく「調べてみた」や「最近ここがよくわからない」みたいな発表でもOK
  • メインはLT後のメンバー間でわいわい話す時間という考え方

とにかくハードルを低くするのがポイントです。
目的は業務に向かって学習するだけだと、中長期的に必要な技術を学ぶ機会がなかったり過去に学んだ技術をメンバー間でしっかり共有する場がなかったりするので、勉強会という枠組みを作ってそこの補佐をしているイメージです。

勉強会の内容一覧

それでは過去に開催してきた勉強会のネタを一気に書いていきます。五月雨に書いても読みにくいので技術分野ごとに分けます。興味のあるところからお読みください。

フロントエンド

aspidaをReactで便利に叩けるフックを作ったよ

use-aspida-callerというライブラリをリリースしました、という紹介です。これはaspidaでAPIを型安全にコールするためのフックです。

https://github.com/TeXmeijin/use-aspida-caller

ReactHookForm × Zodでバリデーション責務を切り出す

マナリンクでは現在、React Hook FormとZodでフォームを実装しています。これはReactとReact Native共通です。

以下のようにZodでは、ランタイムで型定義に沿ったバリデーションを行ってくれます。

// Personオブジェクト用のSchema
const PersonSchema = z.object({
  name: z.string(),
  age: z.number(),
});

// 任意のオブジェクトに対してZodバリデーションを適用（OKの場合はそのまま値を返し、検証に引っかかると例外をスロー）
const person = PersonSchema.parse({
  name: "aiko", // ✅ OK!
  age: 47, // ✅ OK!
});

const person = PersonSchema.parse({
  name: 123, // ❌ NG!
  age: 47, // ✅ OK!
});

今回はReact Hook Form(以下RHF)との組み合わせの話が中心だが、何もフォームのバリデーションのためだけというわけではなく、"検証" という文脈であれば柔軟に幅広く使えます。

また、複数項目にまたがるバリデーションは、superRefineというメソッドで定義することができます。※superRefine自体は用途が幅広くてそのうちの1つとして複数項目があるらしい

firebase v8→v9で変わった点

firebaseのSDKがv8からv9で大きく書き方が変わりました。Tree Shakingの対応が主な目的です。Tree Shakingとはライブラリから未使用のコードを削除するプロセスのこと。これが導入されたことによって、バンドルサイズが削減されました。

この発表があることでfirebase v9アップデートやばいぞ・・・という共通認識が生まれ、後日React Nativeアプリにおけるfirebase v9アプデの戦いに繋がりました。

Interaction Testing with Storybook

Storybook自体の紹介と、その機能の1つであるInteraction Testingの話をしました。

https://storybook.js.org/blog/interaction-testing-with-storybook/

React refについて

Reactのrefについて改めて調べ直し、発表した回です。forwardRefや、制御/非制御コンポーネントの話もでました。

ref自体の用途は色々考えられますが、特に実DOMの操作に使われることが多いですね。

React Hooks Testing Library

react hook専用のテストライブラリについて解説した回です。

https://testing-library.com/docs/react-testing-library/api#renderhook

マナリンクではフロントエンドのテストが全然書けていない（一応vitest入れてCI通すまではセットアップしている）ので、徐々に事前知識を入れてチームに共有しています。テストを書くなら、とりあえず書こう！ではなく、どんな設計で日頃実装して、どのような責務のモジュールに対してどんなアプローチでテストを書いていくか、チームで話し合ってある程度見えてから書いていきたいなと思っています。

そのuseState、もっと減らせるかも？コンポーネントの事例と一緒に示します

こちらの記事で発表した内容です。

https://zenn.dev/manalink_dev/articles/react-waste-usestate

よくソースレビューで無駄Hook警察をやっているので、メンバー内に共通認識として持っておいてほしいと思い発表しました。ソースレビューはコードに対する認識をチーム間で共有する手段も兼ねていると思っていますが、結局2人間でしか共有されないので、レビュー中に出てきた意見について随時他メンバーを巻き込んでみたり、こういった勉強会の時間であるあるレビュー内容を全体にシェアする感じにしています。

axiosのInterceptorを使った認証機構

axiosを選ぶ理由の1つであるInterceptorについての解説です。リクエスト、レスポンスのタイミングで処理を差し込めるので、Firebaseから発行されているトークンをAuthorizationヘッダーにセットするといった処理を書き込めるのが楽で便利です。

useAspidaSWRのリクエスト実行を制御するkeyオプション

useAspidaSWRで、リクエストの実行を処理させたくないときにはkeyというオプションが使える。ただその書き方が少し分かりづらいので、useAspidaSWR側の内部実装を少し追ってみた。という発表でした。

useAspidaSWRはSWRをAspida向けにラップするライブラリなので、そのライブラリの中身のソースを追うことで、keyを使ってリクエストを制御できるロジックがわかりました。

ライブラリの内部実装を追う癖はとても大事です。

ネットワーク（HTTP/TCPなど）

DNS君について、再度学ぼう

• IPアドレス
• nslookup
• ARP
• 各種レコード（A、CNAME、ALIAS、NSなど）
  といった内容についてさらっと発表がありました。
  こういう知識は結局自分でAWSなり使ってネットワーク構築しないと掴めない部分だとは思いますが、前もって単語だけでも聞いたことがあるとハードルは下がるので良いことだなと思います。

ContentDispotisionヘッダー

meijinが大好きなContentDispotisionヘッダーについての解説回です。
FirebaseやS3にファイルを上げるときにContentDispositionヘッダーを付与することで、ダウンロード時のファイル名を指定することができます。ファイル名が全角のときのSafari対応などに罠があって奥深いです（認知を捻じ曲げて奥深いという感想にしている）。

https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Disposition

http基礎~リクエストメソッドの使い分け~

OSI参照モデル、TCP/IPプロトコル群の話から、GET/POST/PUT/PATCHメソッドの使い分け（冪等性を着眼点にして）の話をしました。
こういう基礎知識みたいなところ、誰でも一度は聞いたことがある話題ではありますが日頃はアプリケーション開発の比率が多いために徐々に曖昧な認識になっていくものだと思うので、こうやって振り返る機会が作れるのはいいですね。

jwtの署名・検証

以下の記事を参考に、JWTについて仕組み寄りの解説をしていただきました。

https://qiita.com/mejileben/items/ae7b346f0fc4a59101b5
https://developer.mamezou-tech.com/blogs/2022/12/08/jwt-auth/

何度調べ直しても、公開鍵、秘密鍵、署名周りの仕組みとそれらの活用で改ざんを検知できるという発想が美しすぎるなぁと感嘆する次第です。

弊社のメンバーが個人開発で、Supabase×LINE認証の実装に取り組んでおり、そのときJWTの理解が求められたので調べ直したとのことでした。

---

一旦長くなってきたので以上とします！
振り返ってみると、普通に業務をやっていたらちゃんと学び直す機会がなかなか作れないところや、あまり触れないけど重要な分野、メンバー間で共通認識が欲しいところなどを題材にできており、ためになっているなと思います。
他にも【バックエンド・アーキテクチャ・React Native】などの領域についても多くの勉強会が開かれているので、今後まとめてみます！