2024年6月– date –

はじめに Reactの醍醐味といえば、コンポーネントですよね。同じコードを何度も書いていたら、コンポーネントにまとめましょう。そうしないと修正が何箇所にも及び、時間がかかる上にミスも増えます。 未来の自分のために、コンポーネント化しましょう。 ...

はじめに 前回の記事で「見やすく直しやすいコードを書きなさい」と言った手前、冗長な処理を残したままにするわけにはいきません。 というわけで、今回は自前バリデーションのカスタムフックを見やすく直しやすくしてみました。 実物はこちら https://hak...

はじめに せっかくプログラムを作るなら、いいものを作りたいですよね。 いいものを作ろうと思ったら、自ずと機能が増えていくと思います。機能が増えていくと、今度は見やすさや直しやすさが大事になってきます。 見にくかったら直す箇所を探すだけでも大...

はじめに 入力値のバリデーションが行われるタイミングは様々です。システムによっても違うし、人によっても違うでしょう。 この入力欄シリーズでは、以下のタイミングが登場しました。 SUBMITボタンが押されたタイミング（onSubmitイベント） 入力欄から...

はじめに 入力欄に入力された値を使ってあれやこれやしたいこと、ありますよね？ 今回は、前回作成した入力フォームを改修して、入力値を state でインタラクティブに扱うようにしてみました。 入力値を state で扱うことは React をやっていれば避けては...

はじめに 「ちょっとした入力フォームを作りたいんだけど、バリデーションってどうやってやるんだろう？」「ライブラリ入れるほどでもないんだけどな・・・」 この記事では、Reactで自前のバリデーション機能を組み込んだ入力フォームの作り方をシェアしま...

はじめに 以下の記事では、サイドメニューの４つの項目を出力する処理が冗長だったのでコンポーネント化しました。 コンポーネント化したことで身動きがとりやすくなったので、もう１段階レベルアップさせたいと思います。 今回は、サイドメニューの項目を...

はじめに 以下の記事では、４つの項目を持つスタティックなサイドメニューを実装しました。 こちらのコードを見ると一目瞭然なのですが、４つの項目を出力するコードは同じ処理をコピペしており冗長になっています。 <ul> <Box component="l...

はじめに サイドメニューは、今やWEBアプリを実装する人にとっては避けて通れないものとなっています。大抵のWEBサイトには、サイドメニューがあるのではないでしょうか。 今回はそんなサイドメニューを実装してみたいと思います。サイドメニューの実装担...

はじめに 管理画面とかで親子関係のあるセレクトボックスを実装しなくてはいけないこと、ありますよね？ 以下の記事では、親子関係のあるセレクトボックスのデータをAPIから取得する形で実装してみました。セレクトボックスの値は state で管理していまし...