React– category –
-
dangerouslySetInnerHTMLでHTMLを安全に表示する——Next.js × sanitize-htmlの実践ガイド
ReactでHTML文字列を開発するとき、避けて通れないのが dangerouslySetInnerHTML によるHTML描画だ。 テキストとしてエスケープすればレイアウトが崩壊し、そのまま描画すればXSSの温床になる。 そもそもdangerouslySetInnerHTMLを使用せずにHTMLを描画で... -
MUI の sx とは？よく見るけど結局何なのかを一記事で理解する
sx プロップの正体 MUIのコードを読んでいると、ほぼすべてのコンポーネントにsxというプロップが付いている。これはMUIが提供するインラインスタイリングの仕組みで、CSSプロパティをオブジェクト形式で直接コンポーネントに渡せる。 <Box sx={{ paddi... -
フロントエンドのバージョンアップ、みんなどうしてる？npm auditとの付き合い方
フロントエンド開発をしていると、ある日突然 npm audit から警告が飛んできたり、Dependabotから大量のPRが届いたりする。「対応しなきゃ」とは思うものの、他のパッケージとの兼ね合いもあって気軽に上げられない。かといって放置するのも気持ち悪い。 ... -
状態管理ライブラリの分類
クライアント状態 ← → サーバー状態（API） クライアント × グローバル Zustand Jotai Redux Context API 例: テーマ、モーダル状態、カート サーバー × グローバル React Query SWR Apollo Client 例: ユーザー情報、商品一覧、投稿データ クライアント ×... -
Webエンジニアテスト周辺知識、QAエンジニアとは
フロントエンドのテスト手法 Static Test（静的解析） コードを実行せずに、「書かれたコードそのもの」をチェックする工程です。 文法ミス、型の不一致、コーディングルールの違反を見つける Unit Test（単体テスト） 関数やコンポーネントなど、「最小単... -
React Hook Formの使い方 — Zodバリデーションからサーバーサイド活用まで
React Hook Formは、Reactアプリケーションで高パフォーマンスなフォームを構築するためのライブラリです。非制御コンポーネントベースの設計により、入力のたびに再レンダリングが走る従来のアプローチと比べて、描画コストを大幅に削減できます。 この記... -
React でアプリ作成
StackBlitz githubで認証試すが利用できない JavaScriptにてtodoアプリ 追加 未完了のTODO 完了のTODO React VSCode インストール 参考記事：https://teto-tech.com/article/react-start1 Node.jsのインストール ▼「my-app」を作成 → この中に環境が構築... -
【@wordpress/scripts】でオリジナルブロック作成（リッチテキストツールバー、動的CTAリンク）
@wordpress/scriptsとは @wordpress/scriptsは、WordPressのブロックエディタやプラグイン開発のためのビルドツールパッケージです。 React・JSXを使ったモダンなJavaScript開発環境をWordPressプロジェクトに簡単に導入できます！ webpackやBabelなどの複... -
Shadcn/UI 入門：React で洗練された UI コンポーネントを作る
こんにちは！ 今回は、React のプロジェクトで洗練された UI コンポーネントを簡単に作成できる「shadcn/ui」について紹介します。Web 開発をしていると「もっとスタイリッシュなコンポーネントを作りたいけど、手間がかかるなあ…」と感じたことはありませ... -
【Next.js TypeScript 】React Swiper カルーセルスライダー実装、スライドが中央寄せにする方法
完成イメージ 手順 Next.js プロジェクトを用意します npx create-next-app@latest my-carousel-app プロジェクトに必要な依存関係をインストール Swiperと必要なアイコンライブラリをインストールします # Swiperのインストール npm install swiper # Fon... -
Next.js + TypeScriptで作る！画像ギャラリー実装（map関数、useState基本）
完成イメージ このチュートリアルでは、以下のような機能を持つギャラリーを作成します ソースファイル imageGallery.tsx // src/components/imageGallery.tsx 'use client' import { useState } from 'react' import { X, ChevronLeft, C...
1