テキスト入力

テキスト入力の内容を逆さまに表示するシンプルなアプリケーションを作りましょう。

青いボタンをクリックして、このプログラムをオンラインエディタで見てみましょう。予約語のtypeについてのヒントをよく見てください。 今すぐ青いボタンをクリック！

import Browser
import Html exposing (Html, Attribute, div, input, text)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)



-- MAIN


main =
  Browser.sandbox { init = init, update = update, view = view }



-- MODEL


type alias Model =
  { content : String
  }


init : Model
init =
  { content = "" }



-- UPDATE


type Msg
  = Change String


update : Msg -> Model -> Model
update msg model =
  case msg of
    Change newContent ->
      { model | content = newContent }



-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ input [ placeholder "Text to reverse", value model.content, onInput Change ] []
    , div [] [ text (String.reverse model.content) ]
    ]

このコードは前の節で説明したカウンターアプリケーションを少しだけ変えたものです。モデルを設定し、幾つかのメッセージを定義し、 update のやり方、 view の作り方を定義します。前の節との違いはそれらの骨格の中身をどう定義するかということです。具体的に見ていきましょう。

Model

例によって Model がどのようになっているべきか考るところから始めましょう。今回の場合、「ユーザーがフィールドに何を入力したか」を追跡する必要がありそうです。文字列を逆さまに表示するためには、入力されたものを知っていないといけませんからね。こんな風にしてみましょう。

type alias Model =
  { content : String
  }

ここではモデルをレコードとして表現することにしました。このレコードはユーザーの入力を content というフィールドで保持します。

注意: 一つのフィールドしか無いのになぜレコードにするのか疑問に思う方もいるかも知れません。文字列をそのまま使ってもよいのでは無いでしょうか。もちろんそれでも構いません。しかし最初からレコードにしておくことでアプリケーションが複雑になってもフィールドを追加するのは簡単になります。 2つの テキスト入力をしたくなったとしても、より小さな変更で済むようになります。

View

モデルが決まったら、次に view 関数の作成に移りましょう。

view : Model -> Html Msg
view model =
  div []
    [ input [ placeholder "Text to reverse", value model.content, onInput Change ] []
    , div [] [ text (String.reverse model.content) ]
    ]

2つの子要素とともに <div> を定義します。中でも目を引くのは、3つの属性をもつ <input> ノードです。

• placeholder はフィールドに何も入力されていないときに表示されるテキストです。
• value はこの <input> に実際に入力されている内容です。
• onInput はユーザーがこの <input> の中で文字をタイプするたびにメッセージを送信します。

例えばユーザーが "bard" とタイプしたなら、このフィールドは次の4つのメッセージを生み出します。

1. Change "b"
2. Change "ba"
3. Change "bar"
4. Change "bard"

そして、このメッセージは update 関数に渡されることになります。

Update

このプログラムに出てくるメッセージは1種類だけなので、update が扱う分岐も1つだけです。

type Msg
  = Change String

update : Msg -> Model -> Model
update msg model =
  case msg of
    Change newContent ->
      { model | content = newContent }

<input> が変更されたというメッセージを受け取ったとき、モデルの content で追跡している値を更新します。つまり、ユーザーが "bard" とタイプしたことで生み出された4つのメッセージは、次のようなモデルを生成します。

1. { content = "b" }
2. { content = "ba" }
3. { content = "bar" }
4. { content = "bard" }

このアプリケーションでは、入力が変化したことをひとつ残らず追跡し、新しい状態をモデルに保存しておかなくてはなりません。そうしないと view 関数で逆さまの文字列を表示することができません！

演習: ここからオンラインエディタへ行き、モデルの content に保持している文字列の長さを view 関数の中で表示させてみましょう。文字列の長さを取得するには String.length 関数を使います。

Note: このプログラムで Change の値がどんなはたらきをしているのか知りたいなら、カスタム型やパターンマッチの節を見てみてください。