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
ClojureScriptで変わるクライアントサイドWeb
Search
Minori Yamashita
June 30, 2013
Programming
0
930
ClojureScriptで変わるクライアントサイドWeb
渋谷.cljで喋らせてもらった時のスライドです。絵をがんばりました。
Minori Yamashita
June 30, 2013
Tweet
Share
More Decks by Minori Yamashita
See All by Minori Yamashita
Cloxp @ Smalltalk Meetup
ympbyc
0
270
Real World Objects
ympbyc
2
3.2k
Purely Functional Smalltalk-72
ympbyc
1
10k
LittleSmallscript
ympbyc
2
1.4k
Other Decks in Programming
See All in Programming
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
540
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.9k
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
150
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
220
C++20 射影変換
faithandbrave
0
530
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
380
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
380
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
260
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
690
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Documentation Writing (for coders)
carmenintech
72
4.9k
Docker and Python
trallard
44
3.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Making Projects Easy
brettharned
116
6.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Optimizing for Happiness
mojombo
379
70k
BBQ
matthewcrist
89
9.7k
Typedesign – Prime Four
hannesfritz
42
2.7k
Transcript
WebFUI ClojureScriptで変わるクライアントサイドWeb
Whoami { :name "山下実則" :age 19 :twitter { :name "ympbyc"
:icon } :blog "標高+1m" :url "http://ympbyc.github.io/" :email "
[email protected]
" }
Prehistoric Javascript
Prehistoric JavaScript
We Got Problems Over Here • データがDOMにしかない。 ◦ この例だと、Todoリストの中身のデータが欲しい時は毎 回jQueryとかで取ってこなくちゃいけない.
◦ DOMはデータ表現に向いていない ◦ DOMが壊れたらデータも壊れる • 構造がない ◦ ModelとViewが分離できていない。 ◦ 保守性に問題あり • 副作用しかない ◦ 読み辛い ◦ 順番への依存が激しい
Client-side MVC Kicks In
Client-side MVC Kicks In
What Gets Solved? • データはJSのオブジェクトになった • ModelとViewが分離された
Still, We Have Problems • Modelがミュータブル ◦ 基本的にModelはミュータブルなハッシュテーブルにいく つかメソッドをくっ付けたもの ◦
MVC自体がミュータブルなModelを前提としている ◦ 順番への依存が激しい • 状態が散らばる ◦ 各Modelの各インスタンスがバラバラに状態を持つ ◦ アプリケーションの状態の復元が困難 ◦ デバッガがないと現在の状態を把握できない.テストし辛 い • Viewの操作が命令的 • View間の連携が面倒くさい • jQueryでView作るの面倒くさい • 覚える事が多い
ClojureScript to the Rescue
ClojureScript to the Rescue
What Gets Solved? • Modelがイミュータブル ◦ データは全てstateと呼ばれるatomの中に突っ込む ◦ atomの更新はユーザからは隠される •
状態が一つの値にまとまる ◦ EDNはシリアライザブルなのでどこにでも保存できるし どこからでも復元できる • Viewの生成が宣言的 ◦ Hiccupの構文でページ全体のhtmlを表現するEDNを作 る. WebFUIによってstateが変わる度に生成されて、差 分が計算され、DOMにコミットされる. ◦ DOM EDNの中はReactive • jQueryいらない • 覚える事が少ない(render-all,launch-app)
WebFUI • Land of Lispの作者, Conrad Barskiさんが作っ た • YoutubeにClojure/conjでの動画がある
• githubでのアクティビティは低い • バグいくつかある (一個patch送った)
使ってみた http://ympbyc.github.io/s-exploration/
ClojureScriptが変えるクライアントサイドWeb • ClojureのEDNは使いやすい ◦ (e.g. render-all) ◦ クラスを作る必要が減るのでJS環境に向いている • ClojureScriptのおかげでブラウザでイミュータ
ブルなデータを扱いやすくなった ◦ jsだとObject.freezeくらいしかツールがない • クライアントサイドWebでも「難しく考えない」関 数型プログラミング
以上です ご清聴ありがとうございました。