Slide 1

Slide 1 text

メタテンプレートエンジンの話 市ヶ谷Geek★Night#14 市ヶ谷java 〜JVM言語の玉手箱〜

Slide 2

Slide 2 text

メタテンプレートエンジンの話 市ヶ谷Geek★Night#14 市ヶ谷clojure 〜JVM言語の玉手箱〜

Slide 3

Slide 3 text

あやぴー •ayato-p@github •Cybozu Startups, Inc. •Clojure書いてる •Webアプリ書いてる

Slide 4

Slide 4 text

TL;DR

Slide 5

Slide 5 text

というわけで…

Slide 6

Slide 6 text

Clojureの話をします

Slide 7

Slide 7 text

事の発端

Slide 8

Slide 8 text

HTMLフォーム面倒
Email Address
We'll never share your email with anyone else.

Slide 9

Slide 9 text

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) :placeholder "Enter email"}] [:div.invalid-feedback (:email errors)] [:small.form-text.text-muted "We'll never share your email with anyone else."]]

Slide 10

Slide 10 text

面倒なこと •_methodみたいなやつ •formのmethod属性に直接putとかdelete書きたい •__csrf_tokenみたいなやつ •いちいち書くのは面倒 •エラー表示のために書く条件分岐 •前回表示していた値を表示するための式 •たいていの場合name属性に依存している

Slide 11

Slide 11 text

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) :placeholder "Enter email"}] [:div.invalid-feedback (:email errors)] [:small.form-text.text-muted "We'll never share your email with anyone else."]] ここが決まれば…

Slide 12

Slide 12 text

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) :placeholder "Enter email"}] [:div.invalid-feedback (:email errors)] [:small.form-text.text-muted "We'll never share your email with anyone else."]] ここが決まるはず

Slide 13

Slide 13 text

考えた

Slide 14

Slide 14 text

テンプレートエンジンが HTMLに変換する前に 求める形に変換できれば いいんじゃない

Slide 15

Slide 15 text

つまり… メタテンプレートエンジン…

Slide 16

Slide 16 text

Kuuga https://github.com/ayato-p/kuuga

Slide 17

Slide 17 text

“こんなやつらのために、 これ以上誰かの涙は⾒たくない! 皆に笑顔でいて欲しいんです! だから⾒ててください!俺の…変⾝!! ”

Slide 18

Slide 18 text

“HTML Formのために、 これ以上誰かの涙は⾒たくない! Hiccupユーザーに笑顔でいて欲しいんです! だから⾒ててください!俺の…変換!! ”

Slide 19

Slide 19 text

変換ルール( (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]))

Slide 20

Slide 20 text

変換ルール) (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]))

Slide 21

Slide 21 text

そうすると

Slide 22

Slide 22 text

これを… (ultimate/transform opts [: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."]])

Slide 23

Slide 23 text

こんな感じで展開できる [: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."]] ※イメージです

Slide 24

Slide 24 text

[: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."]] ここが消えた! こんな感じで展開できる

Slide 25

Slide 25 text

まとめ •Kuugaは超便利 •Clojureはいいぞ •9/25(月) Lisp Meetup •10/4(水) 教養としてのClojure

Slide 26

Slide 26 text

Enjoy Clojure