🐓 🐩 🚵🏻 Web用のニレまたは関数型プログラミング、ティーポットが理解できる ♑️ 👦🏽 🐛

最近、インスピレーションを求めてgithubの興味深いリポジトリを見て、エルムプロジェクトに出会いました。これは、Web用に作成された機能的なリアクティブプログラミング言語であり、MLとHaskellの子孫です。私は関数型プログラミングの経験はあまりありませんが、ランディングページを見た後、仕事とその周辺の世界を忘れて、数時間この作成に興味を持ちました。私はすぐに、私には思われたように、以前は関数型プログラミング言語に固有ではなかった単純さに触発されました。

関数型プログラミングが得意ではないことをもう一度繰り返します。私はそれが基になっていて、エルムが専念している数学的概念に慣れていないので、今のところ勉強する時間はあまりありません。他の誰かがこの記事を書いて、もっと知識があった方が良いと思いますが、何もなかったので、それまで自分に負担をかけることに決めました。多分私の記事は誰かが機能的な喜びを発見するのに役立つでしょうWeb向けのプログラミング、または一見馴染みのあることの見直し。この記事に掲載されている資料のほとんどは、公式文書から引用され、かなり自由な形式で翻訳されています。猫の下で、すべての苦しみをお願いします。

最初に、Elmで最初のアプリケーションを作成し、何が起こっているのかを把握してみましょう。伝統から逸脱することなく、それを世界への挨拶としましょう。

import Html exposing (span, text) import Html.Attributes exposing (class) main = span [class "welcome-message"] [text "Hello, World!"]

最初の2行はHtmlモジュールとHtml.Attributesモジュールを接続します。これにより、ページ上のHTML要素とその属性を表示および変更できます。公開ディレクティブを使用すると、たとえば、代わりに、パラメータで指定された関数を直接使用できます

 Html.span

私たちは簡単に書くことができます

 span

mainはアプリケーションを制御する制御構造体であり、Elmで書かれたほとんどのプログラムには何らかの形でこの構造体が含まれます。

ひも

  span [class "welcome-message"] [text "Hello, World!"]

単純なHTMLを生成します。

 <span class="welcome-message">Hello, World!</span>

しかし、これはあまり興味深いものではありません。単純なHTMLコードを1行で生成するには、Elmで最大4行を記述しなければならなかったので、これまでのところそれほど印象的ではありませんが、言語アーキテクチャの基本概念を確認するだけで、すべてが適切に配置されます。

Elmプログラムのすべてのロジックは、Web開発の多くの人に馴染みのある3つの理解可能なシンプルな部分に分かれています。

モデル
更新する
表示する

モデル

モデルをアプリケーションの状態として説明します。これは、おなじみのMVCのモデルが意味するものとは異なります。私の考えをより詳細に表現すると、Elmのモデルには、MVCを理解する上で、この状態のアプリケーションに必要なすべてのモデルが含まれます。同時に、Modelははるかに単純なものにすることができます。たとえば、単純なカウンターを作成する次の例では、Modelは単純な整数（Int）になります。

更新する

ステータスの更新に関しては、更新が有効になります。ここでのすべては、モデルの場合ほど複雑ではありません。更新は、アプリケーションの状態を変更する必要があるかどうかを示す関数です（モデル）

表示する

ビューは、アプリケーションの状態、つまりモデルを表示する方法です。

要するに、Elmのアプリケーションは次のように機能します。

外部からリクエストを受け取り、それを使用してモデルを更新し、結果の表示方法を決定します。 Elmは、HTMLを効果的にレンダリングする方法を決定します。

乾いたテキストを読むとき、何が何であるかを理解するのは非常に難しいので、カウンターを作成する約束の例を見てみましょう

 module Counter where import Html exposing (..) import Html.Attributes exposing (style) import Html.Events exposing (onClick) import StartApp main = StartApp.start { model = 0 , update = update , view = view } -- MODEL type alias Model = Int -- UPDATE type Action = Increment | Decrement update : Action -> Model -> Model update action model = case action of Increment -> model + 1 Decrement -> model - 1 -- VIEW view : Signal.Address Action -> Model -> Html view address model = div [] [ button [ onClick address Decrement ] [ text "-" ] , div [ countStyle ] [ text (toString model) ] , button [ onClick address Increment ] [ text "+" ] ] countStyle : Attribute countStyle = style [ ("font-size", "20px") , ("font-family", "monospace") , ("display", "inline-block") , ("width", "50px") , ("text-align", "center") ]

この例では、かなり重要な概念であるアクションが追加されました。アクションにより、外部から受信したリクエストに正しく対応できます。この例では、増分と減分の2つのタイプのアクションを定義しています。そして、実行されたアクションに応じて、モデルの変更方法を決定します。

ちなみに、開発者はオンラインコンパイラを提供しているので、多くの利用可能なサンプルの1つを実行したり、自分で何かを書いたりすることができます。この例を実行して、何が起こるか見てみましょう！

この言語の基本的な概念については長い間話すことができますが、少なくとも少し興味深い資料を見つけた人は公式ウェブサイトに行き、自分の目で呼び出されたものをすべて見ると思います。また、私は自分が書いたものに興味がない人、または私の書くスタイルが好きではない人に、自分の目でエルムを見てもらいたいと思います。結論として、ブラウザでピンポンゲームを生成する公式サイトのコード例を追加したいと思います。この言語の優雅さとシンプルさは、コミュニティelm-lang.org/examples/pongの注目に値します

Web用のニレまたは関数型プログラミング、ティーポットが理解できる

More articles: