Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@zsqp

ElmでTodoアプリを作る

More than 1 year has passed since last update.

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

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

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

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

ができます。

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  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
zsqp
最近はColabに夢中。普段ははてなにいます。現在70歳。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?