LoginSignup
0
0

More than 1 year has passed since last update.

F#におけるWebアプリケーション用フレームワーク「Giraffe」を触ってみる①

Last updated at Posted at 2023-01-01

本記事は、F#どころかプログラミング自体初心者な自分が理解を深めるために書いたものになります。
内容に関して細心の注意は払っておりますが、間違った記述があれば遠慮なくコメントいただけますと幸いです… m(__)m

Giraffeとは

F#でWebアプリケーションを作るためのフレームワークです。MVCモデルを採用しています。
Microsoftの公式ドキュメントでの説明は以下の通りです。

Giraffe は、優れたパフォーマンスで豊富な Web アプリケーションを構築するための、コミュニティ主導型の F# ライブラリです。 特に ASP.NET Core を念頭に置いて設計されており、ASP.NET Core パイプラインに追加することができます。
Web 開発での F# - Microsoft

※後述の公式リポジトリではWebフレームワークと謡っている為、この記事のタイトル等はそちらに合わせています。

リポジトリ

公式ドキュメント

プロジェクトの作成

任意のディレクトリにて以下コマンド実行します。(各オプションは必要な値を設定してください)
dotnet new giraffe -f "net7.0" -o test

実行後には以下の内容が生成されます。

┣WebRoot/
┃  ┗main.css
┣Program.fs
┣test.fsproj
┗web.config

dotnet runを実行すれば、サッとローカルホストでアプリケーションを起動することができます。
image.png

中身を見てみる

既定のProgram.fsの中身を紐解いてみたいと思います。…と言っても既定で各所にコメントアウトを仕込んでくれており、どれがどういう役割を担っているのかは一目でわかるようになっています。
image.png


①Models

Messageというモデルを定義しています。後述のWeb App、Viewsにて利用されます。


②Views

Giraffe ViewEngineを用いてビューを定義しています。

layout
ヘッダーとボディを担当
partial
表題部分を担当
index
partial関数を実行して更にpタグも一緒にlayout関数に渡し、layout関数内に定義されているbodyタグの「conent」にそれらを表示させます

③Web app

アプリケーション部分を定義しています。ここに記述されている2つの関数について内容を見ていきます。


1. indexHandler

引数に「name」を指定し、greetings、model、viewの3つの定義を行っています

greetings
pタグに入る文面を定義
model
Messageに入れる内容としてgreetingsを指定
view
modelの内容(=pタグの文面)を引数として②のindex関数を呼び出す

2. webApp

リクエストの処理を定義しています。

rootにアクセスした場合
indexHandlerを起動し、引数に「world」という文字を渡しています。
/hello/%s にアクセスした場合
indexHandlerを起動し、pタグで表示する文章の一部分をURL中の「%s」の文字に変更できるようにしています。

image.png


404エラー
ステータスコードが404の場合はtextを「Not Found」とするよう定義しています。ここで使用しているSetStatusCodeについてはGiraffeの公式ドキュメントを参照。

④Error handler

エラーが発生した場合の処理を定義しています。


⑤Config and Main

コンフィグ、エントリーポイントであるmain関数を定義しています。

後日追記します


最後に

②では実際にWebアプリを作成した際の模様をお伝えできればと思います。
また、Microsoftの公式ドキュメントではGiraffe以外にもSaturn、Fable、WebSharper、Falcoといったフレームワーク等が挙げられていますので、時間があればこれらについても記事を書きたいです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0