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
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
1
320
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
520
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
1.1k
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
160
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
550
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
4
2.9k
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
2
940
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
130
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
280
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
210
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
240
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Gamification - CAS2011
davidbonilla
81
5.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Agile that works and the tools we love
rasmusluckow
329
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Building an army of robots
kneath
306
45k
Fireside Chat
paigeccino
37
3.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
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