PWA-checkは、Progressive Web App（PWA）の健全性を自動でチェックするツールです。マニフェスト設定やサービスワーカーの動作、HTTPS対応など、PWAとしての要件を満たしているかをスキャンし、改善点をレポートします。このリポジトリはpwa-todayが公開するオープンソースプロジェクトです。
TAG · #WEB-DEVELOPMENT
#web-development
30 件
HOTNESS
シャッフルボタンを作る
0.5著者は自身のメモブログに実装した「シャッフル」機能の改良について詳しく解説。以前は全ページに全ノートIDを埋め込んでいたが、ビルドが遅くなる問題があった。そこで、単一のHTMLページにシャッフルロジックを集約する手法に変更。ユーザーが「シャッフル」ボタンを押すと専用ルートに遷移し、「Shuffling…」というフィードバック表示と共に、意図的に300msの遅延を入れてからランダムなノートへ移動する仕組みを採用した。昔のCDプレイヤーのシャッフル機能のような体験を再現したという。
2026年に注目すべきフロントエンドライブラリとツールをまとめたリソースです。主要なUIコンポーネントライブラリ、ビルドツール、テストフレームワーク、状態管理ライブラリなど、フロントエンド開発者が知っておくべき最新のエコシステムを網羅的に紹介しています。
Gsxは、Go言語向けのJSXスタイルのテンプレートエンジンです。Goのコード内でHTML構造を直感的に記述でき、型安全でコンパイル時にチェックが行われるため、テンプレート関連のバグを減らせます。Reactに似た構文で、サーバーサイドのGoアプリケーションにJSXの利便性をもたらします。
2007年当時の懐かしい動画サイトの雰囲気を再現したCastIn2007を公開。レトロなUIデザインとシンプルな動画再生機能を備え、昔のウェブ体験を現代に蘇らせるプロジェクトです。
2005年の伝説的なスクリーンキャスト。Ruby on Railsの作者であるDavid Heinemeier Hansson（DHH）が、たった15分で完全に機能するブログエンジンをゼロから構築する様子を紹介。Railsのスキャフォールディング、Active Record、コントローラー、ビューの各機能を駆使し、当時のウェブ開発に革命をもたらした画期的なデモンストレーション。
SaaS Pegasusのオープンソース版であるDjangoボイラープレート。Djangoフレームワークを使用したSaaSアプリケーション開発のためのスターターテンプレートを提供します。
a11yShiny は、R Shiny アプリケーションのアクセシビリティ（a11y）を向上させるためのツールです。このパッケージを利用することで、スクリーンリーダーやキーボード操作など、さまざまなユーザーが Shiny アプリをより快適に利用できるようになります。アクセシブルなUIコンポーネントやチェック機能を提供し、Web Content Accessibility Guidelines（WCAG）に準拠したウェブアプリ開発を支援します。
40種類のCSSツールをパフォーマンスと学習曲線の観点から徹底的にテスト。初心者から上級者まで、最適なツール選びに役立つ実践的な比較結果を紹介する。
この記事では、著者がAIアシスタントに頼らずにウェブサイトを構築し続ける理由と、そのプロセスから得られる喜びについて語っている。コードを一から書き、デザインを手作業で調整し、問題を自分で解決することに依然として価値を見出している。AIツールが普及する現代でも、手作りのウェブ開発には独自の創造性と達成感があると主張する。
WebKitチームは、Web開発者がSafariブラウザと直接連携できる新しいMCP（Model Context Protocol）サーバーを発表しました。このツールにより、SafariのWeb Inspector機能をプログラムから操作でき、ページの検査、JavaScriptの評価、ネットワークアクティビティの監視、レイアウトやパフォーマンスのデバッグなどが可能になります。開発者はこのサーバーを通じて、AIアシスタントや自動化スクリプトからSafariの強力なデバッグ機能にアクセスできるようになります。
Safari Technology Preview 247で、Web開発者向けのModel Context Protocol (MCP)サーバーが導入された。このSafari MCPサーバーは、エージェントをSafariブラウザウィンドウに接続し、DOM、ネットワークリクエスト、スクリーンショット、コンソール出力へのアクセスを可能にする。Anthropicが公開したオープンプロトコルであるMCPは、Claudeだけでなく、Gemini CLI、Cursor、GitHub Copilotなど様々なツールで利用されている。
PHP 3.0 の正式版がリリースされました。本バージョンは大幅に再設計され、モジュール方式の拡張が可能になり、Apache モジュールとしても動作します。パフォーマンス向上と多数の機能追加が行われています。
ES2026で導入される注目のJavaScript新機能を網羅的に解説。Promiseの改善やパターンマッチング、レコード・タプル型などの最新仕様について、実用的なコード例とともに詳しく紹介する。開発者が知っておくべき変更点をわかりやすくまとめた内容。
CSS Containmentは、ブラウザに特定の要素のレイアウトやスタイルの計算範囲を制限するよう指示するCSSプロパティです。これにより、大規模なDOMを持つページや動的にコンテンツが変化するUIにおいて、不要な再計算を防ぎ、レンダリングパフォーマンスを大幅に向上させることができます。containプロパティの各値（layout、paint、size、styleなど）の違いと、実際の実装例を交えながら解説します。
この記事では、2010年代以降にJavaScriptに追加された主要な機能を包括的に解説しています。let/const、アロー関数、テンプレートリテラル、分割代入、スプレッド演算子、クラス、Promise、async/await、モジュールなど、モダンなJavaScript開発に欠かせない構文や概念を、従来の書き方と比較しながら学べる入門的内容です。
最近、ブログのコメントで「もっと包括的な言語にしてほしい」と要望された。文化的前提がわからないので、より世界的に通用する表現にしてほしいとのこと。しかし筆者はそれを断固拒否。すべての投稿は最初に「<html lang=en-GB>」と宣言しており、これは単なるおしゃれではなく、自分の言語と文化の選択を明確にするための意味があるのだと主張する。
Vite+ Beta
4.0Vite+ Beta is announced on voidzero.dev, introducing an enhanced version of the Vite build tool with additional features and improvements for faster development workflows.
ProseMirrorの生みの親であるMarijn Haverbeke氏が、新しいリッチテキストエディタ「Wordgard」のバージョン0.1を公開した。Wordgardは、ドキュメント編集の柔軟性と拡張性を重視しつつ、よりシンプルで直感的なAPIを提供することを目指している。ProseMirrorの設計思想を受け継ぎながら、軽量で高速な動作を実現した次世代エディタとして注目される。
CSS Logical Properties Converter is a tool that helps developers convert physical CSS properties (like left, right, top, bottom) to logical properties (like inline-start, inline-end, block-start, block-end). This conversion enables better support for different writing modes and internationalization, making layouts more adaptable to various languages and reading directions.
Chromeが提案する新しいHTML要素<usermedia>は、ウェブアプリケーションがカメラやマイクなどのユーザーメディアデバイスにアクセスするための宣言的な方法を提供します。従来のJavaScriptベースのgetUserMedia() APIに代わる、よりシンプルでアクセスしやすい代替手段として設計されており、HTMLマークアップのみでメディアストリームの取得と制御が可能になります。
Hanami 3.0 has been officially released, marking a major milestone for this Ruby web framework. This version brings full feature completeness, improved performance, and a refined developer experience, making it a compelling choice for building modern web applications.
This website humorously declares itself "down" as a joke — when you visit, it simply displays a message saying the website is down, playing on the frustration users feel when they encounter inaccessible sites.
卒業制作でTelegramとDiscordを組み合わせたようなメッセージングアプリ（Web版・iOS版）を作りたいと考えていますが、それがどのような問題を解決するのか不明で悩んでいます。Claudeからは、学生向けメッセンジャーに内部ゲーム経済の不正防止システムを組み込む案や、スケーラブルなリアルタイム状態同期、AIレポート機能などを提案されましたが、これらのアイデアに意味があるのか疑問を感じています。
カスタムセレクト要素の高さ設定における「ちょうどいい」バランスを探る記事。Jake Archibaldが、セレクトメニューのドロップダウンが短すぎず長すぎず、ユーザーにとって最適な高さを動的に決定する手法について考察している。
Clockjumperは、AIコード生成機能を活用して開発されたシンプルなタイムゾーン変換ツールです。複数のAI（ChatGPT、Claude、Lovable）を組み合わせた「Intervibed project」という独自のワークフローで構築。バックエンドやAPIの複雑さを排し、基本的な時間の加減算のみで動作します。著者はAIツールのUI/UX改善や「プロンプト疲れ」についての問題提起も行っています。
CSSの状態管理（:hover、:focus、:checkedなど）とJavaScriptのイベント処理の間にある境界線が、近年のCSS機能（:has()、カスタムプロパティ、アンカーポジショニングなど）の進化によって曖昧になりつつある。本記事では、これまでJavaScriptに依存していたインタラクションの一部をCSSだけで実現できるようになった事例を紹介し、それぞれの適切な使い分けについて考察する。
メタタグを監視する方法
1.0メタタグはSEOやSNSでのシェア表示に影響を与える重要な要素です。本記事では、メタタグの変更を自動監視し、ウェブサイトのパフォーマンス低下を防ぐための効果的な方法とツールについて解説します。
1996年に出版された本書は、Jackson Structured Programming（JSP）による実践的なプログラム設計手法を解説する。データ構造からプログラム構造を導き出すJSPの原理を、実例を通して体系的に学ぶことができる。ソフトウェア設計の基礎を固めたい開発者向けの古典的参考書である。
ShopifyはEコマース分野で強力なプラットフォームですが、その真価を引き出すには専門的な開発サービスが不可欠です。本記事では、ストアのカスタマイズ、テーマ開発、アプリ統合、パフォーマンス最適化など、成功するオンラインビジネスを構築するためのShopify開発サービスの選び方と注目すべきポイントを解説します。
次の 30 件を読み込む最終更新 —