すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
TypeScriptの型と値とバリデーション
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
フロントエンドとバックエンドの一貫したバリデーションで開発プロセスに調和と効率化をもたらす - Sansan Tech Blog
技術本部 Digitization部の湯村です。 新規アプリケーション開発で採用したバリデーションロジックの管理方法を紹介します。 1. はじめに 2023年末に以下の技術スタックでデータ化アプリケーションの開発をしました。 フロントエンド: TypeScript + Next.js バックエンド: TypeScript + Express Next.js では App Router を採用しましたが、Server Components、Route Handler は利用せず、ブラウザから Express の API を呼び出す構成にしました。 SPA + API で開発する際の課題 この構成で開発をする際の課題の1つにフロントエンドとバックエンドでのコードの重複があります。 特にバリデーションのロジックの管理方法は頭を悩ませた方も多いはずです。 バリデーションに対するアプローチ バリデー
こんにちは、バックエンドエンジニアの日下です。 CSV から JSON へ変換するスクリプトを、TypeScript で実装する機会がありました。 今回は、CSV のデータのバリデーションに Zod を使った話をします。 スクリプトの目的 システム間のデータ連携が目的です。 連携元のシステムから CSV 出力されたデータを、連携先のシステムで利用する JSON へ変換します。 また、JSON への変換以外にも以下の要件があります。 CSV のデータをバリデーションする 連携先のシステムで利用できるデータであることを保証するために、バリデーションを実行します。 バリデーション失敗時に、日本語のエラーメッセージを表示する スクリプトの実行は業務担当のエンドユーザーが行うため、日本語のエラーメッセージを表示します。 CSV の読み込み 元データとなる CSV の読み込みは、csv-parse を
10年物の長寿プロダクトのバリデーションアーキテクチャを変更した件 - RAKUS Developers Blog | ラクス エンジニアブログ
改善施策を決めるまで 旧アーキテクチャ概要 旧アーキテクチャの問題分析 新アーキテクチャ概要 最後に こんにちは、楽楽販売開発課の岡本です。 弊社では10年を超える長寿プロダクトをいくつも擁していますが、私が担当しているプロダクトもそんな長寿プロダクトの一つです。 さて、どのように優れたプロダクトでも10年以上開発を続けていれば、少なくない量のコード負債を抱えてしまうもので、我々の開発チームでもこの問題に日々悩まされております。 このような状況を打開すべく、昨年9月に開発チーム内に改善専門部隊が立ち上がりました。 本記事では、改善部隊が行った施策の1つである「バリデーションアーキテクチャの変更」を取り上げて紹介しようと思います。 改善施策を決めるまで 先の項でも紹介した通り、我々のプロダクトは少なくない量のコード負債を抱えてしまっています。 ですので、改善部隊が発足時点で改善したい内容はい
Server Actions のフォームバリデーションにおいて useFormState でエラーメッセージを表示する
Server Actions のフォームバリデーションにおいて useFormState でエラーメッセージを表示する 2023.10.31 Next.js の Server Actions でフォームを作成する際に、どのような方法でバリデーションを行い、エラーメッセージを表示する際にどのような手段が考えられるでしょうか。プログレッシブエンハンスメントの恩恵を受けるために、サーバーサイドでバリデーションを行いその結果を表示する方法が効果的です。`useFormStatus` フックはこの一連の動作を行うために使用します。 Next.js の Server Actions でフォームを作成する際に、どのような方法でバリデーションを行い、エラーメッセージを表示する際にどのような手段が考えられるでしょうか。 最もシンプルな方法は required 属性や input type="email" な
UTF-8のバリデーションとモノイドと半群
この記事はUTF-8のバリデーションとオートマトンの続きです。 前回はUTF-8のバリデーションが8状態のオートマトン (DFA) で表現できることを見ました。状態と遷移を擬似コードで書けば次のようになるでしょう： -- 8つの状態 data State = START | TAILx1 | TAILx2 | TAILx3 | A | B | C | D -- 入力バイトに応じて次の状態を返す。次の状態が該当しなかったら Nothing を返す next :: Word8 -> State -> Maybe State +----+----+-----+----+ | a0 | a1 | ... | aN | 8ビット整数列 +----+----+-----+----+ | | | v v v +----+----+-----+----+ | m0 | m1 | ... | mN | モノ
UTF-8のバリデーションとオートマトン
UTF-8は今日の文字エンコーディングの中で最も重要なものと言って差し支えないでしょう。UTF-8の仕様はこの辺で確認できます： Unicode 15.1.0 > 3.9 UTF-8 RFC 3629 - UTF-8, a transformation format of ISO 10646 この記事では、読者はすでにUTF-8にある程度の馴染みがあるものとして、UTF-8のバリデーションの細かいところを考えます。 UTF-8のバリデーションを行うには、以下のことを確かめなければなりません： 最初の1バイトが所定の範囲にあること：ASCII (0x00-0x7F) または0xC2以上。 後続のバイト（たち）が0x80-0xBFの範囲にあること。 長すぎないこと：U+007F以下の文字はちょうど1バイトで表現されていること、U+0080以上U+07FF以下の文字はちょうど2バイトで表現されて
RailsのActive Recordは、意味のあるデータを確実に得られるようにするためのバリデーション機能をActive Modelライブラリ経由で提供しています。 ユーザーにメールを送信可能であることを確認する処理は、アプリケーションを正しく設定するうえで非常に重要なので、既に皆さんもUser#email属性でバリデーションを行っていることでしょう。 🔗 以下の方法ではなく 手作り正規表現や、Railsの古いAPIドキュメントにあるものを使う。 class User < ApplicationRecord validates :email, format: { with: /\A([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})\z/i }, presence: true, uniqueness: { case_insensitive: true } end
史上初のdeprecationから最新のバリデーションライブラリまで！TypeScriptの最新動向をうひょさんに聞いてきた
こんにちは、テックフィード白石です。 日本のエンジニア界隈をリードするエキスパートに、テクノロジーの最前線を語っていただくYouTube動画連載「Ask the Expert」の新着動画が公開されました！ 今回は、TypeScriptのエキスパートうひょさんに、TypeScriptの最新動向について詳しく伺ってきました。 うひょさんのアカウントをぜひフォローしましょう！ うひょさん（株式会社カオナビ フロントエンドエンジニア） ついでに白石のもフォロー推奨: 聞き手: テックフィード白石 以下に掲載するのは、インタビュー動画の内容の要約です（正確な書き起こしではありません）。 内容をフルにご覧になりたい方は、ぜひ動画をご視聴ください。 （ご質問、ご感想などはYouTubeのコメント、もしくはこの記事のコメント欄でも受け付けております） TypeScript史上初めてのdeprecation
ハコベル物流DXシステム開発部のおおいし (@bicstone) です。普段はフロントエンドエンジニアとしてハコベル配車計画の開発を行なっています。 前回の記事では、GraphQLをプロダクトに投入するにあたり検討したエラーレスポンス設計パターンについて紹介しました。 この記事では、フロントエンドとバックエンド間でのバリデーションスキーマの取り決めについて解説します。 GraphQLスキーマ設計で悩まれている方の参考になれば幸いです。 はじめに ハコベル配車計画では、バックエンドとフロントエンド間の通信においてGraphQLを活用しています。1年ほど運用していく中で、設計における課題がいくつか表面化してきました。 今回、社内ハッカソンイベントHackWeek 2023 [1] が開催され、ハコベル配車計画チームでは1年間の運用の中で感じた、GraphQLスキーマの設計における悩みを振り返る
Laravel の FormRequest とは？ 基本的な説明は割愛します。公式ドキュメントを参照してください。 FormRequest が実際に解決される動き これに関しても以下の記事によくまとまっていますので，リンクしておきます。 ポイントとなるのは FormRequestServiceProvider にある $this->app->afterResolving(ValidatesWhenResolved::class, function ($resolved) { $resolved->validateResolved(); }); $this->app->resolving(FormRequest::class, function ($request, $app) { $request = FormRequest::createFrom($app['request'], $re
はじめに Pydanticを使用することで、Pythonコードでのデータバリデーションとデータシリアライゼーションを簡単かつ効率的に行うことができます。 この記事では、Pydanticの基本的な使い方から、より高度なバリデーションとシリアライゼーションまで幅広く紹介します。また、簡易的なものですが他のバリデーションライブラリとの速度比較も行っています。 Pydanticとは Pydanticは、Pythonのバリデーションライブラリです。以下のような特徴を持ちます。 型アノテーションをつけるだけでバリデーションとシリアライゼーションを実現できる 独自のバリデーションやシリアライゼーションを柔軟に定義することができる Pydantic V2はコアロジックがRustで実装されていて高速に動作する dataclasses+jsonと比較 dataclasses+jsonを使ったコードとPydan
Next.jsのServer Actionsは、サーバー側のバリデーションは不要なのか？ | フューチャー技術ブログ
Next.jsの新機能でTwitter(X)上でも少しバズったのがServer Actionsです。クライアントコンポーネント上にサーバー上で行うロジックを直接書き込むことが可能です。しかし、今までサーバーAPIを実装したことがあるのであれば、サーバー上のロジックであれば何かしらの認証のチェックやらCSRF対策などが必要なのではないか？という疑問を持つはずです。公式ドキュメントを見ても、ブログなどを検索してもそのあたりの話が出てこなかったので、少し動かしてみて検証してみました。 Server ActionsとはServer Actionsは<form>タグのactionに設定する特殊なイベントハンドラです。2種類の書き方があります。1つはサーバーコンポーネントの定義の中に書いてしまう方法です。 "use server" export default function Home() { //
こんにちは フロントエンドエンジニアのみつです。 先日、権限管理に関する実装の中でバリデーションについてとても悩みました。 その中で、「フロントエンドのバリデーションは最低限の方がいいらしい。」ということを学んだので、簡単なものに例えながら、理解を深めるための備忘メモです。 今日は、八百屋さんで果物を管理したいと思っています。 ：りんご ：桃 ：メロン ：さくらんぼ ：パイナップル の5種類があり、商品の種類をまずは登録していきたいです。 既に登録された果物の種類は、新たにDBに登録しなくて良いので重複チェックは入れたいところです。 ただどこまでの「バリデーション」を、フロントエンドで実装し、バックエンドで実装するのかで迷いました。 ⇓ バリデーションについては、テックリードにも相談し、 複雑な判断が必要になるケースはバックエンド側で実装するのが良さそう また、今回のようなケースでは、値を
export const tagSchema = z.object({ name: z .string({ required_error: "Name is required" }) .min(3, "Name is too short") .max(100, "Name is too long"), }) export type TagSchema = z.infer<typeof tagSchema> 一つポイントを挙げるとすると、このクライアント・サーバー間で使用するスキーマを use-tag-form.ts ファイル内で定義していない点です。 通常、状態管理やクライアントサイドのバリデーション検証を含むフォームコンポーネントはuse clientディレクティブを使用して Client Component として実装されます。同様に、そのコンポーネントで使用されるカスタムフックもクラ
はじめに NRI OpenStandia Advent Calendar 2023の 20日目担当のあやかです。 フロントエンドのバリデーション定義ファイルを自動生成出来ないか試してみたので紹介します この記事の前提として、 バリデーションライブラリとして、TypeScript first でスキーマ定義とバリデーション設定を行うことが出来るZodを使用 OpenAPI Specification（以下OAS）とJSON Schemaからファイル生成出来るかを検証 手動でバリデーション定義をしたファイルと自動生成したファイルの両方のバリデーションチェックを適用出来るか検証 を行い、その結果を紹介する記事です。 背景 業務でとあるWebアプリを開発しています。 このアプリは入力項目がとても多く、フロントエンドでもバックエンドでもバリデーションをかけなければいけないという要件があります。 そう
この記事は何？ データバリデーションライブラリのPanderaがPolarsのサポートを開始したので、早速それを試してみるもの。基本的なバリデーションのやり方を確認した上で、実行速度への影響を簡単な実験で確認した。 なお2024/3/16現時点では本機能はベータ版という状態であるため、今後なんらかの大きな変更が発生する可能性がある。最新の情報を得たい場合は、公式のリリースやドキュメントを参照してほしい。 Beta release 0.19.0b0: Polars integration Data Validation with Polars 前提 Panderaとは？ Panderaは、pandas.DataFrameのような2次元の表形式の構造を持つデータ（=データフレーム）に対するバリデーションを提供するライブラリである。事前にデータフレームに対して、各カラムの型や制約をスキーマとして
AWS CDK におけるバリデーションの使い分け方を学ぶ - builders.flash☆ - 変化を求めるデベロッパーを応援するウェブマガジン | AWS
皆さん、こんにちは。2024 年 3 月に AWS DevTools Hero に選出いただきました、後藤と申します。普段は、AWS Cloud Development Kit (AWS CDK) へのコントリビュート活動などを行っています。 AWS CDK において、AWS CDK でアプリケーション・インフラ環境を構築する(AWS CDK を使う) 方も、AWS CDK にコントリビュートする(AWS CDK を作る) 方も、どちらにもユーザーから受け取る値のバリデーションは欠かせません。またそのバリデーション方法は、どちらの立場においても基本的には同じ方法で実装することができます。 今回はそんな、AWS CDK を「使う側」と「作る側」、どちらにも共通するバリデーションの使い分け方についてご紹介します。
GitHub Actions for VS Code で、ワークフロー編集時の構成変数のサジェストとバリデーションが便利 | DevelopersIO
こんにちは、CX 事業本部 Delivery 部の若槻です。 前回のエントリで、GitHub Actions for VS Code を使って構成変数（Variables、Secrets および Environments）の管理が行えることをご紹介しました。 今回は GitHub Actions for VS Code の別機能として、ワークフロー編集時に構成変数のサジェストとバリデーションをしてくれる機能が便利だったのでご紹介します。 環境 # VS Code $ code --version 1.85.1 0ee08df0cf4527e40edc9aa28f4b5bd38bbff2b2 arm64 # GitHub Actions for VS Code $ code --list-extensions --show-versions | grep github.vscode-gith
//html <input type="text" id="text" required> <span id="errorMessage"></span> //js const input = document.getElementById('text'); const errorMessage = document.getElementById('errorMessage'); if (input.checkValidity()) { // 標準のバリデーション機能 errorMessage.textContent = input.validationMessage; // 標準のバリデーションメッセージ } 標準機能を用いたバリデーション なにが嬉しいの？ Web APIにはクライアントのバリデーションに必要な機能が標準でいくつも実装されており、これらを利用することで「自分で書くコード
週刊Railsウォッチ: 7.1でバリデーションメッセージのアポストロフィ->カーリー置き換えが取り消しほか（20230928後編）｜TechRacho by BPS株式会社
こんにちは、hachi8833です。つっつきで一同がこのコードにどよめきました。 FizzBuzz 実装はいろいろあるけど、 kazuho さんによる実装は奇妙さと美しさが同居していて今でも強く印象に残っているhttps://t.co/f208DBeRUI pic.twitter.com/G3QoReGdyw — Takuto Wada (@t_wada) September 21, 2023 週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事
Valibot: 超軽量＆型安全なスキーマバリデーションライブラリ | 豆蔵デベロッパーサイト
JavaScript、とりわけTypeScriptプロジェクトでデータのバリデーションを行う際、ZodやYup等のライブラリがよく使われています。 今回は、最近これらの代替として注目を集めているValibotというライブラリを紹介します。 Valibotとは？ # Valibotは構造化データを検証するためのスキーマライブラリです。 公式ドキュメントではその特徴を以下のように説明しています。 Fully type safe with static type inference Small bundle size starting at less than 600 bytes Validate everything from strings to complex objects Open source and fully tested with 100 % coverage Many tra
jQueryで爆速フォームバリデーション
なんで今さら jQuery の記事??? Bootstrap との親和性が高く、導入の手軽さ等でまだまだ現役だと感じたから jQuery に触れたことなかったので、そのアウトプット jQuery Validation Plugin 公式 セットアップ 今回は jQuery を npm で管理 $ npm init -y $ npm i jquery $ npm i jquery-validation $ tree . ├── index.html ├── node_modules - .. ├── package.json └── validate-config.js <form id="form_id" method="post"> <input type="text" name="text_name" /> <button type="submit">送信</button> </for
先月くらいにGuardrails AI という何ともAIのアウトプットを制御してくれそうな名前の会社からGuardrails HubというLLMのアウトプットを評価する関数が集まったプロダクトがリリースされました。 下図のように便利なバリデーション関数がたくさんあります。 個人的に使いそうなものをピックアップして見てみると次のようなものがあります。 個人情報が含まれているかを判定 https://hub.guardrailsai.com/validator/guardrails/detect_pii メールアドレス、電話番号、住所などなどが含まれているかを判定する 内部では presido というライブラリを使っていて、こちらのページにあるプロパティの判定に対応 https://microsoft.github.io/presidio/supported_entities/ 卑俗語があるか
[速報] Visual Studio Code で Terraform のバリデーションチェックが強化されました！ #HashiConf | DevelopersIO
こんにちは！AWS 事業本部コンサルティング部のたかくに（@takakuni_）です。 サンフランシスコで開催されている HashiConf 2023 に参加しています。 初日の Key Note で Visual Studio Code で提供されている Terraform の拡張機能 のバリデーションチェックが強化が発表されました！ アップデート内容 アップデートにより、拡張機能では HCL の構文チェックに加え Terraform のバージョンとプロバイダのバージョンに基づいて、チェック項目が強化されました！ 具体的には、以下のような事項をサジェストするようになりました。 *.tf ファイル ラベル数の不足 非推奨の設定値を利用 非推奨のブロックを利用 最大ブロック数の超過 必要なブロック数の不足 必須設定値の不足 予期しない設定値 未宣言の属性を参照 tfvars ファイル 不明な
![[速報] Visual Studio Code で Terraform のバリデーションチェックが強化されました！ #HashiConf | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/73f4a17308901dbaef5e0e905c39d5a2fd867f64/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2023%2F10%2F53fba3187e99fe9bd09329162d47ca47.jpg)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
Zod を使って CSV からの入力データをバリデーションする - ドワンゴ教育サービス開発者ブログ
Railsでメールアドレスをバリデーションする方法（翻訳）｜TechRacho by BPS株式会社
【GraphQL】スキーマ駆動開発におけるバリデーションの取り決め設計パターン集
Laravel の FormRequest バリデーションの動きに忠実なテスト方法を考える
Pydanticで始めるPythonのバリデーションとシリアライゼーション
フロントエンドの"バリデーション"は最低限の方がいいらしい。 - Qiita
クライアント・サーバー間の一貫したバリデーション管理: Conform + Server Actions
Zodのバリデーション実装時間を短縮しバックエンドとの整合性を保つ - Qiita
PanderaでPolarsのデータバリデーションを試す
【HTML】フォームバリデーションの実装方法をもう一度見直してみる【生JavaScript】
LLMのアウトプットをバリデーションする関数が集まるGuardrails Hubを試す