Web Frontend

フロントエンド (Slack

30件 · 5/5 sources ok

CSS-Tricks1ヶ月前
The State of CSS Centering in 2026
Despite the countless number of online resources, it’s easy to get confused when trying to center an element. There are documented solutions, but do you really understand why the code you picked works? Let's look at the current state of centering options today in 2026. The State
css-tricks.com
CSS-Trickscss-tricks.com
The State of CSS Centering in 2026 | CSS-Tricks
Despite the countless number of online resources, it’s easy to get confused when trying to center an element. There are documented solutions, but do you really understand why the code you picked works? Let's look at the current state of centering options today in 2026.
Zennの「frontend」のフィード1ヶ月前
React × Tailwind CSS 入門 #04｜useEffectを理解する｜データ取得と副作用の基礎
はじめに前回は、useStateを使ってクリックで動くUIを作りました。今回は、React初心者の最大の関門とも言われる useEffect（ユーズエフェクト）を学びます。 useEffectは、コンポーネントの中で「副作用（Side Effect）」を扱うための機能（Hook）です。「副作用」とは、画面を描画する（レンダリング）こと「以外」の処理全般を指します。具体的には以下のようなものです：外部のAPIからデータを取得するタイマーをセットするブラウザのタブのタイトルを変更するこれらはすべてuseEffectの管轄になります。AIにコン
zenn.dev
Zennzenn.dev
React × Tailwind CSS 入門 #04｜useEffectを理解する｜データ取得と副作用の基礎
Zennの「frontend」のフィード1ヶ月前
Claude Code Review を GitHub Actions に5分で導入する
本記事は Next.js / TypeScript のフロントエンド開発を前提としていますが、構成自体はリポジトリの言語を問わず流用できます。はじめに AI でコードを書ける時代になって便利になった反面、コード品質で気になる点が増えてきました。適切にコンポーネント化されていない共通化されていないデッドコードがある AI によって開発速度が上がった分、品質の低いコードも量産されやすくなっているという負の側面があると感じています。そこで今回、Claude Code のサブスクリプションプラン（Max プラン）の枠内で CI からコードレビューを回す
zenn.dev
Zennzenn.dev
Claude Code Review を GitHub Actions に5分で導入する
developer.chrome.com: Blog1ヶ月前
What's new in web extensions: I/O 2026 recap
Another Google I/O is behind us and we have covered all the exciting extensions updates!
developer.chrome.com
Chrome for Developersdeveloper.chrome.com
What's new in web extensions: I/O 2026 recap | Blog | Chrome for Developers
Another Google I/O is behind us and we have covered all the exciting extensions updates!
Zennの「frontend」のフィード1ヶ月前
スクロール連動UIの取りこぼし問題: IntersectionObserverから状態駆動への切り替え
はじめに LPや採用ページなどでよく見かける、スクロール連動UIの実装で不具合が出ました。「ビューポート中央に来たカードを active 化、別の要素（写真・画像・テキスト等）と連動切替」というありがちな仕掛けで、最初は IntersectionObserver で実装していました。しかし高速スクロール時に：「2を飛ばして4にジャンプ」する一番上に戻しても「1まで戻りきらず2のまま」になるという症状が出ました。本記事では原因と、scroll 直接観測への切り替えで解決した話を書いていきます。旧実装（IntersectionObserver）
zenn.dev
Zennzenn.dev
スクロール連動UIの取りこぼし問題: IntersectionObserverから状態駆動への切り替え
Mozilla Hacks – the Web developer blog1ヶ月前
Announcing Web Serial Support in Firefox
Support for Web Serial in Firefox 151 for Desktop Firefox can now connect directly to microcontrollers, development boards, 3D printers, power meters, and other serial-connected hardware from the web. Starting in Firefox 151 for Desktop, support for the Web Serial API allows web
hacks.mozilla.org
Mozilla Hacks – the Web developer bloghacks.mozilla.org
Announcing Web Serial Support in Firefox – Mozilla Hacks - the Web developer blog
Support for Web Serial in Firefox 151 for Desktop Firefox can now connect directly to microcontrollers, development boards, 3D printers, power meters, and other serial-connected hardware from the web. Starting ...
Zennの「frontend」のフィード1ヶ月前
React × Tailwind CSS 入門 #03｜useStateで動くUIを作る｜カウンターとトグルで基礎を理解する
はじめに前回は、Reactの基本である「コンポーネント分割」と「Tailwindの頻出クラス」を学びました。今回は、Reactの最重要機能である useState を使って、クリックしたら動くUIを作っていきます。静的なHTMLと違い、Reactが本領を発揮するのはここからです。AIにコンポーネントを作らせるときも、この「状態（state）」の概念を理解していないと、意図した動きを正確に指示できません。ここをマスターして、AIへのプロンプト精度をさらに一段階引き上げましょう。 useStateとは？ useState（ユーズステート）は、コンポーネ
zenn.dev
Zennzenn.dev
React × Tailwind CSS 入門 #03｜useStateで動くUIを作る｜カウンターとトグルで基礎を理解する
Zennの「frontend」のフィード1ヶ月前
Next.js の `output: 'export'` で動的ルートのページが生成されなかった話
はじめに Next.js + S3 + CloudFront の構成で静的サイトを運用しています。 SEO 対策として動的ルート（/[battle_id]）に generateStaticParams を実装したところ、ビルドは成功するのにページが一向に生成されないという問題に遭遇しました。原因を特定するまでに相当な時間がかかったため、同じ罠にはまる人を減らすべく記事にします。 ↓これを作成中の話 https://vsvs.live/ 構成フロントエンド: Next.js 14 (App Router, output: 'export') ホスティン
zenn.dev
Zennzenn.dev
Next.js の `output: 'export'` で動的ルートのページが生成されなかった話
Zennの「frontend」のフィード1ヶ月前
ピクセルパーフェクトは「意図の一致」を追う作業
! この記事は、note で公開した「ピクセルパーフェクトは『意図の一致』を追う作業」を、Zenn 向けに短く再構成したものです。元記事では制作現場での考え方を少し広めに書いていますが、この記事ではフロントエンド実装時の考え方に寄せて整理しています。ピクセルパーフェクト、いわゆるピクパの話です。 SNS では「必要か不要か」「1px まで合わせる意味があるのか」みたいな話になりがちですが、実務で見ているポイントは少し違います。自分の中では、ピクパは 1px の絶対値を合わせる作業というより、カンプ幅における意図の一致を作る作業です。ここで前提
zenn.dev
Zennzenn.dev
ピクセルパーフェクトは「意図の一致」を追う作業
Zennの「frontend」のフィード1ヶ月前
GoogleのModern Web Guidanceに学ぶ、モダンCSSのDos / Don'ts大全
Googleがリリースした「Modern Web Guidance」スキルを使うと、AIエージェントが最新のWeb機能でコードを書けるようになります。 https://zenn.dev/ubie_dev/articles/modern-web-guidance スキルが参照するガイドラインはMarkdownで書かれており、Googleが推奨するWeb開発のDos / Don'ts、つまり「やるべきこと・やってはいけないこと」がまとまっています。Googleお墨付きの、モダンなフロントエンド開発の知見が詰まっています。AIエージェントを使う・使わないにかか
zenn.dev
Zennzenn.dev
GoogleのModern Web Guidanceに学ぶ、モダンCSSのDos / Don'ts大全
developer.chrome.com: Blog1ヶ月前
Modernize authentication with passkeys, digital credentials, and more
Recap of how to modernize authentication with passkeys, digital credentials, and more, based on the Google I/O 2026 session.
developer.chrome.com
Chrome for Developersdeveloper.chrome.com
Modernize authentication with passkeys, digital credentials, and more | Blog | Chrome for Developers
Recap of how to modernize authentication with passkeys, digital credentials, and more, based on the Google I/O 2026 session.
developer.chrome.com: Blog1ヶ月前
New in Chrome at Google I/O 2026
All the talks from Google I/O 2026 are now available on demand.
developer.chrome.com
Chrome for Developersdeveloper.chrome.com
New in Chrome at Google I/O 2026 | Blog | Chrome for Developers
All the talks from Google I/O 2026 are now available on demand.
Zennの「frontend」のフィード1ヶ月前
ホテルの客室向けインフォメーションシステムを内製してみた
こんにちは。7gardenというホテル運営会社でテックリードを担当しているKeitaです。ホテル宿泊時、客室テレビに館内情報等が表示されていることがあると思います。弊社ではこれをホテルインフォメーションシステムと呼んでおり、今回はこのシステムを内製したお話です。ホテル現場からの意見も踏まえたコンテンツ設計、ハードウェアの選定、ソフトウェア側の技術スタックの工夫などの要素が重なり、これまでのWeb開発では味わえない、ホテル運営会社ならではのやりがいのある業務となっています。 Hotel Mei用のホテルインフォメーションシステム背景：ゲスト体験の向上
zenn.dev
Zennzenn.dev
ホテルの客室向けインフォメーションシステムを内製してみた
Zennの「frontend」のフィード1ヶ月前
Vue + SPA + API
axiosのインストール Vue.jsでAPI通信をするために、axiosをインストール npm install axios API叩くボタンを作成ボタンを押したら、APIを叩くコンポーネントを作ります。今回叩くAPIは、学習用に無料公開されている架空のデータ「JSONPlaceholder」を使います。 src/views/HomeView.vue src/views/HomeView.vue import { useApi } from '../components/useApi' import FetchButton fr...
zenn.dev
Zennzenn.dev
Vue + SPA + API
Zennの「frontend」のフィード1ヶ月前
Vue.jsでSPA
Vueのプロジェクト作成フロントエンドでVue.jsを使ってSPA(シングルページアプリケーション)を実装することになりました。備忘録です。 1. Node.jsのインストール頑張ってインストールしてください。 2. プロジェクト作成 npm create vue@latest Project name: │ frontend │ ◇ Select a framework: │ Vue │ ◇ Select a variant: │ Official Vue Starter ↗ Ok to proceed? (y) y ┌ Vue.js - The
zenn.dev
Zennzenn.dev
Vue.jsでSPA
CSS-Tricks1ヶ月前
Stack Overflow: When We Stop Asking
It still hits like a ton of bricks to see the steep decline in Stack Overflow questions. What does that mean about learning in our industry? Stack Overflow: When We Stop Asking originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as w
css-tricks.com
CSS-Trickscss-tricks.com
Stack Overflow: When We Stop Asking | CSS-Tricks
It still hits like a ton of bricks to see the steep decline in Stack Overflow questions. What does that mean about learning in our industry?
Zennの「frontend」のフィード1ヶ月前
React × Tailwind CSS 入門 #02｜コンポーネント分割とよく使うTailwindクラス10選
はじめに前回は、React × Tailwind CSS v4の環境構築を行いました。今回は実際に手を動かしながら、Reactの要である「コンポーネント」という考え方と、Tailwindで実務的によく使うクラスを10個まとめて身につけます。 AIにコードを書かせるとき、この「コンポーネント」の概念を理解していないと、指示がぼんやりしてしまいます。ここを押さえておくと、AIへのプロンプト（指示）の精度が格段に上がります。コンポーネントとは？ Reactでは、UI（画面の見た目）を「部品（コンポーネント）」に分けて管理します。例えばこんなイメージです
zenn.dev
Zennzenn.dev
React × Tailwind CSS 入門 #02｜コンポーネント分割とよく使うTailwindクラス10選
Zennの「frontend」のフィード1ヶ月前
Vitestの設定を調整してテスト速度を改善してみる
どうもこんにちは、たくびーです。業務のかたわらフロントエンドのテスト速度改善に取り組んでいます。先日はボトルネックとなるバレルファイルを特定し解消することで高速化を行いました。 https://zenn.dev/socialplus/articles/bfb19c5f98ae32 今回はちょっと違うアプローチでテスト速度の改善に挑戦してみました。 ! 執筆時点でのVitestのバージョンはv4.1.5です。コードベースが大きくなるほどVitestが遅く感じる？ Vitestは高速なテストランナーとして知られています。実際、Jestと比べてかなり速い
zenn.dev
Zennzenn.dev
Vitestの設定を調整してテスト速度を改善してみる
Zennの「frontend」のフィード1ヶ月前
Reactにおける UI = f(state) をCSSのみで翻訳してみる
! この記事は毎週必ず記事がでるテックブログ Loglass Tech Blog Sprint の144週目の記事です！ 3年間連続達成まで残り15週となりました！ 0. はじめに「React の useState も Context も、最近の CSS だけで再現できるんじゃないか」と思いついて、ちょっとした自由研究としてやってみた記録です。下のマルチステップウィザード、JavaScript を 1 行も書かずに動いています。「次へ」を押すとステップが進み、Progress bar の幅が連続的に伸び、現在のステップに応じて表示パネルとボタンが
zenn.dev
Zennzenn.dev
Reactにおける UI = f(state) をCSSのみで翻訳してみる
Zennの「frontend」のフィード1ヶ月前
OpenAPI codegen どれ選ぶん？ openapi-typescript / hey-api / Orval / Kubb 比較
みなさん、こんにちは！ OpenAPI codegen は便利やと思っていたのに、気づいたら生成ファイルの森で迷子になっていたフロントエンドエンジニアの @nyaomaru です！ 🌳🌳🌳 API client を手書きするのはしんどい。型欲しいリクエスト関数も欲しいできれば TanStack Query hooks も欲しい MSW mock も出たら嬉しい Zod schema とか、もう全部 OpenAPI から生えてくれたらいいのにって気持ちになることありますよね？そこで OpenAPI codegen が活躍します。ただ、実際
zenn.dev
Zennzenn.dev
OpenAPI codegen どれ選ぶん？ openapi-typescript / hey-api / Orval / Kubb 比較
Zennの「frontend」のフィード1ヶ月前
PenpotとReactを同じ契約で運用するデザインシステムの作り方
! この記事は、Growth Lab の docs/design-system/operation-guide.md をもとに、Penpot と React 実装を同じ契約で運用するための考え方を Zenn 向けに整理したものです。想定読者は、デザインツールと React 実装のズレを減らしたいフロントエンドエンジニア、または AI に UI 実装を任せる前提でデザインシステムを整えたい人です。デザインシステムを作るとき、見た目のライブラリと実装が別々に育つことがあります。 Penpot にはコンポーネントがある。 React にもコンポーネントがあ
zenn.dev
Zennzenn.dev
PenpotとReactを同じ契約で運用するデザインシステムの作り方
Zennの「frontend」のフィード1ヶ月前
React × Tailwind CSS 入門 #01｜最新v4で環境構築からHello Worldまで【初学者向け】
はじめに AIがコードを書いてくれる時代になりました。私自身、日々のコーディングでAIツールをフル活用しています。でも、「基礎を理解していないと、AIの出力を正しく評価できず、本当の意味で使いこなせない」と痛感しています。このシリーズは、ReactとTailwind CSSの基礎から、自分が学びながらリアルにコードを書いていく記録です。初学者の目線で、詰まったところや「なぜこう動くのか」も正直に書いていきます。今回は第1回として、最新の Tailwind CSS v4 を使った環境構築をサクッと終わらせます。この記事でやること Node.j
zenn.dev
Zennzenn.dev
React × Tailwind CSS 入門 #01｜最新v4で環境構築からHello Worldまで【初学者向け】
Zennの「frontend」のフィード1ヶ月前
AI girlfriend appのキャラクター状態をフロントエンドで扱う設計
前提 AI girlfriend appやAI companionサービスでは、キャラクターの状態をバックエンドだけでなくフロントエンドでも扱いやすい形にしておくと、UIの一貫性が保ちやすくなります。ここでいうキャラクター状態とは、表示名、口調、会話トーン、ユーザーとの距離感、現在の会話モードなどです。落ち着いた会話体験を提供するAIコンパニオンのようなプロダクトでは、これらの状態がUIと応答生成の両方に影響します。状態を分けるフロントエンドでは、永続的なプロフィールとセッション中だけの状態を分けると扱いやすくなります。 type Characte
zenn.dev
Zennzenn.dev
AI girlfriend appのキャラクター状態をフロントエンドで扱う設計
Zennの「frontend」のフィード1ヶ月前
React CompilerをannotationモードとOxlintで漸進的に導入する
React CompilerをannotationモードとOxlintで漸進的に導入するはじめにこんにちは。ぷーじ（@yug1224）です。約7,500ファイルのTypeScriptプロジェクトにReact Compilerを導入しました。本記事では、annotationモードとOxlintで、all モードの一括適用ではなく、段階的に Compiler を広げた進め方を紹介します。導入の背景最初は "all" モードをローカルで気軽に試してみたのですが、TanStack Table v8を使ったテーブルが軒並み壊れ、react-hook-fo
zenn.dev
Zennzenn.dev
React CompilerをannotationモードとOxlintで漸進的に導入する
developer.chrome.com: Blog1ヶ月前
Introducing the HTML-in-Canvas API origin trial
Learn about the HTML-in-Canvas origin trial in Chrome, and how it can help bring the DOM to your Canvas-driven applications.
developer.chrome.com
Chrome for Developersdeveloper.chrome.com
Introducing the HTML-in-Canvas API origin trial | Blog | Chrome for Developers
Learn about the HTML-in-Canvas origin trial in Chrome, and how it can help bring the DOM to your Canvas-driven applications.
developer.chrome.com: Blog1ヶ月前
Declarative partial updates
Learn about new out-of-order streaming capabilities and the renewed HTML insertion and streaming methods available for testing from Chrome 148
developer.chrome.com
Chrome for Developersdeveloper.chrome.com
Declarative partial updates | Blog | Chrome for Developers
Learn about new out-of-order streaming capabilities and the renewed HTML insertion and streaming methods available for testing from Chrome 148
developer.chrome.com: Blog1ヶ月前
Streamline your AI coding workflow with Chrome DevTools for agents 1.0
Chrome DevTools for agents provides your coding agent with the visibility it needs to verify, debug, and optimize code in real time.
developer.chrome.com
Chrome for Developersdeveloper.chrome.com
Streamline your AI coding workflow with Chrome DevTools for agents 1.0 | Blog | Chrome for Developers
Chrome DevTools for agents provides your coding agent with the visibility it needs to verify, debug, and optimize code in real time.
developer.chrome.com: Blog1ヶ月前
15 updates from Google I/O 2026: Powering the agentic web with new capabilities, tools, and features in Chrome
Learn about the key announcements from Google I/O 2026.
developer.chrome.com
Chrome for Developersdeveloper.chrome.com
15 updates from Google I/O 2026: Powering the agentic web with new capabilities, tools, and features in Chrome | Blog | Chrome for Developers
Learn about the key announcements from Google I/O 2026.
Zennの「frontend」のフィード2ヶ月前
Storybook の VRT で「1pxも見た目を変えない」を担保して AI にリファクタリングを任せる
はじめに既存の Web ページをリファクタリングするとき、一番怖いのは「内部実装はきれいになったけど、見た目が少し変わってしまった」という事故です。特にフロントエンドでは、次のような変更がよくあります。 JSX が大きくなりすぎたのでコンポーネントに分割したい条件分岐が散らばっているので純粋関数に切り出したいデータ取得と表示ロジックを分離したいページ単位の実装を保守しやすい構造に変えたいこれらは機能追加ではなく、基本的には見た目を変えないための変更です。しかし、DOM 構造や CSS の当たり方が少し変わるだけで、余白・改行・表示順・レス
zenn.dev
Zennzenn.dev
Storybook の VRT で「1pxも見た目を変えない」を担保して AI にリファクタリングを任せる
Zennの「frontend」のフィード2ヶ月前
「基本情報技術者試験をRPGで攻略する無料Webアプリを個人開発した話」
はじめに基本情報技術者試験(FE)の勉強、続かなくないですか？過去問を黙々と解くだけだと、どうしてもモチベが維持できない。「もっとゲーム感覚で続けられないかな」と思って、過去問をRPGバトル形式で解ける無料Webアプリを個人開発しました。 🔗 公開URL: https://it-study.jp/ この記事では、開発の背景・技術選定・工夫した点を共有します。どんなアプリ？ ⚔️ IT王国の勇者 ― 基本情報技術者試験RPG 正解 = モンスターに10ダメージ不正解 = 勇者がダメージを受ける連続正解でコンボボーナス各ダンジョンのボスを
zenn.dev
Zennzenn.dev
「基本情報技術者試験をRPGで攻略する無料Webアプリを個人開発した話」