CSRF 対策はいまだに Token が必須なのか?

2024/01/18 292 users redis memcache TOKEN CSRF 必須

CSRF 対策は One Time Token を form なりに付与して、サーバ側でチェックすれば良い。 それをデフォルトでサポートしてるフレームワークなどもあるし、なくてもライブラリでいくらでも対応できる。 どうせ完全にステートレスなサービスはなかなかないので、サーバ側に redis や memcache を用意するのも別に大変じゃな... 続きを読む

Reactで実装したフォームのパフォーマンスが問題になるのはなぜか

2024/01/15 30 users React 久保田光則 枠組み React Hook フォーム

RelayHub合同会社の久保田光則です。 Reactでフォームを効率よく実装するためのライブラリとして、React Hook FormやReact Final Form、TanStack Formなどがあります。これらのライブラリは、フォームを効率よく実装できる枠組みを提供してくれるだけではなく、高速なフォームを実装するための方法も提供してくれます。 ... 続きを読む

パフォーマンスを気にするならReact Hook Formが無難

2023/12/30 56 users React Hook ライブラリ パフォーマンス CPU 計測

React Hook Form は高速。 Formik は早くない。改善は可能。 React Final Form はある程度早い。 React Hook Form が無難ではあるものの、CPU 6× slowdown で 100ms は通常では許容できると考え Formik を採用するのもあり。 比較したライブラリ 計測の対象にしたライブラリは以下の 3 つです。 React Hook Form Formik ... 続きを読む

Kuma UI はどのように React Server Components をサポートしているのか

2023/12/20 6 users React Server Components メンテナ

はじめに こんにちは。READYFOR でフロントエンドエンジニアとして働いている菅原（@kotarella1110）です！ 私は OSS が大好きで、React Hook Form や Kuma UI のメンテナとしても活動しています。 弊社のプロダクトでは CSS ライブラリとして Emotion を採用していますが、ランタイムでのパフォーマンス上の問題や App ... 続きを読む

なぜ HTML の form は PUT / DELETE をサポートしないのか? | blog.jxck.io

2023/11/27 261 users Put Delete entry Block Rockin

Intro 10 年ほど前に同じことを調べたことがある。 なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin' Codes https://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete 当時は全くの素人で、素人なりに調査はしたが、ほとんどが推測の域を出ない結論だった。 この問題についてあ... 続きを読む

サービスの管理画面を継続的に改善するためのReact Hook FormとZod活用術 - Mirrativ Tech Blog

2023/11/21 38 users React Hook Mui 管理画面 Zod サービス

こんにちは！ミラティブのフロントエンドエンジニア どじねこ です。 今回は、ミラティブを支える社内向けの管理システムにおいて、機能開発の体験を改善する取り組みを「MUI と Zod、React Hook Form の活用術」としてご紹介させていただきます。 前提 ミラティブでは、他の多くの Web サービスと同様に配信者さんの登... 続きを読む

SvelteKit, Progressive Enhancement, Form, Type Safety, そしてSuperforms

2023/05/10 9 users SvelteKit ドキュメント 概念 案件 嬉しい限り

SvelteKit で最近さまざまな案件ができていて嬉しい限りである。 さて、SvelteKit のドキュメントにしばしば登場する Progressive Enhancement という概念がある。 この概念に自分は全く明るくなかったので調べてみた。 この記事ではまず、Progressive Enhancement とは何かを説明する。 次に、Sveltekit においてこの概... 続きを読む

素粒子物理学に必須級のソフトウェア「FORM」の保守はたった1人の老科学者が担っている、新しい機器では使えなくなり研究が停滞する危険性

2022/12/07 8 users Quanta Magazine 素粒子物理学 陳腐化 保守

1980年代に開発され、それ以来30年以上にわたって最先端の素粒子物理学で使われ続けているソフトウェア「FORM」の陳腐化が進んでおり、もし使えなくなればこの分野の研究者にとって手痛い打撃になる危険性があると、科学系ニュースサイトのQuanta Magazineが報じました。 Crucial Computer Program for Particle Physics... 続きを読む

🏏 素振り: React Hook Form - memo_md

