はじめに
こんにちは、AI Shiftフロントエンドエンジニアの安井(@ytaisei_)です。
AI Shiftでは先月より週に1回フロントエンドトーク（フロントエンドに関する情報共有会）を行なっています。今月も様々なジャンルの技術に関する話題があったので共有したいと思います。
先月の内容はこちらです！
🦈 TypeScript 5.4がリリース
特にNoInfer Utility Typeの追加に着目していました。
ここではdefaultColorの型をcolorsの型に限定したいケースを想定します。
下の例における期待する挙動として"blue"はcolorsの配列に存在しないため型エラーを起こして欲しいところです。しかし、TSではCの型を"blue"も含めて推論してしまします。
function createStreetLight<C extends string>(colors: C[], defaultColor?: C) {
// ...
}
// Oops! This undesirable, but is allowed!
// C as "red" | "yellow" | "green" | "blue"
createStreetLight(["red", "yellow", "green"], "blue");
そこでNoInferを使用します。
すると、"blue"は推論せずに期待通りの型エラーを発生することができました。
function createStreetLight<C extends string>(colors: C[], defaultColor?: NoInfer<C>) {
// ...
}
createStreetLight(["red", "yellow", "green"], "blue");
// ~~~~~~
// error!
// Argument of type '"blue"' is not assignable to parameter of type '"red" | "yellow" | "green" | undefined'.
🐳 Rolldownが公開
将来的にViteで使われることを考慮されて開発されたRolldownが公開されました。
これによって、今までViteのバンドル方法がesbuildとRollupの二種類が使用され、開発ビルドと本番ビルドで異なるバンドラが使用されていた課題が解消される想定です。
🐢 Array.filterでType Guardが効くようになります
TypeScriptの次バージョン5.5からArray.filterでType Guardが効くようになるそうです。
これはTS開発者であれば全員が待ち望んでいた改善な気がしますね！
const result = [10, null, 20, 30].filter((value) => value != null);
// number[]に推論される
🦋 TanStack Startが開発中
弊社でも使用しているTanStack RouterとTanStack Queryですが、そのフルスタックフレームワークに当たる「TanStack Start」が開発中とのことです！
具体的なリリース予定などは明示されていませんが、今後の動向に期待ですね。
🐎 新たなpackage registory "JSR"が登場
まずはドキュメントがnpmに比べて整理されて見やすいことにとても惹かれます！
JSRが生まれた背景にはnpm registoryが誕生した当時からの変化が関係しています。
- ECMAScript modulesの登場と標準化
- Node.js以外のJSランタイムの存在
- TypeScriptの普及
これらの背景に対してnpm registoryでは十分に対応ができないためJSRが生まれました。
大きな特徴としては以下の点があります。
- Native TypeScript support
- ECMAScript modules only
- Cross-runtime support
🐁 Generative UIをサポートするVercel AI SDK
昨年の9月にVercelからv0がリリースされたことは記憶に新しいと思います。v0によって私たちは自然言語からReactのcomponentを生成できるようになりました。
Vercel AI SDKはLLMからリッチなComponentを生成するためのinterfaceを提供してくれます！
Vercel AI SDKによってこれまでLLMの生成結果がPlain TextかMarkdownなどに限定されていたところからリッチなUIを表示させることができるようになります。
🦨 プロパティがCSSのパフォーマンスに与える影響を確認できるサイト「CSS Triggers」
このサイトはCSSのどのプロパティがLayout・Paint・Compositeに影響を与えるかについて一覧的にまとめてくれています！
🐝 EmailJSでクライアントからメールを送信
EmailJSはクライアントからメールの送信機能を実装できるPaaSです。
メール送信といえばSendGridが有名ですが、SendGridはクライアントから直接アクセスすることは想定しておらず、サーバの開発が必要になります。
そこでEmailJSを使えばサーバーの開発なしに簡単にメール送信機能を実装できてとても便利です！
どのようにセキュリティリスクを抑えているかはこちらをご覧ください。
🐢 Nuxt 3.11がリリース
このマイナーバージョンは3.xにおいて最後のバージョンになる可能性が高いです。
具体的には以下の機能がリリースされました。
-
ブラウザにサーバーログが表示されるように
- サーバーサイドでの
console.logは今までブラウザのコンソールには表示されていませんでしたが、今回のリリースで表示されるように変更されました。
- サーバーサイドでの
-
usePreviewModeによるプレビューモード- 新しく
usePreviewModeコンポーザブルが追加されました。これによりNuxtアプリケーションでプレビューモードを簡単に使用できるようになりました。 - https://nuxt.com/docs/api/composables/use-preview-mode
- 新しく
-
ミドルウェアのルートルール
- アプリケーションの（Nitroルートではなく）Vueアプリ部分でページパスのミドルウェアを定義できるようになりました。
- https://nuxt.com/docs/guide/concepts/rendering#route-rules
nuxt.config.tsexport default defineNuxtConfig({ routeRules: { '/admin/**': { // or appMiddleware: 'auth' appMiddleware: ['auth'] // <-- これ }, '/admin/login': { // You can 'turn off' middleware that would otherwise run for a page appMiddleware: { // <-- これ auth: false } }, }, }) -
サーバーおよびクライアント専用ページが導入
- サーバーとクライアント専用のページがNuxtに導入されました！
.server.vueまたは.client.vueというサフィックスをページに追加することで自動的に処理できるようになりました。 - https://nuxt.com/docs/guide/directory-structure/components#client-components
- https://nuxt.com/docs/guide/directory-structure/components#standalone-server-components
- サーバーとクライアント専用のページがNuxtに導入されました！
-
cache-busting
- Nuxtの
appManifestを無効にしていない場合、ペイロードを自動的にcache bustingするようになりました。
- Nuxtの
🦍 WebKit Features in Safari 17.4
Safari 17.4で使用されているWebkitのリリースがありました！
Vertical writing modesという縦書きのフォーム制御のサポートやCSS Scopingのサポートなどが入っています！
最後に
AI Shiftではエンジニアの採用に力を入れています！
少しでも興味を持っていただけましたら、カジュアル面談でお話しませんか？
（オンライン・19時以降の面談も可能です！）
【面談フォームはこちら】
Discussion