VS Code で Elm の開発環境を構築する on Windows 10

正式なタイトルは「VS Code で Elm の開発環境を構築する on Windows 10 on 人権不足マシン(メモリ8GB)」
といったところです。

気になるところ、足りないところがあればコメントいただけると助かります。


# 動機

*腰を据えて Elm やってみようかと思ったけど、ググると大体 Mac か Linux 向けの解説…
Windows だと環境構築するの結構しんどいのでは？*

というわけで、Windows でほぼ何もない所から環境構築する一連の手順が
あるといいなと思ったので書きます。


# 前提

- OS は Windows 10 を想定しています。
  - VS Code が動けば 10 以外でも大丈夫なはず。
- ~~Elm のインストール時にバージョンは指定しません。~~
  - ~~2018.12 現在では Elm 0.19 がインストールされることを期待した手順となっています。~~
  - 後述の理由により Elm のバージョンは 0.19.0-bugfix6 を指定します。
- Elm はグローバルインストールします。
  - ローカルインストールはグローバルインストールより少しだけ手間が増えるのでやりません。  

細かい手順があると「Elm の環境構築面倒くさい」となってモチベーションを下げる懸念があるので、
できるだけそれを避けます。


# Atom じゃなくて VS Code ？

**Q：** Elm なら Atom という気運があるようだが…。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">atomはelmで人権なので絶対入れてください！</p>&mdash; ABAB↑↓BA (@ababupdownba) <a href="https://twitter.com/ababupdownba/status/1056037680868290560?ref_src=twsrc%5Etfw">2018年10月27日</a></blockquote>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">elmはelmjutsuの関係で実質Atom一択やけど、HalogenっていうかPureScriptはpsc-ideのおかげでいろんな(psc-ideに対応してくれている)エディタで書けるからええなあと思う</p>&mdash; Keck (@Keck_init) <a href="https://twitter.com/Keck_init/status/1057193995254718464?ref_src=twsrc%5Etfw">2018年10月30日</a></blockquote>

**A：** 人権はない (Atom もインストールして試しましたが弊マシンだと動作が厳しかったので今回は VS Code です)。


# 環境構築

次の手順で進めていきます。

