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
410
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
Reactの歴史を振り返る
tutinoko
1
140
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
650
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
270
TypeScriptでDXを上げろ! Hono編
yusukebe
3
870
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.4k
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
15k
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.5k
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.3k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
740
PHPカンファレンス関西2025 基調講演
sugimotokei
5
960
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing Experiences People Love
moore
142
24k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Rails Girls Zürich Keynote
gr2m
95
14k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Visualization
eitanlees
146
16k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
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