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
ビギナーであり続ける/beginning
ikuodanaka
3
500
mrubyと micro-ROSが繋ぐロボットの世界
kishima
3
390
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.4k
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
2.3k
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
300
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
140
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
230
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
1
140
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
5.5k
解析の定理証明実践@Lean 4
dec9ue
1
210
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
1.7k
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
KATA
mclloyd
30
14k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Thoughts on Productivity
jonyablonski
69
4.7k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
The Pragmatic Product Professional
lauravandoore
35
6.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
A better future with KSS
kneath
239
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Raft: Consensus for Rubyists
vanstee
140
7k
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