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が予想以上に楽しかったので紹介したい
Search
ponday
January 19, 2018
Technology
1
420
Elmが予想以上に楽しかったので紹介したい
ponday
January 19, 2018
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.2k
TypeScriptの型表現
honda
10
3.1k
Web Componentsの今
honda
1
430
これまでのReact、これからのReact
honda
0
310
Gatsbyお試し
honda
0
120
styled-components or emotion?
honda
0
680
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
700
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
820
Other Decks in Technology
See All in Technology
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
120
Claude Code に プロジェクト管理やらせたみた
unson
0
190
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
290
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
380
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
230
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
150
Operating Operator
shhnjk
1
480
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
5.7k
AWS認定を取る中で感じたこと
siromi
1
170
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
0
210
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.1k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Documentation Writing (for coders)
carmenintech
72
4.9k
Building Adaptive Systems
keathley
43
2.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Making Projects Easy
brettharned
116
6.3k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Side Projects
sachag
455
42k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Facilitating Awesome Meetings
lara
54
6.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Transcript
Elmが予想以上に楽しかったので紹介したい 俺の話を聞け!! LT大会 #7 / Jan 19, 2018 ponday (@ponday_dev)
Profile Honda, Yusuke (@ponday_dev) chibi-developer ng-fukuoka organizer Community TypeScript /
JavaScript / Kotlin RxJS / Angular Like
Elm、知ってますか?
Elm - 純粋関数型プログラミング言語 - Haskellに由来する構文 - 変数が存在せず、全てがimmutable - 静的かつ強力な型付け -
コンパイル結果はJavaScript(AltJS) - 高品質なWebアプリケーション開発を目的に開発 - 静的かつ厳格な型チェック - Webアプリケーション開発用のDSLという面が強い - 「事実上、一切の実行時例外が起こらない」がウリ - エコシステムが充実 - コンパイラ - パッケージマネージャ - コードフォーマッター
触る前の印象
むずかしそう...
Elmはむずかしい? - Elmは純粋関数型言語 - 副作用の取り扱いがあまり得意ではないはず - フロントエンドは副作用だらけ - そもそも画面の描画が副作用では...? -
相性悪い気しかしない - またモナド使えとか言われるの...?(震え)
触ってみた感想
None
Elmの良いところ
良いところ① とにかくコンパイルが強力 - 静的コンパイル言語のメリット - 以下のようなパターンはコンパイルエラー - 型の不一致 - 未使用のimport -
case式※で考慮されていないパターンがある - nullableのような仕組みが組み込み(Maybe) - null参照が起こる可能性が大きく下がる - 本当に実行時例外は少ない ※ JavaScriptでいうswitch文のような構文。パターンマッチができる。
良いところ② 言語構文がシンプル - 構文自体が少ない - if - case ~ of …
- let ~ in … - ほぼこれだけ - 関数一つ一つが小さいので読みやすい - 小さい関数をたくさん作って組み合わせるスタイル - 標準関数はたくさんあるので最初は探すのに苦労するかも - Elm Architectureで使う関数はチュートリアルで大まかに網羅できる
良いところ③ 副作用の扱いが比較的簡単 - The Elm Architecture - Elmのコアに組み込みのWAF - Reactなどと同様に、仮想DOMを使用する -
Reduxにアイデアとして取り込まれた部分 - Model, View, Update※1を定義 - 各種イベントや関数などは戻り値としてユーザ定義のメッセージ※2を発 行するようにすると、あとは自動でUpdate関数が呼び出されて画面更新 される - 画面の更新など非同期的な部分は上記が勝手にやってく れる ※1 ReduxでいうReducerに相当 ※2 ReduxでいうActionTypesに相当
良いところ④ 文法の揺れが少ない - フォーマッターが標準で提供 - 以下は自動的に補正される - オブジェクト定義の書き方 - 改行の位置 -
改行の数 - インデント - The Elm Architectureの利用が前提 - 「参考になりそうなコードだったけどフレームワークが...」なんてことは起こ らない - 公式だけでなく、一般の人のコードを見ても書き方がほぼ 一定になるため非常に読みやすい
Elmの微妙なところ
微妙なところ① 独特な構文 - Haskellに似た構文なのでJSなどとは大きく異なる - 文法の違いや読み方に慣れるまでは少し大変 - 関数型言語に少しでも触ったことがあれば何となく読める - これはしょうがない。慣れましょう。 -
コードの行数は増えやすい(気がする) - 感覚的なもので数値的には未検証 - 横には短く、縦に長い - 関数1つ1つはせいぜい10〜20行なので読みにくくはない - 公式も「1ファイルあたりの行数が増えるのに対しては寛容」とアナウンス してるので間違ってはないはず - ボイラープレート的な構文もやや多い - create-elm-appとか使うと幸せになれるかも - 個人的には好き
微妙なところ② JavaScriptとの相互運用性が微妙 - port - 相互に処理の呼び出しや値の受け取りは可能 - 非同期的に実行される - JavaScript as
a Service - portを使用する場合、API呼び出しのように別のサービスを呼び出すイ メージで利用するべき - JavaScriptは実行時例外が抑制できないので、Elmアプリケーションの一 部とみなして利用するべきではない - JavaScriptのAPI呼び出しを含むElmパッケージは、Elmの Community Packageに公開できない - 堅牢性を重視しての制約 - ある程度は公式から提供されているが、LocalStorageなどのパッケージ が標準にないのでちょっと困る - npmのパッケージとして公開すれば使えなくはないけど微妙...
プロダクト採用はあり?
個人的な意見 なしではない。が、よく検討してから。
最後に
少ないですがサンプルコードを公開してます。 https://github.com/ponday-dev/elm-sample https://github.com/ponday-dev/elm-routing-sample 興味を持たれた方がいらっしゃれば、ぜひ https://github.com/ponday-dev/elm-call-api-sample