1. はじめに
ellie-app.comというサイトにElmで書いたプログラムを載せると、左にプログラム、右にその結果のウェブページができます。
この仕組みを利用すると、いろんな課題を問題と解答のセットでいつでも見ることができるので、明示的に学習を進めることができて、学習生産性が上がる、というアイデアです。
以下に課題とサイトへのリンクを書き足していきます。
おすすめの使い方は、「3. 解決済みの課題]をざっとみてその中からランダムでかまわないので数個クリックして開いてみる。すると、この課題でこんなサイトができるのか、という発見がひとつか二つはあるのではないか。百聞は一見に如かずという感じ。その感じを印象として頭の中にとどめておいて、なにか別の課題やアイデアのときに使う。
そそ、ご希望の課題があったらコメントに入れておいて下さい。
できたらやります。
2. 現在の課題 problems to solve
formに入れたテキストをlist表示する
Enter items and make a list. https://ellie-app.com/7FWC63DFCdna1
text, p, strong, blockquote, hr, brを使ってみる。
Try using text, p, strong, blockquote, hr, br.
ReverseTextに文字数、単語数、行数を表示する。
Count characters, words, lines. https://ellie-app.com/7FFwvyDH9bSa1
CoffeeMakerプログラムを作る(豆、砂糖、ミルク等を選ぶ) 。
Make a CoffeeMaker program.
extensible recordを使ってみる。
Try using extensible record to manage partial narrowed records.
3. 解決済の課題 solved problems
ハローワールドをElm Architectureを使わずに表示する。
Write a program to print "hello world" without using Elm Architecture. https://ellie-app.com/7DyPDSmhNkLa1
ハローワールドをBrowser.sandboxを使って表示する。
Write a program to print "hello world" using Browser.sandbox. https://ellie-app.com/7DD9WpJyv4Sa1
カウンタープログラムをBrower.elementを使って書いてみる。
Rewrite counter using Browser.element. https://ellie-app.com/7DDNqgBRNSga1
カウンタープログラムにResetボタンと+10ボタンをつける。
Add Reset and +10 buttons. https://ellie-app.com/7DWmYqvgGcHa1
文字列を逆順にするプログラムでHtml.Attributesを使う。
Rewrite text reversing program using Html.Attributes. https://ellie-app.com/7Fq9SMqqXjda1
"++"を使って文字列を連結する。
Concatenate texts using "++". https://ellie-app.com/7FyDBCNfSFma1
楽譜を表示して音を鳴らす。
Show music sheet and play audio sound. https://ellie-app.com/7JpgqVnGk5Va1
List.mapを使って、Groceriesプログラムを書き直す。
Rewrite Groceries example of elm-lang. https://ellie-app.com/7KTLmx7Rkqha1
SvgShapesClubを書き直す実験。
Rewriting Svg Shapes Clubn , an elm-lang example. https://ellie-app.com/7KTGMHJ2WQga1
リストをランダムにシャフルする。
How to shuffle a list. https://ellie-app.com/7LKT6vGsjRNa1
