====== Elmでポートport ======
2019年5月現在、elmで直接localStorageを利用することができません。
elmアプリでデータをlocalStorageに保存したい場合は、portというものを利用して、index.html（JavaScript）を介して
localStorageにデータを保存します。

===== Elmでのflagsとportのイメージ =====
間違っていたらすみません！

{{:elm:pasted:20190506-235436.png}}

===== Elmでflagsとportを用いてlocalStorage利用のTODOアプリ =====

以下に記載させていただきましたので、もしよろしければご覧ください。

  -[[http://i-doctor.sakura.ne.jp/font/?p=37457|Elm0.19でlocalStorage利用のTODOアプリ（１）フラグflags]]
  -[[http://i-doctor.sakura.ne.jp/font/?p=37545|Elm0.19でlocalStorage利用のTODOアプリ（２）elm/timeでMonthの表示]]
  -[[http://i-doctor.sakura.ne.jp/font/?p=37627|Elm0.19でlocalStorage利用のTODOアプリ（３）port]]


===== Elmでportのリンク =====

https://guide.elm-lang.jp/interop/ports.html
ポート


https://ccvanishing.hateblo.jp/entry/2018/11/24/232705
2018-11-24
We Are JavaScripters! @26th で Elm と Firebase の連携について話してきました
→ソースコード
https://github.com/y-taka-23/elm-realtime-counter

https://qiita.com/boiyaa/items/c5670817f17938b7a755
@boiyaa
2017年08月22日に投稿
ElmとJavaScriptを組み合わせたアプリケーションの作り方
→elm0.18のときのものなので、Html.programWithFlags を、Browser.element に変更にする必要あり。

https://hackernoon.com/how-elm-ports-work-with-a-picture-just-one-25144ba43cdd
elm0.18のときのものですが、絵がすごく分かりやすいので、絵だけでも一見の価値ありです。

===== Elmでlocalstorage利用のtodoアプリのリンク =====

https://github.com/bryanjenningz/25-elm-examples/blob/master/21-localstorage-editable-todos.elm
2つのファイルの組み合わせ
https://github.com/bryanjenningz/25-elm-examples/blob/master/21-localstorage-editable-todos.html
上記を少し変更してから、
''%%elm make src/Main.elm --output=main.js%%''


https://github.com/evancz/elm-todomvc
こちらの方では、index.htmlを見ると、
  -初期化するときに、flagsでlocalStorageの内容をelmに送信
  -elmアプリで変更があれば、portを介してindex.htmlにデータを送り、index.htmlでsubscribeしてlocalstorageに保存する
というやり方をしているようです。
















===== リンク =====
前:[[elm:time|elm:time]]

次:[[elm:elm-todo-localstorage|ElmでlocalStorageでTodoアプリ]]

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