はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

React Hook Form の場合 いきなりですが、下のコードを見てください。 「姓」と「名」の入力フィールドがあって、その下にある「ちゃんと再計算される氏名」に続いて姓と名をつなげた文字列が出力されます。 「ちゃんと再計算される氏名」は、姓および名を入力するたびにキチンと更新されます。 "use client"; import { type FC } from "react"; import { useForm } from "react-hook-form"; type ProfileFormValues = { familyName: string; personalName: string; }; const ProfileEditPage: FC = () => { const { watch, // // getValues, register, handleSubmit,

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

App Router では Server Component 中心になるらしいけど、動きがある要素には Client Component が必要になるから、どうせ全部 Client Component で書くことになるんでしょ？ Next.js App Router で Server component (以下 Server Comp.) に触れようとすると、このような疑問が出てくるかもしれません。しかし、Composition パターンによって 「Client Comp. の中に Server Comp. が入っているように見える」画面を実現できるようになります。 前置きの前置き: 公式ドキュメント Next.js 公式ドキュメントには、 Next.js における Server Comp. と Client Comp. の使い方についての記述があります。当記事はこのドキュメントを希釈した

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

という疑問が出てきたはずです。 これを題材にして、イベントが起きた時の処理を親と子でどのように分けたら良いのか考えてみます。 リセットする責務だけを子に分担させる 親から渡されたイベントハンドラを実行したあとに、 setTitle を使ってステートをリセットします。 import { useCallback, useState } from "react"; import { Button, Grid, Input, Paper, Text, Title } from "@mantine/core"; type Props = { onCreateTodoItem: (newItem: { title: string }) => void; }; const TodoCreateArea: React.FC<Props> = ({ onCreateTodoItem }) => { cons

「Divide and Conquer / 分割統治法」 という解法（アルゴリズムの話でよく出てきますね）は、「困難は分割せよ」 として知られる、デカルトが『方法序説』で提唱した思考法が元になっています1。 第二は、わたしが検討する難問の一つ一つを、できるだけ多くの、しかも問題をよりよく解くために必要なだけの小部分に分割すること。 ―― 岩波文庫 『方法序説』 デカルト著 谷川多佳子訳 同様に、React で多機能で複雑な画面を作りたい時、それを小さな機能の集まりと捉えて、それぞれをコンポーネントにすることで、開発がラクになることがあります。 フロントエンドの複雑さや、デザインのための Atomic Design という考え方の影響、または /scripts のように分ける習慣の名残なのか、フロントエンド開発者には、《再利用のためにコンポーネントを作る》という思い込みがあります。（もしくは

【React】誤解される useMemo と 誤用される useState ―― 「A の変更に反応して B の値が変わる」と考えるべきでない初心者React新人プログラマ応援react-hooksAdventCalendar2022 React において、 「フルネームは、名字と名前をつなげたもの(名字と名前は変わりうる)」 はどのように表せば良いのでしょうか？ useState + useEffect でしょうか？ useEffect は変更検知のためのものではありません。 useState は、「Prop・他のステートが変化するたびに毎回反応する」ような書き方をするのに向いていません。コードは無駄に長くなりますし、SSoT (Single Source of Truth) の原則に則していないので読みづらいです。 むしろ「ほかの値が変わっても、この値は変わらない」というケースに有効で

useEffect とは何か、ご存知ですか？ useEffect？ 知ってるよ。 依存配列に入れた値が変更されるたびに関数が実行されるフックでしょ？ これは半分正解ですが、半分間違っています。 useEffect のデフォルトの挙動は「レンダーのたびに毎回実行」です。 依存配列は「変わった時に実行する」というより「変わらなければスキップ」と捉えたほうが良いかもしれません。 useEffect は再レンダー以外の変化を検知できません。 特にミュータブルなオブジェクトが絡む場合は注意 React 公式のドキュメントの解説を見ながら、以上の2つのポイントに絞って、誤解を解いていこうと思います。 宣伝 useMemo, useState についても記事を書きました。よかったらこちらも確認してください。 2023/10/03 追記: ブラッシュアップしました ブラッシュアップしたので、そちらの記事も

Material UI を使った開発で困ることと言えば、TextField の見た目ですよね？ (Material UI 公式サイト のスクリーンショット) Material Design のガイドラインには準拠しているようですが、左上に縮こまったラベルはサイズが小さすぎて、日本語環境においては不便極まりなく、一般的にもあまりウケがよくないデザインだと思います。 動かない、読めるサイズのラベル・普通の枠線付きの入力エリア、これらが普通に縦に並んでいる入力フィールドが欲しいですよね？ Material UI のテーマ機能を使えば、TextField の各パーツの見た目をカスタマイズして、ラベルが動かない普通の見た目にできます。 これで MUI Base や Joy UI をプロジェクトに導入するまでの間をしのぎましょう。 実は、現在 Alpha 版の MUI Base (@mui/base)

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに：この記事を書いた動機 これらの素晴らしい先行記事を見て、「言語学を用いれば、共通点を見つけ出して一般化・大項目化したり、取り違えやすいエッジケースを明確化できるんじゃないか？」と思ったことが、この記事を書き始めたきっかけになります。 １章は３つの主要なパターンとその詳細・例外、２章はそれらに関する文法的な解説になっています。 構造化・体系化が必要な理由 太郎くんと花子さんが英作文の問題を解いています。 次の日本語を英文に訳せ。 (1) 彼女は楽しい人だ。彼女といると退屈することがない。彼女はいつも新しいことに挑戦して…… 太郎くん（『楽しい』って英語で何やったっけ……） 狩井先生@ 1年6月「exciting は楽しいって意味やで～」 ~~ 月日が流れる ~~ 柱鈴先生@ 2年4月「excited は楽しいって意味やで～」 太郎くん（……って教わったけど、exciting か e