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
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
410
CSC509 Lecture 08
javiergs
PRO
0
230
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
230
モテるデスク環境
mozumasu
3
250
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
120
CSC305 Lecture 06
javiergs
PRO
0
260
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
310
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
510
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
640
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
320
contribution to astral-sh/uv
shunsock
0
410
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
GitHub's CSS Performance
jonrohan
1032
470k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Six Lessons from altMBA
skipperchong
29
4k
How to train your dragon (web standard)
notwaldorf
97
6.3k
RailsConf 2023
tenderlove
30
1.3k
Facilitating Awesome Meetings
lara
56
6.6k
Being A Developer After 40
akosma
91
590k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
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