ElmでTodoリストを作りました。
ソースとデモはこちら。
https://ellie-app.com/6D8hKZwjy5ja1
(Qiitaに載せたのと同じものです)
簡単に解説します。
Addで追加されて、Deleteで削除します。 ということは一応CRUDが実現できているのかな。
データベースにFirebase(Firestore)を使っていて変更は保存されて、次回開いた時(他の人でも)反映されます。 使ってみて下さい。
データベースとのやりとりはHtml経由でFlagsとPortを使っています。
起動時にFlagsを経由して全件読み込み、変更はAddやDeleteがあるたびに全件updateしています。 なのでデータベースとは完全同期なハズ。
Html(Javascript)で起動時にデータベースを読み込むことと、ElmにFlagsでデータを渡すことのタイミングをとるのが思いつくまで試行錯誤しました。
読み込みも書き込みも両方ともPortsで、というのは無限ループになってしまうと思う。 けど、チャットとかを作るには考えなければいけませんね。これからの課題。
HtmlとElmのソースをコピペしてローカルで運用することもできます。 Firebaseは自分で設定してHtmlに反映してください。
今回ソースとデモをのせた、Ellieという環境は左側にソース、右側で実行結果がでますので、学習環境として最高だと思います。
実際に動くプログラムほど説得力のある教材はないと思う。 動いてナンボだよねー。
壊しても元のは再読込すれば元に戻りますので、
壊して学ぶプログラミング！！
ができます。
