Elm-基本構文

この章では、elmで簡単なプログラムを作成する方法について説明します。

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

ここで、このディレクトリに Hello.elm というファイルを作成します。

ディレクトリの作成

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

ステップ2-必要なelmパッケージをインストールします

elmのパッケージマネージャーは_elm-package_です。 _elm-lang/html_パッケージをインストールします。このパッケージは、ブラウザにelmコードの出力を表示するのに役立ちます。

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

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

C:\Users\dell\Elm\HelloApp> elm-package install elm-lang/html

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

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

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

インストール済みパッケージ

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

-- importing Html module and the function text
import Html exposing (text)

-- create main method
main =
-- invoke text function
text "Hello Elm from finddevguides"

上記のプログラムは、ブラウザに「 Hello Elm from finddevguides 」という文字列メッセージを表示します。

このため、関数 text を Html モジュール内にインポートする必要があります。テキスト関数は、ブラウザで文字列値を印刷するために使用されます。主な方法は、プログラムへのエントリポイントです。 _main_メソッドは_text_関数を呼び出し、文字列値を渡します。

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

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

elm make Hello.elm

上記のコマンドの出力は以下のとおりです-

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

上記のコマンドは indexl ファイルを生成します。 elmコンパイラーは.elmファイルをJavaScriptに変換し、 indexl ファイルに埋め込みます。

ステップ5-ブラウザでindexlを開きます

任意のブラウザーで_indexl_ファイルを開きます。出力は以下のようになります-

ブラウザを開く

Elmのコメント

コメントは、プログラムの可読性を向上させる方法です。コメントを使用して、コードの作成者などのプログラムに関する追加情報、関数構成体に関するヒントなどを含めることができます。コメントはコンパイラによって無視されます。

エルムはコメントの次のタイプをサポートしています-

単一行のコメント（-）−-と行末までのテキストはコメントとして扱われます。
複数行コメント（\ {--}）-これらのコメントは複数行にわたる場合があります。

図

-- this is single 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"

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

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

Elm-basic-syntax

目次

Elm-基本構文

Elmのコメント

図

行とインデント