Elm LanguageElm言語を使い始める
備考
[Elm] [1]は、JavaScriptにコンパイルされたフレンドリーな関数型プログラミング言語です。 ElmはブラウザベースのGUI、シングルページアプリケーションに重点を置いています。
ユーザーは通常、次の点で賞賛します。
- 実行時の例外はありません。
- 最高のコンパイラエラー
- リファクタリングの容易さ
- 表現型システム
- Elmアーキテクチャは 、Reduxがインスピレーションを得ています。
バージョン
| バージョン | 発売日 |
|---|---|
| 0.18.0 | 2016-11-14 |
| 0.17.1 | 2016年6月27日 |
| 0.17 | 2016-05-10 |
| 0.16 | 2015-11-19 |
| 0.15.1 | 2015-06-30 |
| 0.15 | 2015-04-20 |
編集者
原子
ライトテーブル
崇高なテキスト
ヴィム
Emacs
インテリジェントIDEA
括弧
VSコード
HTMLへの埋め込み
Elmコードを既存のHTMLページに挿入するには3つの方法があります。
bodyタグに埋め込む
Hello Worldのサンプルをelm.js ファイルにコンパイルしたとすると、Elmが<body> タグを引き継ぐようにすることができます：
<!DOCTYPE html>
<html>
<body>
<script src="elm.js"></script>
<script>
Elm.Main.fullscreen()
</script>
</body>
</html>
警告 ：Chrome拡張機能の中に<body> が混乱することがあります。常に特定のdivに埋め込むことをお勧めします。詳細はこちら 。
Div（または他のDOMノード）に埋め込む
あるいは、具体的なHTML要素を提供することで、Elmコードをその特定のページ要素で実行することができます。
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<div id='app'></div>
<script src="elm.js"></script>
<script>
Elm.Main.embed(document.getElementById('app'))
</script>
</body>
</html>
Webワーカー（UIなし）として埋め込む
Elmコードはワーカーとして起動し、 ポートを介して通信することもできます 。
<!DOCTYPE html>
<html>
<head>
<title>Hello Worker</title>
</head>
<body>
<script src="elm.js"></script>
<script>
var app = Elm.Main.worker();
app.ports.fromElmToJS.subscribe(function(world) {
console.log(world)
});
app.ports.fromJSToElm.send('hello');
</script>
</body>
</html>
こんにちは世界
初期化とビルドでこのコードをコンパイルする方法を参照してください
import Html
main = Html.text "Hello World!"
初期化してビルドする
Elmプラットフォームをコンピュータにインストールしておく必要があります。次のチュートリアルでは、ターミナルに精通しているという前提で書かれています。
初期化
フォルダを作成し、端末でそのフォルダに移動します。
$ mkdir elm-app
$ cd elm-app/
Elmプロジェクトを初期化し、コアの依存関係をインストールする：
$ elm-package install -y
elm-package.json とelm-stuff フォルダがプロジェクトに表示されます。
アプリケーションMain.elm エントリポイントを作成し、 Main.elm Hello Worldの例を貼り付けます。
プロジェクトの構築
最初のプロジェクトをビルドするには、次のコマンドを実行します。
$ elm-make Main.elm
これにより、 Main.elm ファイル（およびすべての依存関係）をJavaScriptにコンパイルし、HTMLにインライン展開したindex.html が生成されます。 ブラウザで試してみてください！
これがエラーで失敗したら、 I cannot find module 'Html'. Elmの最新バージョンを使用していないことを意味します。問題を解決するには、Elmをアップグレードして最初の手順をやり直すか、次のコマンドを実行します。
$ elm-package install elm-lang/html -y
あなた自身のindex.html ファイル（例えば、ポートを扱うとき）を持っている場合は、ElmファイルをJavaScriptファイルにコンパイルすることもできます：
$ elm-make Main.elm --output=elm.js
HTMLへの埋め込みの例の詳細。
インストール
Elmを使って開発を開始するには、 elm-platformと呼ばれる一連のツールをインストールする必要があります 。
これには、 elm-make 、 elm-reactor 、 elm-repl 、およびelm-packageが含まれます 。
これらのツールはすべてCLIで使用できます。つまり、端末から使用できます。
Elmをインストールするには、次のいずれかの方法を選択します。
インストーラの使用
公式Webサイトからインストーラをダウンロードし、インストールウィザードに従います。
npmを使用する
Node Package Managerを使用して、Elmプラットフォームをインストールできます。
グローバルインストール：
$ npm install elm -g
ローカルインストール：
$ npm install elm
ローカルにインストールされたElmプラットフォームツールには、次の方法でアクセスできます。
$ ./node_modules/.bin/elm-repl # launch elm-repl from local node_modules/
自作自治体を使う
$ brew install elm
elm-useでバージョンを切り替える
elm-useをインストールする
$ npm install -g elm-use
古いバージョンまたは新しいバージョンのelmに切り替えます
$ elm-use 0.18 // or whatever version you want to use
参考文献
最初のプロジェクトを初期化してビルドする方法を学びます。
ローカル構築サーバー（Elm Reactor）
Elm Reactorは、アプリケーションのプロトタイプ作成に不可欠なツールです。
Http.App.programWithFlagsまたはPortsを使用している場合は、Elm ReactorでMain.elm をコンパイルできないことに注意してください
projectsディレクトリでelm-reactorを実行すると、プロジェクトエクスプローラでWebサーバが起動し、別々のコンポーネントをコンパイルすることができます。
コードを変更すると、ページを再読み込みすると更新されます。
$ elm-reactor # launch elm-reactor on localhost:8000
$ elm-reactor -a=0.0.0.0 -p=3000 # launch elm-reactor on 0.0.0.0:3000
REPL
Elmについて学ぶ良い方法は、REPL（Read-Eval-Print Loop）に式を書くことです。 elm-app フォルダ（ 初期化とビルドフェーズで作成したもの）にコンソールを開き、以下を試してください：
$ elm repl
---- elm-repl 0.17.1 -----------------------------------------------------------
:help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl>
--------------------------------------------------------------------------------
> 2 + 2
4 : number
> \x -> x
<function> : a -> a
> (\x -> x + x)
<function> : number -> number
> (\x -> x + x) 2
4 : number
>
elm-repl は実際にはかなり強力なツールです。次のコードを使用して、 elm-app フォルダ内にTest.elm ファイルを作成したとします。
module Test exposing (..)
a = 1
b = "Hello"
さて、あなたはあなたのREPL（それは開いたままです）に戻り、次のようにタイプします：
import Test exposing (..)
> a
1 : number
> b
"Hello" : String
>
さらに印象的なのは、 Test.elm ファイルに新しい定義を追加した場合です。
s = """
Hello,
Goodbye.
"""
ファイルを保存してREPLにもう一度戻って、もう一度Test をインポートせずに新しい定義をすぐに利用できます：
> s
"\nHello,\nGoodbye.\n" : String
>
これは、多くの行にまたがる式を記述したいときに便利です。また、定義した関数を素早くテストするのにも非常に便利です。あなたのファイルに以下を追加してください：
f x =
x + x * x
保存してREPLに戻ります：
> f
<function> : number -> number
> f 2
6 : number
> f 4
20 : number
>
インポートしたファイルを変更して保存し、REPLに戻って何かをしようとするたびに、ファイル全体が再コンパイルされます。したがって、コード内のエラーについては、あなたに教えてくれます。これを追加：
c = 2 ++ 2
それを試してください：
> 0
-- TYPE MISMATCH -------------------------------------------------- ././Test.elm
The left argument of (++) is causing a type mismatch.
22| 2 ++ 2
^
(++) is expecting the left argument to be a:
appendable
But the left argument is:
number
Hint: Only strings, text, and lists are appendable.
>
REPLへのこの紹介を終わらせるために、 elm-repl は、 elm package install したパッケージについても知っていることを追加しましょう。例えば：
> import Html.App
> Html.App.beginnerProgram
<function>
: { model : a, update : b -> a -> a, view : a -> Html.Html b }
-> Platform.Program Basics.Never
>
スタイルガイドとelm形式
公式のスタイルガイドはホームページにあり、一般的には次のようになります：
- 可読性（コンパクトではなく）
- 修正の容易さ
- クリーンな差分
つまり、たとえば、次のようになります。
homeDirectory : String
homeDirectory =
"/root/files"
evaluate : Boolean -> Bool
evaluate boolean =
case boolean of
Literal bool ->
bool
Not b ->
not (evaluate b)
And b b' ->
evaluate b && evaluate b'
Or b b' ->
evaluate b || evaluate b'
以下より良いと考えられます ：
homeDirectory = "/root/files"
eval boolean = case boolean of
Literal bool -> bool
Not b -> not (eval b)
And b b' -> eval b && eval b'
Or b b' -> eval b || eval b'
ツールelm-formatは、Go言語のgofmtと同様に、ソースコードを自動的に （通常は保存時に）書式設定するのに役立ちます。繰り返しになりますが、基礎となる価値観は、 一貫したスタイルを持ち、 タブ対スペースやインデント長などのさまざまな問題についての議論とフラッシュを保存しています。
Githubリポジトリの 指示に従って、 elm-format をインストールすることができます。次に、Elmファイルを自動的にフォーマットするようにエディタを設定するか、 elm-format FILE_OR_DIR --yes 手動で実行します。
