内容が古くなってしまったので昔の話と思ってお読みください。今はVSCodeを使う方が主流です。VSCodeを使う場合は、VSCodeのElmプラグインのドキュメントの冒頭にあるInstallの内容に従ってインストールするだけで完了です。
(2021/04/06追記)
この記事は?
Windowsで何もないところからElmの開発環境を構築したメモです。
@ababup1192 さんのリポジトリを使わせていただいています。
https://github.com/ababup1192/elm-webpack-starter
各種ソフトウェアのインストール
※インストールにあたっての事前確認
自分のPCが64ビットマシンかを確認しておいてください。
確認するには、画面左下のWindowsロゴマークを右クリック > システム
「システムの種類」欄を確認。大抵64ビットのはず。
Atom(テキストエディタ)
https://atom.io/
インストールが完了するとエディタが起動して、URLにatom://と付与して良いか訊かれるのでYes。
とんでもないところにインストールされているので、スタートにピン留めとかすると良い。
C:\Users\(自分のユーザー名)\AppData\Local\atom\
Git
https://git-scm.com/downloads
Windowsを選択すると64ビット版がダウンロードされる。
インストール中に6個ほど訊かれるが全て初期状態のままNextでOK。
Node.js
https://nodejs.org/ja/
10.15.3 LTSをダウンロード(2019/5/3時点)
Elm
elmjutsu(Atomプラグイン)
Atomを起動して、画面上部のメニューを選択。
File > Setting
Settingsタブが開くので+Installをクリック。
検索窓に「elmjutsu」と入力し、HITしたものをInstall。
インストールの途中で、language-elmもインストールして良いかきかれるのでYes。
elm-format
Elmのソースコードをきれいにフォーマットしてくれるもの。
コマンドラインから使うものだが、Atomプラグインとしても使えるようにセットアップする。
-
コマンドプロンプトを起動(Windowsキー+R > cmd)。
-
npm install -g elm-format と入力してインストール
インストールが完了すれば、コマンドプロンプトで「elm-format」と打つと動く。
(2019/05/16追記)
コマンドプロンプトで「elm-format」と打って動いた風に見えても、最後の行で以下のメッセージが表示されていることがある。原因不明。
Access violation in generated code when reading …
この場合は、elm-formatの導入はやめておきましょう。
- elmjutsuと同じ要領でAtomプラグイン「elm-format」で検索しインストール。
これを使うと.elmファイルを書き換えて保存したときに自動的にフォーマットされる。
binary path のnot foundのエラーが出る場合は、コマンドプロンプトでelm-formatと打って動くか確認。
コマンドプロンプトで動くのにAtomからだと動かない場合は、Atomで
File > Settings > Packages > 「elm-format」
で表示されたelm-formatの「setting」をクリック。
Binary Pathの欄に、
c:¥Users¥(ユーザー名)¥AppData¥Roaming¥npm¥elm-format.cmd
と入力。ちょっと遅いけど動くようになる。
Elmプロジェクトのセットアップ
任意の場所にフォルダを作成
(例)C:\elm
※ここからちょっとコマンド打ち込みが始まります。
-
コマンドプロンプトを起動(Windowsキー+R > cmd)。
-
cd 先ほど作成したフォルダ
(例)
cd c:\elm -
git clone https://github.com/ababup1192/elm-webpack-starter newproject
(newprojectは任意の名前で良い) -
cd 先ほど入れた任意の名前
(例:cd newproject) -
npm install
必要なパッケージがインストールされる。 -
npm run dev
コンパイルが終わると自動的にchromeが開いて、+-ボタンがあるページが開く。
エラーが出てchromeが自動で開けない場合は、任意のブラウザで以下のURLを開く。
localhost:8080
コマンドプロンプトは開きっぱなしでOK(サーバーが動いている)。
Elmを書いてみよう
-
Atomで File > OpenFolder...
Elm開発環境のセットアップで作ったフォルダを開く
(例)c:\elm\newproject -
srcの中のMain.elmを開く
任意の箇所を編集して保存。
(例)最後の方にあるtitleを書き換える
title = "カウンター"
↓
title = "カウンターアプリ" -
Ctrl + Sで保存
自動的にコンパイルされる。
(開きっぱなしのコマンドプロンプトを見るとわかる)
i 「wdm」: Compiled successfully. と表示されればコンパイル正常終了。
もしエラーがあればここにエラー内容が出力される。 -
開いていたブラウザに戻り、再読み込みする。
(IEやEdgeならF5、ChromeやSafariならCtrl+R)
↓
先ほど編集した内容が反映されている!