・・・いや、変な意味じゃなくて。
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 [] []
同じ要領でtrとtdも追加して表にした
, table [] [ tr [] [ td [] [ text "aa" ] ] ]
なんかこのへんから要領を得て、もくもくと試してはエラーを吐いてを繰り返す。
そしてようやく…
できたー！気持ちイィ〜！
そのうち中身変わるかもだけど動作するものとソースコード
https://youthful-colden-364718.netlify.com
https://github.com/negiboudu/textfld
次回に向けての課題
- 表を作るにあたって、List.repeatなどを試したがうまくいかず、何回も同じことを書いている。悲惨だ。
- テキストボックスか何かから数字を入力してもらって、マスの数を変えたり、マスのサイズを変えたりしたい。
(2019/3/14追記)
課題をちょっとクリアしました