【自分用】Elmチートシート

## 静的HTMLを生成
メッセージを生成しないインタラクティブではないHTMLを生成する。

### 記法

```elm
div 属性のリスト 子要素のリスト
```

| 関数名    | 説明                              |
|----------|-----------------------------------|
| Html.div | div要素を生成する。                |

### 使用例

```elm
div 
   [ class "container" ]
   [ text "Hello"
   , text "World"
   ]
```

## 1行コメント
コンパイルした結果に影響を及ぼさないプログラマのためのメモ。Elmは型注釈という機能があるから、コメントより型注釈を使ったほうがわかりやすいかも。

### 記法
補足: ソースコードは、キーワード(予約語)と非キーワードで構成される。キーワードは、言語が決めた字句。非キーワードはプログラマが、理解しやすいように自由に命名する。

```elm
-- ここに、わかりやすい説明を書く。
```

| キーワード    | 説明                                       |
|--------------|--------------------------------------------|
| `--`         | その後から行末までの字句をコメントとする。    |

### 使用例

```elm
-- これはHello worldを出すコードです
main = text "Hello World" 
```

## モジュール宣言
Elmには1ファイルのソースコードに1つのモジュールを宣言する。
モジュール宣言は必ず書かなければならず省略することができない。

### 記法


```elm
module モジュール名 exposing (公開する型名、関数名など)
```

| キーワード    | 説明                                       |
|--------------|--------------------------------------------|
| `module`     | これからあたらしいモジュールを宣言する。      |
| `exposing`   | ただし公開する言語要素を限定する。            |

### 使用例

```elm
module Main exposing (main) 
```


## モジュールのimport
このモジュール内で使うモジュールをimportする。
モジュールの中に型や関数が入っている。

### 記法

```elm
import インポートするモジュール名 exposing (インポートする型名や関数名)
```



キーワードの表

| キーワード    | 説明                                       |
|--------------|--------------------------------------------|
| `import`     | 既存のモジュールをimportする。               |
| `exposing`   | 修飾なしで使える型や関数を列挙する。          |

### 使用例

```elm
import Html exposing (..)
```

## リスト表記
リスト表記とは、複数の値を1つのリストとすることができる。値は、関数の結果でもよい。ただしリストの要素はすべて同じ型でなければならない。

### 記法

```elm
[ リスト要素, リスト要素, リスト要素 ]
```

| キーワード    | 説明                                       |
|--------------|--------------------------------------------|
| ` [ ] `      | リストの開始と終了。                         |
| ` , `        | リスト要素とリスト要素の区切り                |


### 使用例

```elm
[ 1, 2, 3 ] 
```

## 関数の定義
自作の関数を定義することができる。仮引数として宣言したものは、関数の定義で、変数のように使える。

### 記法

```elm
自作の関数名 仮引数名 = 関数の定義
```

### 使用例

```elm
plus x1 x2 = x1 + x2 
```

| キーワード    | 説明                                                                                      |
|--------------|-------------------------------------------------------------------------------------------|
| ` = `        |関数を定義する。左辺が定義したい関数名と複数の仮引数名。右辺が関数の定義                         |

補足: 「複数の」という指定は、0個でもいいし、1個でもいいし、100個でもいい。

## 関数の型注釈
関数には型がある。型注釈によって自作の関数に関数の型を指定できる。
関数の型は、何の型を受け取って何の型を返すか -> で表す。
関数の型注釈は必須ではない。
関数の型注釈がなかった場合は、関数の定義を元にコンパイラが型を推論してくれる。
ただし関数の型は、プログラマにとって関数の使い方を説明するようなものなので、基本、型注釈したほうが良い。

### 記法

```elm
関数名: 引数の型 -> 引数の型 -> 戻り値の型
```

| キーワード    | 説明                                                                   |
|--------------|------------------------------------------------------------------------|
| ` : `        |型注釈の対象となる関数名を指定する。                                         |
| ` -> `       |関数の型を定義する。関数の型は、複数の引数の型と1つの戻り値の型で表される。    |

### 使用例
上記で定義したplus関数に関数の注釈をつけてみる。

```elm
-- plus関数の定義はしたものとする
plus : Int -> Int -> Int 
```

## 関数の適用
関数に引数を渡して戻り値を計算する。

### 記法

```elm
関数名 実引数
```

### 使用例

```elm
-- plus関数の定義はしたものとする
plus 100 200
``` 

### おまけ
Elmは、命名規約を言語で指定している。

プログラミング一般の知識として有名な記法(xxxケース)を挙げる。

| 記法名         | 例           |  覚え方                                         |
|-------------------|--------------|---------------------------------------------|
| camel記法         | getMyName     | Camel(ラクダ)のコブのように見える。           |
| kebab記法         | get-my-name   | kebab(ケバブ)のように串に刺さってるように見える。|
| Pascal記法        | GetMyName     | Pascalという言語で考案された。                |

Elmの文脈に応じてどの記法を使わなきゃいけないかは決まっている。

| 文脈                    | 記法          |  
|------------------------|--------------|
| モジュール名, 型名     | Pascal記法    | 
| 関数名, 引数名, 変数名 | camel記法     |
| 使わない              | kebab記法   |