2022/10/08 12 users 素振り React Hook memo_md フック 状態

あーはいはい、React Hook Formね、知ってる知ってる（知らない） そんな状態なので素振りしておく。 React Hook Form https://react-hook-form.com/get-started React Hook Form の重要なコンセプトの一つは、非制御コンポーネント (Uncontrolled Components) をフックに登録（register) し、フォームフィールドの値を... 続きを読む

React Hook Form でも再描画に気を付ける

2022/08/28 10 users useState React Hook watch 再描画

React Hook Form を使うと、useStateを使う制御フォームにありがちな「頻繁な再描画」を手短かに防ぐことができます。しかし、使い方によっては、その利点を崩してしまうことがあります。それが、useFormの戻り値に含まれるwatchの使用です。 watch は頻繁な再描画の原因になる 次のコンポーネントは、よくあるサインア... 続きを読む

React 18のSuspenseを使ってReact Hook Formの非同期な初期値の扱いを簡単にする - Qiita

2022/07/16 16 users SaaS Qiita Suspense taro 非同期

はじめに 普段はスタートアップで建設業界向けのSaaSの開発をしている作っているtaroと申します。 今回はReact18で登場したSuspenseを触っていたら、React Hook Formでフォームの初期値に非同期な値を設定するのが簡単になりそうだなーって思ったので、試してみました。 React Hook Formを使ったことがない方でもきっと... 続きを読む

30歳になった - 技術探し

2022/04/29 9 users 技術 30歳 ドワンゴ 節目 メルカリ

30歳という節目でもあり、社会人になって、7年経ったのでせっかくなので振り返ろうかと思う。今日からformの枠で20代が使えなくなってしまったことは悲しい。 仕事 自分のキャリアはとても珍しいと思う。新卒でドワンゴに入り、後にメルカリへ行き、またドワンゴに行って今現在、メルカリ(souzoh)にいる。出戻りを歓迎し... 続きを読む

React Hook Formを1年以上運用してきたちょっと良く使うためのTips in ログラス（と現状の課題）

2022/03/25 71 users React React Hook ベストプラクティス 特段

はじめに 早いものでこちらの記事が公開して約1年、ログラスでReactを書き始めて1年以上が経ちました。 今回はフロントエンドのアプリの中でも特段重要なフォーム、特にReact Hook Formについての解説をしていきます。 今回のTipsは公式がベストプラクティスとして発表しているものではなく、あくまで個人が1年間の経験... 続きを読む

React + TypeScript: React Hook Formでフォーム入力値をまとめて簡単に取得・検証する - Qiita

2022/01/04 12 users Qiita React TypeScript 本稿 ライブラリ

React Hook Formは、フォームの入力データを検証まで含めて、まとめて簡単に扱えるライブラリです。ただ、導入のページ(「はじめる」)にコード例は示されているものの、説明があまりありません。本稿は、その中から基本的なコード例8つを採り上げ、公式ドキュメントの引用やリンクも加えて解説します。コード例はわかり... 続きを読む

GitHub - pannous/wasp: ? Wasp : Wasm programming language

2021/09/24 5 users GitHub WaSP div class

? Wasp : Wasm Programming Language Wasp is a new unified notation for both markup/object data and code. Wasp is the foundation layer of the higher order programming language angle. «Data is Code and Code is Data» Wasp Syntax For example, a HTML registration form: <form> <!--comment--> <div class... 続きを読む

React 初心者が Material-UI で今どきの Web フォームを作ってみた（yup編） | DevelopersIO

2021/08/26 6 users React DevelopersIO React Hook

React 初心者が、Material-UI と React Hook Form v7 を活用して今どきの Web フォーム開発に挑んでみました！ つい先月、React（+ React Hook Form）と Material-UI を組み合わせた Web アプリ開発を始めました。アプリ開発初心者でも簡単に、かつ今っぽい Web フォームを開発することができたので、少しコードを交えて... 続きを読む

HTMLFormElement.submit は validation を無視するし submit イベントを発火しない - 平常運転

2021/07/16 16 users querySelector Validation 平常運転

