Looking for elm Answers? Try Ask4KnowledgeBase
Looking for elm Keywords? Try Ask4Keywords

Elm LanguageElm言語を使い始める


備考

[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

編集者

原子

ライトテーブル

崇高なテキスト

ヴィム

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.jsonelm-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-makeelm-reactorelm-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'
 
0.16

ツールelm-formatは、Go言語のgofmtと同様に、ソースコードを自動的に (通常は保存時に)書式設定するのに役立ちます。繰り返しになりますが、基礎となる価値観は、 一貫したスタイルを持ち、 タブ対スペースインデント長などのさまざまな問題についての議論とフラッシュを保存しています。

Githubリポジトリの 指示に従って、 elm-format をインストールすることができます。次に、Elmファイルを自動的にフォーマットするようにエディタ設定するか、 elm-format FILE_OR_DIR --yes 手動で実行します。