完全理解.FM

Core Web Vitals FIDからINPに変わったよ話

k.k — Sun, 07 Apr 2024 12:47:19 +0900

Core Web VitalsのFID から INP に変わったという内容で話してみました。CWVとの付き合い方として参考になれば…！

00:00 OP

02:11 CWVとは

13:09 計測するメリット

22:17 CWVとの付き合い方

26:46 クロージング

1. 3/12 から CWV の指標が FID から INP に変わったよ

2. Web パフォーマンスの話

3. CWV ってなに？

4. FID、INP ってなに

5. FID から INP に変わってどうなるの？

## 3/12 から Interaction to Next Paint(INP) が Core Web Vitals の主な指標に

https://web.dev/blog/inp-cwv-march-12?hl=ja

- First Input Delay(FID)から INP に置き換わる

実際にLighthouseでFIDがINPに変わってる

## レスポンスタイムについてのヤコブニールセンの研究 Jakob Nielsen, “Website Response Times,” (2010)

https://www.nngroup.com/articles/website-response-times/

- 0.1 秒 … 即時に感じられる。キー入力やドラッグアンドドロップなどの Direct Manipulation においては満たしたい時間

- 1 秒 … 遅延は認識しているがユーザーがフローをシームレスと感じられる時間。ナビゲーションで満たしたい基準

- 10 秒 … ユーザーが注意を持ち続けられる時間。これ以上経過すると他のことを考えるようになる。

他の事例からも、Web パフォーマンスはユーザーの生産性と大きく関係してる

## Core Web Vitals (CWV) とは

https://web.dev/articles/vitals?hl=ja

- ユーザー体験に関する指標

- 3/12 以前までは

- FID

- ユーザーがページを表示してから最初の操作(クリック)からブラウザが反応するまでの時間

- 操作性

- Largest Contentful Paint(LCP)

- 最初にページに移動したときに、ビューポートに表示される最も大きなコンテンツのレンダリング時間

- ローディング

- Cumulative Layout Shift(CLS)

- ページが表示されるまでに発生するレイアウトのずれ

- レイアウトの安定性

- 3/12 以降は

- INP

- LCP

- CLS

- それぞれの指標はいずれも Performance API で取得できる

- https://developer.mozilla.org/ja/docs/Learn/Performance/Measuring_performance#%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9_api

- INP で使用する API やプロパティは Chrome のみが対応してる

- https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEventTiming

- それぞれの指標は 75%タイルで下記の値以下だと Good、つまり良いユーザー体験が提供できてるって言える

- INP: 200ms

- LCP: 2.5s

- CLS: 0.1

## INP とは

https://web.dev/articles/inp?hl=ja

- FID と大きく変わった点は、ユーザー操作に対してブラウザが反応するまでの時間をずっと計測すること

- FID では最初の操作のみだった

### INP 改善事例

- https://web.dev/economic-times-inp/

- INP が改善されたことで PV が 43%増加

- https://web.dev/redbus-inp/

- INP を改善し、売上を 7%増加させた

## FID から INP になって何が変わるのか

- 個人の感想だけども、より今の Web アプリケーションに即したユーザー体験を計測できるようになったのではと

- 最近の Web アプリは、画面に対してユーザーが操作する部分が増えてる

- 操作に対して実際にユーザーがどんな体験をしているのか、INP によって詳細にキャッチできそう

Remix - Reactのフルスタックフレームワークについて -

菊池翔 — Sat, 10 Feb 2024 14:45:45 +0900

今回はnus3とReactのフレームワークであるRemixについて色々話してみました

00:00 OP

00:21 イントロ・Remixの概要

03:50 Remixに触れてみての所感

10:53 vs Next.js

23:20 Remixの気になりポイント

28:00 まとめと次回予告

2023年の振り返りと若くあり続けるために

菊池翔 — Sat, 27 Jan 2024 14:01:47 +0900

半年ぶりの収録だったので去年の振り返りと雑な会話を収録しつつ、筋肉は大事だという話をしました

00:00 OP

00:22 イントロ

01:40 nus3の振り返り

09:33 kkの振り返り

24:26 年に抗うために

28:38 まとめと次回予告

フロントエンドテストはじめの一歩登壇after rereview

菊池翔 — Sat, 05 Aug 2023 15:10:05 +0900

今回はnus3とFLEXY主催の「フロントエンドテストはじめの一歩」に登壇した内容を含めて後日談や当日の話題について深掘りして話しています

00:00 OP

00:22 雑談(体調と車)

02:34 今日のテーマについて

04:28 収録の雰囲気

06:53 当日のトークテーマについて

フロントエンドテストのハードル

はじめ方

ボトムアップ: ex: 社内ジョブボード

トップダウン: ミニマムPJからはじめる

E2Eからはじめる

32:04 ED

VercelShip -Security, Collaborate, Ecosystem-

菊池翔 — Thu, 20 Jul 2023 09:30:00 +0900

