まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
ハイフンに似ている横棒を全て統一するᅳㅡ˗𐆑–᭸‒-─−▬𐄐—━‐‑ー﹣―ｰ﹘－⁃➖⁻！ - Qiita
プログラマの抱いている名前についての誤謬
パトリック・ミッケンジー（Patrick McKenzie）さんのブログ・エントリ、 “Falsehoods Programmers Believe About Names” の日本語訳です。翻訳の公開を快諾してくださったミッケンジーさんに感謝します。 公開: 2012-02-22 Posted on June 17, 2010 by Patrick きょう、ジョン・グレアム゠カミング（John Graham-Cumming）が、正しくない文字が含まれているといって彼のラスト・ネームを受け付けないコンピュータ・システムへの不満の記事を書いていた。もちろん彼の名前に「正しくない」ところなどない。当人の申し出たものが当人を識別するものとしては相応しいのであって、定義からして名前とはそういうものである。このことにジョンは当然ながらいらだったし、そうなるのもきわめて正当なことだ。定義からすれば事実
一周回って、人間が読み書きする設定ファイルはJSONが良いと思った | フューチャー技術ブログ
最近GoでCLIツールを作っていますが、JSONが良いとなんとなく思っています。 続編も公開しました（追記：2019年10月2日）。 CUEを試して見る 設定ファイルフォーマット近年、設定ファイルを書くプレーンテキストのフォーマットとしては次のようなものが多いかと思われます。 XML 多くのプログラミング言語において標準ライブラリで扱える（ただしNode.jsにはない） XMLスキーマ、XSLTなどの周辺ツールも揃っているが、記述が冗長になりがちで、敬遠されがち。 ini QtやPythonの標準ライブラリで扱える 深い階層や配列を扱うのが苦手 JSON ほとんどのプログラミング言語で標準ライブラリに入っている 特にフロントエンドのJavaScriptでは追加のライブラリを利用する必要がなく、速度も早く、gzipすればファイルサイズもかなり小さくなる。T 閉じかっこが必要、コメントがつけら
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
フロントエンドの開発が初めての人が意外と抜けがちな観点をまとめてみました。 初めにざっくりと概要を話すと「デザイナーが作るデザインでは表現しづらいもの」をまとめたものになります。 デザイナーが作るデザインは静的なものなので(たまにがっつりプロトタイプを作ったりもありますが)、いわゆる"状態"を表現するのが難しかったり抜けたりしがちです。 具体的に言うとローディング、Empty、エラーなどです。これらをよしなに補完できるフロントエンドエンジニアはデザイナーからもきっと「頼りになるぅ！」と思われること間違いないでしょう。 と言うわけでそんな例を紹介していきます。 今後も思いついたら追加する可能性が無きにしも非ず。 ローディングを出そう こう言うクルクルするやつとか こんな感じでシュインシュインするやつがあります。 基本的にユーザがアクションを起こした時に待たせる場合は必ず表示させましょう。 ロ
CUE
Configure Unify ExecuteValidate, define, and use dynamic and text‑based data Learn more CUE makes it easy to validate data, write schemas, and ensure configurations align with policies. Get started learning about CUE with these links ..
ビジネスとエンジニアリングの接合点 そしてコード品質がそこに及ぼす影響 v1.1 / The Intersections of Business and Engineering, and The Impact of Code Quality There (v1.1)
TLS証明書チェッカーcheck-tls-certの公開
こんにちは、技術開発室の滝澤です。 TLS証明書チェッカーcheck-tls-certを開発して公開したので紹介します。 このcheck-tls-certについて簡単に説明すると次の通りです。 check-tls-certは、TLS証明書の有効性と証明書チェインの検証するツール 主な用途は、TLS証明書の設置・更新作業の際の各種確認およびTLS証明書の（有効期限を含む）有効性の監視 様々な検査を実施し、各検査結果を出力することで問題箇所を把握しやすい check-tls-certの概要 TLS証明書チェッカーcheck-tls-certはTLS証明書の有効性と証明書チェインを検証します。 主にTLS証明書の設置・更新作業の際の各種確認およびTLS証明書の（有効期限を含む）有効性の監視のために利用できます。 次のサイトで公開しており、ReleaseページからLinux向けとmacOS向けのバ
TypeScriptの型と値とバリデーション
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
Ruby on Rails を用いたシステム上で入力フォームを実現する際、Rails が提供しているフォームヘルパーを利用した実装や、React や Vue によるコンポーネントの自前での実装が一般的に行われます。 ここで、職業で学生を選択した場合は学校名と学年、会社員を選択した場合は役職と年収を入力する...といった、条件分岐が大量に生まれる入力フォームを想像しましょう。 一般的な実装手法では、あるフォームの入力値が他のフォームに影響を与えるような、複雑で動的な入力フォームの実現をするために、大量の if 文を書く必要があります。 また、ユーザから送信された入力値の正しさをバリデーションするために、バックエンド側に同様の if 文を大量に書く必要が出てきます。 そこで私は、複雑な仕様の入力フォームの実装のための JSON Schema 活用方法および事例について紹介します。入力フォームの
主にバックエンドのエンジニアとしてクックパッドマートの開発に携わっている塩出（ @solt9029 ）です。 美味しい食材をユーザにお届けするサービスであるクックパッドマートでは、日々街の販売店や地域の生産者が商品の登録を行っています。 商品を登録する際、販売者は消費期限をはじめとする様々な品質保証の情報を正確に入力する必要があります。 しかし、商品の種類や状態に応じて記載するべき品質保証の情報は異なるため、全項目が羅列されるフォームでは正確な入力が困難であり、販売者および商品の審査を行う社内の運用メンバに対して大きな負担をかけていました。 そこで、 JSON Schema を利用して複雑なフォームの出し分けを自動で制御し、またバックエンド側でのバリデーションも行うことが出来る仕組みを導入しました。 その結果、商品の種類や状態を選択するだけで、適切な品質保証の情報が自動的に入力され、必要な
"壊れにくい"データ基盤を構築するためにMackerelチームで実践していること - Hatena Developer Blog
GitHub - ealush/vest: Vest ✅ Declarative validations framework
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Total TypeScriptのZodチュートリアルでZodに入門した - dackdive's blog
はじめに Zod というバリデーションライブラリが非常に流行っているようなので、素振りした。 www.totaltypescript.com このチュートリアルはたしか Twitter で流れてきて知ったのだが 今見ると Zod の公式ドキュメントからも Resources として紹介されているので、そこそこ信頼していいコンテンツなのだと判断した。 チュートリアルについて チュートリアルと名がついているが、内容は全 10 問のエクササイズを解くという構成。 あらかじめ型チェックのエラーまたはランタイムのエラーが発生するサンプルコードが問題として用意されており、そのコードを修正しながら Zod の基本的な使い方を学ぶ。 チュートリアルには Zod の使い方の説明は特にないので、チュートリアルの問題を解くために Zod の公式ドキュメントを読んで必要な箇所を理解する、という感じ。 Rust で
外からやってくる値から TypeScript の型を守るライブラリ・ツールまとめ - Mobile Factory Tech Blog
こんにちは、新卒エンジニアの id:d-kimuson です 先日 type-predicates-generator という型定義からユーザー定義型ガード・アサーション関数を自動生成するツールをリリースして紹介記事を書いたのですが、感想とかを眺めていたら同じく外部から来た値に安全な型付けをするためのライブラリやツールの情報をいくつも観測しました この辺りのランタイムチェックライブラリの情報ってあまりまとまっていない印象で自分が知らないものもいくつかあったので、調べつつ簡単にまとめられたらなと思ってこのエントリを書きました 外部からやってきた値を型安全にするにはざっくりと 型生成によるアプローチ ランタイムチェック用の独自型を書かせるアプローチ 型情報からランタイムチェック関数を自動生成するアプローチ の 3 つのアプローチがあると思うので、それぞれのアプローチごとに紹介します ① 型定義
どうも、 uzimaru です。 最近、react-hook-form と zod を使っていい感じにやっているのでそれについてまとめようと思います。 react-hook-form で zod を使う 公式から利用する方法が提供されています。 https://www.npmjs.com/package/@hookform/resolvers これを useForm の resolver で利用することで zod が使えるようになります。 zod 以外にも Yup, Superstruct, Joi, io-ts などが利用できます import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import * as z from "zod"; const
React Hook FormとZodを組み合わせて利用する｜食べログ フロントエンドエンジニアブログ
こんにちは。食べログ フロントエンドチームの原田です。 現在担当しているプロジェクトで、React Hook FormとZodを組み合わせて利用する機会があったので、今回はReact Hook Formの基本的な使い方からスキーマバリデーションをZodに任せる方法を紹介をしたいと思います。 React Hook FormとはReact Hook Form は「高性能で柔軟かつ拡張可能な使いやすいフォームバリデーションライブラリ」をテーマに掲げた入力フォームの管理に特化した React 向けのライブラリです。 なぜReact Hook Formを利用したか今回のプロジェクトでは複雑なフォームを組む必要があり、フォームの状態管理を任せられる点や、パフォーマンス面、ドキュメントや検索でヒットする情報の多さからReact Hook Formを利用することを決めました。 基本的な使い方まずはReac
fullstack TSなアプリケーションも増えてきた昨今、TSでvalidatorを実装する際に何を採用するかは一大トピックです。今回は、その中でも新しめなライブラリでありBlitzも採用しているZodについて見ていきます。 Zodとは Zodの特徴として、Schema firstなvalidationライブラリであるというのがあります。 validateするschema（単一のschemaからobject, arrayまで）を定義し、それをベースにparseするというものです。 公式にあるexampleを見てみましょう。 import { z } from "zod"; // creating a schema for strings const mySchema = z.string(); mySchema.parse("tuna"); // => "tuna" mySchema.p
create-validator-tsというTypeScriptの型定義からJSON Schemaを使ったバリデーションコードを生成するツールを書きました。 モチベーション expressなどでAPIを書くときに、Request/Responseが意図したものかどうかをバリデーションする必要があります。 特にreq.queryなどはStringが入ると予想しますが、オブジェクトが入ってくることもあります。 これは、expressの内部で使っているqsというURLクエリのパーサが、オブジェクトや配列へ展開する機能を持っているためです。 expressを使ってるサイトは ?q=text があるときに req.query.q には オブジェクトが入る可能性をちゃんと考慮しないといけない。 ?q[a]=text で req.query.q ; // { a: "text" } になる — azu
TypeScript Compiler APIを使って型を中心に実装を自動生成する - ドワンゴ教育サービス開発者ブログ
この記事は、ドワンゴアドベントカレンダー2020の10日目の記事です。 qiita.com はじめに ベルリシア(@berlysia) という名前で活動しています。Webが好きです。ドワンゴでは、N予備校をはじめとする教育事業のWebフロントエンド開発をしています。 この記事では、Webフロントエンドチームの実際の開発で用いた、TypeScript Compiler APIを使っての型を中心とした実装の自動生成事例を紹介します。考察パートが中心で、コードはほぼ出てきません。 状況説明 管理画面の開発です。検索と結果一覧とCRUD操作が中心で、多くの画面が定型的な実装です。画面数が多いため、いかにこうした定型的な画面を効率よく開発して複雑なところに注力するかが、この開発を成功させるカギとなります。また、人員的にもある程度の並列性を確保している状態です。 APIはOpenAPIで仕様が提供され
TypeScript で実行時の入力を含む文字列を型で弾く - Object.create(null)
TypeScript (4.7 時点) において, 文字列に付けられる型には以下の 3 つ (とそのユニオン型) があります. 文字列型 string 文字列リテラル型 ("foo" など) テンプレートリテラル型 (`data-${string}` など) これらのうち, 実行時の入力, 特に事前にパターンが想定されていないような任意の入力が含まれるような文字列に対しては, string や string を含むテンプレートリテラル型を付けることはできても, 文字列リテラル型を付けることはできません. 文字列リテラル型を付けるためには型検査時 (実行の前) に入力文字列の内容がわかっている必要があるので, まあそれはそうですね. このことを利用して, 実行時の入力を含む文字列を与えようとすると型検査に失敗するような関数を作ることができそうです. まずは与えられた型が文字列リテラル型, ま
こんにちは、バックエンドエンジニアの日下です。 CSV から JSON へ変換するスクリプトを、TypeScript で実装する機会がありました。 今回は、CSV のデータのバリデーションに Zod を使った話をします。 スクリプトの目的 システム間のデータ連携が目的です。 連携元のシステムから CSV 出力されたデータを、連携先のシステムで利用する JSON へ変換します。 また、JSON への変換以外にも以下の要件があります。 CSV のデータをバリデーションする 連携先のシステムで利用できるデータであることを保証するために、バリデーションを実行します。 バリデーション失敗時に、日本語のエラーメッセージを表示する スクリプトの実行は業務担当のエンドユーザーが行うため、日本語のエラーメッセージを表示します。 CSV の読み込み 元データとなる CSV の読み込みは、csv-parse を
業務委託で STORES の開発をしている @inouetakuya です。 先日 STORES のフロントエンドチーム内でクライアントサイドのバリデーションについて見直す機会があり、特にバリデーションエラーのデータ型をどうするかについての議論が興味深かったので、共有させていただきます。 背景 議論の背景について簡単に触れておくと、STORES のクライアントサイドでは、バリデーションのライブラリとしてこれまで joi-browser を使ってきました。 しかしながら、本家の Node.js 版の joi がブラウザ対応したことにより joi-browser が deprecated になったことを受けて、今後も joi を使い続けるかを検討したところ、 joi-browser と joi の最新バージョンとの間で API の差異がいくつかあり、joi-browser から joi への乗
Next.js の Zod 活用術
HTMLFormElement.submit は validation を無視するし submit イベントを発火しない - 平常運転
日記です。タイトルでほぼすべてがオチてしまった。 const form = document.querySelector('form#ultra-form'); form.submit(); みたいな感じで、 <form> を JavaScript から submit することができるんだけど、この HTMLFormElement.submit は HTML Living Standard ではこう定義されている: Submits the form, bypassing interactive constraint validation and without firing a submit event. https://html.spec.whatwg.org/multipage/forms.html#htmlformelement つまり、例えば下のような HTML form の場合、
Breck, Eric, et al. "Data validation for machine learning." Conference on Systems and Machine Learning (SysML). https://mlsys.org/Conferences/2019/doc/2019/167.pdf . 2019. 読み手のコンテキスト現職で機械学習予測モデルをプロダクトに投入する様になって3年程経った。そうもなると開発時に想定していた訓練データの分布と現状の分布が乖離して、予測の動作不良を引き起すケースがしばしば見られる様になった。明らかな予測の不具合として目立っていなくとも性能が落ちている部分はもっとあるはずで、これに早く気づいて対応したいモチベーションがある。かつ運用専任メンバーはいないので、できるだけ運用は手を抜きたい。概要著者らはData Validat
GitHub - colinhacks/zod: TypeScript-first schema validation with static type inference
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Cloud Composerによるデータバリデーション ～常に正確なデータ集計を実現するために～ - ZOZO TECH BLOG
こんにちは。ECプラットフォーム部データエンジニアの遠藤です。現在、私は推薦基盤チームに所属して、データ集計基盤の運用やDMP・広告まわりのデータエンジニアリングなどに従事しています。 以前、私たちのチームではクエリ管理にLookerを導入することで、データガバナンスを効かせたデータ集計基盤を実現しました。詳細は、以前紹介したデータ集計基盤については以下の過去記事をご覧ください。 techblog.zozo.com 本記事では、データ集計基盤に「データバリデーション」の機能を加えて常に正確なデータ集計を行えるように改良する手段をお伝えします。 データバリデーションとは バリデーション導入後のデータ集計基盤 ジョブネット構築 テンプレートによる効率的なDAGの作成 DAG間の依存関係の設定方法 バリデーションDAGのタスク構成 まとめ データバリデーションとは データバリデーションとはデータ
こんにちは、各位忘年してますか。弊社では新年会は1年に1回しか出来ないが、忘年会は1年に何度も出来るという説が出回っています。僕も8月頃に1度忘年してますが、まだまだやっていきましょう。ソーシャルゲーム事業部ゲーム技研の谷脇です。 この記事はTech KAYAC Advent Calendar 2019 Migration Trackの18日目の記事です。17日目はPush 通知送信エージェント Gunfish に FCM v1 API 対応を追加したでした。 この記事で話すこと モバイルゲームのマスタデータの管理ツールを今年作り直したよ やりたいことが複雑だからいい感じに設計したよ CLIでも動くしサーバレスでも動くよ この記事がakashicの概要が書かれたドキュメントじゃ！(社内向けの業務連絡) マスタデータの管理とは そういえば先日、マスタデータNight #1というイベントを開催
TypeScriptの型定義からJSON Schemaを生成するオンラインツールを作ってみた - Qiita
先日、TypeScript + Tynderから始める宣言的検証生活の記事にて スキーマ検証ライブラリTynderを紹介いたしました。 Tynderとは Tynderは、TypeScriptのサブセット＋独自の拡張文法から成るDSLによって 型の検査 単独の項目の必須・値の長さ・範囲や文字列パターンの検証 複数項目の相関や整合性検証の一部 (Union typeによる) を宣言的に行うことができます。 今回はTynderのスキーマ変換機能を使用して JSON Schema、GraphQL、Protobuf3 のスキーマを生成するオンラインツールを公開しました。 (GraphQL、Protobuf3については実験的機能です) TypeScript (Tynder DSL) → JSON Schema | GraphQL | Protobuf Converter Convert schema
皆さんは JSON Schema 使ってますか？ 現在では、Web APIのペイロード定義・検証、モックサーバー作成、ユーザー入力フォーム検証、設定ファイルのスキーマ定義・検証・IDEでのエラー表示など、多くの場面で、また多くの言語でライブラリが整備され利用されています。 JSON Schemaの強み Internet draftのフォーマットで仕様が公開されている 多くの言語での多くの実装（言語によっては複数）が存在する 1回書けば、フロントエンド、複数のバックエンドすべてで利用できる可能性が高い 代替実装が存在すると競争原理が働く JSON Schemaの嫌いなところ 見辛い 書き辛い 数行の小さなスキーマならばともかく、JSON Schemaって本当に苦痛。汎用のデータフォーマットを人が直接記述するレイヤーのDSLにするのは正直辛い。ヒューマンリーダブルだからといって人が読めるとは限
I am pleased to announce, with support from Miško Hevery and Ryan Carniato, my new open source project Valibot. Valibot is a schema library for validating structural data, comparable to Zod, Ajv, Joi, and Yup. The big innovation of Valibot is the modular design of the API and an optimization of the source code for compression. This new approach enables unprecedented bundle size minimization throug
TypeScriptのゾッとする話 ~ Zodの紹介 ~
現在( 2021/09/13 )、この記事の情報は古くなっている可能性があります！ そのため、なるべくは公式ドキュメントを参照してください。 参照: 公式ドキュメント この記事について 先日、「 エンジニアとして一番怖いモノは何？ 」と知人に尋ねると、 「 実は、TypeScript が一番怖い 」 と言ってきました。 そんな訳ないだろうと思っていたのですが、どうやら知人は本気の様子。 「 TypeScript が嫌いならまだしも、TypeScript が怖いとは、これはナニかあるな 🤔 」 と思った私は、TypeScript First なライブラリである Zod を知人に紹介して、事の真意を確かめようとしたのでした。 怖いならもっと怖がらせてやろうと思ったのは内緒 🤫 しかし、知人に紹介するだけでは勿体ないので、今回は皆さんに知見を交えながら Zod の事を紹介していこうと思います
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
【フロントエンド初心者向け】ユーザビリティを上げるちょいテク
Clean Architectureにおいてバリデーションはどこでやるべきか
現実世界におけるスキーマ設計の妥協
JSON Schema で複雑な仕様の入力フォームの実装に立ち向かった話
JSON Schema をクックパッドマートの商品登録画面に導入した話 - クックパッド開発者ブログ
http://alanpryorjr.com/2019-05-20-flask-api-example/
Go の入力バリデーションパッケージ ozzo-validation を試した。
OpenAPIにおけるundefinedとnullの設計 | フューチャー技術ブログ
react-hook-form と zod でバリデーションのその先へ
ProtobufでREST APIを快適に開発する方法のご紹介 - TIER IV Tech Blog
ケンオール通信第10号： 町名を空にしなければいけない町域 - ケンオールブログ
Zodで真のTypeScript firstを手にする
TypeScriptの型定義からバリデーションコードを生成するツールを書いた
Zod を使って CSV からの入力データをバリデーションする - ドワンゴ教育サービス開発者ブログ
クライアントサイドのバリデーションエラーのデータ型についての考察 - STORES Product Blog
Data validation for machine learning 読んだ
新マスタデータ管理システムakashicの開発 - KAYAC engineers' blog
TypeScript + Tynderから始める宣言的検証生活 - Qiita
Introducing Valibot, a < 1kb Zod Alternative
tamoxlife.hatenablog.com
psxnavi.com
taisy0.com
blog.livedoor.jp/eigyou444sekiyann
allabout.co.jp
www.inside-games.jp