デザイナ見習いがelm入門を試みた話

**デザイナ見習い と elm**

ちょうど1ヶ月前にアドベントカレンダー書かないかと誘われ、
elmは簡単だという噂を信じ記事を書くことにしました。


デザイナ見習いの私は、2019年4月入社の新卒1年目。
教育学部の美術科出身で、専門は美学と木彫・木材工芸です。
入社するまで、photoshopさえ使ったことがないような生き方をしてきたので、
自分がデザイナーであることに未だになれません。
もちろんhtmlやcssも研修で初めてかきました。

そんな私が1ヶ月、なあなあにelmと向き合ってできることは少なすぎたので、
[elm guide](https://guide.elm-lang.jp/)（はじめにと言語の基礎）を読んだ感想を記します。

```
読んでいて気になった箇所
```
感想

気になった箇所の引用とそれに対する感想をセットで書いていきます。


エンジニアの方は全く気にならないところでいちいち引っかかるため、
「読む」ということさえレベルが高いわけです。
最後まで不安が払拭されない様をご覧ください。


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

**elm guide　はじめに**

```
Elm は JavaScript にコンパイルできる関数型プログラミング言語です。
```


こわい
特にコンパイルと関数型がこわい

```
React のようなプロジェクトだと言えます。
```


何それしらない…
調べた結果、Angularの仲間だということがわかりました。
Angularは会社でよく聞くのでなんとなく心を許している間柄です。

```
Elm はシンプルであること、簡単に使えること、高品質であることを大切にしています。
```
Reactと似てるのなら「簡単に使える」は確かそう。

```
使ってみると JavaScript や React のコードが
いままでよりもうまく書けるようになっているはずです。
```
それらも書いたことない


```
HTML を宣言的に書くだけで、Elm が DOM に関するめんどうごとを全部引き受けてくれます。
```
凄さがわたしに響かない

```
まず「関数型プログラミング」について今までに聞いた話をすべて忘れてください。
```
忘れられるものがない

```
実際にアプリケーションを作ろうと思ってもまともなツールがそろってなかったり... 反吐が出ますね。
```
欲張り
完璧なツールってどんなだろう


```
JSをそのまま使ったらどんなライブラリを使って工夫してもこれらを実現することはできませんが、
elmならJSという言語の枠に縛られずに簡単に実現できます。
```
この人は対比で良さを押してくる人だ
他のライブラリを使った場合と比較しないとelmの良さわからなそう


```
Elmにとって、関数型というのは目的ではなく手段
```
関数型を使うことが目的になっているものがあるの？あるなら何？
無駄に型が存在しないし使用しなくて良いという意味であっているのかな？


```
Elm で得られた知見はいろんなところで簡単に役立てることができます。
```
具体的に想像できないので例があれば知りたい

```
こんな素晴らしいことが可能になるのは、Elmが「静的型付関数型言語」という40年以上の歴史を持つ研究成果を活用しているからにほかなりません。
```
素晴らしさが謎のまま終わってしまった



>「静的型付関数型言語」という40年以上の歴史を持つ研究成果

これはすごくつよそう

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

**elm guide　言語の基礎**

```
   "hello" ++ "world"
```
なんで＋2つ必要なの
先輩エンジニア < 文字列連結と四則演算の違いを出すため

```
string
```
先輩エンジニア <「糸を紡ぐ」から文字列のことをstringと呼ぶらしいよ

おしゃんやん

```
JavaScriptとは異なり、Elmは整数と浮動小数点数を区別します。
```
数の数え方が整数と小数で違うんだな。
考え方が違うものを簡単に足したり引いたりできないし、
考え方が違うから型も違うんだな。


```
 isNegative n = n < 0
<function>
```
なんのためにこんなことをするの？
先輩エンジニア < うわあ無性に関数欲しいぃて時にやるんだよ

>例えば、減点式のテスト。
採点時に、うっかりマイナスにならないようにしたい。
もしゼロより小さくなったらゼロで止めてくれるとしたら？

ちょっと欲しい

```
isNegative n = n < 0<function>
```

これを打つと関数が作れるらしい。

打ち込んでみて初めて、
「isNegative」は私がつけた名前だということを知った。

これはネガティヴですか　そうです　違います
一行一行単純なやりとりを指定していくからか、かわいさを感じる


```
JavaScriptやPython、Javaのような言語とは関数適用の見た目が異なっていることに注目してください。
括弧の中にすべての引数をカンマで区切って書くのではなく、関数を適用するのには単に空白を使います。
そのため、(add(3,4))は(add 3 4)になり、結果として括弧やカンマをたくさん書いてコードが長くなるのを避けることができるのです。
いったんこれに慣れてしまえば、括弧やカンマを使う構文よりもずっと読みやすく感じられるようになるはずです！　
```
知らん

```
無名関数を使えば、この関数を次のように定義することもできます。
> \n -> n < 0
<function>

> (\n -> n < 0) 4
False
```
無名関数とな。
さもみんな知ってるでしょという感じで出てくるけど知らないものが多すぎて辛い

```
このifとthen、elseという予約語は、条件部分とふたつの分岐部分を区切るのに使われており、丸括弧や波括弧を使う必要はまったくありません。

Elmは"truthiness"の概念を持たず、数や文字列、リストを真偽値として使うことはできません。もしそうしようとすると、本当の真偽値を使う必要があることをElmは教えてくれます。
```
予約語も"truthiness"も聞いたことないがな


永遠とこれが続くのもよろしくないのでこの辺で。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

**おわりに**

全然簡単じゃない。



今回elmとふれあってみて、興味が湧いたのは簡単に絵が描けることとmotionがつけられること。

他と比較したことがないので「簡単」と言い切るのは難しいが、ヨッシーはすぐかける。
<img width="833" alt="スクリーンショット 2019-12-23 0.04.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531755/a412a100-363b-514a-b51c-716e24802bd7.png">

groupを知らないまま書いたので、コードはもっと綺麗にできそう。
そんなに細かい動きはできないのかもしれないが、ちょっとしたアニメーションを書いたりするのはたのしそうだなと思えた。

結局のところ、あまりelmとの距離は縮まっていないけれど、
今後の距離のつめかたがわかったのでもうちょっとがんばってみます。