勢いで書いたこちらの続きとなっております
凄い人から回答もらえた
elmは他の言語と違い フレームワーク(アーキテクチャ)を初期から組み込んで制約を強くしている言語なので初見わけわからんなのはとても同意します。
— ABAB↑↓BA (@ababupdownba) 2020年8月19日
コメントの部分よく調べて書かれているなと思いました。逆に言うとコメントに書かれたようなパターンは今後増加しなくなるので安心してください
いえいえ 入門者がどのようなポイントで躓くか興味があるので記事とても為になります。
— ABAB↑↓BA (@ababupdownba) 2020年8月19日
お話を聞いていて、理解が進まないことと内部実装が気になってしまうことは切り離してもよいのかな？って思いました。
例えば、onClickでMsgを発火させるとupdate関数が呼び出されるなどは内部実装知らなくても事象は確認できるので その後どう処理を拡張していくかは、すがわにさんが理解している文法の範囲で収まるので新しい知識を取り込まなくても理解は進めていけると思います
— ABAB↑↓BA (@ababupdownba) 2020年8月19日
もちろん個人の性質もあるので、気になる部分をどうしても解消したいという話であればhttps://t.co/oZw6fX9NHA
— ABAB↑↓BA (@ababupdownba) 2020年8月19日
elm本の後半にTEAの内部実装の話があります。ただ読み解くのがelmの知識とjsの知識も必要なので難解で到達が難しく(僕も軽くしか理解してません) タダではないので判断はおまかせします
びっくりしました。ありがとうございます。
Elm界隈温かいなぁ…
何がよくなかったか
- 深堀りしようとしすぎた
PHPとかJavaとか触っていたせいでElmはどうなってるんだろう、なんでupdateが動くんだろう…
と今覚える必要のない部分まで理解しようとしていた The Elm Architectureを理解してない- はじめに · An Introduction to Elm
- 基礎からわかる Elm | 鳥居陽介 | 工学 | Kindleストア | Amazon
過去にさらっと読んでいるが、update等がわからず変なところで詰まり諦めていた
サンプルアプリ作りつつ、もう一度読んで理解を深める必要がありそう
という感じ。変なところに拘る自分の良くない癖が見つかった。
ABAB↑↓BAさん本当にありがとうございます。
細部の事は忘れて実装を進めてみた
じゃじゃん！
+2するボタンと-2するボタンを追加してみた
内部は何も知らないけど(意図的に考えていない)以下の手順で実装できた
手順
Msgに新たな動作(アクション?)を追加countを+2するIncrementDoublecountを-2するDecrementDouble
viewにボタンと動作を追加button onClick IncrementDoubleで+2するボタンbutton onClick DecrementDoubleで-2するボタン
updateのパターンマッチに新たな動作を追加IncrementDoubleの時にcount+2するDecrementDoubleの時にcount-2する
なんということでしょう
内部実装を意識しないだけでこんな簡単に機能追加ができました
よかったところ
- 動作の名前間違えたら怒られた
実は最初Increment_doubleって書いていて、PascalCaseが正しいことに後から気づいた 適当に直していたら修正漏れがあって、コンパイルの時点で怒ってくれた - 脳みそ何も使わなかった
Msgに追加して、viewに追加して、updateに追加して… で終わった
AngularJSの双方向バインディングで何もせずmodelとviewがbindされた時以上の楽さだった
内部でよしなにやってくれていてありがたい。すごい。えらい プログラミング初心者に勧められる理由がわかった気がする - やりたいことを直感的に書ける
Msgに動作定義してupdateに処理内容書いてviewに呼び出す箇所追加する
スコープが～とかファイル分割が～とか一切悩まなくていい
1ファイルに全部書けるのはホントに楽だしわかりやすい
まだわからないところ(これから学ぼう)
Msgにモリモリ追加していいのか
ものすごいファットなMsgが生まれる気がする
しかしMsgを分けたりするのは良くない！ってのも見た
→関数型よく知らない人のelm入門 番外編 - 失敗した設計たち - プログラマ英語学習日記
オープンソースなElmアプリケーション見てみて、どうしているのか学ぶのがよさそう
これホントに1ファイルに全部書いていいのか
開発する上でGitで管理すると思うけど、コンフリクト起きないのかな
1画面1ファイルだからそこまで問題ないのかな？
という気もするけどまだ未知の世界
1画面といっても色々機能があると思うけど全部1ファイルでいいのか
ヘッダー/フッターとか、トーストやらフローティングアイコンやら…
実際にやってから悩む予定だけど、今わからないので書き出しておく
(ちゃんと学習した 今知らなくていいことは知ろうとしない)
外部との通信
外部との通信はportというものを使うらしい
1個空けてやり取りするのか、はたまた1機能ごとに1個開けるのか
TODOアプリ作る場合CRUDで4port使ったりするんだろうか
CSS
CSSはそのままviewのHtmlの要素に書けそうだけど、
デザイン苦手なのでbootstrapとかbulmaとか組み込みたい
簡単に組み込めるのかな
まとめ
すごいシンプルに機能追加できて実装が楽で楽しい
何より型が厳密なので全部定義して、パズルみたいに組めるのが楽しい
jsあるあるな「実はundefinedでしたーｗｗｗンゴゴゴｗｗｗ」が無くなりそうで嬉しい
