ElmでつくるSVGエディタ

2019/12/07 ELMP1 の登壇資料です

https://elm-jp.connpass.com/event/156016/

Transcript

1. ElmでつくるSVGエディタ Alterinkのつくりかた 2019/12/07 ELMP1 Cubbit 1
2. 自己紹介 • Twitter (@cubbit2) • Qiita (@hiruberuto) • GitHub (@aratama) 名前：Cubbit いちばん好きな言語：PureScript ふだんのお仕事：総務＆ひとり情シス 2
3. 今回お話しすること • 最近Elmで作っているモノの紹介 • 言語の基礎/Elmアーキテクチャ • Elmの良かったところ/大丈夫だったところ ◦ 変わり続けるデータ構造 ◦ フリーダムなモジュール分割 • Elmで辛かった/うまくいかなかったところ ◦ 『コンポーネント』とのつきあいかた ◦ エゲツない最適化 • Elmたのしいよ！ 3
4. いまElmで作っている アプリケーションの紹介 Elmで何がつくれる？　どこまで作れる？ 4
5. アプリの紹介１　概要 • 名前は Alterink • Elm製のウェブアプリケーション(+Firebase) • Scalable Vector Graphics (SVG)のエディタ ウェブサイト：https://alterink.app/ リポジトリ：https://github.com/aratama/alterink 5
6. アプリの紹介２　画面と機能 6
7. アプリの紹介３　コンセプト • Ad◯be Illustrat◯r/InkScapeなどの代替 • ウェブアプリケーション ◦ ブラウザのSVGレンダラと互換 ◦ マルチプラットフォーム • データ構造や操作がSVGベース ◦ SVG手書き勢も直感的に使えるエディタ 7
8. スライド2枚でわかる おさらいElm 8
9. Elmの言語仕様の特徴 • 静的型付け • 純粋関数型（式がぜんぶ純粋） • カスタム型（代数的データ型） • The Elm Architecture / 仮想DOM • ポート 9
10. The Elm Architectureとは update view Msg Cmd 外の世界（生DOM・生JavaScriptの世界） Msg Model Model データストア Model HTML描画 UIイベント発生！ 10 （ポート）
11. Elmを使ってよかったところ！ 大丈夫だったところ！ 11
12. データ構造１ • データ構造を修正すると、修正 はアプリケーション全体に波及 する。データ構造は超大事 • でも、データ構造というものは 変化し続ける…… 12
13. データ構造２　データ構造の変遷 ①試作段階。 限られた 図形のみ ②SVGの データ構造に 対応 ③編集時に 必要なデータを 付加 →Elmではデータ構造の変更は恐れなくていい！ ④最適化 13
14. モジュール分割１ モジュールをどのようにわけるべきか？ Elmを始めた誰もが一度は悩むポイント 14
15. モジュール分割２ とりあえずの結論： 　細かいことは気にするな！ Elmは安全な言語なので、　 あとで幾らでも安全に直せる。 15
16. モジュール分割３　べからず集 • 事前に綿密にモジュールの設計を頑張るな • ファイルが大きくなってもあまり気にするな • MVC的に分けるのはやめとけ • 『コンポーネント』にしようとするな 公式ガイド 『Webアプリケーションの構造化』より： 16
17. モジュール分割４　べし集 • まずはページごとにモジュールを分けよう • 何らかのデータ型とそれに付随する関数とい うまとまりが見つかったら、そこで切り分け てもいい • 『コンポーネント』を作るのではなくて、た だのビューの関数を作ろう 公式ガイド 『Webアプリケーションの構造化』より： 17
18. しかし肥大化し続ける Msg と update • Msg のヴァリアントの数は 100 以上 • update の case-of 文も巨大に →分割してもあまりメリットはなく、むしろ 複雑さを増すと判断。単純さを選択 18
19. Elmでつらかったところ うまくいかなかったところ…… 19
20. コンポーネント１　欲しかったもの 20 既存のもの simonh1000/elm-colorpicker 欲しかったもの
21. コンポーネント２　再利用のジレンマ 21 • 複雑な機能ほど、既存のものを流用したい • でも、複雑な機能ほど自分の要求を満たしにくい • 高度にカスタマイズできるコンポーネントは困難 ▶単純なコンポーネントを組み合わせて、 自作せざるを得ないことが多い……
22. 最適化つらいよ１　portにすがりつけ Elmで書かれたXMLパーサが遅すぎ て、SVGファイルの読み込みに時間 がかかりすぎる…… →port越しで DOMParser (強引) 22
23. 最適化つらいよ２　自力でキャッシュ d属性（パスの描画命令）のパースと 結合が遅くてもたつく。数ミリ秒以 内に終わらせたい →属性値を (List Point, String)とい うように元の文字列とパース済みの 値を組にして保持する 23
24. 最適化つらいよ３　仮想DOMがもどかしい SVGの埋め込み画像は巨大な Data URI 。再描画のたびにめっちゃもた つく…… →URL.createObjectURL (強引） 24
25. まとめ • シンプルで安全な言語仕様が嬉しい • つらいときもあるけど、だいたいなん とかなるよ 　 　　Elmたのしいよ！ 25