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
430
Elmが予想以上に楽しかったので紹介したい
ponday
January 19, 2018
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.3k
TypeScriptの型表現
honda
10
3.1k
Web Componentsの今
honda
1
430
これまでのReact、これからのReact
honda
0
320
Gatsbyお試し
honda
0
120
styled-components or emotion?
honda
0
690
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
720
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
840
Other Decks in Technology
See All in Technology
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
990
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
250
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
510
それでも私が品質保証プロセスを作り続ける理由 #テストラジオ / Why I still continue to create QA process
pineapplecandy
0
130
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
1
250
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
10
16k
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
270
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
220
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
190
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
430
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
370
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
3
1.8k
Featured
See All Featured
Facilitating Awesome Meetings
lara
56
6.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Designing for Performance
lara
610
69k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
A Tale of Four Properties
chriscoyier
161
23k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Bash Introduction
62gerente
615
210k
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