Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ElmでつくるSVGエディタ
Search
aratama
December 06, 2019
Programming
0
420
ElmでつくるSVGエディタ
2019/12/07 ELMP1 の登壇資料です
https://elm-jp.connpass.com/event/156016/
aratama
December 06, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
Platformに“ちょうどいい”責務ってどこ? 関心の熱さにあわせて考える、責務分担のプラクティス
estie
2
500
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.1k
プログラマのための作曲入門
cheebow
0
480
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
360
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
120
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
130
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
110
Swiftビルド弾丸ツアー - Swift Buildが作る新しいエコシステム
giginet
PRO
0
1.5k
Model Pollution
hschwentner
1
180
CSC509 Lecture 01
javiergs
PRO
1
430
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
2
1k
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
420
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Faster Mobile Websites
deanohume
310
31k
A designer walks into a library…
pauljervisheath
208
24k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
GitHub's CSS Performance
jonrohan
1032
460k
Code Reviewing Like a Champion
maltzj
525
40k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
950
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Language of Interfaces
destraynor
162
25k
Transcript
ElmでつくるSVGエディタ Alterinkのつくりかた 2019/12/07 ELMP1 Cubbit 1
自己紹介 • Twitter (@cubbit2) • Qiita (@hiruberuto) • GitHub (@aratama)
名前:Cubbit いちばん好きな言語:PureScript ふだんのお仕事:総務&ひとり情シス 2
今回お話しすること • 最近Elmで作っているモノの紹介 • 言語の基礎/Elmアーキテクチャ • Elmの良かったところ/大丈夫だったところ ◦ 変わり続けるデータ構造 ◦
フリーダムなモジュール分割 • Elmで辛かった/うまくいかなかったところ ◦ 『コンポーネント』とのつきあいかた ◦ エゲツない最適化 • Elmたのしいよ! 3
いまElmで作っている アプリケーションの紹介 Elmで何がつくれる? どこまで作れる? 4
アプリの紹介1 概要 • 名前は Alterink • Elm製のウェブアプリケーション(+Firebase) • Scalable Vector Graphics
(SVG)のエディタ ウェブサイト:https://alterink.app/ リポジトリ:https://github.com/aratama/alterink 5
アプリの紹介2 画面と機能 6
アプリの紹介3 コンセプト • Ad◯be Illustrat◯r/InkScapeなどの代替 • ウェブアプリケーション ◦ ブラウザのSVGレンダラと互換 ◦ マルチプラットフォーム
• データ構造や操作がSVGベース ◦ SVG手書き勢も直感的に使えるエディタ 7
スライド2枚でわかる おさらいElm 8
Elmの言語仕様の特徴 • 静的型付け • 純粋関数型(式がぜんぶ純粋) • カスタム型(代数的データ型) • The Elm
Architecture / 仮想DOM • ポート 9
The Elm Architectureとは update view Msg Cmd 外の世界(生DOM・生JavaScriptの世界) Msg Model
Model データストア Model HTML描画 UIイベント発生! 10 (ポート)
Elmを使ってよかったところ! 大丈夫だったところ! 11
データ構造1 • データ構造を修正すると、修正 はアプリケーション全体に波及 する。データ構造は超大事 • でも、データ構造というものは 変化し続ける…… 12
データ構造2 データ構造の変遷 ①試作段階。 限られた 図形のみ ②SVGの データ構造に 対応 ③編集時に 必要なデータを 付加
→Elmではデータ構造の変更は恐れなくていい! ④最適化 13
モジュール分割1 モジュールをどのようにわけるべきか? Elmを始めた誰もが一度は悩むポイント 14
モジュール分割2 とりあえずの結論: 細かいことは気にするな! Elmは安全な言語なので、 あとで幾らでも安全に直せる。 15
モジュール分割3 べからず集 • 事前に綿密にモジュールの設計を頑張るな • ファイルが大きくなってもあまり気にするな • MVC的に分けるのはやめとけ • 『コンポーネント』にしようとするな 公式ガイド
『Webアプリケーションの構造化』より: 16
モジュール分割4 べし集 • まずはページごとにモジュールを分けよう • 何らかのデータ型とそれに付随する関数とい うまとまりが見つかったら、そこで切り分け てもいい • 『コンポーネント』を作るのではなくて、た だのビューの関数を作ろう
公式ガイド 『Webアプリケーションの構造化』より: 17
しかし肥大化し続ける Msg と update • Msg のヴァリアントの数は 100 以上 •
update の case-of 文も巨大に →分割してもあまりメリットはなく、むしろ 複雑さを増すと判断。単純さを選択 18
Elmでつらかったところ うまくいかなかったところ…… 19
コンポーネント1 欲しかったもの 20 既存のもの simonh1000/elm-colorpicker 欲しかったもの
コンポーネント2 再利用のジレンマ 21 • 複雑な機能ほど、既存のものを流用したい • でも、複雑な機能ほど自分の要求を満たしにくい • 高度にカスタマイズできるコンポーネントは困難 ▶単純なコンポーネントを組み合わせて、 自作せざるを得ないことが多い……
最適化つらいよ1 portにすがりつけ Elmで書かれたXMLパーサが遅すぎ て、SVGファイルの読み込みに時間 がかかりすぎる…… →port越しで DOMParser (強引) 22
最適化つらいよ2 自力でキャッシュ d属性(パスの描画命令)のパースと 結合が遅くてもたつく。数ミリ秒以 内に終わらせたい →属性値を (List Point, String)とい うように元の文字列とパース済みの 値を組にして保持する
23
最適化つらいよ3 仮想DOMがもどかしい SVGの埋め込み画像は巨大な Data URI 。再描画のたびにめっちゃもた つく…… →URL.createObjectURL (強引) 24
まとめ • シンプルで安全な言語仕様が嬉しい • つらいときもあるけど、だいたいなん とかなるよ Elmたのしいよ! 25