チームでElm開発。〜TEAに導かれし者たち〜

elm meet up 2019 in summer でお話した資料。

Transcript

1. チームで Elm 開発。 〜 TEA に導かれし者たち〜
2. 自己紹介 - なまえ：澤 なつみ - しょくしゅ：サーバーサイドエンジニア Scala2年, Elm3ヶ月 - おしごと：新プロダクト開発中
3. 約二ヶ月間、 新プロダクトの一部をElmで作りました。
4. Elmガチ初心者4人 Elmマスター1人
5. Elmやって良かったなぁ Elmガチ初心者4人 Elmマスター1人
6. 　 目線で、 チームに導入してみてどうだったか。
7. Elm導入のきっかけ - 新プロダクトB側画面は、　 を使っていた
8. Elm導入のきっかけ - 新プロダクトB側画面は、　 を使っていた - C側画面の言語選択を迫られていた・・・（6月某日）
9. Elm導入のきっかけ Angularで実行時例外結構多くて辛かったじゃん？ Elmは堅牢でシンプルでもっと楽しいから、やろうよ！
10. Elm導入のきっかけ Angularで実行時例外結構多くて辛かったじゃん？ Elmは堅牢でシンプルでもっと楽しいから、やろうよ！ Elm大好きだから、 仕事でも書きたいだけでは・・・（笑）
11. - 実行時例外が事実上ない - フォームのテストも簡単に書ける - 「品質の高いコード」を重視する我がチームには ぴったり →Elmで価値のある良いアプリケーションを 作ろう！！！ Elm導入のきっかけ メリットに納得し、C側画面の開発に　 を導入することに決定
12. TEAの恩恵を存分に受けた 他の開発にもElmの思想が活かされた チームでElmを使ってみて
13. チームでElmを使ってみて TEAの恩恵を存分に受けた 他の開発にもElmの思想が活かされた
14. TEAの恩恵を存分に受けた - まず、設計を練る必要がなかった - 初心者もすぐに開発に入れて、 - 1ヶ月も経てば、Elmマスターがいなくても仕事が回った - もちろん5人全員がコミッター
15. TEAの恩恵を存分に受けた →TEAがシンプルで分かりやすく、 TEAに導かれるままに開発ができたから
16. - ElmはTEAを理解していれば、動くものが作れるようになる - 初心者としてやっておくべきことは多くはない - Elm guideを読んでTEAを理解しておく - 何か動くものを作ってTEAを身体に染みつかせておく 初心者でもすぐに業務コードに入れた TEAがシンプルで分かりやすい
17. TEAから学んだ フロントエンドでやりたかったことって、とてもシンプルだった 楽しい・・・ クリック!! Update View Model
18. TEAの恩恵を存分に受けた →TEAがシンプルで分かりやすく、 TEAに導かれるままに開発ができたから
19. Angularを開発していて・・・ - やりたいことはこれだけなのに、考えるべきことが多すぎないか？ - DOMを描画するタイミングが適切かな - 実行時例外起きないかな、undefined null大丈夫かな - 型付け間違ってないかな、テンプレートで死ぬから... - 今回の場合は状態管理どうしようかな - Rxjsの扱い方、Observableのまま返すのかそれとも... - コンポーネントの分け方どうしよう、親子でデータを... 簡単に実装を「ミス」できる。コワイ。 フロント API
20. 一方、Elmは - 実装のイメージがすぐに湧く ----- MODEL Modelに新しくpageStateを用意しよう ----- UPDATE ApplyっていうMsgだね 押したらpageStateが Applyになるようにしよう ----- VIEW onClick Apply!!
21. 一方、Elmは - 実装のイメージがすぐに湧く - ユーザーとのやりとりだけに集中できる - DOMを描画するタイミングが適切かな - 実行時例外起きないかな、undefined null大丈夫かな - 型付け間違ってないかな、テンプレートで死ぬから... - 今回の場合は状態管理どうしようかな - Rxjsの扱い方、Observableのまま返すのかそれとも... - コンポーネントの分け方どうしよう、親子でデータを...
22. - 実装のイメージがすぐに湧く - ユーザーとのやりとりだけに集中できる - 書くべき場所が決まっている安心感がある 一方、Elmは
23. - 実装のイメージがすぐに湧く - ユーザーとのやりとりだけに集中できる - 書くべき場所が決まっている安心感がある - 設計思想がズレてこない - エラーが親切なのでサクサク書ける - コンパイルが通れば期待した挙動になるのでリファクタもしやすい - etc 一方、Elmは チームで一体となって、 TEAに導かれるままに開発できた
24. - 実装のイメージがすぐに湧く - ユーザーとのやりとりだけに集中できる - 書くべき場所が決まっている安心感がある - 設計思想がズレてこない - エラーが親切なのでサクサク書ける - コンパイルが通れば期待した挙動になるのでリファクタもしやすい - etc 一方、Elmは ほんとうに楽しい。 ものづくりが好きだから。
25. TEAの恩恵を存分に受けた 他の開発にもElmの思想が活かされた チームでElmを使ってみて
26. 他の開発にもElmの思想が活かされた > Elm で得られた知見はいろんなところで簡単に役立てることができます。 by Elm guide
27. Elmの開発で気づいたこと - フォームのテストがあるのはありがたいし、当たり前にあるべき - Angularの開発でも、そうできるように頑張ろう！ DFormの誕生
28. DFormとは - Angularのreactive formを宣言的に書けるようにした
29. DFormとは ↑ 実装がちょっと面倒で扱いに慣れない テストが書けない - Angularのreactive formを宣言的に書けるようにした
30. - フォームの実装時間が半分以上減った - 手動ぽちぽちテストをする時間が0になった - みんなの「またフォーム作るのか〜」というキモチが減った DFormの効果 ありがとうElm。
31. チームにElmを導入すると、 シンプルで素晴らしいTEAに導かれることで、 初心者でもすぐコードが書けて楽しめるし、 安全なものが作れるし、 ものづくりをもっと楽しめます！ ＋＠ チームで新しいものにチャレンジするのは楽しい 今度は自分が　　側になれるように頑張ります まとめ