React– category –
-
Reactの練習方法｜競技プログラミングのように反復できる学習サービスと進め方
Reactにも競技プログラミングのような練習方法はある TypeScriptの文法やアルゴリズムは書けるものの、ReactやWebフロントエンドは未経験という場合、競技プログラミングと同じように、 短時間で1問解く コードを書く 正誤を判定する 次の問題へ進む とい... -
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が届いたりする。「対応しなきゃ」とは思うものの、他のパッケージとの兼ね合いもあって気軽に上げられない。かといって放置するのも気持ち悪い。 ... -
状態管理ライブラリの分類 SWR
状態管理ライブラリの種類 クライアント状態を管理するもの — Zustand、Jotai、Redux） サーバー状態を管理するもの —SWR、React Query、Apollo React 状態管理マトリクス クライアント/サーバー、グローバル/ローカルの2軸で状態管理の道具を分類した図。... -
Webエンジニアテスト周辺知識、QAエンジニアとは
フロントエンドのテスト手法 Static Test（静的解析） コードを実行せずに、「書かれたコードそのもの」をチェックする工程です。 文法ミス、型の不一致、コーディングルールの違反を見つける Unit Test（単体テスト） 関数やコンポーネントなど、「最小単... -
React Hook Formの使い方 — Zodバリデーションからサーバーサイド活用まで
React Hook Form は、React でフォームの入力値・バリデーション・送信処理などを管理するためのライブラリです。 公式サイトhttps://react-hook-form.com 基本の3機能register・handleSubmit・formState register、handleSubmit,、formStateこの3つはreac... -
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