elm

anti javascript
elm
elm-mode
my debug
elm reactor
building executable elm

anti javascript

前回はemccなんて言うコンパイラーをやってみた。そのツールの中でflake8ってのが出て来た。オイラーは勝手にパッケージのインストール系と思っていたよ。でも念のために調べてみた。 flake8と何なのかなんて言うのが出てきた。

python系ですかい。猫も杓子もpythonにはうんざり。何故うんざりか？　pipで関連を入れないと使い物にならないって事。その先は地獄だよう（経験敵にね）。

返す刀でjavascriptも切っておこう。やたら派生品が多い。裸で使うと効率悪いからやれ、何とかライブラリーとか、流行り廃りには付き合い切れません。

例えば、こんなの、新Vue.js「Vue 3」でコンポーネント実装法を大きく変える「Composition API」 Ver 2に慣れてきたと思ったら、Ver 3 で、破壊的代入、もとえ、破壊的変更ですよ。それはPythonもびっくり。脳味噌が幾つ有っても足りないぞ。

それを見越して、emccなんてのが生まれたんだな。何たってブラウザーは主戦場ですから。前にも書いたけど、入力完備、出力は最近TVまで映る。そうなると強力な演算力が欲しい。まあ、ブラウザーは、一種のパソコンですから。OSにWindowsが便利とかいやMACだろうなんて言ってるのは時代遅れですよ。

で、そのjavascriptの嫌いな理由が、下記に列挙されてた。 JavaScriptを悪いプログラミング言語だと考えるプログラマーが多いのは何故ですか？

じゃ、対案は？　アンチjavascriptで大安吉日な日々を過ごしたいぞと。それでもやっぱりJavaScriptを書きたくない人のためのコンパイル言語10

elm

いきなり、【elm】2019年にわざわざ学ばなくてもいい言語でTodoアプリを作る　こんなのを見つけてしまったけど、何となくhaskellぽいので手を出してみるか。 elm-jp なんてサイトも有る事だしね。

install

まずは入れてみなけりゃ始まらない。探したらインストール elm こんな所に案内された。npm使って入れろって面倒っぽい。バイナリーをいきなりインストール出来るみたいだ。でも、ここからのリンクはちょっと古い。最新は、 0.19.1 こちらだ。なお、お約束で32Bit版は有りません。勿論忘れ去られたBSD版なんてのも無い。

インストール手順が出てるけど、圧縮されてるのでgnuzipして、elmに名前を変えて実行属性を付けてから /usr/local/binに放り込むだけ。簡単明瞭。libとかshareの何かを置くなんて面倒は無い。近頃稀にみる潔さである。

elm repl

sakae@pen:/tmp$ elm repl --help
The `repl` command opens up an interactive programming session:

    elm repl

Start working through <https://guide.elm-lang.org> to learn how to use this! It
has a whole chapter that uses the REPL for everything, so that is probably the
quickest way to get started.

You can customize this command with the following flags:

    --interpreter=<interpreter>
        Path to a alternate JS interpreter, like node or nodejs.

    --no-colors
        Turn off the colors in the REPL. This can help if you are having trouble
        reading the values. Some terminals use a custom color scheme that
        diverges significantly from the standard ANSI colors, so another path
        may be to pick a more standard color scheme.

sakae@pen:/tmp$ el repl
-bash: el: command not found
sakae@pen:/tmp$ elm repl
---- Elm 0.19.1 ----------------------------------------------------------------
Say :help for help and :exit to exit! More at <https://elm-lang.org/0.19.1/repl>
--------------------------------------------------------------------------------
>

このreplを使うにはnode(nodejs)が必要。これらがPATHに見えないと文句を言って終了してしまう。emccで勝手にnode来たーーだったんで助かったよ。

do Tutorial

チュートリアルを丁寧にやっていけばいいんだろうけど、実際はどう動かすの？

sakae@pen:/tmp$ mkdir test
sakae@pen:/tmp$ cd test
sakae@pen:/tmp/test$ elm init
Hello! Elm projects always start with an elm.json file. I can create them!

Now you may be wondering, what will be in this file? How do I add Elm files to
my project? How do I see it in the browser? How will my code grow? Do I need
more directories? What about tests? Etc.

Check out  <https://elm-lang.org/0.19.1/init (see below link> for all the answers!

Knowing all that, would you like me to create an elm.json file now? [Y/n]: y
Okay, I created it. Now read that link!

<https://elm-lang.org/0.19.1/init>

最近はプロジェクトフォルダーを作る所から始まるのがお約束。GUIの流儀が持ち込まれているんだな。そのdirに入ってinitする。これでジェイソンの設定ファイルとsrc-dirが出来上がる。

sakae@pen:/tmp/test$ cat src/Main.elm
module Main exposing (main)
import Html exposing (text)

main =
  text "Hello!"

src内にハロワのelmファイルを作る。冒頭２行が大事。モジュール宣言で、mainを晒す。Htmlモジュールからtextを晒す。