日記です。タイトルでほぼすべてがオチてしまった。 const form = document.querySelector('form#ultra-form'); form.submit(); みたいな感じで、 <form> を JavaScript から submit することができるんだけど、この HTMLFormElement.submit は HTML Living Standard ではこう定義されている: Submits the form, bypassi... 続きを読む

Reactでウェブフォームを作る2021

2021/03/07 81 users フォームライブラリ ベストプラクティス ウェブフォーム 自作

Webのフォームは、いつでもベストプラクティスを悩むものの一つです。React を使うとして完全に自作でやるのか？それともフォームライブラリを使うか？フォームライブラリならどれを使うか？ 今の時代 Formik を選ぶ理由はありませんが、React Hook Form と React Final Form のどちらを使うかはとても悩ましいです。 Re... 続きを読む

React Hook Formのアップデート内容 - Version 7 - Qiita

2021/02/23 12 users Qiita React Hook Marina 初日 チーム

(❤️ ブログ記事を翻訳してくれた日本のチーム、Kotaro、Keiya、Marinaに感謝します。) React Hook Formもそろそろ2年目を迎えようとしています。プロジェクト自体は、初日と同じように今でも活発に活動しています。この数年の間に、バージョン7の作成やデザインに繋がる多くの学びや経験がありました。私はここで、次のメ... 続きを読む

Uncontrolled Components でシンプル且つ高パフォーマンスなフォームの実装 - React Hook Form - Qiita

2020/12/14 8 users ReadyFor Qiita React 菅原 実装

この記事は READYFOR Advent Calendar 2020の13日目の記事です。 はじめに こんにちは。今年の11月から READYFOR でフロントエンドエンジニアとして働いている菅原（@kotarella1110）です！ React と TypeScript が好きで、React Hook Form のメンバーだったりもします。React Hook Form は TypeScript で記述されている... 続きを読む

プログラミング言語Go完全入門 - Google スライド

2020/08/31 13 users スライド プログラミング言語Go完全入門 Google 返却

プログラミング言語Go完全入門 @tenntenn [TODO] ・fmt.Printfのverbsをまとめる ・RoundTriper的なパターンについても書く ・xerrorsに関する記述を増やす ・並行処理ハンズオンの話を入れる（https://github.com/tenntenn/gohandson/tree/master/goroutine） ・リダイレクトの方法 ・Formの入力 ・画像の返却 ・静的フ... 続きを読む

10万円の給付で何買うん？　

2020/04/22 626 users 給付 go.jp https お前ら 生活費

お前らは給付される10万円で何を買うんですの？ PS: 眠れない爺はね、生活費よ。そして動くの。いろいろ見てるの。怖いの。 https://lucid.jp/form/templates https://www.hellowork.mhlw.go.jp/ 続きを読む

厚生労働省が「ドライブスルー方式」のPCR検査を実施しない理由を発表し、様々な反応が - Togetter

2020/03/15 5 users Togetter pub PCR検査 mhlw.go.jp

厚生労働省 @MHLWitter 厚生労働省では、ツイッターを通じて国民の皆様向けの情報を発信しています。ツイッターに寄せられたコメントへの返信はしていません。ご意見は、下記URL「国民の声」からお寄せください。 (国民の声 mhlw.go.jp/form/pub/mhlw0…) mhlw.go.jp 続きを読む

form要素を対話形式で作成できるスクリプト・「Conversational Form」 | かちびと.net

2019/08/02 13 users スクリプト 対話形式 net ローカライゼーション サンプル

Conversational Form Conversational Formは上サンプルのような対話式コンテンツを作成する為のスクリプトです。formを変換するタイプです。上記はHTML側を日本語に変えてサンプルを用意しましたが、実際はもっと効率的にローカライゼーションが可能な仕様となっています。 質問に対し、回答していく事でformの項目をス... 続きを読む

Formの送信ログから反省する、 本当は必要だったバリデーションや機能たち - Speaker Deck

2019/05/18 53 users バリデーション Speaker Deck 機能たち

サンプルアプリはこちらです。 mockサーバーの起動が必要なので、注意してください。デプロイしているサンプルアプリは、サーバーとの通信をしないので、注意してください。 https://github.com/sadnessOjisan/Form-Museum 続きを読む