====== 190318 Elm ======
Elmという言語があるらしい。

WEBページを作るための言語らしい。。。

関数型言語らしい。

とりあえず、以下の本を買って読んでみましたが、正直、ちんぷんかんぷんです。

<html>
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B07P253FPG&linkId=c86139085c12c8a0e00a34193ff00d20"></iframe>
</html>

===== 公式サイト =====
https://elm-lang.org/
{{:z_blog:2019:pasted:20190318-132346.png}}

===== Windows10にelm 0.19.0をインストール =====


{{:z_blog:2019:pasted:20190318-132410.png}}

https://github.com/elm/compiler/releases/download/0.19.0/installer-for-windows.exe

がダウンロードされるので、exeファイルをダブルクリックしてインストール

{{:z_blog:2019:pasted:20190318-132608.png}}

{{:z_blog:2019:pasted:20190318-132638.png}}

これで、Windows10に、elm 0.19.0がインストールされた。

===== VisualStudioCodeでelmを利用できるように設定 =====

https://qiita.com/ossan_pg/items/5c3ce00b74036139507e
{{:z_blog:2019:pasted:20190318-133543.png}}

上記の通りにやるのがよいと思いました。。。

<code>
npm install -g elm
npm install -g elm-format
</code>

{{:z_blog:2019:pasted:20190318-133920.png}}

VisualStudioCodeをインストールは以下のリンクから
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
{{:z_blog:2019:pasted:20190318-133105.png}}


参考
https://github.com/Krzysztof-Cieslak/vscode-elm


VS Code の Elm サポートプラグインをインストールする

Extension(拡張機能)から、elm をインストールします。その後、VisualStudioCodeを再起動します。
{{:z_blog:2019:pasted:20190318-134158.png}}
{{:z_blog:2019:pasted:20190318-134217.png}}

VS Code に Elm 関連のコマンドを設定する
https://qiita.com/ossan_pg/items/5c3ce00b74036139507e#vs-code-%E3%81%AB-elm-%E9%96%A2%E9%80%A3%E3%81%AE%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B
を参考にやります。

{{:z_blog:2019:pasted:20190318-134830.png}}

<code>
Windows 10 Pro
VisualStudioCode
node 10.15.1
npm 6.4.1

elm 0.19.0
elm-format@0.8.1
</code>

===== Hello Worldしてみる =====
C:/elm_from_vscode/ フォルダを作成し、そのフォルダをVisualStudioCodeで開く。

Ctrl+@ でコマンドプロンプトを開く。

以下を入力。

<code>
elm init
</code>
{{:z_blog:2019:pasted:20190318-135338.png}}

Enterボタンを押すと、elm.jsonファイルと、src/フォルダが作成される。
{{:z_blog:2019:pasted:20190318-135444.png}}

src/　フォルダに、Main.elm ファイルを作成
{{:z_blog:2019:pasted:20190318-135639.png}}

{{:z_blog:2019:pasted:20190318-140448.png}}

Alt + Shift + F を入力　　　したが、pathが通っていないとのことでうまくいかなかった。。。


https://stackoverflow.com/questions/43738317/how-do-i-set-the-elm-format-path-within-vscode
{{:z_blog:2019:pasted:20190318-141008.png}}

→これは難しそう。

npm bin -g で、npmがインストールされている場所を確認すると、
{{:z_blog:2019:pasted:20190318-141633.png}}
<code>
C:\Program Files\nodejs
</code>
とのこと。。。

一度、Windowsのプログラムと機能から、elm 0.19.0をアンインストールして、
npm install -g elm 
でインストールしなおした。

なんかうまくいかないと思ったら、自分が、nodejsを、バージョン管理システムnvmでインストールしていたことに気付いた。（忘れていました、、とほほ、、、）

{{:z_blog:2019:pasted:20190318-142214.png}}

ということで、以下のように、User Settingsを変更

{{:z_blog:2019:pasted:20190318-142424.png}}

VisualStudioCodeを再起動

Alt + Shift + F を入力　　

{{:z_blog:2019:pasted:20190318-142643.png}}

{{:z_blog:2019:pasted:20190318-142720.png}}

BETAって書いてあるけど大丈夫かな？

結局うまくいかず。。。挫折。。。

https://github.com/avh4/elm-format#visual-studio-code-installation
{{:z_blog:2019:pasted:20190318-143235.png}}


いろいろやったがうまくいかず、

Ctrl+Shift+P

elm reactor start


{{:z_blog:2019:pasted:20190318-144641.png}}


{{:z_blog:2019:pasted:20190318-144746.png}}

とりあえず実行はできたみたいだが、環境構築、かなり難しかったです。

elm-formatはうまくできていません。どこかでできるようにしたい。。。

elm学習の道のりは遠い。。。


===== リンク =====

[[z_blog:2019:190319_elm2|190319 Windows10でElm環境構築（2回目）]]


https://qiita.com/ossan_pg/items/5c3ce00b74036139507e