F#でもElectronNET.APIを使うためのHOW TO

# はじめに

`C#` と `ASP.NET Core MVC/Blazor` と `ElectronNET.API` を利用することで簡単にクロスプラットフォームGUIアプリケーションを作成することができます.

それを `F#` でもやろう！という話です.

ところで、`F#` でも `ASP.NET Core MVC` が使えることを知っているでしょうか？

`F#` は何かと `Visual Studio` からの扱いが不遇なため, 利用できないと思っている方も多いと思います.

例えば以下は `C#` から `ASP.NET Core Webアプリケーション` を作成する際の画面ですが,

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/f79f6dbe-6c3c-95e9-db5d-ca2944ba00e1.png)

`F#` 側では以下のようになっています.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/5236d62a-aa1f-87fc-4a2c-46afb0696e00.png)

`Visual Studio` からしかプロジェクトを作成したことがない方はこの画面だけしか見る機会がないため, `F#` では `ASP.NET Core MVC` を利用できないと思ってしまうのも無理はないと思います.

しかし `dotnet` コマンドを利用してプロジェクト作成をしている方は `F#` でも `ASP.NET Core MVC` が利用できることを把握しているかもしれません.

もしくは, `Visual Studio` からしかプロジェクトを作成したことがない方でも, `F#` でWebアプリケーションを作成したくて検索した結果, 利用できるという事実を知った方もいるかと思います.

`dotnet` のリファレンスを見れば利用できることは自明なのですが, `--help` を利用することでも知ることができます.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/54b52b30-a762-54c9-0908-75f731ef3d77.png)

というわけで, 今回は `F#` + `ASP.NET Core MVC` + `ElectronNET.API` を利用して, クロスプラットフォームGUIアプリケーション用プロジェクトの作成方法について紹介していきたいと思います.



# プロジェクト作成方法

今回は `PowerShell` と `Visual Studio Code(= VSCode)` を利用していきます.

`Windows` の方は `cmd` や `Windows Terminal` でも問題ありませんし, `Mac` や `Linux` を利用している方は `zsh` や `bash` を利用しても問題ありません.

## 1. 今回の環境

|        | 名称               |
|--------|--------------------|
| OS     |Windows 10 Pro (x64)|
| Editor |Visual Studio Code  |
| .NET   |.NET Core 3.1.201   |



## 2. `ElectronNET.CLI` ツールをインストールする

```powershell:powershell
dotnet tool install ElectronNET.CLI -g
```



## 3. `ASP.NET Core MVC` プロジェクトを作成する

1. 適当なワーキングディレクトリに移動する

    ```powershell:powershell
    cd D:/work
    ```

1. `dotnet new` コマンドを利用して, `ASP.NET Core MVC` プロジェクトを作成する

    ```powershell:powershell
    dotnet new mvc -lang=F# -o=FsharpElectronApp
    ```

1. 作成したプロジェクトのディレクトリに移動する

    ```powershell:powershell
    cd ./FsharpElectronApp
    ```
 
1. `dotnet add` コマンドを利用して, `ElectronNET.API` を導入する

    ```powershell:powershell
    dotnet add package ElectronNET.API
    ```

1. `Visual Studio Code` で作成したプロジェクトを開く

    ```powershell:powershell
    code .
    ```

1. `FsharpElectronApp.fsproj` を `FsharpElectronApp.csproj` に書き換える

    **🚨この工程を忘れると次の作業が失敗するので必ず行うこと🚨**
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/b6a08e9e-b7af-425c-f18d-d01a72414691.png)

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/642a00b1-52ee-b17f-8fcb-bbb55b814054.png)

1. `electronize init` でプロジェクトの初期化を行う

    ```powershell:powershell
    electronize init
    ```

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/07d60630-2c97-d09e-3cc0-9c7b69c38db7.png)

1. `FsharpElectronApp.csproj` を `FsharpElectronApp.fsproj` に書き戻す

    **🚧この工程を忘れるとプロジェクトのビルドが失敗するので忘れず行うこと🚧**

1. `dotnet restore` を 実行する

    ```powershell:powershell
    dotnet restore
    ```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/9d488b78-f74e-0390-90a6-ad4eade95a2c.png)


## 4. プロジェクトを実行する

1. `Program.fs` を修正する

    ```fsharp:Program.fs
    open ElectronNET.API    // <-- この行を追加

    // （中略）
    
    let CreateHostBuilder args =
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(fun webBuilder ->
                webBuilder.UseElectron args |> ignore    // <-- この行を追加
                webBuilder.UseStartup<Startup>() |> ignore)
    ```

1. `Startup.fs` を修正する

    ```fsharp:Startup.fs
    open ElectronNET.API    // <-- この行を追加

    // （中略）
    
    member this.Configure(app: IApplicationBuilder, env: IWebHostEnvironment) =

        //（中略）

        Electron.WindowManager.CreateWindowAsync() |> ignore    // <-- この行を追加
    ```

1. `electronize start` で実行する

    初回はアプリが起動するまでに結構時間がかかるので注意

    ```powershell:powershell
    electronize start
    ```

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/90c17956-a7c9-6aa0-c8c7-653e45d5ccb1.png)

1. アプリが起動する

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125601/f1ffa531-e9d1-3048-8ac8-594c0bd677b2.png)


## 5. その他の情報

- **[ElectronNET.API 公式サイト](https://github.com/ElectronNET/Electron.NET)**



# おわりに

プロジェクト作成までの手順は以上となります.
あとは `C#` と使い方については同様となりますので, そちらの情報を適宜探すことでアプリケーションを作成することが可能だと思います.