社内向けに、フロントエンド関連のニュースや業務で発生したQ&A、利用しているライブラリなどの情報を定期的に書いています。
社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報をMatsuri-tech Frontend Weeklyとしてまとめています。内容は実務や趣味で使えそうなものを中心に扱っており、網羅的ではなく偏りがあります。
# Chrome 117
# New CSS features for entry and exit animations
transition-behavior: allow-discrete で離散的なCSSプロパティのアニメーションが可能になりました。次の例ではfade-outクラスが付いてから、0.25s後にdisplay: noneに切り替わります。
.card {
transition: opacity 0.25s, display 0.25s;
transition-behavior: allow-discrete;
}
.card.fade-out {
opacity: 0;
display: none;
}
また、@starting-style ルールで、要素の初期状態を指定できるようになりました。これにより今までanimationプロパティやJavaScriptなどを併用する必要があったアニメーションなどをtransitionのみで記述できるようになります。
/* IS-OPEN STATE */
dialog[open] {
translate: 0 0;
}
/* EXIT STATE */
dialog {
transition: translate 0.7s ease-out, overlay 0.7s ease-out, display 0.7s ease-out allow-discrete;
translate: 0 100vh;
}
/* BEFORE-OPEN STATE */
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
# Array grouping
配列のグループ化できるObject.groupByとMap.groupByが追加されました。
const inventory = [
{ name: "asparagus", type: "vegetables", quantity: 5 },
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "cherries", type: "fruit", quantity: 5 },
];
const result = Object.groupBy(inventory, ({ type }) => type);
/* Result is:
{
vegetables: [
{ name: 'asparagus', type: 'vegetables', quantity: 5 },
],
fruit: [
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "cherries", type: "fruit", quantity: 5 }
],
}
*/
# CSS Subgrid
Subgridを利用すると、グリッドを入れ子にして、親行列の行や列に子行列を整列させることが出来ます。Chromeのサポートにより、ほとんどのモダンブラウザで利用できるようになりました。
.card-group {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
justify-content: center;
}
.subgrid .card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
gap: 16px;
}
子行列内の位置を揃えたいようなケースで有用です。
# Next.js v13.5
2023年9月19日にNext.js v13.5がリリースされました。ローカル開発のパフォーマンス改善が主な内容です。サーバーの起動やHMRの高速化、メモリ使用量の削減、next/imageの改善などが行われました。
# Nuxt 3.7
Web StreamとResponseのサポート、head要素内のレンダリング最適化、Viteのアップデート及びマイナーバージョンの固定を解除、NitroやTypeScriptの設定のアップデートなどが行われました。
# Bun v1.0
Bun 1.0Bun is stable and ready for production.
Bun v1.0がリリースされました。Bunは、Node.js互換のランタイム、トランスパイラ、バンドラ、タスクランナー、パッケージマネージャー、bun testによるテスト機能など、JavaScript/TypeScriptのツールチェーンを統合したものです。
また多くのケースで、Node.jsよりも高速に動作します。
# Astro v3.0
Astroは、さまざまなフレームワークやライブラリに対応した静的サイトジェネレータです。
Astro v3.0では、レンダリング速度の向上や画像最適化に加え、View Transitionsが正式に追加され、ReactのFast Refreshが動作するようになりました。
# Astro Studio
Astroに特化したホスティングサービスとしてAstro Studioが発表されました。2024年初頭での一般公開が予定されています。
# Biome
いくつか事情で開発が滞っていたRomeを、コアチームがフォークし今後はBiomeとして開発を行なっていくことを発表しました。
# Announcing native npm support on Deno Deploy
Deno Deployがnpm:を介してnpmモジュールの実行をネイティブにサポートするようになりました。
# v0.dev - AI tool that is effectively Midjourney for React
Vercelが、プロンプトからshadcn/uiとTailwind CSSを利用したReactのコードが生成するAIツールをリリースしました。
v0 by VercelGenerate UI with simple text prompts. Copy, paste, ship.
# Lodash switch to TypeScript, Bun
Lodashが突如すべてのIssueとPRを閉じたため、Lodashが終わったというような誤報がありましたが、Lodashの作者のツイートを見るにTypeScriptとBunに移行する前段階として行なったようです。
https://x.com/jdalton/status/1703136792541798429?s=20
# Deno 1.37: Modern JavaScript in Jupyter Notebooks
Deno 1.37 がリリースされました。Jupyter Notebook で Deno を利用できるようになりました。他にもテストランナーやNode.jsとの互換性の改善なども行われています。
# VSCode v1.82 - Built-in port forwarding
VSCode v1.82で、ngrokのようにローカルサーバーにインターネットからアクセスする機能が追加されました。
# Node.js v16 EOL
Node.js v16が2023年9月11日にEOLを迎えました。現在のLTSはv18です。
# Next.Nav
Next.jsのアプリケーション構造を可視化するVSCode拡張。
# Ladle v3
LadleはReactに特化し、パフォーマンスを重視したStorybookの代替ツールです。v3ではデフォルトのトランスパイラがSWCに変更、CSS in JSのZero configサポートなどが行われました。