Elm.js学習ノート

Elm基礎文法
一般的なデータ構造
リストリストList:単一の種類の要素しか収容できません.タイプではなく、タイプの容器です.List Stringはタイプの元祖Tuplesです.異なるタイプでもいいです.固定長さは10 Records以下です.キーペアのデータ構造があります.
リスト

list   
List.drop 1 [1,2,3,4]   —  [1,2,3]
List.length [1,2,3,4]   — 4
List.head [1,2,3,4]     — Just 1 : Maybe.Maybe number
List.tail [1,2,3,4]     — Just [2,3,4] : Maybe.Maybe (List number)
List.reverse [1,2,3,4]  — [4,3,2,1] : List number             
List.sort [1,4,3,2] — [1,2,3,4] : List number              
List.maximum a      — Just 4 : Maybe.Maybe number      
List.minimum a      — Just 1 : Maybe.Maybe number       
0::[1,2,3,4]        — [0,1,2,3,4] : List number     “::”       0 
[-1,-2]++[0,1,2,3,4]    — [-1,-2,0,1,2,3,4] : List number   “++”    

tuples(元のグループ)
レコード

point = { x = 3, y = 4 }                -- create a record
point.x                                 --     
List.map .x [point,{x=0,y=0}]           -- field access function
{ point | x = 6 }                            -- update   
{ point | x = point.x + 1, y = point.y + 1}  -- update     
dist {x,y} = sqrt (x^2 + y^2)                -- pattern matching on fields

type alias Location =    { line : Int , column : Int}    -- type aliases for records

{x=3,y=7}.x  or .y {x=3,y=7} ／／.y     
bill = {name = “cyq”, age = 20}
bill2 = {bill | name = “222”}   copy  bill — { name = “222”, age = 20 } : { age : number, name : String }

存在しないfieldを使ってはいけません.

fieldはundefinedまたはnullであってはいけません.

thisやselfなどのキーワードを使って、再帰的なrecords

を作ってはいけません.
パターンマッチング
S 6のdesttructuringに似ています.
中綴り演算子(カスタム可能)
ユーザー定義の中綴り演算子を作成できます.優先度は0から9までで、9は最も緊密です.デフォルトの優先度は9で、デフォルトの関連性は左です.自分で設定できますが、内蔵演算子を上書きすることはできません.
モジュール

module MyModule exposing (..)
-- qualified imports
import List                    -- List.map, List.foldl
import List as L               -- L.map, L.foldl

-- open imports
import List exposing (..)               -- map, foldl, concat, ...
import List exposing ( map, foldl )     -- map, foldl

輸入を優先して合格する.モジュール名はファイル名と一致しなければならないので、モジュールPaser.UtilsはファイルにParsser/Utils.elmを必要とします.
タイプコメント
いくつかの一般的なタイプ:Int,Float,String,Bool
型別別名(type alias)
時には、単純な基本型では表現したい意味を完全に説明できないかもしれません.資料の構造が複雑すぎるかもしれません.簡単な名前で呼んでみたいです.この時、型別の別名が役に立ちます.

type alias Name = String
type alias Age = Int
type alias Person =
    { name: String
    , age: Int
    }

createPerson: Name -> Age -> Person
createPerson name age =
    { name = name
    , age = age
    }

type alias Name = Stringとは、NameをStringとする別の別名に設定することを意味する.そうすれば、createPerson: Name -> Age -> Personではなく、createPerson: String -> Int -> Personと定義することができる.
カスタムタイプ:(自創型別とユニオンTypeの確立)
自創型の他の方法は以下の通りです.type Directions = Up | Down | Left | Right type Maybe a = Nothing | Just aは二つの異なるタイプのパターンを作ることができます.最初は先例のDirectionsのように直感的で簡単です.このタイプでは四つの可能な値しかないです.つまり、私達が定義したUp、Down、Left、Rightです.使用上はこうしてもいいです.

convertDirectionsToInt: Directions -> Int
convertDirectionsToInt dir =
    case dir of
        Up -> 1
        Down -> 2
        Left -> 3
        Right -> 4

convertDirectionsToInt Up -- 1

ユニオンType
一つの可能な値を表すために使われます.各値をTagといいます.私たちは他の既存のタイプを組み合わせて私たちが作った型別に入れることができます.例の中で私達はMayboeという型別を作りました.後に付いてくるaはいわゆる型変数です.さらに後ろには型別の値があります.私たちは自由に型式の変数の中に他の型式を持ち込みできます.

--   String    a
maybeString: Maybe String
maybeString = Just "I am a string"

--   Int    a
maybeInt: Maybe Int
maybeInt = Just 1

anotherMaybeInt: Maybe Int
maybeInt = Nothing

以上の3つの変数はすべてMayboe a型に属していますが、持ち込みのaによって、パターン内の値が変わります.もちろん、もっと複雑なユニオンTypeを作成することもできます.例えば、type Directions a b = Up a | Down b | Left a b | Right.
javascript相互操作

HTMLにElmを埋め込む

は、ElmとJavaScriptとの間でメッセージ

を繰り返し送信する.
関数

multiply a b = a*b
double = multiply 2
List.map double [1,2,3,4]

--         。
List.map (\a -> a * 2) [1..4] -- [2, 4, 6, 8]

\counterMsg -> Modify id counterMsgはElmにおける匿名関数であり、Elmにおいては、匿名関数は\先頭直後のパラメータを使用し、->の後に戻り値式を作成し、\a -> bのような形をしている.
--すぐに使用されるいくつかの値は、let...in...文で定義されています.

volume {width, height, depth} = let area = width * height in area * depth
volume { width = 3, height = 2, depth = 7 } -- 42

関数名のパラメータ=
制御文
if true then“WHOA”else if true then“n”else“0”

case alist of
[]->””
[x]->””
x::xs->””

elm工程化

elm-webpack-project    
git clone https://github.com/moarwick/elm-webpack-starter 
rm -rf .git        
git init   git add .   git commit -m 'first commit'
npm run reinstall      

自分で建てます－－－－package.json "scripts": { "elm-install": "elm-package install", "build": "elm-make Main.elm --output=build/index.js", "start": "elm-live Main.elm --output=build/index.js --open" }, "devDependencies": { "elm": "^0.18.0", "elm-live": "^2.7.4" // ， } －－－－－elm-package.json "dependencies": { "elm-lang/core": "5.0.0 <= v < 6.0.0", "elm-lang/html": "2.0.0 <= v < 3.0.0", "elm-lang/http": "1.0.0 <= v < 2.0.0", "evancz/elm-markdown": "3.0.1 <= v < 4.0.0" }, "elm-version": "0.18.0 <= v < 0.19.0" －－－－－－－index.html var node = document.getElementById(‘main’); var app = Elm.Main.embed(node); －－－－－ npm i npm run elm-install npm run start 公式サイトのサンプルライブラリ
git clonehttps://github.com/evancz/elm-architecture-tutorial.git cd elm-architecture-tutorial
学習資源Elm入門実践シリーズhttps://segmentfault.com/a/1190000005701562 Elm言語を初めて知ったら、Y分だけかかります.https://github.com/Jocs/jocs.github.io/issues/2 Elmアーキテクチャ教程https://segmentfault.com/a/1190000004872909