今回は2023年5月にVercelから発表されたVercel Security, Collaborate, Ecosysteについて喋っていきます

00:00 OP

00:21 雑談

01:07 今回のテーマ

01:48 Vercel Security

- https://vercel.com/docs/security

07:28 Collaborate

- https://vercel.com/docs/workflow-collaboration

- Vercel Spaces

- Visual Editing

23:55 Ecosyste

- https://vercel.com/blog/authentication-for-the-frontend-cloud

- https://vercel.com/blog/nuxt-on-vercel

32:04 クロージングと次回のテーマ

Vercel Storage ~Edgeにおけるストレージとサービス~

菊池翔 — Sun, 28 May 2023 12:00:55 +0900

今回は2023年5月にVercelから発表されたVercel Storageという新しいストレージサービスについて喋っていきます

後半でエッジ環境における勘所やVercelのサービスのあり方についても話しています

00:00 OP

00:21 今回のテーマ

01:00 Vercel Storageの概要

- https://vercel.com/docs/storage

07:54 Vercel KV

10:21 Vercel Postgres

18:08 Vercel Blob

20:09 Vercel Edge Config

20:39 Vercel Storageのメリットデメリット

24:19 VercelとCloudflareの連携・Vercelのサービスのあり方

31:28 クロージングと次回のテーマ

エンジニア転職小話

菊池翔 — Sat, 27 May 2023 12:04:33 +0900

今回は僕自身が転職したことを踏まえてnusさんと一緒にエンジニアの転職について話をしていきました

00:00 OP

00:21 雑談

01:30 今回のテーマと近況

06:45 中途だと身構えちゃうよね

09:19 企業文化の話

14:50 今回の応募経路について

18:08 今回の転職活動について

26:16 「40代よわよわエンジニアの転職」から考えるキャリアについて

- https://anond.hatelabo.jp/20230415000359

32:15 クロージング・次回について

ChatGPTの登場と展望 part2

菊池翔 — Sat, 29 Apr 2023 20:00:33 +0900

このエピソードではChatGPTを使ったコーディングに対しての問題点、リスク要因、技術スキルについて話し合われています。ChatGPTは事前に学習されたデータに基づいて応答を生成するため、バイアスや再学習によるコストについても議論されています。しかしその一方で、個人がGPTを活用する方法や、プログラム開発者が必要とするスキルについての話もしています。また、ChatGPTを使ってコードを生成できるようになるとエンジニアの職務にどのような影響が出るか、これからの時代に備えて求められるスキルに注目し、自分のやりたいことを追求しながら学ぶことについての議論もしています。ChatGPTによってエンジニアの仕事がどのように変わっていくか興味深い話題です。

00:00 OP

00:20 今回のテーマ

05:20 ChatGPTを用いて生成したコードに関する懸念点

09:06 エンジニアリングで長生きする領域についての話題

13:31 ChatGPTを利用する上でのリスク、セキュリティについて、攻撃手法やバイアス

27:50 OpenAIの動向についての話題

30:13 クロージング

ChatGPTの登場と展望 part1

菊池翔 — Sat, 29 Apr 2023 13:00:07 +0900

本エピソードでは、ChatGPT, GPT-4モデルについて雑感を話しています。GPT-4は、GPT-3とは異なり性能の大幅な向上が期待されるモデルとして、特に日本語においての精度も高くなっています。また、ChatGPTとBingAIなどの違いについても話していて、聞き手は普段の開発や子供たちが今後学ぶべきことなどを考えさせられます。GPTの利用規約や著作権についての問題や、プロンプットエンジニアリングについても言及されています。エンジニア以外の方にも興味深い話題が含まれているため、おすすめのエピソードです。

00:00 OP

00:19 雑談

02:39 今回のテーマ

04:59 GPTによる機械学習とその特徴

06:00 機械学習の問題点とGPT-3・4の違い

11:00 GPT-3.5とGPT-4の精度の違い

13:07 GPT4による精度向上についての話題

15:02 GPT4によるマルチモーダル応答の検証や使用についての話題

17:02 コーディング補完とGitHub Copilot、GPT

19:38 利用規約,著作権,GPT

23:47 Bing AIとプロンプトエンジニアリング

27:56 前半の締めと後半のつなぎ

「Webの過去と未来はServer Side Rendering」を読んでみて…

菊池翔 — Mon, 13 Mar 2023 16:44:02 +0900

今回はDenoが出していた記事を軸にWebのレンダリング方式がSSRになっていくかもねぇという話をしました

00:00 OP

00:30 今回のテーマ

06:53 isomorphic javascriptと各フレームワーク

24:51 universal javascriptとそれにまつわる視点

32:39 クロージングと次回予告

[参考] https://deno.com/blog/the-future-and-past-is-server-side-rendering

## 記事の概要

- Deno から Web の過去と未来は Server Side Rendering というタイトルの記事が公開

- 記事の序盤には、これまでの Web アプリケーションの歴史が紹介

