Drag to look around · Click an object for detailsVinyl grooves, a tonearm and silver dials in a quiet listening corner.Individual glass panes, lead seams and a floral border.Open pages, a cup of tea and a quiet moment to read.
1982 · A room, a record Drag to orbit · Pinch to zoomDrag to orbit · Scroll to zoom · Esc to exit
自分だけのオペレーティングシステムを構築する方法
13 分Arch Linuxはミニマリズムを採用しており、ユーザーが望む機能を自由に構築できます。以下では、実際のマシンへのデプロイを例に、Arch Linuxを構築する方法を簡単に紹介します。必要なもの:コンピュータ、USBドライブ(または任意の...
Hydration を深く理解する:モダンフロントエンドフレームワークの「必要悪」?
7 分サーバーサイドレンダリング(SSR)は初期表示を高速化する一方、Hydration という概念とパフォーマンスコストをもたらします。それは何か、なぜ「操作の遅延」が生じるのか、そしてコミュニティはどのような代替策を模索しているのでしょうか。
WebAssembly(WASM)はフロントエンド開発をどう変えているのか
5 分ブラウザーで動く言語は、もはやJavaScriptだけではない。WebAssembly(WASM)はネイティブに近い性能を提供し、PhotoshopやFigmaのようなデスクトップ級の複雑なアプリケーションをWebへもたらしている。
View Transitions API でシームレスなページ遷移アニメーションを作る
5 分ページ遷移時の「白いちらつき」は、長年ユーザー体験を損なう問題でした。現在はブラウザネイティブの View Transitions API によって、わずか数行のコードで映画のようなページ遷移を実現できます。
React Server Components を深く理解する
5 分React Server Components(RSC)は、近年の React における最も重要なパラダイムシフトの一つです。本稿では、その中核概念、解決する問題、そしてアプリケーション構築の方法をどう変えるのかを詳しく解説します。
process.env.UNDEFINEDに別れを:型安全な環境変数をプロジェクトに導入する
5 分環境変数の欠落や形式の誤りは、実行時バグのよくある原因だ。Zodなどの検証ライブラリを使えば、起動時にすべての環境変数が存在し、正しい型であることを確認して、この種の問題を根本から防げる。
Vue 3.4アップデート:より簡潔なv-bind記法とさらなる性能向上
4 分Vue 3.4「🏀 Slam Dunk」が正式リリースされた。より効率的に書き直されたリアクティブシステムと安定版defineModel APIにより、双方向バインディングを持つコンポーネントの開発体験が大きく向上する。
さようならRome、こんにちはBiome:オールインワンフロントエンドツールチェーンの新たな選択肢
5 分Romeツールチェーンの構想は、かつて多くの開発者を魅了しました。商業化の失敗後、コミュニティはBiomeの名でその志を継承しました。Rustで書かれたこのオールインワンツールチェーンは、私たちの道具箱の新たな一員になれるでしょうか。
Bun 1.0正式リリース:Node.jsに挑むオールインワンランタイム
5 分2023年9月、Bun 1.0のリリースはJavaScriptコミュニティに波紋を広げました。ゼロから構築されたこのJavaScriptツールキットは、驚異的な速度と「オールインワン」設計を武器に、Node.jsの支配的地位へ正式に挑みます。
ネイティブCSS Nestingがついに登場!
4 分10年待ちました!Sass/Lessの中核機能であるセレクターのネストが、ついに主要ブラウザーでネイティブにサポートされました。プリプロセッサーに別れを告げ、より簡潔で直感的なCSSの書き方を迎えましょう。
Utility-First CSS の台頭:Tailwind CSS を例に
5 分BEM や CSS-in-JS の悩みから解放されるのでしょうか。Utility-First CSS の思想と、その代表的なフレームワークである Tailwind CSS は、近年フロントエンドコミュニティを席巻しています。その魅力はどこにあるのでしょうか。
次世代のE2Eテストツール:Playwright入門ガイド
5 分不安定なE2Eテストにうんざりしていないだろうか。Microsoft製のPlaywrightは、クロスブラウザー対応、自動待機、強力なデバッグツールによって、テスト自動化の新しい基準になりつつある。
Signals:フロントエンド・リアクティビティの新潮流
6 分SolidJS や Qwik から Preact、Svelte 5 まで、Signals は現代のフロントエンドフレームワークで高性能なリアクティブ更新を実現する中核的なパラダイムになりつつあります。本稿では、その仕組みとエコシステムへの影響を詳しく解説します。
APIドキュメントに別れを:tRPCでエンドツーエンドの型安全なアプリケーションを構築する
6 分フルスタックTypeScriptプロジェクトで、フロントエンドとバックエンドのデータ契約をどう同期させるか。tRPCはコード生成も中間スキーマも使わず、真のエンドツーエンド型安全性を実現する。
Astroを探る:コンテンツ駆動型サイトのために生まれたフレームワーク
5 分シングルページアプリケーション(SPA)が全盛の今、Astroは別の道を選び、コンテンツサイトの究極のパフォーマンスに注力しています。その「アイランドアーキテクチャ」にはどのような力があるのでしょうか。
SvelteKit 1.0 正式リリース:次世代の Web アプリケーション構築手法
4 分2 年以上にわたる開発を経て、SvelteKit 1.0 が 2022 年 12 月についに正式リリースされました。あらゆる規模の Web アプリケーション構築の未来と評される、その中核機能と設計思想を紹介します。
React 状態管理の変遷:Props Drilling から Zustand まで
7 分React の状態管理は、初期の「Props Drilling」から Redux による統一的な手法を経て、現在の Zustand など軽量ライブラリが花開く時代へと進化してきました。本稿では、その興味深い歴史を振り返ります。
WebpackからViteへ:スムーズな移行の旅
5 分Webpackプロジェクトの起動に1分、ホット更新に十数秒かかっていませんか。次世代のフロントエンドビルドツールを採用するときです。この記事では、WebpackからViteへ移行した手順と学びを記録します。
ゼロランタイム CSS-in-JS:開発体験と最高のパフォーマンスを両立する
5 分CSS-in-JS は優れた開発体験を提供しますが、実行時のパフォーマンスコストは常に議論の対象でした。ゼロランタイム CSS-in-JS はビルド時にスタイルを静的 CSS ファイルへ抽出し、両方の利点を実現します。
ES2022 新機能の概要:Top-Level Await、.at() など
4 分ECMAScript 2022(ES2022)が正式に公開され、実用的な新機能が数多く追加されました。本記事では Top-Level await や .at() メソッドなど、特に注目すべき更新を短時間で紹介します。
Redux のボイラープレートに別れを?軽量な状態管理ライブラリ Zustand 詳解
5 分Redux の煩雑さに尻込みしていませんか?Zustand は Hooks ベースの、極めてシンプルな React 状態管理手法を提供します。本稿では中核的な使い方と設計思想を解説します。
TurborepoでMonorepoプロジェクトを管理する
5 分プロジェクトが複雑になるにつれ、Monorepoは一般的なコード構成方法になりました。しかし、それに伴うビルド性能の問題をどう解決すればよいのでしょうか。Turborepoは、まさにそのために生まれた高性能ビルドシステムです。
SolidJS:真にリアクティブな JavaScript フレームワーク
5 分React のように見えますが、仮想 DOM はありません。SolidJS は革新的な細粒度リアクティブシステムによって、新たな水準のパフォーマンスを実現します。その仕組みを見てみましょう。
Fetch を本当に使いこなせていますか?AbortController によるリクエストのキャンセル
5 分現代の Web 開発では、Fetch API が HTTP リクエストを行う標準的な手段になっています。しかし、不要になったリクエストを適切にキャンセルする方法をご存じでしょうか。その答えが AbortController です。