Svelteのstoreでバリデーションを実装する

追加

npmにpushしました。https://www.npmjs.com/package/svelte-validator

追記おわり

いい感じのバリデーションのライブラリないかなーと探していたんですが自分で書ける気がしてきたのでPoC的なところまでやったやつです。

import { writable, derived } from 'svelte/store'

export function createValidator({ rules }) {
  const validator = createValidatorFun(rules)

  const valueStore = writable('')
  const errorStore = derived(valueStore, (value) => validator(value))

  return [valueStore, errorStore]
}

function createValidatorFun(rules) {
  return (value) => {
    // rulesに基づいてvalueをバリデーションする
    // 満たしていないルールの名前を配列で返す（※）
  }
}

使う方は

<script>
  import { createValidator } from '../stores/validator'
  import TextInput from '../components/TextInput.svelte'

  const [valueStore, errorStore] = createValidator({
    rules: [
      { required: true },
      { length: { min: 0, max: 10 } }
    ]
  })
</script>

<TextInput bind:value="{$valueStore}" />
<span>Violated: {$errorStore}</span>

$errorStoreには※の配列が入ってきます。

もうちょいごちゃごちゃ足したのは https://gist.github.com/Joe-noh/9e0446770849b8b2e211985d0ebd6676 に貼っときます。一回blur発火してからバリデーション始めてほしいケースに対応したりとかしてます。内部用の設定もstoreにして、const errorStore = derived([valueStore, configStore], ...)にするってのを思いついたのは深夜の頭にしては上出来かも。

Renderでmonorepo管理されたアプリケーションを動かす

render.com

RenderというPaaSがあります。ダッシュボードからGitHub連携してリポジトリ選んでbuildCommandとstartCommandを設定するとWebアプリがスポンと立ち上がって便利です。タイトルにはmonorepoとか書いてあるんですが、つまり言いたいことはbuildCommandとstartCommandにcd ./app && npm run buildみたいに書いてもOKだったよってことです。

まだほんとに触っただけですが、後ろのk8sの隠蔽具合がちょうど良さそうという印象でした。ググラビリティは高くないですね。

2022/07/31 追記

まだEarly Accessだけど、何か来てます。

render.com

2019年に実装したちょい地味なやつ

SUZURI Advent Calendar 2019 2日目のエントリです。

SUZURIの開発をやっている者です。アイテムの追加とか機能の開発とかパフォーマンスの改善とか、そういうことをして暮らしています。何を書こうかなーという感じなんですが、今年担当した機能追加でオモテに出ているもののうち、ちょっと地味というか渋いやつを並べます。リリースって、バーンと派手にお知らせが出るものもあればそうでもないものもあるんでね。

領収書ダウンロード

「買ったもの」画面から領収書PDFをダウンロードできるようにしました。たびたびユーザさんからお問い合わせ頂いて個別に領収書発行の対応していたのですが、量が増えて対応に時間が取られるようになってきたとのことで、じゃあつくりましょうか、というやつです。PDF発行してるやつはそれなりに汎用的に使えるようになっていて、Canvathでも使っています。

販売カラーの制限

suzuri.jp

商品を作成する際に、売りたい色だけ売れるようにしました。例えば「このデザインは黒のボディ用に描いたので黒のTシャツだけ売りたい」とか、インクジェット系のアイテムは淡色ボディに白をプリントできないので濃色だけ売るとかできます。SUZURIは画像1枚アップロードするだけで手軽に商品をつくれることが魅力の1つなので、そのステップ数を増やさないように、またこの機能に興味のないひとが考えることを増やさないように、デザイナーの@putchomといろいろ話し合ってつくりました。余談ですが、↑のジャーナルは9月26日に書かれていますが実はこの機能は7月に出ています。自分が「隠し機能っぽいから、あんまりお知らせとか出さないでよ」みたいなことを言っていたためです。めんどくさくてすみません。

自分だけに見えるようにする

非公開で商品がつくれるようになりました。作成画面にこんなチェックボックスを置いています。売り出す前に印刷の仕上がりを見たい、自分用に買いたい、みたいなときにご利用ください。最初はこちら側で設定した一部のユーザさんだけが使える機能として作ったのですが、わりと要望を頂いているということだったので全員に開放しました。注意していただきたい点として、非公開だからといっても規約違反になるような画像を上げてしまうとBANの対象になる可能性があります。

---

探せばもっとある気もしているんですが、今回はこの辺で。よいお年を。