JavaScript– tag –

フォームとユーザー入力 Controlled Component とは何か？ Reactでフォームを扱うときの大原則： 入力欄の値を「DOM任せ」にせず、Reactの状態で管理する。 このパターンを Controlled Component（制御されたコンポーネント） と呼びます。 例： import { ...

コンポーネント設計とデータの流れ 「状態はどこに置くべきか？」という発想 Reactでよく出てくるキーワードが、「Single Source of Truth（単一の情報源）」です。 同じ意味の状態を複数の場所で別々に持たない 「このデータの正体はここにある」と1か所...

イベント処理と状態管理（useState） Reactでの「イベント処理」の基本 ブラウザのJSだと： button.addEventListener('click', () => { ... }) みたいに書きますが、Reactではコンポーネントの中でイベントハンドラを渡す形になります。 export...

ReactコンポーネントとJSXの基本 「コンポーネント」とは Reactでは、画面の部品をコンポーネントとして定義します。 ざっくり言うと、「入力（props）を受け取って、JSX（見た目）を返すただの関数」です。 function Hello() { return <h1>Hello, R...

Node.js・npm・ビルドツールの基礎 なぜNode.jsが必要なのか？ Reactは「ブラウザで動くUIライブラリ」ですが、開発するときはブラウザだけではなく、 Node.js（サーバー側JavaScript実行エンジン） npm（パッケージ管理ツール） ビルドツール（Vite / web...

Reactで何ができるのか Reactでできること Reactは一言でいうと、「状態（state）」から自動で画面（UI）を組み立ててくれるライブラリです。 例： Todoリスト 追加ボタンを押す → 「Todo配列」という状態が変わる⇒ Reactが「配列に基づいたリストUI」を勝...

全体を3つのレイヤーに分けて説明します。 ビルドシステム・ツールチェーン フレームワーク（フロントエンド／バックエンド） ライブラリ群（ユーティリティ・状態管理・テストなど） ビルドシステム・ツールチェーン なぜビルドシステムが必要か 昔の JS...

セキュリティの基本スタンス 「入力はすべて疑え」 URLパラメータ フォーム入力値 LocalStorage に保存された値 Cookie 外部APIからのレスポンス これらは全部「信頼できない入力」 とみなします。 「この画面は自分しか使わないし」「この値は自分のコー...

何をもって「パフォーマンスが悪い」というのか まず、測りたい指標を分けておきます。 指標 レイテンシ（応答時間） ボタンを押してから画面が反応するまでの時間 APIリクエストからレスポンスまでの時間 スループット サーバが1秒間にさばけるリクエスト...

コード品質とは何か ざっくり分けると、コード品質には以下のような要素があります： 正しさ（バグが少ないこと） 読みやすさ・一貫性（他人＆未来の自分が読めること） 変更のしやすさ（機能追加やリファクタリングがしやすいこと） JavaScript の世界で...