DDG - Develop a Digital Garden

develop a digital garden

トップ > Elm > Elm+UIKit+IndexedDBでTodoリストをつくる

Elm+UIKit+IndexedDBでTodoリストをつくる

Elm

Elm3（予備） Advent Calendar 2018 の22日目の記事です！

オフラインで動作するTodoリストを作りたくて、ElmとIndexedDBで実装してみました。
UIKitはCSS部分しか使用しておらず、ElmでClass名書いてるだけなので、特に説明はないです。

ソースはこちら GitHub

Image from Gyazo

環境

  • Elm 0.19.0
  • Webpack 4

処理の流れ

  1. ページアクセス
  2. IndexedDBを作成する
  3. ElmでDOMを描画する
  4. タスク入力後、Enterキーでタスクを追加 ( IndexedDBに保存 )
  5. Deleteボタンでタスクを削除
  6. ページリロードでIndexedDBに保存したタスクを表示

まだ実装できていない部分 (2018.12.26実装済み)

  • [x] ページリロード時のTodo表示
  • [x] Todo追加時のIndexedDBへの保存処理で１つ前のTodoが保存されてしまう
  • [x] Todoの削除処理

つまずいた点

IndexedDBへのタスク保存処理で、Elmのportsを利用してJS側に処理を任せる必要があります。
とりあえず、Elm側でportとして定義した関数がJS側で認識できているかを確認したいと思い、

port saveInbox : Model -> Cmd msg

だけを定義してみたのですが、

app.ports.saveInbox.subscribe(data => {
    ...
});

で、app.portsがundefindになってしまいます。
これは、Elm側でその関数を使用しないと、コンパイル時に関数を生成してくれないことが原因です。

addTodo : Model -> ( Model, Cmd Msg )
addTodo model =
    ( { model | todoList = model.todoList ++ [(Todo (List.length model.todoList + 1) model.newTodo)] , newTodo = "" }
    , saveInbox model
    )

saveInbox modelのように実際に使用することでJS側のapp.ports.saveInboxとして使用できます。

感想

フロントエンド周りの技術はVue.jsをちょっと触ったことがあるくらいで、 ほとんど知識がない状態ですが、簡単なアプリを作るくらいであれば、そこまで覚えることは多くなさそうですね。

Elixirも勉強しているので、Elixir+Elmで関数型まみれのアプリも作ってみようと思います！