完全理解.FM

菊池翔
  • ٠٫٠ (٠)
  • التكنولوجيا
  • يتم التحديث أسبوعيًا

話題の技術トピックスやエンジニア環境の話を中心に、初級者·中級者が完全に理解したつもりになれるようなコンテンツを提供します！

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

    ٠٧‏/٠٤‏/٢٠٢٤

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

    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 によって詳細にキャッチできそう

    ٣١ من الدقائق
  2. Remix - Reactのフルスタックフレームワークについて -

    ١٠‏/٠٢‏/٢٠٢٤

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

    今回はnus3とReactのフレームワークであるRemixについて色々話してみました 00:00 OP 00:21 イントロ・Remixの概要 03:50 Remixに触れてみての所感 10:53 vs Next.js 23:20 Remixの気になりポイント 28:00 まとめと次回予告

    ٣٠ من الدقائق
  3. 2023年の振り返りと若くあり続けるために

    ٢٧‏/٠١‏/٢٠٢٤

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

    半年ぶりの収録だったので去年の振り返りと雑な会話を収録しつつ、筋肉は大事だという話をしました 00:00 OP 00:22 イントロ 01:40 nus3の振り返り 09:33 kkの振り返り 24:26 年に抗うために 28:38 まとめと次回予告

    ٣٣ من الدقائق
  4. フロントエンドテストはじめの一歩 登壇after rereview

    ٠٥‏/٠٨‏/٢٠٢٣

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

    今回はnus3とFLEXY主催の「フロントエンドテストはじめの一歩」に登壇した内容を含めて後日談や当日の話題について深掘りして話しています 00:00 OP 00:22 雑談(体調と車) 02:34 今日のテーマについて 04:28 収録の雰囲気 06:53 当日のトークテーマについて フロントエンドテストのハードル はじめ方 ボトムアップ: ex: 社内ジョブボード トップダウン: ミニマムPJからはじめる E2Eからはじめる 32:04 ED

    ٣٥ من الدقائق
  5. VercelShip -Security, Collaborate, Ecosystem-

    ٢٠‏/٠٧‏/٢٠٢٣

    VercelShip -Security, Collaborate, Ecosystem-

    今回は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 クロージングと次回のテーマ

    ٣٤ من الدقائق
  6. Vercel Storage ~Edgeにおけるストレージとサービス~

    ٢٨‏/٠٥‏/٢٠٢٣

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

    今回は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 クロージングと次回のテーマ

    ٣٢ من الدقائق
  7. エンジニア転職小話

    ٢٧‏/٠٥‏/٢٠٢٣

    エンジニア転職小話

    今回は僕自身が転職したことを踏まえて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 クロージング・次回について

    ٣٤ من الدقائق
  8. ChatGPTの登場と展望 part2

    ٢٩‏/٠٤‏/٢٠٢٣

    ChatGPTの登場と展望 part2

    このエピソードではChatGPTを使ったコーディングに対しての問題点、リスク要因、技術スキルについて話し合われています。ChatGPTは事前に学習されたデータに基づいて応答を生成するため、バイアスや再学習によるコストについても議論されています。しかしその一方で、個人がGPTを活用する方法や、プログラム開発者が必要とするスキルについての話もしています。また、ChatGPTを使ってコードを生成できるようになるとエンジニアの職務にどのような影響が出るか、これからの時代に備えて求められるスキルに注目し、自分のやりたいことを追求しながら学ぶことについての議論もしています。ChatGPTによってエンジニアの仕事がどのように変わっていくか興味深い話題です。 00:00 OP 00:20 今回のテーマ 05:20 ChatGPTを用いて生成したコードに関する懸念点 09:06 エンジニアリングで長生きする領域についての話題 13:31 ChatGPTを利用する上でのリスク、セキュリティについて、攻撃手法やバイアス 27:50 OpenAIの動向についての話題 30:13 クロージング

    ٣٢ من الدقائق
مشاهدة الكل (٣٤)

حول

話題の技術トピックスやエンジニア環境の話を中心に、初級者·中級者が完全に理解したつもりになれるようなコンテンツを提供します！

المعلومات

  • صناع العمل
    菊池翔
  • سنوات النشاط
    ٢٠٢٢ - ٢٠٢٤
  • الحلقات
    ٣٤
  • التقييم
    ملائم
  • حقوق النشر
    ℗ & © 2025 菊池翔
  • موقع البرنامج على الويب
    完全理解.FM