Elm 基本的な構文

他の記事からElmの概要とインストール方法について理解しました。次には、Elmによって簡単なElmプログラムを作成する方法を説明します。

ステップ1：VSCodeでHelloAppディレクトリを作成します

次には、ディレクトリにHello.elmファイルを作成します。

上記の図には、プロジェクトフォルダーHelloAppとVSCodeで開いたターミナルを示しています。

ステップ2：必要なElmソフトウェアパッケージをインストールします

Elmのパッケージマネージャーはelm-packageです。elm-lang / html パッケージをインストールします。このパッケージは、ブラウザでElmコードの出力を表示します。

VSCodeを右クリックして、[ファイル]→[コマンドプロンプトで開く]を順番に選択します。HelloAppプロジェクトフォルダーに移動します。

ターミナルウィンドウで次のコマンドを実行します-

パッケージをインストールする場合、次のファイル/フォルダがプロジェクトディレクトリに追加されます。

elm-package.json（ファイル）。プロジェクトのメタデータを保存します
elm-stuff（フォルダ）、外部パッケージを保管します

パッケージが正常にインストールされると、次のメッセージが表示されます。

ステップ3：次のコードをHello.elmファイルに追加します

1.	-- importing Html module and the function text
2.	import Html exposing (text)
3.	 
4.	-- create main method
5.	main =
6.	-- invoke text function
7.	text "Hello Elm from ceodata.com"

上記のプログラムは、ブラウザにceodata.comからの文字列メッセージHelloElmを表示します。

そのため、Htmlモジュールにtext関数をインポートする必要があります。 text関数は、ブラウザで任意の文字列値を出力するために使用されます。mainメソッドはプログラムのエントリポイントで、text関数を呼び出し、文字列値を渡します。

ステップ4：プロジェクトをコンパイルします

VSCodeターミナルウィンドウで次のコマンドを実行します。

elm make Hello.elm

上記のコマンドの出力結果は次のとおりです

//update path to the proj folder in the command elm make
C:\Users\F2er\elm\HelloApp>elm make Hello.elm
Success! Compiled 38 modules.
Successfully generated index.html

上記のコマンドは、index.htmlファイルを生成します。 elmコンパイラは.elmファイルをJavaScriptに変換し、index.htmlファイルにネストします。

ステップ5：ブラウザでindex.htmlを開きます

任意のブラウザでindex.htmlファイルを開きます。

Elmコメント

コメントは、プログラムの読みやすさを向上させるメソッドです。

コメントを使用して、コードの作成者、関数の構築に関するヒントなど、プログラムに関するその他の情報を含めることができます。コンパイラはコメントを無視します。

Elmは、下記の種類の注釈をサポートしています。

単一行コメント（-）：-と行末の間にあるテキストはコメントと見なされます。
複数行コメント（{-}）：これらのコメントは複数行にまたがることが可能です。

Elm コメントの例：

-- this is sin
gle line comment
 
{- This is a
  Multi-line comment
-}

行のインデント

Elmは、関数定義またはフロー制御のコードブロックを表す中括弧を提供しません。

コードブロックは行インデントで表され、行インデントは厳密に実行されます。ブロック内のすべてのステートメントには、同じインデントにすることが必要です。

例えば：

    module ModuleIf exposing (..)
    x = 0
     
    function1 =
       if x > 5 then
          "x is greater"
       else
          "x is small"

ただし、次のブロックはエラーを発生します

    -- Create file ModuleIf.elm
    module ModuleIf exposing (..)
    x = 0
     
    function1 =
       if x > 5 then
          "x is greater"
             else --Error:else indentation not at same level of if statement
          "x is small"

そのため、Elmでは、同じ個数のスペースでインデントされたすべての連続行がブロックを形成します。

C:\Users\admin>elm repl
---- elm-repl 0.18.0 -----------------------------------------------------------
:help for help, :exit to exit, more at 
<https://github.com/elm-lang/elm-repl>
---------------------------------------
-----------------------------------------
 
> import ModuleIf exposing(..) -- importing module from ModuleIf.elm file
>function1 -- executing function from module
-- SYNTAX PROBLEM ---------------------------------------------------

I need whitespace, but got stuck on what looks like a new declaration. 
You are either missing some stuff in the declaration above or just need to add some spaces here:
7| else
 ^
I am looking for one of the following things:
 
 whitespace