====== ElmでJson ======

Firebaseを扱ったり、http通信を行う場合、jsonを扱う必要が出てきます。
以下が必要になります。

  -elm install elm/json
  -JavaScriptからElmへデコード（かなりややこしい）
  -ElmからJavaScriptへエンコード
  -それぞれ、portでデータのやり取り

===== elm/jsonパッケージのインストール =====

elm install elm/json

===== JSONって何？ =====

異なる言語、異なる場所でのデータをやり取りをするための記述方法の一つです。
{ ... } の中に、

  -ダブルクォーテーション(")で囲んだ変数名 と
  -値
をコロン(:)で区切り、ペアとします。ペアをカンマ(,)で連結することにより、例えば、下記のように記述します。

<code>
{ "name": "Tanaka", "age": 26 }
</code>

JSONデータは『文字列』です。

http://www.tohoho-web.com/ex/json.html
JSONとは



https://www.sejuku.net/blog/79911
JavaScriptのjson stringifyを完全に理解しよう！
かい
2018/11/27





===== Jsonを扱う際のJavaScriptとElmの型 =====

連想配列っぽいものを、
  *JavaScriptでは『オブジェクト』
  *Elmでは『レコード』
と呼びます。微妙に書き方や使用方法が異なります。

オブジェクト / レコード
<code>
JavaScript	Elm
{ x: 3, y: 4 }	{ x = 3, y = 4 }
point.x	point.x
point.x = 42	{ point | x = 42 }
</code>

以下のまとめが、非常に参考になります。

https://qiita.com/boiyaa/items/7050eb93106a93a8dfb8
@boiyaa
2017年02月27日に更新
ElmとJavaScriptのシンタックス比較表


===== FirebaseからElmにデータを送るときのおおまかな流れ =====

elmアプリ（をJavaScriptにコンパイルしたファイル）からは直接、Firebaseとデータのやり取りをすることができません。

そのため、src/Main.elmとFirebaseプロジェクトの間を、index.html（ここにJavaScriptのコードを記載）に仲介させます。

Firebase ->(JSON)-> index.html ->(portまたはflag)-> src/Main.elm




===== 参考リンク =====



https://qiita.com/A_kirisaki/items/4c5343426d9de976ac72
@A_kirisaki
2017年12月15日に更新
ElmでTodoリストを作る
→elm 0.18ですが、ほぼ同じにできそうです。











===== リンク =====
目次：[[elm:index.html|Elm]]