Web forms made easyIkuru K

About Me

- Ikuru K- エンジニア @ サイボウズスタートアップス株式会社

- 2016 年 5 月〜- https://github.com/iku000888- https://twitter.com/iku000888

Web forms

Our Product

- 安否確認サービス 2 - https://anpi.cstap.com/anpi2.html

- ~100 web forms- バリエーション :

- 同じデータを受け取るが、見た目が異なる- 同じような見た目だが受け取るデータが異なる

Form の問題点- 機能と見た目の記述が混在する- データ型の記述が出来ない- バリデーションが記述出来ない

- バリデーション結果のフィードバックを統一的に書けない

見た目と機能の記述が混在する

見た目のための記述少しだけ見た目を変えたいときとかの再利用性。。。？

機能の記述- action- method- enctype- accept- accept-charset etc...- => 本質的に外見とは別物なので、同じ場所に書きたくない

フォームの項目にデータ型を記述出来ない- Http リクエストに送られるのは文字列- 数字なのか、日付なのかをパースする必要がある- =>DRY に済ませたい

バリデーションとエラーのフィードバック- 多種多様なやり方、ライブラリがある- ユーザーにどのようなフィードバックを返すかまで考慮してバリデーションを行う必要がある。

そこで Formative

- clj/cljs- https://github.com/jkk/formative- Original Author: Justin Kramer

マップとして記述する

レンダリング- formative.core/render-form- hiccup データを吐く- マルチメソッドで見た目とフォームの機能を分離- ユーザーが自由に見た目のレンダリングを拡張することが可能- Bootstrap style を同梱

項目にデータ型を指定できる

- フィールドを int, date, etc としてパース可能- マルチメソッドなので自由に拡張可能- Ring のリクエストマップを、フィールドのデータ型に基づいてパースできる

バリデーションを簡潔に記述できる

それぞれに独自のエラーメッセージを書くことも可能

:validations [[:required [:foo]] [:max-length 3 [:foo]] [:after #inst"2020" :date]]

バリデーション結果を元にエラーをレンダリング

使った感想- フォームを統一的に記述できて幸せ- エラーのレンダリング楽- 必要な場所では html をインラインで記述できて柔軟性があった- マップなので Clojure の関数で簡単に操作できる

- 「少しだけ違う」フォームを用意に記述できる

余談その 1

最近メンテナを引き受けた- 2014 年から放置されていた- cljx -> cljc- 新しい cljs だと動かない部分を修正- Pull Requests welcome!

Formativeのメンテナンス

余談その２Formative について話そうと Clojure/west のCFP に応募　

散った

- ちなみに 80 名くらい応募したらしい- 登壇者は 24 名

Thank you