11
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Elm開発環境セットアップ for Windows

11
Last updated at Posted at 2019-05-03

内容が古くなってしまったので昔の話と思ってお読みください。今は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プラグインとしても使えるようにセットアップする。

  1. コマンドプロンプトを起動(Windowsキー+R > cmd)。

  2. npm install -g elm-format と入力してインストール
    インストールが完了すれば、コマンドプロンプトで「elm-format」と打つと動く。

(2019/05/16追記)
コマンドプロンプトで「elm-format」と打って動いた風に見えても、最後の行で以下のメッセージが表示されていることがある。原因不明。
Access violation in generated code when reading …
この場合は、elm-formatの導入はやめておきましょう。

  1. 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

※ここからちょっとコマンド打ち込みが始まります。

  1. コマンドプロンプトを起動(Windowsキー+R > cmd)。

  2. cd 先ほど作成したフォルダ
    (例)
    cd c:\elm

  3. git clone https://github.com/ababup1192/elm-webpack-starter newproject
    (newprojectは任意の名前で良い)

  4. cd 先ほど入れた任意の名前
    (例:cd newproject)

  5. npm install
    必要なパッケージがインストールされる。

  6. npm run dev
    コンパイルが終わると自動的にchromeが開いて、+-ボタンがあるページが開く。
    エラーが出てchromeが自動で開けない場合は、任意のブラウザで以下のURLを開く。
    localhost:8080
    コマンドプロンプトは開きっぱなしでOK(サーバーが動いている)。

Elmを書いてみよう

  1. Atomで File > OpenFolder...
    Elm開発環境のセットアップで作ったフォルダを開く
    (例)c:\elm\newproject

  2. srcの中のMain.elmを開く
    任意の箇所を編集して保存。
    (例)最後の方にあるtitleを書き換える
    title = "カウンター"

    title = "カウンターアプリ"

  3. Ctrl + Sで保存
    自動的にコンパイルされる。
    (開きっぱなしのコマンドプロンプトを見るとわかる)
    i 「wdm」: Compiled successfully. と表示されればコンパイル正常終了。
    もしエラーがあればここにエラー内容が出力される。

  4. 開いていたブラウザに戻り、再読み込みする。
    (IEやEdgeならF5、ChromeやSafariならCtrl+R)

    先ほど編集した内容が反映されている!

11
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?