F#の周辺事情という記事でF#、特にFableを使って当サイトの機能を拡充していければいいなと書きました。

あれから色々と調べていて、SAFE Stackというものを見つけました。

SAFE Stack

SAFE Stackは「Fableを使ってSPAを作成しよう！」という、いわゆるプロジェクトテンプレートになります。
詳細については前掲のリンクを参照していただければいいのですが、英語のサイトなので、ここで大雑把にご紹介します。

SAFEという語は各文字がそれぞれ次のものを意味しています。

S aturn ... SaturnはF#製のWebサーバーです。
A zure .... 言わずもがなの Windows Azure のことです。
F able .... F# → JavaScript コンパイラです。
E lmish ... elmishはクライアント側のUIフレームワークです。

SAFE Stack overviewに上記のように記載されているのですが、必ずしも上記のOSSを使う必要は無いということが下の方に記載されています。

S は、ちょっと前までSuaveというWebサーバーだったようです。
Giraffeという ASP.NET CoreベースでSuaveに強く影響を受けたWebサーバーを使用しても構わないとなっています。ちなみにデフォルトの Saturnは Giraffeの上に再構築された比較的新しいWebサーバーです。

A はAzureとなっていますが、実質はDockerコンテナをAzureのサービスで運用するという感じみたいです。ですが、SAFE StackはDockerコンテナ上でしか実行できないというわけではありません。もちろんAzureで運用する必要もありません。

F はFableですが、これは代わりになるものは無いでしょう。F#で書いてJavaScriptにコンパイルされるというコンセプトのプロダクトにWebSharperというものがあります。これはフルスタックのWeb開発フレームワークで、Fableの代わりというよりは、SAFE Stackそのものと競合するものになるでしょう。WebSharperはF#の他、C#も使えます。

E のelmishはUIフレームワークという位置づけです。Elm というWebフロント向けのAltJS言語とElm Architectureと呼ばれるアーキテクチャーをF#で実現したライブラリです。Elm言語とF#はかなり似ている感じを受けます。elmish(Fable.elmish)はDOM操作にはReact(Fable.React)を使用しています。

SAFE Stackは dotnet new コマンドで作成できるプロジェクトテンプレートを提供しています。
手順に従ってテンプレートをインストールし(dotnet new -i SAFE.Template)、dotnet new SAFEでプロジェクトを作成して開発していく形になっています。
このテンプレートが必要最小限過ぎて、なかなか大変でした。これについては追々ご紹介出来ると思います。

作ろうとしているもの（当ブログの管理用Webアプリ）の要件

当ブログはデータベースとして PostgreSQLを使用しています。テーブル構成は非常に単純で、

  • Article ... ひとつひとつの記事データ
  • Taxonomy ... カテゴリやタグなどを管理している"分類"データ
  • ArticleTaxonomy ... 上記２つのリレーションを管理するテーブル

と、主要なテーブルはたったの２つだけという、とてもシンプルな構成です。

Articleテーブルに関しては記事そのもののデータが格納されていて、VSCode拡張機能による記事の作成と投稿という記事に書いた通り、自作のVSCode Extensionで全ての項目を網羅しているので問題無いのですが、Taxonomyに関しては記事データ中で分類名を指定して、新規追加／関連付けを行っているだけで他の項目を編集する機能がありません。特にUrlスラッグを編集する機能が無いのが痛い...。

項目名 説明
Id プライマリキー（自動採番）
Type カテゴリ／タグ／シリーズの種別
Name 分類名
UrlSlug URLスラッグ。一覧ページの固有名となる
Description 説明文 
create table "Taxonomy" (
  Id integer default nextval('"Taxonomy_Id_seq"'::regclass) not null
  , Type integer not null
  , Name character varying not null
  , UrlSlug character varying not null
  , Description character varying
  , primary key (Id)
);

ということで、まずはこのテーブルの保守機能を実装したいと考えています。

機能要件

  • Taxonomy テーブルのデータを一覧表示する。
  • Type カラムでデータを抽出できる。「指定なし」も可能
  • 一覧からデータを選択し、修正／削除を行う。
  • 新規追加

ごく普通のマスタ保守機能だと思います。

非機能要件

  • ユーザー名／パスワードによるログオン
  • 後々、他の機能を追加したくなると思うので、メニューで機能選択できるようにする
  • 当ブログと同様、Dockerで運用。docker-composeに含めて同一ネットワークに配置する
  • VSTSによるデリバリーも当ブログと同様

当ブログと協調して動作する必要があるので、非機能要件としてはこんな感じでしょうか。

次回から開発環境構築、プロジェクトテンプレート作成を行っていきたいと思います。