[Elm] [1]は、JavaScriptにコンパイルされたフレンドリーな関数型プログラミング言語です。 ElmはブラウザベースのGUI、シングルページアプリケーションに重点を置いています。
ユーザーは通常、次の点で賞賛します。
バージョン | 発売日 |
---|---|
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 |
Elmコードを既存のHTMLページに挿入するには3つの方法があります。
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に埋め込むことをお勧めします。詳細はこちら 。
あるいは、具体的な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>
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サイトからインストーラをダウンロードし、インストールウィザードに従います。
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をインストールする
$ npm install -g elm-use
古いバージョンまたは新しいバージョンのelmに切り替えます
$ elm-use 0.18 // or whatever version you want to use
最初のプロジェクトを初期化してビルドする方法を学びます。
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
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
>
公式のスタイルガイドはホームページにあり、一般的には次のようになります:
つまり、たとえば、次のようになります。
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
手動で実行します。