まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
ハイフンに似ている横棒を全て統一するᅳㅡ˗𐆑–᭸‒-─−▬𐄐—━‐‑ー﹣―ｰ﹘－⁃➖⁻！ - Qiita
はじめに これらの横棒、コンピュータにとっては全て違うのですが 見分けがつくでしょうか？ -˗ᅳ᭸‐‑‒–—―⁃⁻−▬─━➖ーㅡ﹘﹣－ｰ𐄐𐆑 郵便番号、住所、電話番号など、横棒が使われているデータを扱うとき、 人が入力したデータや購入したデータであると、同じ記号が使われていないことはよくあることです。 090-1234-5678 090᭸1234᭸5678 090‑1234‑5678 090−1234−5678 これらの電話番号の文字列も phone_no_list = ['090-1234-5678', '090᭸1234᭸5678', '090‑1234‑5678', '090−1234−5678'] # 文字をUnicodeコードポイントに変換 for n in phone_no_list: # 文字列の４番目の横棒の文字コードを見てみる print(n[3], ord(n[3]
プログラマの抱いている名前についての誤謬
パトリック・ミッケンジー（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 閉じかっこが必要、コメントがつけら
フロントエンドの開発が初めての人が意外と抜けがちな観点をまとめてみました。 初めにざっくりと概要を話すと「デザイナーが作るデザインでは表現しづらいもの」をまとめたものになります。 デザイナーが作るデザインは静的なものなので(たまにがっつりプロトタイプを作ったりもありますが)、いわゆる"状態"を表現するのが難しかったり抜けたりしがちです。 具体的に言うとローディング、Empty、エラーなどです。これらをよしなに補完できるフロントエンドエンジニアはデザイナーからもきっと「頼りになるぅ！」と思われること間違いないでしょう。 と言うわけでそんな例を紹介していきます。 今後も思いついたら追加する可能性が無きにしも非ず。 ローディングを出そう こう言うクルクルするやつとか こんな感じでシュインシュインするやつがあります。 基本的にユーザがアクションを起こした時に待たせる場合は必ず表示させましょう。 ロ
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
CUE
CUE is an open source language, with a rich set of APIs and tooling, for defining, generating, and validating all kinds of data: configuration, APIs, database schemas, code, … you name it.
クリーンアーキテクチャで web アプリケーションを作る際に、バリデーションはどのレイヤの責務なのか？と悩むことが多いため、それについての考察を行ってみる。 あと、バリデーションについて書いてたはずがドメインロジックとアプリケーションロジックの違いについても結構言及せざるを得ない感じになったので、そのへんの話もしてみる。 結論から言うと バリデーションはどのレイヤの責務なのか？という問い自体が間違いであり、レイヤごとにそのレイヤの責務となるバリデーションを行うべき、というのが今のところの結論。 バリデーションという単語は意味があまりに広い。「意図していないもの/ことを防ぐ」ことはすべてバリデーションと呼ばれている節がある。そのことにより、バリデーションというのはあたかも唯一つの責務であるかのように錯覚しがちだが、そうではない。クリーンアーキテクチャではレイヤによって責務を分担しているが、同
ビジネスとエンジニアリングの接合点 そしてコード品質がそこに及ぼす影響 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向けのバ
Ruby on Rails を用いたシステム上で入力フォームを実現する際、Rails が提供しているフォームヘルパーを利用した実装や、React や Vue によるコンポーネントの自前での実装が一般的に行われます。 ここで、職業で学生を選択した場合は学校名と学年、会社員を選択した場合は役職と年収を入力する...といった、条件分岐が大量に生まれる入力フォームを想像しましょう。 一般的な実装手法では、あるフォームの入力値が他のフォームに影響を与えるような、複雑で動的な入力フォームの実現をするために、大量の if 文を書く必要があります。 また、ユーザから送信された入力値の正しさをバリデーションするために、バックエンド側に同様の if 文を大量に書く必要が出てきます。 そこで私は、複雑な仕様の入力フォームの実装のための JSON Schema 活用方法および事例について紹介します。入力フォームの
主にバックエンドのエンジニアとしてクックパッドマートの開発に携わっている塩出（ @solt9029 ）です。 美味しい食材をユーザにお届けするサービスであるクックパッドマートでは、日々街の販売店や地域の生産者が商品の登録を行っています。 商品を登録する際、販売者は消費期限をはじめとする様々な品質保証の情報を正確に入力する必要があります。 しかし、商品の種類や状態に応じて記載するべき品質保証の情報は異なるため、全項目が羅列されるフォームでは正確な入力が困難であり、販売者および商品の審査を行う社内の運用メンバに対して大きな負担をかけていました。 そこで、 JSON Schema を利用して複雑なフォームの出し分けを自動で制御し、またバックエンド側でのバリデーションも行うことが出来る仕組みを導入しました。 その結果、商品の種類や状態を選択するだけで、適切な品質保証の情報が自動的に入力され、必要な
"壊れにくい"データ基盤を構築するためにMackerelチームで実践していること - Hatena Developer Blog
こんにちは。MackerelチームにおいてCRE（Customer Reliability Engineer）をしているid:syou6162です。主にカスタマーサクセスを支えるデータ基盤の構築や、データ分析を担当しています。 今回は、壊れにくいデータ基盤を構築するため、Mackerelチームで実践していることを紹介します。 なぜ壊れにくいデータ基盤を構築するのか データ基盤が“壊れている”とはどういうことか 壊れてないだけでなく、壊れたら気付ける 前提とするシステム構成 壊れたことに気付けるよう監視する 1. バッチジョブが失敗したことに気付く 2. 投入されたデータの性質を監視する 3. ビューが壊れてないかを監視する 4. 利用状況を監視する そもそも壊れてない状態を保つ 1. データリネージを元に修正できるようにする 2. 使われていないテーブルやビューは定期的に掃除 おわりに 参
はじめに Go のウェブアプリで使う入力バリデーションに関して、ozzo-validation を検討した。 これまでのバリデーション 普段、仕事では labstack/echo という Go のウェブフレームワークを使う事が多いのだけど、バリデーションに関しては labstack/echo のサンプルに合わせて go-playground/validator を使ってきた。 go-playground/validator は機能も豊富で(一応)痒い所に手は届くのだけど、struct にタグを付けて判定させないといけない。これが実に煩わしい。以前 labstack/echo を使ったサンプルを書いたので、それを見て欲しい。 // Comment is a struct to hold unit of request and response. type Comment struct { I
GitHub - ealush/vest: Vest ✅ Declarative validations framework
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Total TypeScriptのZodチュートリアルでZodに入門した - dackdive's blog
はじめに Zod というバリデーションライブラリが非常に流行っているようなので、素振りした。 www.totaltypescript.com このチュートリアルはたしか Twitter で流れてきて知ったのだが 今見ると Zod の公式ドキュメントからも Resources として紹介されているので、そこそこ信頼していいコンテンツなのだと判断した。 チュートリアルについて チュートリアルと名がついているが、内容は全 10 問のエクササイズを解くという構成。 あらかじめ型チェックのエラーまたはランタイムのエラーが発生するサンプルコードが問題として用意されており、そのコードを修正しながら Zod の基本的な使い方を学ぶ。 チュートリアルには Zod の使い方の説明は特にないので、チュートリアルの問題を解くために Zod の公式ドキュメントを読んで必要な箇所を理解する、という感じ。 Rust で
はじめにOpenAPI仕様に則ってREST APIの設計をする際に、値が存在しないという状態をどのように表現するかというお話です。 undefinedとはまずはじめに、ここでundefinedと言っているのは、OpenAPIの仕様において、リクエスト/レスポンスのデータ型を定義するSchema Objectのプロパティの1つであるrequiredが指定されていない状態を指します。 OpenAPIにおけるrequiredの定義を確認してみましょう。 OpenAPIの仕様を参照すると、Schema ObjectはJSON Schemaの仕様に従うと記載されています。 The Schema Object allows the definition of input and output data types. These types can be objects, but also primit
外からやってくる値から 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
こんにちは、ティアフォーで認証認可基盤を開発している澤田です。 最近取り入れたProtobufで、素晴らしいREST APIの開発体験をしたのでご紹介します。 なお、ティアフォーではマイクロサービスを支える認証認可基盤を一緒に開発いただけるメンバーを募集しています。ご興味のある方は下記ページからご応募ください。 herp.careers 実現したかったこと マイクロサービス間連携のAPI開発において、以下の条件を満たすやり方を探していました。 スキーマを最初に定義してリクエストとレスポンスの型が自動で生成される ドキュメント（openapi.yaml）が生成される バリデーションが定義できて、その実装が自動で生成される 実現方法 Go言語で開発する場合はgo-swaggerでも実現できますが、本記事では、Protobufで実現できるgRPC Gatewayとprotoc-gen-valid
今回は、郵便番号データ内の町名を空にしなければいけない町域について紹介します。 データは、記載がない限り2021-05-31のデータを用いています。 ケンオールでどのようにパースされているかは、こちらのデモで試せます。 以下に掲載がない場合 ○○一円 ○○の次に番地がくる場合(○○は町名) ○○の次に番地がくる場合の歴史的背景 参考文献 ケンオールについて 更新履歴 町域に文字列が記載されているものの、コメントと同様の文字列のため削除しなければいけないパターンが存在します。 そのパターンは以下の通りです。 以下に掲載がない場合 ○○一円(○○は町名) ○○の次に番地がくる場合(○○は町名) 以下に掲載がない場合 以下に掲載がない場合とは、以降のレコードに掲載されていない住所の場合はこの郵便番号を使うよう指示しているコメント文字列です。 0600000: 北海道 札幌市 中央区 以下に掲載が
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 を含むテンプレートリテラル型を付けることはできても, 文字列リテラル型を付けることはできません. 文字列リテラル型を付けるためには型検査時 (実行の前) に入力文字列の内容がわかっている必要があるので, まあそれはそうですね. このことを利用して, 実行時の入力を含む文字列を与えようとすると型検査に失敗するような関数を作ることができそうです. まずは与えられた型が文字列リテラル型, ま
業務委託で STORES の開発をしている @inouetakuya です。 先日 STORES のフロントエンドチーム内でクライアントサイドのバリデーションについて見直す機会があり、特にバリデーションエラーのデータ型をどうするかについての議論が興味深かったので、共有させていただきます。 背景 議論の背景について簡単に触れておくと、STORES のクライアントサイドでは、バリデーションのライブラリとしてこれまで joi-browser を使ってきました。 しかしながら、本家の Node.js 版の joi がブラウザ対応したことにより joi-browser が deprecated になったことを受けて、今後も joi を使い続けるかを検討したところ、 joi-browser と joi の最新バージョンとの間で API の差異がいくつかあり、joi-browser から joi への乗
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 の場合、
Next.js の Zod 活用術
本年は Next.js + バリデーションライブラリの Zod をよく利用し、Zenn でもいくつかの関連記事を投稿しました。本稿では、この組み合わせならではの TIPS を紹介します。記事で紹介するサンプルは以下に置いています。 リクエスト検証に便利な Zod Next.js で getServerSideProps を使用すると、リクエスト検証をサーバーサイドで行えます。例えばセッションに保持している値の検証はバリデーションライブラリの Zod を使用して、次のようなコードで実現できます。 export const userSchema = z.object({ name: z.string(), email: z.string(), }); export const getServerSideProps = async (ctx) => { const sess = await ge
サンプルアプリはこちらです。 mockサーバーの起動が必要なので、注意してください。デプロイしているサンプルアプリは、サーバーとの通信をしないので、注意してください。 https://github.com/sadnessOjisan/Form-Museum
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
UX Movementの創立者、ライター。ユーザーに優しいユーザーエクスペリエンスデザインのスキルを読者の方が上達できるよう、UX Movementのブログを作りました。 フォーム入力におけるインラインバリデーションはユーザーの入力完了を妨げている恐れがあります。 インラインバリデーションは問題のあるフィールドのインラインにエラーメッセージを表示します。ユーザーがフォームを送信する前にこれが起動すると、さらなるエラーが発生する原因になり、フォームを完了するのに余計に時間が掛かってしまうことがあります。 送信前にバリデーションをするということ 77名と90名が参加した２つのリサーチによれば、ユーザーが情報を記入したフィールドから離れた瞬間にエラーメッセージを表示すると、フォームを完了するまでにはるかに多くのエラーを犯すことがわかりました。 ユーザーは間違いを瞬時に訂正する機会があったにもかか
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にするのは正直辛い。ヒューマンリーダブルだからといって人が読めるとは限
TypeScriptのゾッとする話 ~ Zodの紹介 ~
現在( 2021/09/13 )、この記事の情報は古くなっている可能性があります！ そのため、なるべくは公式ドキュメントを参照してください。 参照: 公式ドキュメント この記事について 先日、「 エンジニアとして一番怖いモノは何？ 」と知人に尋ねると、 「 実は、TypeScript が一番怖い 」 と言ってきました。 そんな訳ないだろうと思っていたのですが、どうやら知人は本気の様子。 「 TypeScript が嫌いならまだしも、TypeScript が怖いとは、これはナニかあるな 🤔 」 と思った私は、TypeScript First なライブラリである Zod を知人に紹介して、事の真意を確かめようとしたのでした。 怖いならもっと怖がらせてやろうと思ったのは内緒 🤫 しかし、知人に紹介するだけでは勿体ないので、今回は皆さんに知見を交えながら Zod の事を紹介していこうと思います
You're an engineer. You're building something. The thing you're building probably has inputs - points at which data is injected. Let's say you're building a CLI called matt: Here, <something> is the input. It's the thing that tells the program what to do. It's totally unknown at runtime - it might not even exist. If you're building a public-facing API, you might have inputs that are exposed to pub
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の型定義からバリデーションコードを生成するツールを書いた
クライアントサイドのバリデーションエラーのデータ型についての考察 - STORES Product Blog
Formの送信ログから反省する、 本当は必要だったバリデーションや機能たち
Data validation for machine learning 読んだ
インラインバリデーションがフォーム入力の妨げになるケース
新マスタデータ管理システムakashicの開発 - KAYAC engineers' blog
TypeScript + Tynderから始める宣言的検証生活 - Qiita
When should you use Zod?
macaro-ni.jp
www.cinematoday.jp
ja.wikipedia.org
mainichi.jp
superclassic.jp
www.hokkaido-np.co.jp