elm+electron 入門 サンプルあり
はじめに
最近純粋関数型プログラミング言語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のインストール
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
ちなみにブラウザでアクセスするとこんな感じになる。
ブラウザ上にある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
サンプルの動かし方
- 上記のリンクをダウンロードして、
electron .
でelectronを立ち上げる。- Main.elmを編集する。(下のサンプルを貼り付けたり、自由に編集する)
elm-make Main.elm --output app.js
でコンパイルする- 立ち上げた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の本も出るようなので、興味があれば、買ってみるのもいいかもしれない。 私は買う!