- PHP による SSR の例

   - 動的な部分はテンプレートエンジンを使ってサーバーサイド側でレンダリングしてた

- ブラウザや JavaScript の機能が拡充したことで、SPA や CSR の流れに

- さらに Web が成熟してきたことで、さまざまなデバイスや帯域幅でアクセスされるようになってきた

- デバイスのスペックや不安定な回線でアクセスされる状況といった状況の中で一貫したユーザー体験を提供するには SSR なのでは

- SSR をサポートする Isomorphic JavaScript なフレームワークが存在する

   - Isomorphic JavaScript はクライアント・サーバーサイド両方で JS が実行されるアプリケーション

   - Isomorphic JavaScript フレームワークとして Next.js や Remix が挙げられてる

   - 昔の SSR との違いでもありそう

- Deno が気に入ってるアプローチは Islands Architecture

   - 実際に Deno の Web フレームワークである Fresh が採用している

   - 静的な部分はサーバーサイド側で HTML をレンダリングし、動的な部分だけハイドレートする

     - HTML のレンダリングはサーバーサイドで行い、その後、イベントハンドラーを HTML 要素にアタッチ

- Deno の場合は Fresh と Deno Deploy でできる

- なるべくクライアントサイド側の JS を減らす機能は各フレームワークから提供されてそう

