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開発。〜TEAに導かれし者たち〜
Search
Natsumi
August 25, 2019
0
920
チームでElm開発。〜TEAに導かれし者たち〜
elm meet up 2019 in summer でお話した資料。
Natsumi
August 25, 2019
Tweet
Share
More Decks by Natsumi
See All by Natsumi
今日から始めるスカライフ~MajiでKoiする5秒前~
natsumisawa
1
930
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
31
4.3k
Agile that works and the tools we love
rasmusluckow
325
20k
Building Applications with DynamoDB
mza
89
5.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
10
3.7k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
31
1.8k
Why Our Code Smells
bkeepers
PRO
331
56k
Atom: Resistance is Futile
akmur
260
25k
Building Flexible Design Systems
yeseniaperezcruz
322
37k
Scaling GitHub
holman
457
140k
The Invisible Side of Design
smashingmag
294
50k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Transcript
チームで Elm 開発。 〜 TEA に導かれし者たち〜
自己紹介 - なまえ:澤 なつみ - しょくしゅ:サーバーサイドエンジニア Scala2年, Elm3ヶ月 - おしごと:新プロダクト開発中
約二ヶ月間、 新プロダクトの一部をElmで作りました。
Elmガチ初心者4人 Elmマスター1人
Elmやって良かったなぁ Elmガチ初心者4人 Elmマスター1人
目線で、 チームに導入してみてどうだったか。
Elm導入のきっかけ - 新プロダクトB側画面は、 を使っていた
Elm導入のきっかけ - 新プロダクトB側画面は、 を使っていた - C側画面の言語選択を迫られていた・・・(6月某日)
Elm導入のきっかけ Angularで実行時例外結構多くて辛かったじゃん? Elmは堅牢でシンプルでもっと楽しいから、やろうよ!
Elm導入のきっかけ Angularで実行時例外結構多くて辛かったじゃん? Elmは堅牢でシンプルでもっと楽しいから、やろうよ! Elm大好きだから、 仕事でも書きたいだけでは・・・(笑)
- 実行時例外が事実上ない - フォームのテストも簡単に書ける - 「品質の高いコード」を重視する我がチームには ぴったり →Elmで価値のある良いアプリケーションを 作ろう!!! Elm導入のきっかけ
メリットに納得し、C側画面の開発に を導入することに決定
TEAの恩恵を存分に受けた 他の開発にもElmの思想が活かされた チームでElmを使ってみて
チームでElmを使ってみて TEAの恩恵を存分に受けた 他の開発にもElmの思想が活かされた
TEAの恩恵を存分に受けた - まず、設計を練る必要がなかった - 初心者もすぐに開発に入れて、 - 1ヶ月も経てば、Elmマスターがいなくても仕事が回った - もちろん5人全員がコミッター
TEAの恩恵を存分に受けた →TEAがシンプルで分かりやすく、 TEAに導かれるままに開発ができたから
- ElmはTEAを理解していれば、動くものが作れるようになる - 初心者としてやっておくべきことは多くはない - Elm guideを読んでTEAを理解しておく - 何か動くものを作ってTEAを身体に染みつかせておく 初心者でもすぐに業務コードに入れた
TEAがシンプルで分かりやすい
TEAから学んだ フロントエンドでやりたかったことって、とてもシンプルだった 楽しい・・・ クリック!! Update View Model
TEAの恩恵を存分に受けた →TEAがシンプルで分かりやすく、 TEAに導かれるままに開発ができたから
Angularを開発していて・・・ - やりたいことはこれだけなのに、考えるべきことが多すぎないか? - DOMを描画するタイミングが適切かな - 実行時例外起きないかな、undefined null大丈夫かな - 型付け間違ってないかな、テンプレートで死ぬから...
- 今回の場合は状態管理どうしようかな - Rxjsの扱い方、Observableのまま返すのかそれとも... - コンポーネントの分け方どうしよう、親子でデータを... 簡単に実装を「ミス」できる。コワイ。 フロント API
一方、Elmは - 実装のイメージがすぐに湧く ----- MODEL Modelに新しくpageStateを用意しよう ----- UPDATE ApplyっていうMsgだね 押したらpageStateが
Applyになるようにしよう ----- VIEW onClick Apply!!
一方、Elmは - 実装のイメージがすぐに湧く - ユーザーとのやりとりだけに集中できる - DOMを描画するタイミングが適切かな - 実行時例外起きないかな、undefined null大丈夫かな
- 型付け間違ってないかな、テンプレートで死ぬから... - 今回の場合は状態管理どうしようかな - Rxjsの扱い方、Observableのまま返すのかそれとも... - コンポーネントの分け方どうしよう、親子でデータを...
- 実装のイメージがすぐに湧く - ユーザーとのやりとりだけに集中できる - 書くべき場所が決まっている安心感がある 一方、Elmは
- 実装のイメージがすぐに湧く - ユーザーとのやりとりだけに集中できる - 書くべき場所が決まっている安心感がある - 設計思想がズレてこない - エラーが親切なのでサクサク書ける
- コンパイルが通れば期待した挙動になるのでリファクタもしやすい - etc 一方、Elmは チームで一体となって、 TEAに導かれるままに開発できた
- 実装のイメージがすぐに湧く - ユーザーとのやりとりだけに集中できる - 書くべき場所が決まっている安心感がある - 設計思想がズレてこない - エラーが親切なのでサクサク書ける
- コンパイルが通れば期待した挙動になるのでリファクタもしやすい - etc 一方、Elmは ほんとうに楽しい。 ものづくりが好きだから。
TEAの恩恵を存分に受けた 他の開発にもElmの思想が活かされた チームでElmを使ってみて
他の開発にもElmの思想が活かされた > Elm で得られた知見はいろんなところで簡単に役立てることができます。 by Elm guide
Elmの開発で気づいたこと - フォームのテストがあるのはありがたいし、当たり前にあるべき - Angularの開発でも、そうできるように頑張ろう! DFormの誕生
DFormとは - Angularのreactive formを宣言的に書けるようにした
DFormとは ↑ 実装がちょっと面倒で扱いに慣れない テストが書けない - Angularのreactive formを宣言的に書けるようにした
- フォームの実装時間が半分以上減った - 手動ぽちぽちテストをする時間が0になった - みんなの「またフォーム作るのか〜」というキモチが減った DFormの効果 ありがとうElm。
チームにElmを導入すると、 シンプルで素晴らしいTEAに導かれることで、 初心者でもすぐコードが書けて楽しめるし、 安全なものが作れるし、 ものづくりをもっと楽しめます! +@ チームで新しいものにチャレンジするのは楽しい 今度は自分が 側になれるように頑張ります まとめ