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
330
Elmが予想以上に楽しかったので紹介したい
ponday
January 19, 2018
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
0
910
TypeScriptの型表現
honda
10
2.8k
Web Componentsの今
honda
1
360
これまでのReact、これからのReact
honda
0
230
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
600
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
520
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
670
Other Decks in Technology
See All in Technology
長文から長文を生成するLLMツールをオープンソースで作ってみた。
tomohisa
2
140
Cloud Friendly(?) Jenkins. How we failed to make Jenkins cloud native and what we learned?
onenashev
PRO
0
110
Autopsy of a Cascading Outage from a MySQL Crashing Bug
jfg956
0
200
技育祭2024春 LT Finatextホールディングス
kevinrobot34
1
160
実務への応用例から考える 変更に強いオブジェクト指向設計 / 20240324-ooc2024
bengo4com
7
5.3k
エンジニア候補者向け資料2024.03.28.pdf
macloud
0
2.9k
マイクロサービス環境におけるDB戦略 in DMMプラットフォーム
pospome
11
3k
ハイパフォーマンスな組織をつくるための開発生産性の考え方 / developer-productivity-high-performer-link-and-motivation
lmi
3
250
Tohoku.Tech #1 「EC-CUBE/AWSの構築をChatGPTに相談してみました」by テンダ
jun2882
0
140
Autify Company Deck
autifyhq
1
30k
Challenges - Open Farming Hackdays 2024
loleg
0
540
統計的学習理論読み Chapter 2
kmatsui
1
200
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
42
6.7k
Designing with Data
zakiwarfel
94
4.8k
A better future with KSS
kneath
230
16k
Atom: Resistance is Futile
akmur
258
25k
Done Done
chrislema
178
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
Documentation Writing (for coders)
carmenintech
59
3.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
58
14k
The Pragmatic Product Professional
lauravandoore
24
5.7k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
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