自作TODOアプリ(2)
uta8a前回の様子
今回はルーレットにせずに興味で技術を選択する。
uta8a技術候補は前回に加えてツール・ド・フロントエンド2024（フロントエンド班の開発環境や興味のある技術を調査してみた）を参考に追加。
この記事を読んで、エディタも変えると面白いかもと思い変えてみる。
- エディタ: Zed
- 技術
- F#, htmxを使う
- パブリッククラウドは自由に
を中心にやってみる。
uta8a30分くらい作業した。
できたこと: htmxの把握、Zedで一通りの操作、miseでdotnet入れる、dotnetのテンプレートプロジェクトをローカルで動かす
htmx
htmxはどうもhtmlで完結するのが良いっぽい。どうしてもJavaScript使いたい時は Client Side Scripting を読んだ上で使う。
というわけでnpmも使わずscriptタグからcdnのhtmxライブラリを読み込む方向でやってみる。
Zed
割と使いやすい。Remote SSHも快適
Remote Development - Zed
terminalはcmd+shift+pでterminalと打つと出る。基本このcmd+shift+pで色々呼び出す感じ。
Vimモードがコピペと競合しなくて便利
mise
dotnetのインストールが複数通りあって困ったので、community管理のasdf-dotnetを使うことにした。
どうせならとmiseを使ってみることに。(古いmiseは入ってた)
-
mise self-update: miseの新しいやつにアップデート -
mise use dotnet@latestをしたらmise.tomlに latest で書かれたので、pinしたいなと考えた。 -
mise use --pin dotnet@latestでちゃんと8.0.401でバージョン固定された。
dotnet
以下でいけた。
dotnet new web -lang f# -o miniweb
cd miniweb
dotnet run
これでhttpサーバが立ち上がる。 Properties/launchSettings.json にPortが書かれていた。
uta8a
単体テスト使ってみたいけどこれかなあ
uta8aあとiisExpressというやつが何者か調べ切らないとホスティング自信を持ってできないな
uta8a追加で30分くらい作業した。
F#で単体テストできるようになった。テストはNUnitを使っている。
- F#ではプロジェクトという概念がある。これはfsprojファイルがあるディレクトリのことで、この単位で依存とかが解決される。
- テストプロジェクトはアプリとは分離して作る。devDependenciesみたいなものがない？
- F#はファイルを作ったらfsprojに追加する必要がある。そうしないとdotnet run実行時に認識されない。
- また、EntryPointがついたファイルはCompileの最後に書く必要がある
- 別プロジェクトのファイルを参照するにはreferenceを追加する。testディレクトリで
dotnet add reference ../MyFSharpApp/MyFSharpApp.fsprojとしてtestからappのmoduleを読めるようになる。
割とびっくりすることが多い。ファイル追加したらfsprojの方も変更するのは戸惑った。調べたら何かのコマンドでファイルを追加する方法もあるっぽいけど、ファイルに一行追加するだけなので手でやる方が困惑しないで済む。(試したらソリューションファイルという新しい概念が出てきて詰まった)
uta8a次はプロパティベーステストのセットアップから。
ChatGPTにF#のことを聞いてたらFsCheckというpackageでプロパティベーステストができるらしくて試しにやってみたい。
uta8aプロパティベーステスト、簡単な例で理解できた。
# tests ディレクトリで
dotnet add package FsCheck
module todo.Add
let add x y = x + y
let reverse lst = List.rev lst # 追加
これで、reverseは2回やると元に戻るという性質を、ランダムな値を決まった回数回して確かめる
open FsCheck
let prop_reverseTwiceIsOriginal (lst: int list) =
reverse (reverse lst) = lst
[<Test>]
let Test2 () =
Check.Quick prop_reverseTwiceIsOriginal
テスト回した結果 dotnet test
Starting test execution, please wait...
A total of 1 test files matched the specified pattern.
Ok, passed 100 tests.
Passed! - Failed: 0, Passed: 2, Skipped: 0, Total: 2, Duration: 115 ms - tests.dll (net8.0)
普通のテストとプロパティベーステストで2つ回ってる。100 test passなので100個のランダムケースに対してテストされたということがわかる。
ChatGPT 4o に「FsCheckを使ったF#でのテスト方法例を教えてください」と質問したら結構いい感じに回答してくれて、それを元に書いた。
uta8a静的ファイルのホストは wwwroot/ ディレクトリを作って index.html を書いたら http://localhost:****/index.html でアクセス可能になった。
次はhtmxを書く