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