sakae@pen:/tmp/test$ elm make src/Main.elm
Success!

    Main ---> index.html

sakae@pen:/tmp/test$ elm reactor
Go to http://localhost:8000 to see your project dashboard.

ファイルをコンパイルすると index.htmlとそれを支えるスタッフが作成される。そしたら、elmのサーバーを起動。

sakae@pen:/tmp$ firefox http://localhost:8000/index.html

後は、アクセスするだけ。

sakae@pen:/tmp/test$ tree .
.
├── elm.json
├── elm-stuff
│   └── 0.19.1
│       ├── d.dat
│       ├── i.dat
│       ├── lock
│       ├── Main.elmi
│       ├── Main.elmo
│       └── o.dat
├── index.html
└── src
    └── Main.elm

Main.elm{i,o}なんてファイルが作成されるって、Haskell譲りだな。尚、このスタッフは正社員じゃないので、いつでも解雇出来る。要するにキャッシュって事だ。今の世界を反映してるなあ。

日航123便の墜落について本を書いた元スッチィーの本を読んだ（その季節ですからね）。それによると、最近のスッティーは、コンビニのアルバイト並みの給料で飛んでる契約社員ばかりだそうな。事故が有ったら、真っ先に逃げ出すと言う人が多いとか。恐い世の中になったものだ。まあ、オイラーはもう飛行機に乗る事なんて無いだろうから、どうでもいいけど。

elm-mode

チュートリアルでは、お気に召すようなeditorも入れるといいよなんて言ってた。オイラーのお気に入りは言うまでもなくemacs。elm-modeって有るかな？　有ったんで入れた。使い方は、elm-mode を参照の事。C-c C-l で、elm repl が起動して、自動的にソースがロードされる。なかなか親切。

編集したら、即コンパイル出来る、C-c C-c が用意されてた。わざとエラーするように、文字列のダブルクォーテーションを一つはずしたみた。

-*- mode: elm-compilation; default-directory: "/tmp/aaa/" -*-
Elm-Compile started at Sun Aug  2 08:14:43

elm make src/Main.elm --output\=elm.js
Detected problems in 1 module.
-- ENDLESS STRING ------------------------------------------------- src/Main.elm

I got to the end of the line without seeing the closing double quote:

5|   text "HelloWorld
                     ^
Strings look like "this" with double quotes on each end. Is the closing double
quote missing in your code?

Note: For a string that spans multiple lines, you can use the multi-line string
syntax like this:

    """
    # Multi-line Strings

    - start with triple double quotes
    - write whatever you want
    - no need to escape newlines or double quotes
    - end with triple double quotes
    """


Elm-Compile exited abnormally with code 1 at Sun Aug  2 08:14:44

御親切にどうもです。ちゃんとすると


elm make src/Main.elm --output\=elm.js
Dependencies ready!
Success! Compiled 1 module.

    Main ---> elm.js

普通に、elm make src/Main.elm　すると、index.htmlが出来る。これなら何の苦労もなく、firefox index.html だけで見栄えを確認出来るぞ。楽でいいわい。

sakae@pen:/tmp/aaa$ wc elm.js index.html
  4409  11818  90193 elm.js
  4441  11885  90808 index.html
  8850  23703 181001 total

その差はわずか。diffしてみるか。

