SAFE Stack 開発環境構築

前回の記事、SAFE StackによるSPA開発はSAFE Stackというものを見つけたyo！というお話でした。
今回は実際に開発環境を作成してみます。

基本的にはQuick Start - SAFE Documentationの通りに進めていきます。上記サイトを以降は 本家 と呼びます。

あ、ちなみに私の環境は Windows 10 Pro です。この先の内容も Windowsでのお話になります。
OS XやLinuxでも可能だと思いますが、Monoはよく知らないんです。ごめんなさい。

用意するもの

本家の Install pre-requisites に記載されている通り、以下のものをインストールします。

• .NET Core SDK 2.1
• FAKE 5
• node.js 8.x
• yarn

本家に比べて、node.jsとyarnの順番を入れ替えてあります。だって、node.js無いのにyarnのインストールは出来ないでしょう...。
web系の開発にはnode.jsは必要不可欠になりつつありますねぇ。

さて、上記リストの中にF#使いでなければ初めて目にすると思われる FAKE なるものがあります。

これはビルドツールです。

ビルドツールと言ったら、.NETでは MSBuild になると思いますが、Visual Studio使いでも普段はほとんど意識していませんよね。
MSBuildは*.csprojや*.vbprojなどのプロジェクトファイルを読み込んでビルドタスクを実行するものですが、FAKEは*.fsxというF#スクリプトファイルを実行することでビルドタスクを処理します。

SAFE Stackでプロジェクトテンプレートを作成すると build.fsx という名前のスクリプトファイルが入っています。
特に変更することは無いかもしれませんが、興味のある方は中身を見てみると何をしているか、なんとなくわかるかもしれません。
あ、Dockerビルド時はDockerイメージのタグと名称を記入することになるかもしれません。

コードエディタ

本家の Install an F# code editor では Visual Studio 2017が載ってますね。
確かに Visual Studio 2017で ASP.NET CoreのF#サポートが最近追加されました。
一度、言語＝F#でプロジェクトをこさえてみましたが、ふーん、なるほどと思っただけでそっ閉じしました。
ViewはRazorで書かれていてC#なんですよね。Razor view engineはF#はサポートしていない模様。

C#で ASP.NET Coreはよく知ってるけど、F#言語は全くわからない！という方はProgram.fsやStartup.fsのソースを見てみると面白いかもしれません。

ちょっと脱線しました。

今回は、色々試してみて VS Code + Ionide extension で進めることにしました。
仕事で ASP.NET Core + React のシステムを Visual Studio 2017で開発したのですが、正直、Visual Studioである必要を感じませんでした。
FormsやWPF、UWPなどは Visual Studio が鉄板だと思いますが、web開発だと Visual Studio Code（以下、VSCode） の方がターミナルがすぐ使えて便利かな、と思います。

Ionide というのは VSCodeでF#開発を行うための拡張機能です。
F#は前方参照不可な言語で、ソースファイルもプロジェクトファイルに記載された順序がとても重要になります。
Ionideはソースファイルの順番を変更できたり、新規ソースを追加するとプロジェクトファイルに追加してくれたりと言った機能があります。
他にも色々ありますが、私自身使いこなせていないのでちゃんと説明できないです。ごめんなさい。

プロジェクト作成

本家の Create your first SAFE app にある手順通り進めます。

1. 任意のディレクトリを作成
2. 作成したディレクトリをカレントディレクトリとしてコマンドプロンプトを開く
3. 次のコマンドを実行してSAFEのプロジェクトテンプレートをインストール ( dotnet new -i SAFE.Template )
4. 次のコマンドを実行してプロジェクトを作成する ( dotnet new SAFE )
5. 次のコマンドを実行してビルド＆実行する ( fake build --target run )

2のところでコンテキストメニューから Open with Code してターミナルから3以降を実行しても良いと思います。
VSCode便利。

5を実行するとなにやら必要ファイルがダウンロードされてくると思います。
ビルドが完了すると、システム既定のブラウザが立ち上がってページが表示されます。
ビルドが追い付いていないとブラウザが先に立ち上がって「アクセスできないよ！」と表示されるかもしれませんが、しばらく待っているとページが表示されると思います(Google Chromeではそうでした)。

ブラウザ上には SAFE Templateのタイトルの下に "Press buttons to manipulate counter: 42" という表示と、さらにその下に-(マイナス)／+(プラス)の巨大なボタンが配置されています。
ボタンを押すと42という数字が、 + で増えて、- で減ると思います。
なんということはないですが、いわゆる counterサンプルというやつですね。

SAFE Templateでは画面レイアウトがいくつか用意されていますが、実装されているのは全てこの counterサンプルになります。
画面レイアウトはSAFE Template overviewに指定の仕方と適用イメージのリンクが載っています。
適用イメージのリンクはテンプレートを基にして作成したイメージで、テンプレートそのものではないので、ここに一覧と画像イメージを載せておきます。

レイアウト一覧

オプション値	イメージ
fulma-basic(既定)
fulma-admin
fulma-cover
fulma-hero
fulma-landing
fulma-login

ちなみに本サイト管理用アプリは fulma-admin をベースにしています。
あたまのfulmaはFulmaのことで、CSSフレームワークBulmaの各classを Fable.React で使用する際のラッパーです。
たまたまですが、本ブログサイトも Bulma を使用しているんですよね。知ってるやつで良かった。

SAFE Template のオプション

画面レイアウト指定(--layout)以外にもいくつかオプションがあるので一覧にしておきます。

この中で重要なのは --communicationと --deployでしょうか。
特に --communicationの方は、ソースの作りが違ってきます。
--serverオプションはデフォルトのsaturnで問題無いと思います。saturn自体がgiraffe上に構築されたものなので、giraffeのHttpHandlerを使用したりもできます。

今回は Fable.Remotingを使用して構築します。また、docker上で運用する予定なので --deploy dockerです。

前掲の手順4では、

dotnet new SAFE --layout fulma-admin --communication remoting --deploy docker

という感じにしました。

SAFE Stack Template で作成されるプロジェクトはとてもシンプルで、これを元に構築していくのは中々大変でした。
次回は軽くソースを眺めてみたいと思います。