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

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

ユーザ用ツール

サイト用ツール


elm:elm-json


差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

次のリビジョン
前のリビジョン
elm:elm-json [2019/05/17] – 作成 adash333elm:elm-json [2019/05/18] (現在) – [FirebaseからElmにデータを送るときのおおまかな流れ] adash333
行 12: 行 12:
  
 elm install 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の型 ===== ===== 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>
  
 以下のまとめが、非常に参考になります。 以下のまとめが、非常に参考になります。
行 22: 行 63:
 2017年02月27日に更新 2017年02月27日に更新
 ElmとJavaScriptのシンタックス比較表 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]]
  
  


elm/elm-json.1558072160.txt.gz · 最終更新: 2019/05/17 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki