heimdalの技術ノート

IT全般、Linux、Windows、プログラミング開発など、何でもござれ

elm+electron 入門 サンプルあり

f:id:xheimdal:20180514220346p:plain

はじめに

最近純粋関数型プログラミング言語Haskellが気になって少しずつ勉強している。

Haskellを勉強していく中で、elmとpurescriptを知った。 Haskellに近い書き方ができるJavascriptフレームワークで、Web構築できる。 electronと合わせることも出来るので、私と同じように興味持って、これから始める人に参考になれば幸いです。

特徴

AltJSと呼ばれるjavascriptフレームワークであり、記事にしていたMithril.jsとは違い、コンパイルが必要。
記載方法はHaskellのような書き方が出来る。 Elmアーキテクチャとしては、MVCならぬ、MVU(Model-View-Update)を基本としている。

環境

node.js elm electron mac

electronのインストール

ここ参照 heimdal.hatenablog.com

elmのインストール

npm i -g elm

コマンド

elmには4つのコマンドがあり、 コーディングする上では必要なので、説明する。

elm-repl

一行で実行できる計算やコマンド実行できるモードになる。
コマンドプロンプトやコンソールのようなもの。

> 1 + 1
2 : number

elm-reactor

即席のwebサーバを起動するコマンド。
ソースコードのあるところで実行して、ブラウザアクセスすると、 ファイルやパッケージ一覧、バージョンなど、そこそこリッチなwebサイトにアクセスすることができる。 動作確認する際に使う。意外と多機能で使いやすい。

%elm-reactor
elm-reactor 0.18.0
Listening on http://localhost:8000

ちなみにブラウザでアクセスするとこんな感じになる。

f:id:xheimdal:20180515003111p:plain

ブラウザ上にあるMain.elmをクリックすると、自動でコンパイルされ、結果が表示される。
その他、elm-package.jsonに書かれている情報などが、右上に表示されている。

elm-make

elmの拡張子ファイルをコンパイルするコマンド。 htmlやjsなど任意の拡張子で出力できる。
htmlは何かと個別に指定したい事もあり、勝手に生成されると面倒なので、jsファイルで出力した方がいいと思う。

elm-make Main.elm --output app.js

elm-package

node_modulesなどを使わず、専用のパッケージ管理コマンド。 elm専用のパッケージをインストールすることができる。

一番使うhtmlのパッケージをインストールする場合はこんな感じ。

elm-package install elm-lang/html 

パッケージ一覧

インストールするパッケージはここを検索して、必要なものを見つければOK。
Elm Packages

ファイル構成

ここを参照。 github.com

サンプルの動かし方

  1. 上記のリンクをダウンロードして、
  2. electron .でelectronを立ち上げる。
  3. Main.elmを編集する。(下のサンプルを貼り付けたり、自由に編集する)
  4. elm-make Main.elm --output app.jsコンパイルする
  5. 立ち上げたelectronにて、画面リロードする

hello worldサンプル

import Html exposing (text)

main : Html.Html msg
main =
  text "Hello World"

カウンタサンプル

import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)

main : Program Never number Msg
main =
  Html.beginnerProgram { model = 0, view = view, update = update }

type Msg = Increment | Decrement

update : Msg -> number -> number
update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1

view : a -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]

electron特有のバグ

elm+electronの場合、単純に実行すると、
Uncaught ReferenceError: Elm is not definedになってしまう。

回避方法としては、htmlファイルにElmの変数を自前で宣言すること。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>hello Elm!!</title>
</head>
<body>
    <script src="./app.js"></script>
    <script type="text/javascript">
        const Elm = module.exports
        Elm.Main.fullscreen()
    </script>
</body>
</html>

その他サンプル

elm公式サイトにもサンプルがあるので、ここで色々いじれば、理解もさらに深まると思う。 examples

まとめ

elmを使った所感としては、ソースコードが思いの外シンプルな構成で
純粋関数型プログラミング言語の勉強にはもってこいと思った。 mithril.jsとはまた違ったコーディングで面白い。 elmの堅牢さとelectronを組み合わせて高品質なデスクトップアプリを作ることも可能と思う。

elmの手軽さに慣れたら、purescriptに挑戦し、最終的にHaskellに辿りつくという、 逆順で、より純粋関数型プログラミング言語を理解していくのもいいかと思う。

近日elmの本も出るようなので、興味があれば、買ってみるのもいいかもしれない。 私は買う!

Amazon CAPTCHA