・・・いや、変な意味じゃなくて。
Elm guideをなんとなく見て、うっすらソースが読めるようになってきて、環境もできたので、いざなんか書いてみようかと。
Web上で動くドット絵エディタを作りたいな〜と。
そしてそれで絵描いてLINEの絵文字を作りたいな〜と。そんな野望を持っています。
とりあえず、Elmの恩恵にもあずかれないような、ただの表を書くところからスタート。
進め方
ガイド
https://guide.elm-lang.jp/architecture/buttons.html
の中からHTMLタグっぽいものを探してみる。なるほど、タグ名を書いて、最初の[]の中はタグの属性、次の[]でタグの入れ子を表しているんだろう。（ひとまず雰囲気で読むことにした）
リファレンス
https://package.elm-lang.org/packages/elm/html/1.0.0/Html
を見てもなんとなくそんな感じがする。
とりあえずTABLEタグを表示すべく、パクってきたサンプルにtableと書いてみた。
ソースと実行結果
view model =
div []
[ input [ placeholder "Text to reverse", value model.content, onInput Change ] []
, div [] [ text (String.reverse model.content) ]
, table [] ←これを書いてみた
]
$ elm make src/textfld.elm
Detected errors in 1 module.
-- NAMING ERROR ------------------------------------------------ src/textfld.elm
I cannot find a `table` variable:
55| , table []
^^^^^
These names seem close though:
title
abs
alt
name
Hint: Read <https://elm-lang.org/0.19.0/imports> to see how `import`
declarations work in Elm.
最後の行にありがたいヒントが出ている。
こいつを頼りにimportにtableを追加してみる。
ソースと実行結果
module Main exposing (Model, Msg(..), init, main, update, view)
import Browser
import Html exposing (Attribute, Html, div, input, text, table)
Detected errors in 1 module.
-- TYPE MISMATCH ----------------------------------------------- src/textfld.elm
The 3rd element of this list does not match all the previous elements:
53| [ input [ placeholder "Text to reverse", value model.content, onInput Change ] []
54| , div [] [ text (String.reverse model.content) ]
55|> , table []
56| ]
This `table` call produces:
List (Html msg) -> Html msg
But all the previous elements in the list are:
Html Msg
Hint: Everything in the list needs to be the same type of value. This way you
never run into unexpected values partway through. To mix different types in a
single list, create a "union type" as described in:
<http://guide.elm-lang.org/types/union_types.html>
一歩前進したみたい。エラーメッセージが変わった。
TYPE MISMATCH（アンタわたしのタイプじゃないの）
そうか…そりゃしょうがねえな…
, table [] []
, table [] [ tr [] [ td [] [ text "aa" ] ] ]
なんかこのへんから要領を得て、もくもくと試してはエラーを吐いてを繰り返す。
そしてようやく…
できたー！気持ちイィ〜！
そのうち中身変わるかもだけど動作するものとソースコード
https://youthful-colden-364718.netlify.com
https://github.com/negiboudu/textfld
次回に向けての課題
- 表を作るにあたって、List.repeatなどを試したがうまくいかず、何回も同じことを書いている。悲惨だ。
- テキストボックスか何かから数字を入力してもらって、マスの数を変えたり、マスのサイズを変えたりしたい。
(2019/3/14追記)
課題をちょっとクリアしました