1. [`npm` (Node.js) をインストールする](#npm-nodejs-をインストールする)
2. [`elm` をインストールする](#elm-をインストールする)
3. [`elm-format` をインストールする](#elm-format-をインストールする) (オプション)
4. [VS Code をインストールする](#vs-code-をインストールする)
5. [VS Code の日本語言語パックをインストールする](#vs-code-の日本語言語パックをインストールする) (オプション)
6. [VS Code の Elm サポートプラグインをインストールする](#vs-code-の-elm-サポートプラグインをインストールする)
7. [Hello wolrd!](#hello-wolrd)


## `npm` (Node.js) をインストールする

「npm や Node.js とは何ぞや？」については [Google 先生に任せます](https://www.google.co.jp/search?q=npm) 。
Elm 関連のコマンドをインストールするのに必要なものなのでインストールします。

https://nodejs.org/ja/download/ から Node.js のインストーラをダウンロードしてインストールしましょう。
「推奨版(LTS)」と「最新版」がありますが、ここでは「推奨版」を選択してください [^1] 。

[^1]: 「最新版」で試したところ `elm` のインストールに失敗したことがありました。`elm` のインストールには最新の機能を必要としないので、無難に「推奨版」でやっていきましょう。

細かい手順については [Node.js / npmをインストールする（for Windows）](https://qiita.com/taiponrock/items/9001ae194571feb63a5e) が詳しかったので
そちらを参考にしてください。

インストールが完了すると `npm` もインストールされた状態になっています。

## `elm` をインストールする

`npm` を使用して `elm` をインストールします [^2] 。

[^2]: Elm には [Windows 用公式インストーラ](https://github.com/elm/compiler/releases/download/0.19.0/installer-for-windows.exe) もありますが、これは `elm` コマンドのみをインストールするもので、その他の Elm 関連コマンドのインストールはできません。後々他のコマンドをインストールすることも考慮し、最初から `npm` を使用していきます。

Windows のスタートメニューにある検索用テキストボックスに `node` と入力し、
検索結果にある `Node.js command prompt` を実行しましょう。
コマンドプロンプトが表示されるので、~~[`npm install -g elm`](https://www.npmjs.com/package/elm)~~ `npm install -g elm@0.19.0-bugfix6` を入力し実行します。
**※2019.05.25 現在、`npm install -g elm` を実行すると最新版である `0.19.0-no-deps` がインストールされますが、`elm make` 等で「プロセスはファイルにアクセスできません。別のプロセスが使用中です。」といった不具合が発生します。その 1つ前の `0.19.0-bugfix6` ではこの不具合は発生しないので、こちらをインストールします。**

```
C:\Users\win_user>npm install -g elm@0.19.0-bugfix6
```
※ `win_user` は自身のユーザ名を示します。これ以降は適宜読み替えてください。

****

これで `elm` のインストールが実行されます。
その後、問題がなければ最終的に下記のような表示が得られるはずです。

```
C:\Users\win_user>npm install -g elm@0.19.0-bugfix6
C:\Users\win_user\AppData\Roaming\npm\elm -> C:\Users\win_user\AppData\Roaming\npm\node_modules\elm\bin\elm

> elm@0.19.0-bugfix6 install C:\Users\win_user\AppData\Roaming\npm\node_modules\elm
> binwrap-install

+ elm@0.19.0-bugfix6
added 79 packages from 70 contributors in 30.021s

C:\Users\win_user>

```

上記と異なり `npm ERR!` や `NOENT` 、`EACCESS` などが表示されている場合は `elm` のインストールに失敗しています。
その場合は…エラーメッセージでググるなどしてどうにかしましょう。健闘を祈ります。:pray:

**Q：** ここで突き放すのか :thinking:
**A：** これ書いてる人もよく分かってないので… :innocent:


## `elm-format` をインストールする

**この節はオプションです。「ソースコードの整形は不要」という場合は飛ばして構いません。
ただし、以降の手順は `elm-format` がインストールされている前提で進めます。**

Elm コードのフォーマッタである `elm-format` を `elm` 同様に `npm` でインストールします。
コマンドプロンプトで [`npm install -g elm-format`](https://github.com/avh4/elm-format#installation-) を入力し実行しましょう。

```
C:\Users\win_user>npm install -g elm-format
```

問題がなければ最終的に下記のような表示が得られるはずです。

```
C:\Users\win_user>npm install -g elm-format
C:\Users\win_user\AppData\Roaming\npm\elm-format -> C:\Users\win_user\AppData\Roaming\npm\node_modules\elm-format\bin\elm-format

> elm-format@0.8.1 install C:\Users\win_user\AppData\Roaming\npm\node_modules\elm-format
> binwrap-install

+ elm-format@0.8.1
added 79 packages from 70 contributors in 20.28s

C:\Users\win_user>
```


## VS Code をインストールする

https://code.visualstudio.com/Download から VS Code のインストーラをダウンロードしてインストールしましょう。

細かい手順については [Visual Studio Code (Windows版) のインストール](https://qiita.com/psychoroid/items/7d85ae6bade4a67aedb1) のエントリが詳しかったので
そちらを参考にしてください。

`User Installer` と `System Installer` (とインストーラなしの ZIP ファイル) がありますがお好みで。
迷う場合は `User Installer` にしましょう。


## VS Code の日本語言語パックをインストールする

**この節はオプションです。「英語完全にマスターした」という場合は飛ばして構いません。
ただし、以降の手順は日本語言語パックがインストールされている前提で進めます。**

[VS Codeで表示言語を変更するには](http://www.atmarkit.co.jp/ait/articles/1805/18/news032.html) の手順に従ってインストールしましょう。

**Q：** 丸投げ？
**A：** はい。


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

`拡張機能` ビューを表示し、検索用のテキストボックスに `elm` と入力しましょう。
検索結果にある `elm` の `インストール` をクリックすると
Elm サポートのプラグイン (以降 vscode-elm) がインストールされます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/73432/25211169-a913-a526-2d91-52713020e2d8.png)

インストールが終わったら右ペインの `再読み込みしてアクティブにする` をクリックして
vscode-elm を有効にします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/73432/fd3bde71-5a19-4e4a-0518-e29e666b6224.png)

vscode-elm のインストールはこれで OK です。

なお、vscode-elm の設定 (`ファイル` - `基本設定` - `設定` - `拡張機能` - `Elm configuration`) には
`elm` コマンドや `elm-format` コマンドのパスの項目がありますが、これらは設定不要です。
`npm` でグローバルインストールした際に各コマンドのインストールディレクトリ [^3] が
`PATH` に追加されているためです。
何らかの事情で `PATH` への追加が失敗している場合のみ、コマンドのパスを設定しましょう。

[^3]: `C:\Users\win_user\AppData\Roaming\npm`


## Hello wolrd!

環境を構築したら動作確認しましょう。

### プロジェクトディレクトリの作成と初期化

まず Elm のプロジェクト用のディレクトリを作成します。
ここでは `C` ドライブ直下に `elm_from_vscode` というディレクトリを作成します。

```
C:\Users\win_user>cd C:\

C:\>mkdir elm_from_vscode

C:\>
```

次に `elm_from_vscode` 内に移動し、プロジェクトディレクトリの初期化のため `elm init` を実行します。

```
C:\>cd elm_from_vscode

C:\elm_from_vscode>elm init
Hello! Elm projects always start with an elm.json file. I can create them!

Now you may be wondering, what will be in this file? How do I add Elm files to
my project? How do I see it in the browser? How will my code grow? Do I need
more directories? What about tests? Etc.

Check out <https://elm-lang.org/0.19.0/init> for all the answers!

Knowing all that, would you like me to create an elm.json file now? [Y/n]: 
```

`elm.json` を作成するかどうか確認されるので `Y` を入力して進めます。

```
Knowing all that, would you like me to create an elm.json file now? [Y/n]: Y
Okay, I created it. Now read that link!

C:\elm_from_vscode>
```

これで `C:\elm_from_vscode` ディレクトリに `elm.json` ファイルと `src` ディレクトリが作成されました。


### Elm ソースファイルの作成と編集

VS Code に移り、メニューバーの `ファイル` - `フォルダーを開く` で表示されるダイアログで
`C:\elm_from_vscode` を選択して `フォルダーの選択` をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/73432/2677f527-e70f-afb5-613c-cc6c32ed8e8b.png)

エクスプローラービューの `src` ディレクトリ上で右クリックし、
`新しいファイル` を選択して Elm のソースファイルを作成します。
ここでは `Main.elm` というファイル名にしましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/73432/20951d33-72cf-2f9a-5252-d380245a5a8a.png)

`Main.elm` を編集していきます。
まず下記の 1行だけ記述してください。

```elm:Main.elm
main = div [] [ text "Hello world!" ]
```

この状態で `Alt + Shift + F` を入力してください。
下記のように整形＋ `module` 文の追加 がされたでしょうか？

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


main =
    div [] [ text "Hello world!" ]
```

整形されたのであれば VS Code から `elm-format` コマンドを呼び出せています。
整形されなかった場合は `elm-format` コマンドの呼び出しに失敗していますので、
`elm-format` のインストールや VS Code の設定手順を見直してください。

次に、編集した `Main.elm` を保存します (既に保存していても問題ありません) 。
`div` と `text` の下に波線が引かれているでしょうか？

![image.png](https://qiita-image-store.s3.amazonaws.com/0/73432/5df262c2-7f95-7112-9ffd-dbd64e11bcf9.png)

この時点でコンパイルエラーになっているので `elm` コマンドを呼び出せていることが分かります。
ただし `Main.elm` を実行できるようにしたいので修正しましょう。

`main =` の上の行で `imp` と打ち込んで Enter を入力してみてください。
補完が働いて `import Name exposing (..)` と入力され、`Name` の部分が選択状態になると思います。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/73432/cdfede3b-5f04-ef7a-c5d2-adfe3072a9fd.png)

選択されている `Name` の部分を `Html` に置き換えて保存しましょう。
`div` と `text` に引かれていた波線が消えるはずです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/73432/41387522-4b14-7c0a-82b2-8543a548c01f.png)

これでコンパイルエラーのないコードができました。

### Elm コードの実行

Elm のコードを実行してみます。
Elm Reactor を使うのが一番楽だと思うので、コマンドパレットから Elm Reactor を起動しましょう [^4] 。

[^4]: Elm Reactor についての説明は割愛します。説明を読むより、動かして触ってみる方が理解が早いと思うので。

`Ctrl + Shift + P` を入力してコマンドパレットを表示し、
`elm reactor start` と打ち込んで Enter を入力します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/73432/490ef3f4-77a0-102a-0c4f-2f012f38206f.png)

そうすると `出力` ビューが表示されます (でもなぜか何も出力されない…) 。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/73432/135b8151-c520-c552-e3fd-bbd4cbe8c0c3.png)

特に変化がないように見えますが、Web サーバが起動しているはずなので
Web ブラウザから http://localhost:8000/src/Main.elm にアクセスします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/73432/a5167d37-177a-f14f-9019-104b278f366a.png)

上記のように `Hello world!` と表示されれば OK です。
これで動作確認は完了です。

不要であれば Elm Reactor を停止させておきましょう。
コマンドパレットで `elm reactor stop` と打ち込んで Enter を入力すれば停止します。


# おわり

以上で Elm の環境構築は終わりです。
他にも色々便利な設定やプラグインはありますが、それらは実際に Elm に触れながら
追々導入していくとよいと思います (自分もこれから調べます) 。


# 参考

- [Node.js / npmをインストールする（for Windows）](https://qiita.com/taiponrock/items/9001ae194571feb63a5e)
- [Visual Studio Code (Windows版) のインストール](https://qiita.com/psychoroid/items/7d85ae6bade4a67aedb1)
- [VS Codeで表示言語を変更するには](http://www.atmarkit.co.jp/ait/articles/1805/18/news032.html)
- [vscode-elm](https://github.com/Krzysztof-Cieslak/vscode-elm)