sakae@pen:/tmp/aaa$ diff  elm.js index.html
> <!DOCTYPE HTML>
> <html>
> <head>
:
> <script>
> try {
:
> </body>
> </html>

elm.jsの頭にhemlのタグとエラーキャッチのjsコードをちょろっと追加しただけだった。成果物はindex.htmlだけ。これならサーバーにアップロードするのも超簡単だ。

して、ブラウザーに表示されるデータはどういう風になってる？　index.htmlを探ると

var $elm$virtual_dom$VirtualDom$text = _VirtualDom_text;
var $elm$html$Html$text = $elm$virtual_dom$VirtualDom$text;
var $author$project$Main$main = $elm$html$Html$text('HelloWorld');

お馴染みのハロワがjavascriptの変数内に埋め込まれていた。仮想ブラウザー環境って事になってて、それをjavascriptの何処かで実環境に写しているんだな。

こういう事が分かるようにeditorを入れるのを勧めていた訳ね。了解しましただ。

my debug

開発は elm reactor して、サーバーを立ち上げ、firefoxでそこに接続ってのが標準みたい。でも、elm-moodeを知った今、別の方法を思い付いた。

emacsでコードを修正。コンパイル。すると、elm.js が出来上がる。後はこれを起動するtest.htmlを用意。firefox　test.html しておいて、更新したらリロード。その為のtest.htmlを用意する。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Main</title>
  <link rel="stylesheet" href="whatever-you-want.css">
  <script src="elm.js"></script>
</head>

<body>
  <div id="elm"></div>
  <script>
  var app = Elm.Main.init({
    node: document.getElementById('elm')
  });
  </script>
</body>
</html>

elm.jsファイルが大きすぎ。jsのファンクションが170も登録されてた。省いてしまう訳にもいかない。世の中便利に出来てて、jsファイルを圧縮出来るそうな。その為のツール。

sakae@pen:/tmp/test$ apt-file search bin/uglifyjs
node-uglify: /usr/bin/uglifyjs
node-uglify: /usr/lib/nodejs/uglify-js/bin/uglifyjs
uglifyjs: /usr/bin/uglifyjs
uglifyjs: /usr/lib/nodejs/uglify-js/bin/uglifyjs

例に載ってた、圧縮スクリプト

sakae@pen:/tmp/test$ cat min.sh
#!/bin/sh

set -e

js="elm.js"
min="elm.min.js"

elm make --optimize --output=$js $@

uglifyjs $js --compress 'pure_funcs="F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9",pure_getters,keep_fargs=false,unsafe_comps,unsafe' | uglifyjs --mangle --output=$min

echo "Compiled size:$(cat $js | wc -c) bytes  ($js)"
echo "Minified size:$(cat $min | wc -c) bytes  ($min)"
echo "Gzipped size: $(cat $min | gzip -c | wc -c) bytes"

コンパイルする時に最適化。それを外部の道具で更に圧縮。使い方は下記の様。

sakae@pen:/tmp/test$ ./min.sh src/Main.elm
Success!

    Main ───> elm.js

Compiled size:89614 bytes  (elm.js)
Minified size:6967 bytes  (elm.min.js)
Gzipped size: 2853 bytes

圧縮すると激的にサイズが縮小するな。普通に圧縮するとこれほどまでに圧縮はされない。効果は道具を通して得られるとね。

elm reactor

これ、中々良く出来ている。特に嬉しいのがincludeしてるパッケージに容易にリーチ出来る事。語学の練習は佳き先生に巡り合う事だと思う。公開されて叩かれて鍛えられてる師匠は何者にも勝ると思うよ。

それとセットで、

elm-architecture-tutorial をやっとけば、鬼に金棒。夏休みの宿題にぴったりだ。

Elm 言語がバージョン0.19でも楽しすぎて Typetalk のクライアントアプリを作りました。

Elm入門と実践 - 買い物カートを作ってアーキテクチャ「TEA」を学ぶ

building executable elm

上でも書いたけど32Bit版とBSDは蚊帳の外。でもソースが有るなら自前でコンパイル出来るのでは？　って、淡い期待が有る。

0.19.0のソースを取ってきてdebian 10.5（最近updateされた）に展開してみた。ぽつんとelm.cabal(and sources)が置いてあるだけ。haskellのアプリってどうやって作るのかな？先人が居ないか確認。そして、勇気ある人を発見。

Building executable ‘elm’ for elm-0.19 fails on OpenBSD 6.3 (ghc-8.2.2)

debian:compiler-0.19.0$ cabal install
Resolving dependencies...
cabal: Could not resolve dependencies:
[__0] trying: elm-0.19.0 (user goal)
[__1] trying: zip-archive-0.4.1 (dependency of elm)
[__2] trying: pretty-1.1.3.6/installed-1.1... (dependency of zip-archive)
[__3] trying: deepseq-1.4.3.0/installed-1.4... (dependency of pretty)
[__4] trying: array-0.5.2.0/installed-0.5... (dependency of zip-archive)
[__5] next goal: language-glsl (dependency of elm)
[__5] rejecting: language-glsl-0.3.0 (conflict: elm => language-glsl>=0.0.2 &&
<0.3)
[__5] rejecting: language-glsl-0.2.1, language-glsl-0.2.0 (conflict: pretty =>
base==4.11.1.0/installed-4.1..., language-glsl => base<4.11)
[__5] rejecting: language-glsl-0.1.1, language-glsl-0.1.0, language-glsl-0.0.2
(conflict: pretty==1.1.3.6/installed-1.1..., language-glsl => pretty<1.1.2)
[__5] rejecting: language-glsl-0.0.1, language-glsl-0.0.0 (conflict: elm =>
language-glsl>=0.0.2 && <0.3)
[__4] fail (backjumping, conflict set: elm, language-glsl, pretty)
After searching the rest of the dependency tree exhaustively, these were the
goals I've had most trouble fulfilling: pretty, deepseq, base, array,
language-glsl, elm, zip-archive

これってcabal地獄の再来かな。stackは例によって32Bit版無いしね。

Install ELM on Freebsd

こんなのも発見。なぞってみると

debian:zzz$ runhaskell BuildFromSource.hs 0.18
You need GHC 7.10 to build this version of Elm.
You are using GHC 8.4 instead.

全くセンシティブで困ったものだ。

なお、FreeBSDではportsになってて、そのMakefileを見ると、elmを作るには古いelmが必要と言う再帰になってた。その古いのはどうすんねん？　再帰を止める為に、誰かが作った奴が有るらしい。いずれにしろ、深入りすると地獄を見るんで、せいぜいソース鑑賞ぐらいに留めておけ。

This year's Index

Home