- [Next.js Server and Client Components](https://beta.nextjs.org/docs/rendering/server-and-client-components)

- SSR がベースな Remix や Qwik

   - [Qwik ではユーザーの操作が行われてから JS をダウンロードして実行する Resumable というアプローチ](https://qwik.builder.io/docs/concepts/resumable/)

- [SolidJS も Isomorphic な機能を備えてる](https://www.solidjs.com/guides/server#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0)

- Cloudflare や Deno Deploy、Vercel、netlify、など Edge 上で JS が実行(SSR)できる選択肢が増えた

記憶力と脳の関係・記憶力を高めるためには

菊池翔 — Mon, 27 Feb 2023 10:00:40 +0900

今回は前回に話した成人学習の効率を高めるための方法論に続いて、知識を記憶しておく力を高める方法を

知ったかぶり脳科学の側面から深堀りしていきました

00:00 OP

00:30 今回のテーマ

01:14 記憶の種類

07:34 記憶力を高めるには

24:33 エンジニアの開発言語と記憶

26:25 クロージング

# 記憶力を高める

## 記憶の種類

記憶の固定化: 短期記憶から長期記憶に移る過程

短期記憶: 学習から数時間

長期記憶: 学習から1日から生涯保持

（遠隔記憶の一部）遠隔記憶: システムレベルの固定化

短期・長期記憶の一部は海馬に蓄えられる

遠隔記憶は脳の大脳皮質にある側頭葉の側頭連合野に蓄えられる

つまり、遠隔記憶は海馬の記憶障害から切り離される

短期→長期→遠隔はsession storage→IndexDB→RDBのようなイメージ？

## どうやって記憶効率を上げるか？

1. 記憶において睡眠が重要「覚醒時に経験した情報が睡眠中に再生されている」

→ 学習後に安定的な睡眠を行うことで記憶の固定化が促される

2. 記憶は脳の大脳皮質にある側頭葉の側頭連合野に蓄えられる

→ 側頭連合野は五感や、行動動機、心的態度などを統合する

多くの「モダリティ」に働きかけたほうが、記憶が定着しやすい

海馬記憶のうち、何度アクセスされたもの「重要である」と判断

→ 側頭葉に送られて、遠隔記憶として定着する

3. 海馬は加齢やストレスで機能低下する（一方でストレスフリーやエクササイズで神経新生が促進される）

4. 鮮烈な体験により、些細な出来事の記憶が固定化される

→ 些細な出来事と鮮烈な出来事が短い間隔で生じた場合のみ

# 参考

- https://bsd.neuroinf.jp/wiki/%E8%A8%98%E6%86%B6%E5%9B%BA%E5%AE%9A%E5%8C%96

大人の学習効率を高めるためのアンドラゴジー&ペタゴジーと記憶力

菊池翔 — Mon, 20 Feb 2023 10:00:49 +0900

今回は大人になってから学ぶことが多くなった上で、どうやって学習効率を高めればいいかの視点で「アンドラゴジーとペタゴジー」という内容の話をしました

次回の「記憶力をどう高めればよいか」という話につなげています

00:00 OP

00:30 今回のテーマ

03:52 自己認識

06:29 経験

07:41 レディネス

10:06 方向づけ

11:52 動機づけ

14:06 内発的動機づけの強い子どもたちの存在

18:29 自分たちに不足していること

23:38 (雑談) 先生不足問題

25:29 記憶力の話

28:34 クロージングと次回の記憶力の話

アンドラゴジーとは、自己主導的な学習を用いた成人学習理論

# 成人の学習と子どもの学習

## 5つの違い

- 自己概念

- 経験

- レディネス

- 方向づけ

- 動機づけ

### 自己概念

自分がどんな人間であるか？」という問いかけに対して、自身が持っている考え

- 成人の場合

⭕学習者が主導だということを認識してもらえるように設計していく

❌教育者が一方的に情報を発信するだけの教育や、教育者が作り上げたものをただ受けるだけ

- 子どもの場合

一般的な学校教育では受動的な学習が一般的

### 経験

- 成人の場合: 有り

　⭕新しく学んだ法則に当てはまる過去の体験を思い出してもらう

- 子どもの場合: 無し

### レディネス

何かを学習する際に必要となる条件や、心身の準備、環境などが整っており、学習の準備ができている状態を表す

- 成人の場合

⭕社会的な役割=職業や役職、職位にフォーカスして学習者の課題を捉える

ex: マネージャーに昇進した人には、「マネジメントを基本から学ぶ」

- 子どもの場合

年齢やカリキュラムにフォーカスする

### 方向付け

「なんのために学習するのか」という学習の目的に関する観点

- 成人の場合

⭕学んだ知識やスキルを活用・応用することで、直近の課題を解決する（逆算的）

- 子どもの場合

　「教材の内容を理解する」「テストでいい点を取る」といったことが主な目的

### 動機付け

- 成人の場合: 内発的動機付け

⭕興味・関心・趣向・願望といった人の内側にあるものによる動機付け

- 子どもの場合: 外発的動機付け

「テストでいい点を取って親にほめられる」ことや、「先生や親に叱られない」

## まとめ

成人学習理論とはいえ理論的には「教育者のための理論」の色が強く

学習者の効率を上げる要素は少ない…

# 参考

- https://achievement-hrs.co.jp/ritori/andoragogy/

BuriKaigi 2023 nus3 after talk

菊池翔 — Tue, 07 Feb 2023 10:00:35 +0900

今回はnus3が参加してきた「BuriKaigi 2023」のあと話をしています

BuriKaigiとは？という話から実際に登壇した際の話や懇親会の内容を喋りました

00:00 OP

00:30 雑談

02:04 今回のテーマ

09:54 (脇道) Astroについて

13:22 nus3の登壇概要

16:21 nus3の発表内容

25:51 懇親会

28:35 クロージング

- 1/21 に BuriKaigi2023 で富山に行ってきました

- 寒ぶりとテクノロジの旬を味わうイベント

- ３レーンあって、参加したいセッションを見に行く感じ

- 色んな分野の人がいた

- オフラインで登壇、懇親会って流れは、はじめてだったけど楽しかった

- 参加してる人の反応を見ながら、発表できるのはよかった

- オフラインの発表慣れの話

- 夜は色んなブリ料理を食べた

- 露天風呂も最高だった

- 聞いた内容

- 自分の発表が最後だったので、自分の発表のことで頭いっぱいだった気がする笑

- フロントエンドの話だと、2022 年におきたフロントエンドの変化、Astro、GraphQL、Cloudflare の話などに参加した

- 自分が発表した内容の話

- タイトルは 10 年以上続くプロダクトのフロントエンド刷新プロジェクトのふりかえり

- ただ、刷新してるだけじゃなくて、巨大なコードベースを機能ごとに分割して影響範囲小さく、明確にしてる

- チームごとに独立した技術選定ができるような構成

- ADR から取り組んだことを振り返った

- 1 年振り返ってみてよかった点とこれから考えていく点

   - よかった点: 画面ごとのリリースにより、健全な開発サイクルを回せた

   - 考えていく点: 現在の作業が完了しても全体の 2~3 割ほど。スケールさせる方法を考えねば

- 2023 年の個人の抱負

   - チームがやってる刷新をなるべくはやく完了させたい

   - 難易度が高い機能のフロントエンド刷新に着手したい

参考

- https://speakerdeck.com/yotahada3/10nian-yi-shang-sok-kupurodakutono-hurontoendoshua-xin-puroziekutonohurikaeri

「ソフトウェアアーキテクチャの基礎」イントロレビュー Part2

菊池翔 — Mon, 16 Jan 2023 10:00:02 +0900

今回は「ソフトウェアアーキテクチャの基礎」という本のイントロをレビューついでにざっくり話しています

00:00: OP

00:30: 今日のテーマ

01:00: アーキテクチャに交わるもの

13:05: 既知の知 / 未知の知 / 未知の未知

16:16: アーキテクチャと交わるもの(続)

23:19: ソフトウェアアーキテクチャの法則

32:32: クロージングと次回予告

- アーキテクチャに交わるもの

  - エンジニアリングプラクティス (CICD / テスティング etc..)

   - 未知の未知に対するアプローチ

     - 既知の知 / 既知の未知 / 未知の未知

  - 進化的アーキテクチャ・適用度関数

  - 運用とDevOps

  - プロセス

    - ストラングラーアプリケーションパターン・フィーチャートグル

  - データ

    - データは寿命が長い

    - アーキテクチャの大事な観点の「アーキテクチャ量子」という点においてデータは無視できない

- ソフトウェアアーキテクチャの法則

  - ソフトウェアアーキテクチャの第一法則: ソフトウェアアーキテクチャはトレードオフがすべてだ

    - アーキテクトが、トレードオフではない何かを見出したと考えているなら、まだトレードオフを特定していないだけの可能性が高い

  - ソフトウェアアーキテクチャの第二法則: 「どうやって」よりも「なぜ」の方がずっと重要だ

  - アーキテクチャとは、Google で答えを見つけられないものだ

「ソフトウェアアーキテクチャの基礎」イントロレビュー Part1

菊池翔 — Mon, 09 Jan 2023 10:00:03 +0900

今回は「ソフトウェアアーキテクチャの基礎」という本のイントロをレビューついでにざっくり話しています

00:00: OP

00:30: 雑談

01:15: テーマ

03:48: ソフトウェアアーキテクチャの定義

10:48: ソフトウェアアーキテクトに求められる素養

16:29: 逆T字人財・I字人財・Individual Contributor

26:27: ソフトウェアアーキテクトに求められる素養の考察

29:19: 前半の締めと次回予告

- ソフトウェアアーキテクチャの基礎

  - O'Reillyから出ている技術本

  - 想定読者はおそらくテックリード以上のある程度ビジネスを含めた観点でソフトウェアエンジニアを全うしている人

  - 本の構成として第一部で基礎的な概念を把握し、第二部で具体的なアーキテクチャスタイル（レイヤードやマイクロサービス）を知り、第三部でADRなどのテクニックや交渉・リーダーシップと言った人としてのソフトスキルを学ぶ流れ

  - 今回のpodcastではその前段にあるイントロダクションをざっくり舐めていく

イントロ

- ソフトウェアアーキテクトのキャリアパスは曖昧

  - ソフトウェアアーキテクチャの定義が曖昧

    - ソフトウェアアーキテクチャと言ったらどういうものをイメージする？

  - ソフトウェアアーキテクチャの責務は広い

    - CI/CD

    - ソフトスキル (ライテクングスキルやマネジメント・プレゼン)

    - スタイル (分散・モノリス、ドメイン固有)

    etc..

  - ソフトウェア開発エコシステムの進化でソフトウェアアーキテクチャが常に変化する対象になっている

- ソフトウェアアーキテクチャの定義 [本書における]

  - 1. （システムの）構造

    - システムを実装するアーキテクチャのスタイル

    - レイヤードやマイクロサービス etc...

  - 2. アーキテクチャ特性

    - システムの成功基準のようなもので一般的には非機能要件というニュアンスもここに含まれる

    - 可用性・信頼性、テスト容易性、セキュリティ・耐障害性、スケーラビリティ・弾力性・回復性、パフォーマンス・デプロイ容易性・学習容易性

  - 3. アーキテクチャ決定

    - どのように構築すべきかのルール

    - 共通コンポーネントに切り出すルールやintefaceを仲介させるなど

  - 4. 設計指針

    - システムのガイドライン（not rule）

    - 「非同期メッセージングを利用してパフォーマンスを向上させるべきである」etc..

- ソフトウェアアーキテクトに期待される8つの素養

  ● アーキテクチャ決定を下す

  ● アーキテクチャを継続的に分析する

  ● 最新のトレンドを把握し続ける

  ● 決定の順守を徹底する

  ● 多様なものに触れ、経験している

  ● 事業ドメインの知識を持っている

  ● 対人スキルを持っている

  ● 政治を理解し、かじ取りをする

2022年の放送振り返りと来年の抱負

菊池翔 — Mon, 26 Dec 2022 09:00:51 +0900

今回は2022年から始まったこのpodcastの取り組みを@nus3と振り返って雑談しています

Amazon EventBridge Pipesとイベント駆動アーキテクチャ

菊池翔 — Mon, 19 Dec 2022 09:00:52 +0900

今回は @nus3 とAWSのre:inventで発表のあったEventBridge Pipesとイベント駆動についてざっくり話しました

# オープニング

00:00 OP

00:29 雑談

02:36 今回のテーマ (re:invent)

# EventBridge Pipes

04:30 EventBridge Pipes

15:12 イベント駆動

24:41 EventBridge PipesからみるAWS

# まとめ

30:39 クロージングと次回の話

Next.js 13のアップデートをみてみよう part2

菊池翔 — Mon, 21 Nov 2022 09:00:16 +0900

# オープニング
00:00 OP
00:29 今回のテーマ

# app directory (beta)
01:20 component data fetching に対してのアプローチ
09:00 axiosの動向とjs標準の拡張
13:30 Next.jsとランタイムの関係

# app directory loadmap
19:12 next exportの話
21:40 フロントエンド界隈の蠱毒話
23:08 Turbopack含めたバンドラー

# クロージング
26:05 まとめと次回へのつなぎ

Next.js 13のアップデートをみてみよう part1

菊池翔 — Tue, 08 Nov 2022 09:00:20 +0900

# オープニング
00:00 OP
00:29 今回のテーマ

# next.js v13
01:30 RFCからの違いについて
[参考] RFCについて話している回 https://open.spotify.com/episode/3LBzD4mhu6rqkQtGKQ13yQ?si=YdTifKEkR32QiQTIc-lABw&utm_source=copy-link

# app directory (beta)
https://nextjs.org/blog/next-13#new-app-directory-beta
02:40 directory / layouts
06:04 server components
https://beta.nextjs.org/docs/rendering/server-and-client-components
16:27 streaming
https://beta.nextjs.org/docs/data-fetching/streaming-and-suspense
18:38 data fetching
https://beta.nextjs.org/docs/data-fetching/fetching
https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md

# クロージング
28:15 まとめと次回へのつなぎ

[雑談] 最近ご無沙汰だけどどうしてたん？

菊池翔 — Mon, 07 Nov 2022 09:00:35 +0900

しばらく収録ができてなかったので再開の今回は雑談で終止しました
「最近なにしてたん？」「こんなことあったねぇ」みたいな話をゆるくしてます

育休を半年間で申請した話 / 引き継ぎ・ドキュメンテーションの難しさ

菊池翔 — Sat, 24 Sep 2022 11:00:51 +0900

オープニング
00:00 OP
00:20 今回のテーマ

育休
02:00 半育休を取った
04:17 半育休の効果
06:20 サイボウズの育休話

引き継ぎとドキュメント
07:27 現在の会社の育休状況と引き継ぎ
16:13 育休ながらの経験
19:27 ADRの話

クロージング
27:22 まとめ [参考]
育休取得を半年間で申請したテックリードの話
https://developer.so-tech.co.jp/entry/kichion-05

frontend testing (E2E / VRT / snapshot / react-testing-library/ jest)

菊池翔 — Sat, 17 Sep 2022 11:00:45 +0900

今回はWebフロントエンドのテスト周りについてざっくり話していきました

各テストのメリデメや新規プロジェクトだったら度のテストがコスパ良さそうか？などを喋っています

00:00 OP

00:20 雑談 (育休明けの労働について)

02:10 今回のテーマ

04:41 フロントエンドのテストの種類について

11:03 各テストのメリット・デメリット

27:45 新規プロジェクトだったらどのテストがコスパ良さそうか

32:36 まとめと次回予告

[参考] 実装例から見る React のテストの書き方

https://blog.cybozu.io/entry/2022/08/29/110000

コンウェイの法則 / 逆コンウェイの法則と反転現象

菊池翔 — Sat, 10 Sep 2022 11:00:40 +0900

今回はコンウェイの法則の反転現象の記事を取り上げて、コンウェイの法則と逆コンウェイの法則についても話していきました
開発チームとしてスケールした際の問題などについても簡単に雑談しています

オープニング
00:00 OP
00:20 今回のテーマ

コンウェイの法則
01:10 コンウェイの法則、逆コンウェイの法則
05:24 逆コンウェイの法則に合わせたアプローチの難しさ
09:05 コンウェイの法則の反転現象

コンウェイの法則の反転現象に抗う
15:11 モジュラーモノリス

クロージング
28:49 まとめと次回予告

[参考] コンウェイの法則の反転現象 https://scrapbox.io/lacolaco/%E3%82%B3%E3%83%B3%E3%82%A6%E3%82%A7%E3%82%A4%E3%81%AE%E6%B3%95%E5%89%87%E3%81%AE%E5%8F%8D%E8%BB%A2%E7%8F%BE%E8%B1%A1

SPAのセキュリティとAuth0の特徴

菊池翔 — Sat, 03 Sep 2022 11:00:19 +0900

今回はグダグダですが、webアプリケーションのセキュリティ（特にSPA）について話していきました
毎年話題に上がるcookie vs local storage関連の話からAuth0の話も少ししています

オープニング
00:00 OP
01:25 今回のテーマ

SPAセキュリティ
06:49 サイボウズの認証系とSSRのセキュリティ
09:30 SPAのJWT保存先（cookie vs local storage）
18:54 Auth0のJWT保存方法

クロージング
25:29 まとめと次回予告（コンウェイの法則関連の話）

golangの勉強どうしている？技術勉強会ってどうしている？技術のインプットはどうしている？

菊池翔 — Sat, 27 Aug 2022 11:00:29 +0900

今回はいつもと志向を変えて後輩エンジニアと学習について質問を受けながらいろいろ話していきました

00:00 OP
00:05 今回のテーマ
01:40 今回質問したいこと
04:08 k.kのgolangの学び方
13:30 開発言語共通の学び
18:53 k.kの行っている勉強会
29:35 k.kオススメのインプット方法
37:35 まとめと次回の予告

ブランチ戦略とトランクベース開発

菊池翔 — Sat, 20 Aug 2022 11:00:13 +0900

今回はgit repositoryにおけるブランチ戦略とそれに付随した開発方針になるトランクベース開発について話していきました

オープニング
00:00 OP
00:20 今回のテーマと雑談（完全理解.FM）

ブランチ戦略
04:41 狭義のブランチ戦略
06:03 実務（サイボウズ）でのブランチ戦略
08:00 リリース頻度の改善に対する傾向
10:10 ブランチ運用の問題点

トランクベース開発
13:14 トランクベース開発
19:13 トランクベース開発の難しさとメリット

クロージング
28:25 まとめと次回の予告

[参考]
トランクベース開発: https://cloud.google.com/architecture/devops/devops-tech-trunk-based-development?hl=ja

Next.js Layouts RFC / SSR Streaming & transition

菊池翔 — Sat, 13 Aug 2022 11:00:56 +0900

今回は前回に引き続きNext.js Layouts RFCに関するreact 18のupdateを中心にフロントエンド開発の変遷を垣間見るような話をしました

オープニング
00:00 OP
00:20 前回の話と今回のテーマ
00:50 react server componentsの現在位置と将来予想

streaming SSR
05:12 streaming SSR
11:48 開発難易度の高まり
14:37 react updateから勘ぐるフロントエンドの複雑さとライブラリ目線

transition
22:49 transition

クロージング
26:52 react18 updateの所感
28:17 まとめと次回の予告(？)

[参考]
モダンウェブフロントエンド(2022)に至る歴史: https://open.spotify.com/episode/0WiKvvXmwoDKihLcelWzoS?si=XlJ9i1lxSGKFGe364Lv0mg&utm_source=copy-link

Next.js Layouts RFC / React Server components

菊池翔 — Sat, 06 Aug 2022 11:00:48 +0900

今回はwebフロントエンドのReactベースで主流なNext.jsの新しい機能「Layouts」についてRFCが出ているのでざっくりと話しています
Layoutsの基礎になるReact 18の機能であるServer componentsについても話題に出しています

オープニング
00:00 OP
01:11 今回のテーマ
03:36 Layoutsのイメージ

Next.js Layouts RFC
04:49 Layouts
11:31 Layoutsの前提になるReact18の機能

React server components
14:14 react server componentsの概要

クロージング
22:40 終わらなかったので次回に引き継ぎ

[after talk] HTTP/3回を終えての~エンジニアのアウトプットについて~

菊池翔 — Sat, 30 Jul 2022 11:00:26 +0900

HTTP/3の話を2回に分けて行っていたので感想含めた雑談をしました

サイボウズの技術的な発信を含めたエンジニアのアウトプットについての話などをカジュアルにしています

00:00 OP

00:20 HTTP/3の話を終えての感想

08:39 nus3のサイボウズトーク

13:35 アウトプットの重要性について

17:51 クロージング

HTTP/3の優先度制御・サーバプッシュについて

菊池翔 — Sun, 24 Jul 2022 16:00:10 +0900

今回は前のHTTP/3回で取り上げられなかった優先度制御とサーバプッシュについて話していきました
直近のChromeアップデートの話もしています

オープニング
00:00 OP
00:20 今回のテーマ
02:03 レンダリングブロック

優先度制御
03:44 優先度制御の前提
04:00 HTTP/2の優先度制御と問題点
06:36 HTTP/3の優先度制御（HTTP/3固有のものではない）
07:55 Webフロント実装レベルでの優先度制御
09:40 新しい優先度制御の挙動について考察

サーバプッシュ
13:39 サーバプッシュの前提
16:00 HTTP/2のサーバプッシュの問題点
18:15 HTTP/3のサーバプッシュ
19:58 103 early hints
23:10 preload scanner
24:33 CDNでのHTTP/3サーバプッシュ対応状況

クロージング
27:56 まとめと次回に向けて
放送に関するご感想や要望はtwitterのハッシュタグ#kanzenrikaichanまで

HTTP/3のハンドシェイクについて

菊池翔 — Tue, 19 Jul 2022 17:50:44 +0900

今回はHTTP/3のハンドシェイクにフォーカスをして話してみました
TCPの問題点やQUICに至る経緯を簡単にわかるような構成になってると思います

00:05 OP
00:29 今回のテーマ

前提
01:54 ベースになるTCP
04:14 3way ハンドシェイク
06:49 TLS ハンドシェイク

HTTP/3の広がり
10:08 HTTP/3でハンドシェイクがどう変わるか
17:52 HTTP/3で良くなったけど勘違いしないように
19:01 HTTP/3の展開について
20:09 まとめと次回に向けて

UUIDをPKにする前に

菊池翔 — Tue, 12 Jul 2022 20:25:57 +0900

今回は一人で寄り道的に技術の内容を紹介する回です
UUIDとデータベースのPrimaryKeyが引き起こす問題について簡単に話しています

オープニング
00:00 OP
00:42 今回のテーマ

UUIDの前提知識
01:02 UUIDとは
02:20 UUIDの各バージョン
04:27 UUIDの意義

『MySQLでプライマリキーをUUIDにする前に知っておいて欲しいこと』
08:00 DBのPKにUUIDを使うと
13:03 本件が引き起こす問題発生のポイントと対処

クロージング
14:38 まとめ

【参考】
UUID: https://scrapbox.io/ohbarye/UUID
MySQLでプライマリキーをUUIDにする前に知っておいて欲しいこと: https://techblog.raccoon.ne.jp/archives/1627262796.html
Ulid: https://github.com/ulid/spec

#UUID #database #primarykey #pk #データベース #データベース設計

Cloudflare / CDN / Workers について

菊池翔 — Sun, 03 Jul 2022 14:56:29 +0900

今回はCloudflareのサービスのひとつWorkersについて話しました
CDNに関連する全体の話もしていますので最後までお楽しみください

00:00 オープニング

1. 今回のトークテーマ
00:20 CloudflareWorkers
※ 切り出しで「CloudflareWorks」と言ってしまっていますがworkersのことです
00:38 トークテーマへのモチベーション

2. Cloudflareについて
02:43 Cloudflare
05:50 近いサービス
07:25 CDN
09:15 CDNの展望

3. CloudflareWorkersについて
12:46 CloudflareWorkers
17:47 エッジコンピューティング

4. 次回の放送に向けて
23:46 今回のテーマについてのまとめ
24:49 次回のトークテーマ

#Cloudflare #CloudflareWorkers #CDN #コラボ収録 #レター募集中 #エンジニア

チャンネルの開設理由と僕らのお仕事の話

菊池翔 — Wed, 29 Jun 2022 21:58:31 +0900

今回はチャンネル開設してから初めての収録になるので、チャンネル開設のモチベーションやパーソナリティの仕事の話を通して関心事が垣間見えるような話をしています

00:00 オープニング

1. チャンネル開設のモチベーション
00:20 チャンネル開設理由
01:50 どんな内容を扱うか
02:46 パーソナリティがどんな専門性なのか

2. パーソナリティの呼び方について
03:21 nus3について
04:20 k.kについて

3. 最近のお仕事ってどんなことやってるの？
04:58 nus3の仕事について
08:09 k.kの仕事について
15:02 将来のチームをどうするか
19:50 仕事についてアフタートーク

4. 次回の放送に向けて
20:26 次回の放送で取り扱うことについて

[参考]
kintoneの内部を（こっそり）Reactに置き換えるチームがあるってホント？
https://blog.cybozu.io/entry/2022/04/14/110000

#はじめまして #コラボ収録 #レター募集中 #エンジニア

完全理解.FM

Core Web Vitals FIDからINPに変わったよ話

Remix - Reactのフルスタックフレームワークについて -

2023年の振り返りと若くあり続けるために

フロントエンドテストはじめの一歩 登壇after rereview

VercelShip -Security, Collaborate, Ecosystem-

Vercel Storage ~Edgeにおけるストレージとサービス~

エンジニア転職小話

ChatGPTの登場と展望 part2

ChatGPTの登場と展望 part1

「Webの過去と未来はServer Side Rendering」を読んでみて…

記憶力と脳の関係・記憶力を高めるためには

大人の学習効率を高めるためのアンドラゴジー&ペタゴジーと記憶力

BuriKaigi 2023 nus3 after talk

「ソフトウェアアーキテクチャの基礎」イントロ レビュー Part2

「ソフトウェアアーキテクチャの基礎」イントロ レビュー Part1

2022年の放送振り返りと来年の抱負

Amazon EventBridge Pipesとイベント駆動アーキテクチャ

Next.js 13のアップデートをみてみよう part2

Next.js 13のアップデートをみてみよう part1

[雑談] 最近ご無沙汰だけどどうしてたん？

育休を半年間で申請した話 / 引き継ぎ・ドキュメンテーションの難しさ

frontend testing (E2E / VRT / snapshot / react-testing-library/ jest)

コンウェイの法則 / 逆コンウェイの法則と反転現象

SPAのセキュリティとAuth0の特徴

golangの勉強どうしている？技術勉強会ってどうしている？技術のインプットはどうしている？

ブランチ戦略とトランクベース開発

Next.js Layouts RFC / SSR Streaming & transition

Next.js Layouts RFC / React Server components

[after talk] HTTP/3回を終えての~エンジニアのアウトプットについて~

HTTP/3の優先度制御・サーバプッシュについて

HTTP/3のハンドシェイクについて

UUIDをPKにする前に

Cloudflare / CDN / Workers について

チャンネルの開設理由と僕らのお仕事の話

フロントエンドテストはじめの一歩登壇after rereview

「ソフトウェアアーキテクチャの基礎」イントロレビュー Part2

「ソフトウェアアーキテクチャの基礎」イントロレビュー Part1