Frontend Now(旧座談会）2025/10/04

はじめに

こんにちは、25卒の櫻木です！今回、「Fusicフロントエンド座談会」が新しく「Frontend Now」に名前を変えて復活しました。「Frontend Now」では記事を共有して、それについてみんなでディスカッションしてます！

今後、森脇と櫻木でフロントエンド勉強会として色々な勉強会を開催し、記事にしていきたいと思います！！

お時間ある方は、是非勉強会にもご参加ください！

OGPのレスポンス処理について

Hono + Cloudflare Workers でOG画像を動的に生成する

zenn.dev

OGP がクロールされるたびに毎回レスポンスが返っており、サーバー負荷やキャッシュの理解に役立つ内容。

Next.jsの基本原理（表現変化）

Next.jsの考え方

Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。

zenn.dev

Next.jsの内部構造や考え方の説明が、最近のバージョンに合わせて少しずつ表現が変化している。今の理解をアップデートにいいと思う。

プッシュ通知理解におすすめの解説

https://x.com/gussietech/status/1982376234496786867?s=46

x.com

プッシュ通知の仕組みに関わったことがある人なら直感的に理解できる内容。実務経験者向けでわかりやすい。

Vitest 4：画像レベルの差分検知

Announcing Vitest 4.0

Vitest 4.0 Release Announcement

vitest.dev

差分があったときにテストを落とせるようになり、画像比較まで可能に。 見た目の変化を検知できる“激アツ”アップデート。

Next.js 16 アップデート

https://x.com/nextjs/status/1980797865946673274?s=46

x.com

Next.js 16で Turbopackがデフォルト有効化。 また middlewareがproxy化 され、より軽量で柔軟な構成に進化。

Expo MCP Server登場

Become an AI-native developer with the Expo MCP server

The Expo MCP Server preview connects your AI coding assistants to your Expo projects so they can access docs, automate workflows, and verify your app visually.

expo.dev

SDK54から利用可能になった公式「Expo MCP Server」。 AIネイティブ開発を支援し、パッケージ管理なども自動化できそう。

ChatKit：AIチャット実装が簡単に

https://platform.openai.com/docs/guides/chatkit#add-chatkit-to-your-frontend

platform.openai.com

chatkit.world

Discover the world

chatkit.world

ChatGPTのようなAIチャットを簡単に実装できるツール。 研修などでも使いやすく、裏側もDifyのように構築しやすい。

Cloudflare vs Vercel ベンチ比較

GitHub - t3dotgg/cf-vs-vercel-bench

Contribute to t3dotgg/cf-vs-vercel-bench development by creating an account on GitHub.

github.com

Vercelのインフラが刷新されて処理速度が大幅アップ。 Cloudflareとのベンチ比較でも「かなり速くなった」と話題。

Expo Awards

Expo App Awards

Celebrating the best apps built with Expo

expo.dev

Expo公式のアワード。 こうしたイベントに応募・提案していけるようなプロジェクト作りを目指したい。

Marumie プロジェクト

GitHub - team-mirai-volunteer/marumie: 政治資金の流れを透明性を持って公開するプラットフォームです

政治資金の流れを透明性を持って公開するプラットフォームです. Contribute to team-mirai-volunteer/marumie development by creating an account on GitHub.

github.com

サイト構成がしっかりしていて完成度が高い。 Cloudflareなどを活用しており、インフラ設計も堅実。 （振込手数料が多めなのは少し気になるポイント）

Vercel Design Guidelines

Web Interface Guidelines

Guidelines for building great interfaces on the web. Covers interactions, animations, layout, content, forms, performance & design.

vercel.com

AIに渡していい感じのレフやUI設計を自動生成させたら、親和性の高いNext案件などで使えるかもしれない。

Promise.try（新構文）

Promise.try() - JavaScript | MDN

Promise.try() 静的メソッドは、あらゆる種類のコールバック（返す、発生する、同期的、非同期的）を受け取り、その結果を Promise でラップします。

developer.mozilla.org

二重実行を防ぎつつ、早く終わった処理から順に進められるためパフォーマンス改善が見込める（Node最新必須）。

Expo SDK 54：Liquid Glass対応

Expo SDK 54 - Expo Changelog

Learn about the changes and how to upgrade

expo.dev

Expo SDK 54でiOS 26の「Liquid Glass」効果が公式対応され、導入がより手軽に。 ただしiOS限定のため、Androidなど他プラットフォームでは未対応。

Node.js v24 → v25 移行戦略

Node.js — Node.js v24.8.0 (Current)

Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

nodejs.org

Node.js v24 を基盤として運用しつつ、v25 で追加される新機能を段階的に取り入れて次世代へ移行する流れが推奨。

React Native 1.0に向けて

https://x.com/sebastienlorber/status/1963223874868261188?s=46

x.com

React Nativeが正式版の1.0に向けて準備中。 ついに安定フェーズへ移行していく流れになっている。

モダンフロントエンド研修

モダンフロントエンド 開発研修

2025年度リクルート エンジニアコース新人研修の講義資料です

speakerdeck.com

モダンフロントエンド研修として基礎内容が整理されていて、初心者や新人教育にちょうどいい。 実務者には少し物足りないけど、がっちり基礎固めには向いてる。

Claude Code カスタムスラッシュコマンド

Claude Codeとghコマンドで作るカスタムスラッシュコマンドn選

zenn.dev

Claude Code のカスタムスラッシュコマンド集。Copilot にも応用でき、開発効率が大幅に上がる。

フロントエンドの安全なトークン保管

【フロントエンド向け】JWTの安全な保管場所とCSRF・XSS対策の技術解説

zenn.dev

トークンをlocalStorageに保存するのはXSS攻撃に弱く安全ではない。 基本的にはHttpOnlyクッキーでサーバー管理するのが安全で推奨される方法。 フロント関連のセキュリティは今後共有していきたい。