ElmでHello, world!

「基礎からわかる Elm」という本を読んでいます。

haskell.hatenablog.com

Elmで「Hello, world!」を表示させようと思ったら、さっそくエラーの壁にぶち当たったので、デバッグ時のメモを残しておきます。

004　Hello, world!

(p.24)

Hello.elm

import Html exposing (text)

main = text "Hello, world!"

モジュール名がない

Windows10上でHello.elmを「elm make」コマンドを使ってコンパイル（elmからJavaScriptへトランスパイル）したら、エラーメッセージが出ました。

C:\elm\hello>elm make src/Hello.elm

Detected problems in 1 module.

-- MODULE NAME MISSING ------------------------------------------- src\Hello.elm

I need the module name to be declared at the top of this file, like this:

module Hello exposing (..)

Try adding that as the first line of your file!

Note: It is best to replace (..) with an explicit list of types and functions
you want to expose. When you know a value is only used within this module, you
can refactor without worrying about uses elsewhere. Limiting exposed values can
also speed up compilation because I can skip a bunch of work if I see that the
exposed API has not changed.

（Google翻訳）

1つのモジュールで問題を検出しました。

-モジュール名がありません------------------------------------------- src\Hello.elm

次のように、このファイルの先頭でモジュール名を宣言する必要があります。

モジュール Hello 公開（..）

それをファイルの最初の行として追加してみてください！

注：（..）をあなたが公開したい型と関数の明示的なリストに置き換えることをお勧めします。

値がこのモジュール内でのみ使用されることがわかっている場合、他の場所での使用を心配することなくリファクタリングできます。

公開された値を制限することができます

また、コンパイルが高速化されます。

なぜなら、公開されたAPIは変更されていません。

elm-formatで自動補完 

Visual Studio Code上で、Hello.elmをelm-formatでフォーマットしたら、コードが自動的に補完されて、1行目にモジュールの設定が追加されました。

module Main exposing (main)

import Html exposing (text)


main =
    text "Hello, world!"

モジュール名の不一致

このコードをelm makeでコンパイルしてみたら、またエラーメッセージが出ました！

C:\elm\hello>elm make src/Hello.elm

Detected problems in 1 module.

-- MODULE NAME MISMATCH ------------------------------------------ src\Hello.elm

It looks like this module name is out of sync:

1| module Main exposing (main)
^^^^
I need it to match the file path, so I was expecting to see `Hello` here. Make
the following change, and you should be all set!

Main -> Hello

Note: I require that module names correspond to file paths. This makes it much
easier to explore unfamiliar codebases! So if you want to keep the current
module name, try renaming the file instead.

（Google翻訳）

1つのモジュールで問題を検出しました。

-モジュール名の不一致------------------------------------------ src \ Hello 。エルム

このモジュール名は同期していないようです：

1 | モジュール メイン 公開（メイン）
^^^^
ファイルパスと一致させる必要があるため、ここで「Hello」が表示されることを期待していました。

次の変更を加えると、準備は完了です。

メイン -> こんにちは

注：モジュール名はファイルパスに対応する必要があります。

これにより、なじみのないコードベースを簡単に探索できます。

したがって、現在のモジュール名を保持する場合は、代わりにファイルの名前を変更してみてください。

エラーメッセージの指示に従って、1行目のモジュール名(？)を「Main」から「Hello」へと修正してみました。

module Hello exposing (main)

import Html exposing (text)


main =
    text "Hello, world!"

コンパイル成功！

このコードをelm makeでコンパイルしてみたら、今度はうまくいきました！

C:\elm\hello>elm make src/Hello.elm

Success!

Hello ---> index.html

「hello」という作業用フォルダーの中に「index.html」ができていました。

このindex.htmlをブラウザで開くと、確かに「Hello, world!」という文字列が表示されています！

Elmの最初の一歩は成功しました！

Elmから生成されるJavaScriptコード

コンパイルされてできたindex.htmlはどんな内容なんだろうと思ってHTMLソースコードを見てみたら、なんとビックリ！！！

「Hello, world!」を表示するためだけに、実に4397行もの大量のコード（88KB）が生成されていましたｗ

elmでコンパイルされたJavaScriptコードのフットプリントは、最低でも90KB程度はあるってことなんでしょうね。

時間があるときにでも、コンパイルされたJavaScriptコードを読めば、Elmの仕組みを理解するのに参考になるかもしれないと思いました。

Hello, worldができたので、次に進んでみたいと思います。

基礎からわかる Elm