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

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


elm:port


Elmでポートport

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

Elmでのflagsとportのイメージ

間違っていたらすみません!

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

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を見ると、

  1. 初期化するときに、flagsでlocalStorageの内容をelmに送信
  2. elmアプリで変更があれば、portを介してindex.htmlにデータを送り、index.htmlでsubscribeしてlocalstorageに保存する

というやり方をしているようです。

リンク


elm/port.txt · 最終更新: 2019/05/07 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki