読者です 読者をやめる 読者になる 読者になる

Elm --- インストール、動作確認

ダウンロード

Elmのサイトに行ってインストーラをダウンロードします。
f:id:any-programming:20170122103615p:plain

インストール

デフォルトの設定で問題ありません。
f:id:any-programming:20170122104551p:plain

Visual Studio Code 拡張機能インストール

今回はエディタとしてVisual Studio Codeを利用します。
拡張機能でelmパッケージをインストールします。
f:id:any-programming:20170122111300p:plain

作業フォルダ、elmファイルの作成

適当な場所にフォルダを作り、Visual Studio Codeでフォルダを開きます。
フォルダ内にHelloWorld.elmを作成します。
f:id:any-programming:20170122113019p:plain

elmファイルの編集

import Html exposing (..)

main = text "Hello, World!"


elm-reactorの起動

HelloWorld.elmのあるフォルダでコマンドプロンプトでelm-reactorを実行
f:id:any-programming:20170122153601p:plain

ブラウザでlocalhostを表示

f:id:any-programming:20170122154733p:plain

HelloWorld.elmを表示

HellowWorld.elmをクリックすると必要なパッケージの取得、コンパイル、表示が行われます。
f:id:any-programming:20170122154900p:plain

htmlの出力

HelloWorld.elmのあるフォルダでコマンドプロンプトでelm-makeを実行
f:id:any-programming:20170122155643p:plain