javascript Reactで使うJSXとは？
Reactで使う「JSX（JavaScript XML）」とは、JavaScriptの中にHTMLのような構文を直接書ける記法のことです。注意したいのは、JSXとXMLは別ものと言う事。ここで言う”HTMLのような”です。つまり、XML風（...
React
javascript React ReactでTypeScriptを導入すると、やたらと使う分割導入
🔎 分割代入をよく使う主な理由（＝目的） ① コードの見やすさ・読みやすさ（可読性） ← 一番の理由！ tsxconst MyComponent = ({ title, description }: PropsType) => { retu...
React カスタムフック
Reactでは状態（state）とその更新ロジックをセットにした「カスタムフック」を自分で作ることができます！これは状態管理を再利用可能にしたいときにめっちゃ便利です。 これは、コンポーネント（コード）の見通しが良くなり、デカルトの４つの方...
React 「フック（hook）」と「API」
「フック（hook）」と「API」はプログラミングでよく出てくる用語ですが、似ているようで役割や使われ方に違いがあります。 🔧 フック（Hook）とは？ フックは、処理の途中に外部のコードを差し込める“仕組み”です。たとえばあるアプリやライ...
Docker Docker上でLaravelとReactを併用してみた
LaravelでReactを使った開発環境を構築してみる。 パターンは３パターン １ LaravelのViteでReactを使う。 システム図 Laravelを主として、Reactの機能を使いたいと考えた時に最適な構成。 ２ ViteとNe...
React Reactでリストをレンダリングする際に必要な一意のキー（key）
Reactでリストをレンダリングする際に必要な一意のキー（key）とは、Reactがリストの各要素を効率的に識別し、更新・削除・再描画を最適化するために必要な属性です。要するに、map()などでループ処理を行う時は、”keyと言う変数をルー...
laravel Laravelの画像ファイルのパス一覧を処理するReact処理
Laravelでは、Storage::disk('public')->files('images'); を使用して、public ディスク内の images ディレクトリにあるファイルのパス一覧を取得できます。ただし、この場合に取得できるの...
React FormDataクラスとFileクラスの関係
javascriptでFormDataクラスを送信するデータ群として、その一部のデータとしてFileクラスを使うという関係の話。 FormData クラスは、HTMLフォームのデータをプログラムで簡単に構築し、それをサーバーに送信する際に利...
laravel ReactからLaravelへの送信ファイルの量を設定する
送信できるファイルの容量を設定するには、クライアント側（React+TypeScriptなど）とサーバー側（Laravelなど）の両方で制限を設けるのが一般的です。これにより、ユーザーのエクスペリエンスを向上させつつ、不正なリクエストを防ぐ...
javascript 画像やファイルの送信にFormDataクラスを使う
FormData クラスは、クライアント側でフォームデータを構築・送信するための便利なツールです。特に、画像やファイルなどのバイナリデータをサーバーに送信する際に広く使用されます。 以下で FormData の基本的な使い方や具体例を詳しく...