<style type="text/css">
<!--
.reveal h1 {
text-transform: none;
font-size: 64px;
}
.reveal h2 {
text-transform: none;
font-size: 42px;
}
.reveal p { font-size: 30px; }
.reveal ul li { font-size: 30px; }
-->
</style>
# elmで実践的に始める
# 関数型プログラミング
---
## 自己紹介
![](https://i.imgur.com/ZrAshi6.png)
- **言語布教**
---
## 年表(去年)
**社会 ~~布教~~ 人 一年目**
- 社内LTでelm布教 (これ以降、不定期でN回)
- [市ヶ谷Geek★Night フロントエンド、マジ卍](https://ichigayageek.connpass.com/event/87792/)
- [JAWS-UG コンテナ支部](https://dev.classmethod.jp/cloud/aws/jaws-ug-container15/) で延々とelmの話をする
- [Yokohama.scala](https://yokohamascala.connpass.com/event/96926/) 改め Yokohama.elm
---
## 年表(今年、直近)
- 内部ビルド支援ツールを作り、保守を丸投げする
- 恐るべき子供たち計画
- [わざわざ学ばなくてもいいプログラミング言語一位Elm](https://qiita.com/ababup1192/items/4c39ff981642aded5d8e)
- [Elmで制約プログラミングを学ぼう](https://hackmd.io/p/HJR0HtJnN#/)
---
## ふと気づく
あれ?布教ばっかり・・・実践は・・・?
---
## プロダクトに忍ばせておく
空のelmディレクトリ
![](https://i.imgur.com/nx02Gk0.png)
---
## そして時は動き出す・・・!
:tada: 本格始動しました!
![](https://i.imgur.com/MmddjYX.png)
---
# ~~elmで実践的に始める~~
# ~~関数型プログラミング~~
---
# elmプロダクトレポート(5日分)
---
## 同僚Xの声
> 業務で正式にelmを書き始めたが、1日ぐらいでほぼ何もわからない状態から、formのvalidation書けるようになった(test込み)。その上で型安全、綺麗かつ早いコードを簡単に書けたことを今一度体感できて、最高でした。来週も楽しみです。
>
---
## 同僚Sの声
> まだ3日?くらいしか書いてないけど、model,update,viewのフォーマットに沿って書けば良いので手法が頭に染みつきやすかったです!
あとelmガイド分かりやすすぎ、アプリ作る上ですぐ応用できるつくり:ゲロゲロ:(型はScalaやってなかったら苦戦してたかも)
画面に何を表示する?ユーザーから欲しいものは?外部との通信は?という本当に気にしなきゃいけないことだけ気にすればいい感じと、エラーメッセージの統一感と分かりやすさが挫折を遠ざけていて、楽しく感じました:ゲロゲロ:
---
## 同僚Yの声
> elmサイコー
---
## 同僚Sの作品
[ワロタジェネレータ](https://goofy-fermi-86e26a.netlify.com/dist/index.html)
---
## 個人的な感想(ポジティブ)
- 導入の学習コストはかなり低い
- チームメンバー1(自分)+4人 補助無しでelm書ける状態に
- バックエンドエンジニアでもフロントエンジニアになれる
- Scala, Kotlin, Clojure, Elixir エンジニアならすぐ
- [1ファイル1000行](https://guide.elm-lang.jp/webapps/structure.html)(現在1300)超えても余裕でバグらない
- 型つよい
- 実行時エラーは、ほぼ起きない
---
## 推しポイント
HTTP通信が死ぬほどシンプル & 便利
```elm
fooDecoder : JD.Decoder Foo =
JD.map5 EventSchedule
(JD.field "fooId" JD.int)
(JD.field "name" <| JD.maybe JD.string)
(JD.field "date" posixDecoder)
getEventDetail : CorporateId -> EventId -> Cmd Msg
getEventDetail corporateId eventId =
Http.get
{ url = "/api/foo/" ++ String.fromInt fooId
, expect = Http.expectJson GotFoo fooDecoder
}
```
---
## 推しポイント
レスポンス処理もシンプル(PromiseとかRxのような非同期さは、基本意識しない)
```elm
-- update
GotEventDetail result ->
case result of
Ok foo ->
( { model | foo = foo }, Cmd.none)
Err error ->
case error of
Http.BadStatus 404 ->
( model, Nav.load "/not-found" )
_ ->
-- TODO ネットワークエラーなどの異常処理
( model, Cmd.none )
```
---
## 同僚Xの声(Scala歴 4年)
> ScalaのHTTPより楽
説得力の塊
---
## 個人的な感想(ネガティブ)
- SPA難しい
- elmじゃなくても難しかった
- [Formなどをシンプル かつ 強力 に書きたい](https://qiita.com/arowM/items/6c32db1f9e4b92445f3b)のであれば、関数型パワーをそれなりに必要とする
- どんな言語・フレームワークでもフォームバリデーションは難しい
---
## あとは自由に質問受けます
{"metaMigratedAt":"2023-06-14T21:56:42.020Z","metaMigratedFrom":"Content","title":"elmで実践的に始める","breaks":true,"contributors":"[{\"id\":\"b486b5b4-b498-40b4-8497-26b914e9185b\",\"add\":5664,\"del\":2530}]"}