サルでもわかるWEBプログラミング

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== ElmでlocalStorageでTodoアプリ ======

2019年5月現在、Elm0.19ではlocalStorageを使える状況ではないため、Elmのportという機能を使用する必要があります。

index.htmlでJavaScriptでlocalStorageへの書き込み、読み込みを行い、main.js（Main.elmをJavaScriptにコンパイルしたもの）とそのデータの通信を行います。

どこか間違っているかもしれませんが、以下に記載させていただきます。

http://i-doctor.sakura.ne.jp/font/?p=37627
Elm0.19でlocalStorage利用のTODOアプリ（３）port
2019年5月6日

ソースコード
https://github.com/adash333/elm-todo-localstorage2 

DEMOサイト
https://modest-noether-b47b5e.netlify.com/
{{:elm:pasted:20190602-165347.png}}
===== Elmでtodoアプリのリンク =====


https://qiita.com/hibohiboo/items/8d893d4995be0a1dc743
@hibohiboo
2018年09月18日に更新
elm 0.19 で Todoアプリのようなものを試してみたメモ


http://www.aizulab.com/blog/elm-todo-example/
2019.04.22
【elm】2019年にわざわざ学ばなくてもいい言語でTodoアプリを作る


https://qiita.com/A_kirisaki/items/4c5343426d9de976ac72
@A_kirisaki
2017年12月15日に更新
ElmでTodoリストを作る


===== Elmでlocalstorageでtodo =====

https://github.com/evancz/elm-todomvc

===== Elm0.19アプリの初期化方法 =====

https://qiita.com/jinjor/items/245959d2da710eda18fa
{{:elm:pasted:20190506-011023.png}}

個人的には、Browser.elementを使うことが多いです。

<code>
element :
    { init : flags -> ( model, Cmd msg )
    , view : model -> Html msg
    , update : msg -> model -> ( model, Cmd msg )
    , subscriptions : model -> Sub msg
    }
    -> Program flags model msg
</code>


index.html
<html>
<script src="https://gist.github.com/adash333/ab93b0cc6648fde606b990752844ca87.js"></script>
</html>


===== Enterを押したときに、Submitボタンを押したときと同じ挙動にできないか。。。 =====


https://stackoverflow.com/questions/40113213/how-to-handle-enter-key-press-in-input-field
→このやり方でいけました！感謝！
{{:elm:pasted:20190508-084425.png}}

さらに、テキスト入力欄に最初からカーソルを入れてほしい。。。

《2017年6月9日 12:00 PM 公開/更新》
テキスト入力欄に最初からカーソルを入れる(フォーカスを与える)方法
https://www.nishishi.com/javascript-tips/form-focus.html


https://stackoverflow.com/questions/31901397/how-to-set-focus-on-an-element-in-elm

{{:elm:pasted:20190508-084807.png}}

https://package.elm-lang.org/packages/elm/html/1.0.0/Html-Attributes#autofocus












===== リンク =====
前：[[elm:port|Elmでポートport]]

次：[[elm:elm-firebase|elm:elm-firebase]]

目次：[[elm:index.html|Elm]]