SAFE Stack の ToDo アプリを眺める (1. ファイル全般)
SAFE Stack (link) のプロジェクトを作成すると入っているサンプルの ToDo アプリを眺める。 これまでに何とく少し弄ったり、断片的にチラ見したことがあるけど、全てのファイルを簡単にでも読んでいく。 全体像を少しは把握できるはず。
プロジェクトの作成
以下のコマンドで SAFE Template をインストールしてから新しいプロジェクトを作った。 SAFE Stack のドキュメントにある “Quick Start” (link) に沿いつつ、Git にファイルの登録もしている。
コマンド:
% dotnet new -i SAFE.Template
<省略>
%
% mkdir test-safe-stack-20210724
% cd test-safe-stack-20210724
%
% git init
Initialized empty Git repository in /home/tos/test-safe-stack-20210724/.git/
% git commit --allow-empty -m "initial emtpy commit"
[master (root-commit) a14d71d] initial emtpy commit
%
% dotnet new SAFE
The template "SAFE-Stack Web App v3.0.1" was created successfully.
%
% ls
Build.fs Helpers.fs paket.dependencies README.md test-safe-stack-20210724.sln
Build.fsproj package.json paket.lock src webpack.config.js
global.json package-lock.json paket.references tests webpack.tests.config.js
%
% git status
On branch master
Untracked files:
(use "git add <file>..." to include in what will be committed)
.config/
.editorconfig
.gitignore
.paket/
.vscode/
Build.fs
Build.fsproj
Helpers.fs
README.md
global.json
package-lock.json
package.json
paket.dependencies
paket.lock
paket.references
src/
test-safe-stack-20210724.sln
tests/
webpack.config.js
webpack.tests.config.js
nothing added to commit but untracked files present (use "git add" to track)
%
% git add .
% git commit -m 'just after creating project with SAFE Template'
[master 0175d87] just after creating project with SAFE Template
39 files changed, 19515 insertions(+)
create mode 100644 .config/dotnet-tools.json
create mode 100644 .editorconfig
create mode 100644 .gitignore
create mode 100644 .paket/Paket.Restore.targets
create mode 100644 .vscode/extensions.json
create mode 100644 Build.fs
create mode 100644 Build.fsproj
create mode 100644 Helpers.fs
create mode 100644 README.md
create mode 100644 global.json
create mode 100644 package-lock.json
create mode 100644 package.json
create mode 100644 paket.dependencies
create mode 100644 paket.lock
create mode 100644 paket.references
create mode 100644 src/Client/App.fs
create mode 100644 src/Client/Client.fsproj
create mode 100644 src/Client/Index.fs
create mode 100644 src/Client/index.html
create mode 100644 src/Client/paket.references
create mode 100644 src/Client/public/favicon.png
create mode 100644 src/Server/Server.fs
create mode 100644 src/Server/Server.fsproj
create mode 100644 src/Server/paket.references
create mode 100644 src/Shared/Shared.fs
create mode 100644 src/Shared/Shared.fsproj
create mode 100644 test-safe-stack-20210724.sln
create mode 100644 tests/Client/Client.Tests.fs
create mode 100644 tests/Client/Client.Tests.fsproj
create mode 100644 tests/Client/index.html
create mode 100644 tests/Client/paket.references
create mode 100644 tests/Server/Server.Tests.fs
create mode 100644 tests/Server/Server.Tests.fsproj
create mode 100644 tests/Server/paket.references
create mode 100644 tests/Shared/Shared.Tests.fs
create mode 100644 tests/Shared/Shared.Tests.fsproj
create mode 100644 tests/Shared/paket.references
create mode 100644 webpack.config.js
create mode 100644 webpack.tests.config.js
%
% dotnet tool restore
Tool 'paket' (version '6.0.0-rc002') was restored. Available commands: paket
Tool 'fable' (version '3.2.1') was restored. Available commands: fable
Tool 'fantomas-tool' (version '4.4.0') was restored. Available commands: fantomas
Restore was successful.
%
% git status
On branch master
nothing to commit, working tree clean
%
初期状態のファイル一覧
プロジェクトを作成した直後の初期状態でも結構な数のファイルが用意されている。
コマンド:
% find . -type f | grep -v '^./.git/' | wc -l
39
%
SAFE Stack は F# のフレームワークだけど、クライアント側には npm / webpack / React といった JavaScript 系のツールやフレームワークを利用する。 だから、これらの各種ツールの設定ファイルや各種ライブラリを取り入れて、ごった煮のようになっている。 そんなごった煮でありながら、うまく全体が動くところが SAFE Stack の偉いところだと思う。
各ファイルを見てコメントを付けていった。 ただし、このコメントは何かを説明するというより、自分が少しでも理解を深めるためにしたもの。 個々のファイルの本質をどこまで捉えいるか疑問だけど、ただ眺めて終えよりも、自分の言葉で言い表そうとする過程でいくらか理解を深められるから。 これまで知らなかったものも簡単に調べたくらいの中途半端な知識で、無理矢理にでもコメントを書いている。
ファイルの一覧:
| 番号 | ファイル | コメント |
|---|---|---|
| 1 | .config/dotnet-tools.json | dotnet tool コマンドの設定。ここでは Paket、Fable、Fantomas Tool が記述されていた。 |
| 2 | .editorconfig | エディター向けの設定。 .editorconfig / EditorConfig は複数のエディターで共通に使われる。 |
| 3 | .gitignore | Git の対象外にするファイルの設定。 |
| 4 | .paket/Paket.Restore.targets | 多分、Paket が生成するファイル。人がゼロから作るものには見えない。 |
| 5 | .vscode/extensions.json | VSCode の拡張の設定。Ionide や EditorConfig も記述されている。 |
| 6 | Build.fs | ビルドの設定……の一部。クライアントとサーバの両方について記述されている。Fake (link) と Farmer (link) を利用。 |
| 7 | Build.fsproj | F# のプロジェクトの設定。Build.fs と Helpers.fs を include している。 |
| 8 | Helpers.fs | ビルドの設定……の一部。Fake を利用。 |
| 9 | README.md | SAFE Template 自体の README になっていて、このアプリの実行手順を載せてくれている。 |
| 10 | global.json | .NET の設定ファイル。SDK のバージョンが記述されている。 |
| 11 | package-lock.json | NPM のパッケージのバージョン。npm コマンドが生成するほう。実際にインストールされているバージョンが記述するほう。 |
| 12 | package.json | NPM のパッケージのバージョン。人が作成する。バージョンの範囲を記述する。 |
| 13 | paket.dependencies | Paket のパッケージの設定。改行で分けられて、サーバ、クライアント、ビルドツールの 3 つのグループになっている。サーバは Fable.Remoting のサーバ側、Saturn、テストドライバの Expecto。クライアントは Fable 系各種 (含む Remoting のクライアント側, テストドライバの Mocha)、Feliz、Fulma。ビルドツールは Fake と Farmer。 |
| 14 | paket.lock | Paket で実際にインストールされたパッケージとそのバージョン。 |
| 15 | paket.references | これも Paket のパッケージの設定。MSBuild 向けらしいけど自信が無い。説明はここにあった。 |
| 16 | src/Client/App.fs | クライアントのソース。別途、中身をよくみる。 |
| 17 | src/Client/Client.fsproj | クライアントの F# のプロジェクトの設定。 |
| 18 | src/Client/Index.fs | クライアントのソース。別途、中身をよくみる。 |
| 19 | src/Client/index.html | クライアントの HTML ファイル。div 要素に elmish-app という ID が設定されている。 |
| 20 | src/Client/paket.references | クライアントの Paket のパッケージの設定。Fable 系各種、Feliz、Fulma が記述されている。プロジェクト直下の paket.dependencies とも重複するパッケージもあれば、重複しないパッケージもある。両ファイルがどういう関係か理解を整理できていない。 |
| 21 | src/Client/public/favicon.png | favicon |
| 22 | src/Server/Server.fs | サーバのソース。別途、中身をよくみる。 |
| 23 | src/Server/Server.fsproj | サーバの F# のプロジェクトの設定。 |
| 24 | src/Server/paket.references | サーバの Paket のパッケージの設定。Saturn と Fable.Remoting のサーバ側だけ記述されている。プロジェクト直下の paket.dependencies とも重複するパッケージもあれば、重複しないパッケージもある。これもプロジェクト直下の paket.dependencies との関係がよく分かっていない。 |
| 25 | src/Shared/Shared.fs | クライアントとサーバで共通のソース。別途、中身をよくみる。 |
| 26 | src/Shared/Shared.fsproj | クライアントとサーバで共通の F# のプロジェクトの設定。Client.fsproj と Server.fsproj の両方から参照されている。 |
| 27 | test-safe-stack-20210724.sln | ソリューションファイル……と言われているやつ。複数の fsproj ファイルなどを束ねるものだと思っている。人がゼロから作るものには見えない。 |
| 28 | tests/Client/Client.Tests.fs | クライアントのテストのソース。別途、中身をよくみる。 |
| 29 | tests/Client/Client.Tests.fsproj | クライアントのテストの F# のプロジェクトの設定。 |
| 30 | tests/Client/index.html | クライアントのテストの HTML ファイル。ほぼ空。 |
| 31 | tests/Client/paket.references | クライアントのテストの Paket のパッケージの設定。Fable.Mocha の 1 行だけ。 |
| 32 | tests/Server/Server.Tests.fs | サーバのテストのソース。別途、中身をよくみる。 |
| 33 | tests/Server/Server.Tests.fsproj | サーバのテストの F# のプロジェクトの設定。 |
| 34 | tests/Server/paket.references | サーバのテストの Paket のパッケージの設定。Expecto の一行だけ。 |
| 35 | tests/Shared/Shared.Tests.fs | クライアントとサーバで共通のテストのソース。別途、中身をよくみる。 |
| 36 | tests/Shared/Shared.Tests.fsproj | クライアントとサーバで共通のテストの F# のプロジェクトの設定。Client.Tests.fsproj と Server.Tests.fsproj の両方から参照されている。 |
| 37 | tests/Shared/paket.references | クライアントとサーバで共通のテストの Paket のパッケージの設定。Expecto と Fable.Mocha の 2 行だけ。 |
| 38 | webpack.config.js | webpack の設定。 |
| 39 | webpack.tests.config.js | webpack のテスト用の設定……でいいよね。Build.fs、package.json、test-safe-stack-20210724.sln の中でこのファイルを指定している箇所がある。 |
その他
Emacs で .editorconfig を利用したければ editorconfig-mode (link) をインストールするとよいっぽい。