Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
超変換! Hiccup data structure!!
ayato
August 31, 2017
Programming
2
310
超変換! Hiccup data structure!!
ayato
August 31, 2017
Tweet
Share
More Decks by ayato
See All by ayato
ayato0211
5
2.3k
ayato0211
3
150
ayato0211
3
750
ayato0211
2
470
ayato0211
0
250
ayato0211
0
120
ayato0211
2
2k
ayato0211
6
750
ayato0211
2
150
Other Decks in Programming
See All in Programming
aratayokoyama
0
190
ajstarks
2
550
freekmurze
0
190
line_developers_tw2
0
600
makicamel
1
170
manfredsteyer
PRO
0
250
inoue2002
0
260
xrdnk
0
130
nrslib
20
13k
junmikai
0
290
pdone
0
210
kazuki19992
0
440
Featured
See All Featured
pedronauck
652
110k
hatefulcrawdad
257
17k
cassininazir
347
20k
cherdarchuk
71
260k
bkeepers
408
57k
bryan
30
3.3k
lara
590
61k
searls
204
35k
holman
461
280k
paulrobertlloyd
71
1.4k
aarron
258
36k
malarkey
119
16k
Transcript
Hiccup Data Structure!! Lisp Meet Up presented by Shibuya.lisp #55
超変換!!
–Johnny Appleseed ʠ͜͜ʹҾ༻Λೖྗ͍ͯͩ͘͠͞ɻʡ –Yusuke Godai “こんなやつらのために、 これ以上誰かの涙は⾒たくない! 皆に笑顔でいて欲しいんです! だから⾒ててください!俺の…変⾝!! ”
–Johnny Appleseed ʠ͜͜ʹҾ༻Λೖྗ͍ͯͩ͘͠͞ɻʡ –@ayato-p “HTML Formのために、 これ以上誰かの涙は⾒たくない! Hiccupユーザーに笑顔でいて欲しいんです! だから⾒ててください!俺の…変換!! ”
あやぴー •ayato-p@github •Cybozu Startups, Inc. •Clojureエンジニア •Webアプリを作るお仕事 •仮面ライダーと言えばクウ◦世代 •ガンダムと言えばS◦ED世代
今日の話
今日話すこと •そもそもHiccupとは •HTMLフォームを書くのが面倒だということ •Hiccupデータの変換について •ClojureScriptでマクロ展開するときハマった話 •「仮面ライダーク◦ガ」の素晴らしさについて
今日話すこと •そもそもHiccupとは •HTMLフォームを書くのが面倒だということ •Hiccupデータの変換について •ClojureScriptでマクロ展開するときハマった話 •「仮面ライダーク◦ガ」の素晴らしさについて
Hiccup
そもそもHiccupとは •HTMLをClojureのデータ構造で表現するDSL •ベクタをタグ、マップを属性として表現する •Clojureコミュニティでは人気(?) •沢山のライブラリがHiccup-likeなデータでの表現を サポートしている •例) Enlive, Reagent, Rum,
Instaparse, etc
そもそもHiccupとは [:a#mybtn.button {:href "..."} "..."] タグベクター: ベクタで表現したHTMLタグ
そもそもHiccupとは [:a#mybtn.button {:href "..."} "..."] タグ名: CSSセレクターのように書ける
そもそもHiccupとは [:a#mybtn.button {:href "..."} "..."] 属性: マップで表現
そもそもHiccupとは [:a#mybtn.button {:href "..."} "..."] コンテンツ: タグベクターや文字列を書ける
これであなたも ✨Hiccupマスター✨
HTMLフォームを 書くのは面倒だ
HTMLフォームは面倒 •フォームのポスト処理に失敗した場合、入力されていた 値を入力された状態にして再描画しなければいけない •利用しているCSSフレームワークのルールにそって、 エラーが適切に表示されるようにしなければならない •全てのHTMLフォームを全く同じように表示したくない ことがある •例) ログインフォーム、グリッドスタイル
[:div.form-group [:label {:for "input-email"} "Email address"] [:input#input-email.form-control {:type :email :name
:email :class (when (contains? errors :email) "is-invalid") :value (:email values) :placeholer "Enter email"}] [:div.invalid-feedback (:email errors)] [:small.form-text.text-muted "We'll never share your email with anyone else."]] Bootstrap4の場合
[:div.form-group [:label {:for "input-email"} "Email address"] [:input#input-email.form-control {:type :email :name
:email :class (when (contains? errors :email) "is-invalid") :value (:email values) :placeholer "Enter email"}] [:div.invalid-feedback (:email errors)] [:small.form-text.text-muted "We'll never share your email with anyone else."]] Bootstrap4の場合
…
どうにかしたい… 1.諦める 2.小さい関数で面倒なところをラップする (hiccup.formみたいな) 3.Formativeみたいなフォーム用ライブラリを使う (jkk/formative) 4.まだ見たこと無い解決方法
OOPな言語のWAFだと… •フォームに値をマッピングするのに •フォームオブジェクトをつくる •ORMのモデルオブジェクトをつかう •エラー用クラスを付与するのに •カスタムタグをつくる •エラー時に固定のCSSクラスを付与する
–Johnny Appleseed ʠ͜͜ʹҾ༻Λೖྗ͍ͯͩ͘͠͞ɻʡ –Yusuke Godai “求められた気がしたんです。 あの蜘蛛みたいな奴と戦えって!”
–Johnny Appleseed ʠ͜͜ʹҾ༻Λೖྗ͍ͯͩ͘͠͞ɻʡ –@ayato-p “求められた気がしたんです。 あのVerbose Hiccupと戦えって!”
Kuuga
Kuugaとは •Pure Clojureにしか依存していない •ユーザーが自由に •任意のタグやクラスに対して変換ルールを定義できて •マクロ展開時に変換することもできて •ClojureScriptもサポートしている •Hiccupのようなデータを変換するライブラリ •https://github.com/ayato-p/kuuga
変換ルールを書く-その) (defmethod growing/transform-by-tag :input [_ options tag-vector] (let [[tagkw tagopts
contents] (tool/parse-tag-vector tag-vector)] `[~tagkw (update-input-opts ~options ~tagopts) ~@contents]))
変換ルールを書く-その* (defmethod growing/transform-by-class :form-group [_ options tag-vector] (let [[tagkw tagopts
contents] (tool/parse-tag-vector tag-vector) contents (reduce (fn [contents' tagvec'] (let [[tk to _] (tool/parse-tag-vector tagvec') [_ t] (tool/parse-tag-keyword tk)] (cond-> (conj contents' tagvec') (= t "input") (conj `(invalid-fb ~options ~to))))) [] contents))] `[~tagkw ~tagopts ~@contents]))
こうすると…
これを… [:div.form-group [:label {:for "input-email"} "Email address"] [:input#input-email.form-control {:type :email
:name :email :placeholder "Enter email"}] [:small.form-text.text-muted "We'll never share your email with anyone else."]]
こんな感じで展開できる [:div.form-group [:label {:for "input-email"} "Email address"] [:input#input-email.form-control {:type :email
:name :email :class (when (contains? errors :email) "is-invalid") :value (:email values) :placeholder "Enter email"}] [:div.invalid-feedback (:email errors)] [:small.form-text.text-muted "We'll never share your email with anyone else."]] ※イメージです
Kuugaのメリット •マクロ展開時に変換できる •なので実行時の変換コストがない •特別なタグ/記法を覚える必要がない •どのくらい変換ルールを書くかもユーザー次第
Kuugaのデメリット •特にない •マクロ展開時に変換するルールを書くのが少し難しい •実行時に変換する方法は速度があまり出ない
KuugaとClojureScript
Kuugaは… •マクロ展開時にHiccupデータを変換できる •拡張ルールをマルチメソッドで記述する •ClojureScriptをサポートしている
ClojureScriptでのマクロ •ClojureScriptでマクロは書けない •セルフホストはとりあえず忘れる •マクロ展開はClojureの環境が利用される •展開後のフォームに含まれるものはClojureScript上に なければならない
問題. •マクロ展開時に利用されるマルチメソッドはClojureの 環境で定義されていなければならない
問題. •マクロ展開時に利用されるマルチメソッドはClojureの 環境で定義されていなければならない •ClojureScriptのビルド時に変換ルールを読み込んで おかないといけない
解決策 •cljsbuildなどの既存のツールに任意のClojure libを 読み込む仕組みがなさそう? •自前でスクリプトを書いて、その中で任意のlibを 読み込みClojureScriptのビルドAPIを直接叩く •lein-execはプロジェクトの環境を引き継げる •Bootは元々そういう用途で使えるので便利 https://github.com/ayato-p/kuuga/blob/master/examples/cljs/script/cljsbuild.clj
まとめ •Kuugaを使うとわりとハッピーになれる(気がした) •マクロ展開時に分かっている部分を変換するコンセプト を適用できるところは他にもある気がする •SQL Builder的なやつとか