Help us understand the problem. What is going on with this article?

ElmでTodoアプリを作る

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のソース、右側で実行結果がでますので、学習環境として最高だと思います。

実際に動くプログラムほど説得力のある教材はないと思う。 動いてナンボだよねー。

壊しても再読込すれば元に戻りますので、

壊して学ぶプログラミング!!

ができます。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away