FlutterKaigi 2023 DartによるBFF構築・運用 〜Dart Frog×melos〜 by もぐもぐ / K9i

FlutterKaigi 2023 DartによるBFF構築・運用 〜Dart Frog×melos〜 by もぐもぐ / K9i

[音楽] はいこれよりダートフロッグによるbff 構築運用ダートフロッグかけるメロスと いう台で発表させていただきますもぐもぐ とけない愛ですよろしくお願いし ますまず簡単に自己紹介をさせてください えもぐもぐと申します本名は上ですえなぜ もぐもぐにしたのかは覚えていませんえ Twitterはこんな感じでやっていて 一応ファインダーアイコンでやってるん ですけども今回は著作権を考慮して消させ ていただきましたこんなこんな感じですえ 今年から今年の4月から株式会社夢見でえ フラッターエンジニアとして勤務してい ますえフラッターダート駅は約3年ですえ 最近地震関連のアプリを開発していて今 年度中にアプリリリース予定 です ああはいではもぐもぐさんから変わりまし て私の自己紹介をさせていただきますはい Twitterこんな感じのアカウントで やっています えっと本名は太はになりましてなんかこの 9iって呼ぶんですけどこの名前は川熱 だったりローカルアションと同じ感じで本 を略した名前になってますでタコアイコン で覚えてもらえるといいと思うんですけど このタコはコータを並び替えてタコになる から使ってますでKないアって名前 ちょっと噛んだりして呼びづらいんで林と 呼んでいただけると嬉しいです はいで夢み現在はもぐもぐさんと同じく 夢みのフラッタエンジニアしてまして一応 リードエンジニアをさせていただいてます で1社目が元々アAndroidなんかま 他にもバックエンドとかやってたんです けど主にAndroidをやりつつこの 時期にみでフラッタ始めましたで2社目も フラッターをやってましてで3者目が今年 の5月から夢みで働いてますそういうわけ でもぐもぐさんなんかよりもちょっと車力 浅いですでふらった4年目ぐらいになり ますで業務以外のなんかこんなことやっ てるよっての紹介するですけどosssの コントリビュートなんかをしてましてこれ だとリバーボットになんかコント リビュートした時のものでチェンジログ なんか見てるとたまに生息してるんで 見つかると見つけてもらえると嬉しいです あとは夢みに転職する時期に有給消化で暇 だったんでインバアテスって会社の コンテストに出して入賞したりしてます はいここで少し会社の紹介させて くださいでこの後夢みのスポンサー セッションなんかもあるのでそっちで

真面目な話をするので今回はちょっとネタ っぽいというかイベントこんなイベント やってるよという紹介などをさせて いただきます夢みはなんかXの公式 アカウントで結構大切りこんな感じの 大切りしてましてこれが有名かもしれない なと思ってまして左なんかだとなんか エンジニアなら分かる楽しめるような 大切りをしてたりあと右無職やめ太郎さ んって方が無職やめ太郎かこ本名さんって 方がみで有名なんですけどその人が作AI で作ったネタ画像に公式が絡んだりしてて まエンジニアだ楽しめでネタやってるで 気軽に絡んでいただけたらなと思い ますで川所属してる組織について紹介し ます夢みはなんか分野ごとにギルドって いう組織の単位があって僕らは夢みの フラッターギルドというとこに所属してい ますでまフラッターギルド普通に案件 なんかも当然やってるんですけどそれ以外 にイベントも力入れててこの左だとなんか さっき司会してくれていた朝日さんが所属 してるユトラストって会社と合道でやった フラッターのLT会で右側はなんかここに も何人かいるかもしれないんですけど フラッター大学さんってところと合道で やったハカ村でこういったイベントを今後 もやっていけたらなと思うのでよかったら イミのコンパスなんか登録してオフライン イベント一緒に楽しめたらと思いますはい それでは本編に移りますアジェンダの紹介 ですえ今回共同セッションなので前半が奥 で後半もぐもぐさんに発表してもらいます で最初から説明していくとまず第1章で ダートバックエンドの世界ということで ダートの簡単な歴史のおさいだったりあと ダートのバックエンドフレームワーク今回 紹介するダートフロッグ以外のものも軽く 紹介しますあとフラッタエンジニアだと 多分タイトルにあるbffってそ全然聞い たことないよって方多いと思うのでそれが どういうものか簡単に紹介しますでその後 はこのプロジェクトをやっていくにあたっ ての背景夢みがどんな状況で参入したかと かバックエンドの構成を変更することが 行われたんですけどそういった前提知識を 強えさせていただきますで3章にて技術 スタックの紹介としてそ我々フラッター チームが担当したきがこんな感じの プロジェクト合成だっただったて話とあと 本編にこれがま本編のようなものなんです がダートフロッグやメロスという今回紹介 してるパッケージの解説をさせていただき ますなんか通風にちょっとなってるんです けど4章で実践した感想を発表してライブ

でも行いますはいでは本編を移ります一章 でダートバックエンドの世界について紹介 させていただきます まずダートの簡単な歴史のおさいです ダート皆さんフラッターエンジニアだと 思うのでま知ってると思うんですが Googleが開発した言語です2011 年の10月10日に登場したそうでこの右 のXの画像はなんかダートの公式 アカウントがダートが今年の10月に投稿 してたものなんですけど今12歳だらしい ですなんかもっと若いのかと勝手に思って ましたが割と歴史あるんだなとこれを見た 時は思いましたはいでダートのこれまで すごいダイジェストな歴史なんですけど ダート元々javascriptの代替と して目的を目的としてが作られたそうです で2011年末までになんかバーチャル マシンがCHRに統合される予定があった そうなんですがなんかなかなかダートが なんか流行らずもダートオワコンみたいな 感じになっていたそうでこの計画は 2015年にはもう断念されたそうですで その後スカイフレームワーク皆さんスカイ フレームワーク知ってるかわかんないん ですけどこれがフラッターの電子に当たる のでこれこちら元々JavaScript で開発されてたんですが変わりとなる言語 を探しているタイミングがあってそこで 同じGoogleのダートチームにあって ダートを採用する流れになり2015年に はこのスカイフレームワークがダートを 初めて導入したコミットがありますで以降 はフラッターと共に成長しなんかダートと 言ったらフラッターみたいな感じの言語と して今になって ます はいダートバックエンドという選択肢に ついて紹介していきますフラッターが すごい普及することによってまバック エンドもダートで返したいという欲求が出 てきていますこれはフラッターやダートに 限らないんですけどやはり言語を統一する フロントとバックエンドの言語を統一する ことで様々なメリットがあり例えば同じ メンバーがフロントもバックエンドも開発 しやすくてフルスタックにできるあとコド の共有や再利用あとツールやライブラリー も共通化するなどいくつかのメリットが あります ということでダートバックエンド フレームワークについて紹介していき ますはいこちらはなんかあんま実用的な 紹介じゃないんですが懐かしかったので 紹介させてくださいアクアダクトという

フレームワークがありましてこちら 2018年頃にステーブルカネという会社 が開発したものでちょっとTwitter なんかでも話題になったんですがこれ知っ てたら古参なんじゃないかなと思います ただ2021年には公式金開発趣旨が宣言 されていてリポジトリは今パブリック アーカイブになってますでこちらの光景に なるコンダクトっていうフレームワークも あるんですがアクアダクトフォークした ものなんですけどちょっと最初やる気あり そうな風気だったんですが最近は活発に 開発されてなさそうという感じでした次に サーバーポットというフレームワークです サーバーポットって皆さん知ってるんです かねあ結構知ってますねはいサーバー ポット社っていう会社がもあってそこが 開発してるフラッター向けのサーバーに なりますでトップページにミッシング サーバーフラッターなんて書いてあって すごいフラッターを強く意識している フレームワークになりますこちらは 2021年という結構ま比較的最近会発表 されて今年の1月に1.0になったものに なりますで少しだけ動かしたことあるん ですがまcliでプロジェクト作成すると ブラッターのアプリとバックエンドがも 同時に生成されてでなんかそこのこの サーバーポッのサフに従って生成された APIを使って開発していくといったもの になりま公述するダートフロッグになんか と比べると機能が多い多能な フレームワークという印象でし た次にシェルフについて紹介します シェルフはダウトチームが開発している サーバーフレームワークで0.1.0は 2014年にもう公開されてます僕が ダートのバックエンドを全然やろうと思っ たことなかったので知らなかったんですが もこの頃にはすでにバックエンドの向けの フレームワークが使われ作られていたよう ですでシェルフの特徴とした本体が軽量な ことでシェリフバッケ自体はなんかかなり 少ない機能出てきていて複数のシェルフと 組み合わせるためのパッケージというのが あってそれと組み合わせるモジュール形式 になってますでシルフのプリポタリーだけ でも複数のセルフ用なパッケージがあって これがREmeから確か撮ってきた画像な んですけどこんな感じにシェルフ プロキシーとかシャルルーターみたいな パッケージがありこれらと組み合わせる ことでサーバーを作っていくという フレームワークになり ますで最後ダウトフロッグの紹介です今回

発表でま今回使ったフレームワークなん ですけどベリーグベンチャーズなんか略し てvgvなんて呼ばれる会社が作っている フレームワークになりますえっとこの ベリーグッドベンチャーズまフラッター 界隈では有名かなり有名な会社でしてそう いった意味で注目されてるフメマークに なりますで2020年と22年とサーバー ポットの2021年よりさらに1年早く 新しいフレームワークになって今年の8月 2.0になってますでシルフをベースに 築かれていてシェルフど同じような特性が あってこちらも複数のパッケージを 組み合わせる式ですで最終後で口述するん ですけどシルフをより便利に使えるような 機能があるものになり ますはいではbffについて紹介します 今回のタイトルにもあるんですがbff って分かりますかちらほらはいbffは バックエンド4フロントエンドというもの でなんかフロントエンドとバックエンドの 中間に置かれるサーバーになりますただ これだけ聞いてもちょっとしっくり来ない と思うので図を出していくと例えばなんか フロントエンド1つに対してバックエンド が2つあってそれぞれレストとgrpc みたいな構成の時これ直接叩くとフロント がなん結構複雑なコードになってしまうと 思うんですがそこにbffをあに置くこと でそういそこを組み合わせる処理をbff に移乗できるみたいな特徴があり ますまた今度は逆にフロントが2つある 場合になんかモバイルアプリとウブが それぞれあってで同じバックエンドを 叩こうとすると今度はバックエンド側に モバイルの時だけの処理みたいなのがて しまうんですがそういうのをbffを置く ことでそちらにそういった処理を寄せる ことができますまたなんかモバイルでは レストがAPIが使いたいけどWeb側で はグラフエ使いたいみたいなケースもある と思うんですがbffを使うことでそう いった特定のフロントエンドに特化した 構成ができ ますはいまたえっとvffについていくつ かの記事調べたんですが基本的にbffは フロントエンドエンジニアの持ち物として フロントエンジニアが開発するのでbff の言語なんかモバイル向けにダートで作っ たりフロントはタイプディスプリコで作る みたいなことができるといった理由まなん だろ方法になりますでまとめるとメリット としてはAPIを集約して複数のバと1つ のAPIのように見せながらフロント エイドに提供したり特定のフロントエンド

ウブにアグラフキルだったりアプリア レストだったり採用金開発言語を対応する フロントエンドと揃えるみたいなことが できるメリットがありまデメリットとした 開発コストは作るものが増える分たりあと は構成が単純に複雑だったり情調になって しまう面もあるというデメリットがあり ますはいそれでは2章に移ります プロジェクトの背景を紹介していきます 夢みの参入の経緯ですエメが参入今回参入 したプロジェクトなんですが介護看護分野 の企業と労働者のマッチングサービスに 当たりますこのサービスのフェーズとして はpmfなんかプロダクトがどの マーケットに刺さるかをま模索してる段階 に当たりますでフロントエンドがま特徴と てフロントエンドが3つ存在しまして マッチングサービスなので企業用のウェブ フロントエンドとロード車用のウブの フロントエンドあとロード者用のモバイル アプリがあって奥山ももさんはこの最後の ものを担当してい ますで夢み3入僕らが3入前の プロジェクトメンバーなんですがえっと バックエンドやPMなんかは夢みなんか 自宅開発などをしてるので顧客の企業の方 がまフルフルタイムで稼働してましたで Webのフロントについてはちょっと ややこしいんですが夢みの別のチームの フロントのメンバーが元々日中に稼働して ましたで最後課題があった点として モバイルアプリが副業の方を中心に夜間 などかなり不規則な課題稼働をしていた そうですでそれによって課題なんですこう いった課題があったそうでモバイルアプリ の開発メンバーが不規則な稼働だったこと でクライアントの企業の方と コミュニケーションが取りづらく思うよう にモバイルアプリの開発が進んでいなかっ たそうですまたクライアント企業のの方 フラッターやダーが得意な方がいなかった ことでま全体的に負債が多くなんかリント が全然ちゃんと守られていないみたいな 感じの状況でま結構辛い感じですねでした で今回夢みのフラッターリルド3人して こういった課題を解決して全 なんか開発のサイクルをうまく回していき たいということで参入しましたで今回の プロジェクトは今年の8月から関わらさせ ていただいてますはいバックエンド構成 変更に関する話ですこちらはプロジェクト の参加時点でバックエンドの構成変更が 行われていたのでそれについて紹介します これはなんかプロダクトマーケットフィッ トって言ったんですけどそういった時期に

俺保証じ負債の解消でなんか9バックエン ドって言って元々バックエンドが1つに 対して先ほど言ったようにフロントが3つ あったんですがこれが元々このモバイル アプリのために作られたバックエンドだっ たらしいんですが多分おそらく数なんかの 都合でこちらのWebからも同じバック エンドを使うことで非常になんかの フロント用の修理などが入り混じって複雑 な感じになってしまっていたそうですで これに対して今回の話題であるbfsを 導入することでフロントごとにBFを作っ て特定のフラントエンのためのロジックを 異常したりすることでそちらに寄せていく という意思決定がなされてい ますでフラッター向けbffの方針なん です が僕らがま方針というか僕らが担当する 領域はさっきの図の下の2つですね労働者 のモバイルアプリととモバイル向けの bfffを担当してい ますでこれどういう方針になるかの前に1 つ話があって中途の 中副業メンバーがいたと話したと思うん ですが実はもかなり作り途中のBfが元々 あるよにはあったんですが先ほど言った ようにリントが守られてないみたいな感じ 感じの課題が色々ありそこでなんかもう これを使い続けるより椅作り直して しまおうということで今回発表するような ものを作ることになりましたでまず特徴と してはダートで統一することは決まっを 決めて例えばダートまダートで単純に統一 するだけじゃなくてジェソンやり取りする ようなクラスをクライアントとbffで 共通過したりあとはせっかく新金に作るの で気になる技術を試すということで話題に 挙げたダートフロッグやメロスを使うこと になりましたこちらなんか色々比較して ダートフロッグが特別めちゃめちゃすれて たっていうよりは単純に奥らが試してみ たい技術をたをやるみたいな モチベーションで選んでいたりし ますはいで構成としてはこんな感じのもの を作ることになってなんか古いバック エンドあるんですけどこれが一部完全に このバックエンドがいらないわ状態には まだなってないのでちょある程度残しつつ よしそうですね初期リリースではエンド ポイントをある程度ラップするような形で 利用する形にしましたはいでは技術 スタックの紹介に移り ますはいフラッターチーム担当領域のの プロジェクト構成ですえこのようなパ リポジトリ用パッケージの構成になってて

左側がアプリ用のこれが既存元々あった アプリ用のリポジトリーと右が新規に作っ たBF用のリポジトリーになりますこんな 感じでま左側はごく普通のリポジトリに1 つのプロジェクトがあるって形なんです けど特徴的なのが右側でbff用の リポジトリに複数のパッケージbfff 本体やJSON用の型といった複つの パッケージを用意していますでこのJS用 の方はこのアプリ用のリポジトリーの プロジェクトからもディペンデンシーに 追加することでこのBF本体からも プロジェフラッタープロジェクトからも 利用するという形式を取ってい ますで先ほど述べたパッケージ構成を実現 する上で使っていた技術ですまずメロスと いうパッケージこの後紹介するんですが マルチパッケージ合成先ほどのようなもの を管理するのに使うツールになりますで ダトフロッグこれはbfffの実装に利用 しますで最後JS共有するJ用のクラス 共有すると言ったんですがこちらは フリーズドやジェソンシリアザブルみたい な結構一般的な技術を使っていますで最後 のものに対しては結構かなり知ってる人 多いと思うので今回は解説しませんそれで はメロスの解説を行いますまずマルチ パッケージという単語ちょっと出てきて何 だろうってなった方もいると思うのでそっ から説明していきますマルチパッケージは 今回の発表では複数のダートのパッケージ でププロジェクトを構成する書でなんか皆 さん昨日レイヤーといった単位で ディレクトリを作ってなんかレイヤー ファーストやフィーチャーファースト みたいなプロジェクト作ると思うんです けどそうそれと近い感じでなんかなん ちゃらリポジトリーみたいなので例えば パッケージをパッケージとしてそれを 切り出してプロ別プロジェクトとして作っ てしまうという所法に当たりますただ パッケージごとにリポこのパッケージ各 パッケージごとに1個1個リットのリポを 作るとすごい管理が大変なので1つの リポジトリに複数のパッケージをまとめる という手法が一般的でこれをモノレポなど もとも言います でこういった方法を取る利点なんですが大 規模なアプリで機能やレイヤーごとに パッケージを分けることでまディレクトリ を分けるのと近いんですが関心の分離や 意図しない依存を防ぎやすくなります特に ディレクトリできる場合に比べてさらに 意図しない依存をなんか簡単には追加でき ないので防ぎやすいというメリットがあり

ますまた今回やりたかったこととしては bffとアプリので同じ度同じパッケージ を共有するみたいな話があったと思います あ同じ行動を共有するて話があったと思う んですけどその部だけでパッケージに 切り出すみたいなことができ ますはいそれではメロスの紹介をします メロスはダートデのマルチパッケージを 支援するためのコマンドラインツールに あたりますでインバースというこちらも かなり有名な会社なんですがが開発して いるパッケージで有名パッケージの開発に も使われてます皆さんおそらく知てるで あろうリバーポットだったりフラッター ファイアなどもこのメロスを使って管理さ れていますまたま面白い面白い点として メロスのリポジトリ自体もメロスを使って 開発されていたりしますで注意点として なんかマルチパッケージイコールなんか フラダートでマルチパッケージこでメロス 必須かというとそういうわけではなくて なんか例えばフラッターニュースきて iioフリッみたいな結構グルグ更新に 出してるリポジトリもマルチパッケージ 構成取ってたりするんですがこれらは マルチパッケージですがメロスは使って なかったですはいメロス実際どう使って いくかの質問なんですがまずはダートの コマンドラインツールなのでえアペメロス と使することでメロスのコマンドが使える ようになりますあそのまその後に プロジェクトのルートにメロスヤルという ファイルを作って必要なことを書くと メロスのコマンドが使えるようになり ますでコマンドという単語出てきたんです けどメロスの機能を簡単に紹介させて いただきますまずコマンドという概念が あってこれはモノレポをやりやすくする ためのものになり ますで全部紹介すると長いのでこの辺の 主要なもの紹介させていただきますまず ブートスラップというコマンドは複数の パッケージリポジトリにあると内にあると まパグベットをそれぞれしなきゃいけない みたいな話になってくると思うんでその 複数のパッケージへのパブゲットを1度に やってくれてなおかつパスク オーバーライドアムルていうファイルを リポジトリごとにパッケージごとに用意し てくれますこうすることでなんか リポジトリ内であなんかパッケージAから パッケージBに依存してるみたいな解説を する時にパッケージBのバージョンで依存 のバージョンを指定してしまうと開発中に パッケージB変更したみたいな時になんか

それがすぐ反映されないみたいな状態に なると思うんですけどそれを開発中は オーバーライドした今開発中のものを使う みたいなことかを簡単にできるをやるため の機能になってここれによって今起きて いるものにすぐ気づけるという利点があり ますでクリーンはこのブートラップの略で キャッシュ消してくれる機能 ですでグッというコマンドがありますこれ はもレポ内の複数のパッケージに対して 例えばビルドランナーに対応してる パッケージがリポしいっぱいだたら それぞれに1個1個ディレクトリー移動し て実行するというのは非常に大変なので それをなんかルートでメロスEXビルド ランナーみたいにすると複数のリポジトリ に一気にビナーを実行することができます また後述するフィルター機能と組み合わせ て利用するようなこともできますでラ機能 もこれも口述する機能のスクリプトという 機能を使うためのコマンドですフィルター 機能について紹介しますフィルターは 先ほど言ったようなブーストラップみたい とかEXみたいなコマンドと組み合わせる ことで対象のとなるコマンドの対象 パッケージを絞り込む機能で例えば スコープみたいなのをスコープという フィルターを使うと特定な文字列が入る 入ってるパッケージのみにコマンドを実行 しdependonというフィルターを 使うとまビルドランナーにがデブリペン シズにあるものだけなんかビルドランナー のコマンドを走らせるっていったこがする できる機能になります最後スクリプトです がこれはメロスアムルにスクリプトを定義 する箇所がてこんな感じによく使う コマンドを書いてあとフィルターみたいな 機能もあるんですけど登録しておくと コマンドとしてえメロスランこの名前 みたいな感じでメロスランウォッチみたい にすることですぐに起動できるようになり ますまたこれコマンドラインから使えるの でCIでもメロスを先にインストールして おけばこのコマンドが使えるのでCIと ローカルで同じコマンドを簡単に採用でき ますはいメロスはそういったバゲッジ パッケージですでダートフロッグの解説に 移りますはい再現しますメロダート フロッグはPGVが返したフレームワーク でシェルフをベースに作られていてま軽量 なものでモジュール形式になって ますはい始め方から紹介しますこちらも 先ほどメロスcliというものがありまし て先ほどのダダートフロッグCLという ものがあって先ほどのメロスと同じで

ダートのコマンドラインツールなんで グローバルアクートすれば使えるように なります でダトフロッグクリエイトなんちゃら プロジェクトみにすることで最低限の ダートフロッグのコードが制されてその後 もダウトフロックデブとやれば動き ますはいダウトフロックの機能を紹介する ことでどんなものか紹介したいと思います まずホットリロード機能でまフラッター なんかでもあるホットリロードの機能が あるのでダートフロックデブやった後変え てもすぐに反映されますえ次ファイル ベースルーティングという概念について 紹介しますファイルベースルーティングは ディレクトリ構成がそのままルーティング に対応するもので例えばハローみたいな パスが欲しい場合にえっとハローダートを 用意するもしくはハローという ディレクトリーを作ってそこに インデックスダートとやることでハローと いうエンドポイントが制止さきるみたいな 概念になりますでダートフロッグの場合2 種類のなんかパスの書き方があるんですが まどっちかにを使えばよくまたこれ競合 するんですけどそれはビルド失敗等で 分かるようになって ますで今のハローみたいなエンドポイント の追加方法なんですがま指導でハロー ダートみたいなファイル追加しても もちろんいいんですがコマンドで追加する ことができるようになって てで追加すると追加が直した直後の最低限 のエンドポイントの実装なんですがこんな コントこんな風になってて結構シンプルな ダートの関数でリクエストコンテテキス トっていうものを引き出で受け取って レスポンスを返すというだけの関数になっ てい ますでそれに加えてなんかこのどうやって 今のなんかハローを追加するコマンド実現 されてるかってのが面白いんですがメソと いう技術で実現されてますメソンどの ぐらい知ってる方いるかわかんないんです がメソま日本との記事もあるので調べて いただけると嬉しいんですがテンプレート を用意しておくとそれを元にコードを生成 するツールになりますでファイルベース ルーティングなのはなんかテンプレート からコドをする生成するという特性と相性 がいいからかもと調べていて思いましたで 具体的にはダートフロッグのリポジトリに ブリクスていうまメソンで使う テンプレートの名前なんですがこんな感じ でルートダートみたいな感じで

テンプレートが保存されていますはい次 便利なクラスの紹介ですダートフロックは シルフをベースになしてるんですけど セルフのクラスをラップして便利にして ます先ほど紹介したエンドポイントの ファイルのリクエストコンテストに注目し ていくとこのファイルがこんな感じで ダートフロッグのリクエストというのを フィールドとして持ってるんですがこの中 を見るさらに見るとシルフのリクエストて いうリクエストはシルフのリクエストを 内部に持っててまラップしてることが 分かるかと思いますで何があるかと思うと 言うとダートフロックのリクエストを見て いくとボディだったりJSONみたいな なんかエどんなリクエストか見たか来たか を解析したい時によく使うであろう コマンドが事前に用意されていて非常に 便利な作りとなっていてレスポンスなども 同じようなことが行われていますはい次 ミドルベアという概念について紹介します ミドルウアは先ほどのルートと同じところ になんかアンスコミドルウアという ファイルを置くことで追加できますこちら はなんか特パスに対して共通の処理を行い たい時行うものでこのハンドラーという クラスハンドラーという引数に対してドユ という関数を使うことで渡すことができ ます用途としてはロガーだったり共通の エラー処理DIなどが行われるがこの層で 行れ ますでミドルウアはなんかこのユズの実装 を見ると分かるんですがミドルエアを起っ てを受け取ってハンドラーを返す関数なの でこんな感じで左の感じでハンドラード ユスなんチラみたいな感じでな複数のミは 組み合わせて使うことができ ますで補則なんですがこのミドルウェア シェルフにもある概念でしてこのフローム シェルフミドルウェアっていう関数を使う ことでシェルフ用のリソースをダート フロッグでも使うことができ ますでDIはミドルウェアを使った技術 ものでプロバイダーというミドルウェアが 存在しまし て例えばこんな感じにミドルウアで プロバイダーにストリングとジェニック 渡してウェルカムtoダトFrogグって いう文字列を返すようにするとこのエンド ポイントにあたるオンリクエストの方では コンテス.REスリングとやることで 先ほどの文字列を受け取れ ますダート6最後テストの用意性という点 について紹介するとまずプロジェクト初期 化時点でモテルというパッケージが追加さ

れてましてこれを使うことでサンプル コードで簡単にテストができることが示さ れていますまずモテルを使うことでま こんな感じにリクエストコンテを目してで このオンリクエストまエンドポイントに 対応するコードはまダートの関数なので こんな感じでルートというまインポートの パインポートしたものをオンリクエストで コンテスト渡すともレスポンスが取れて このレスポンスをエクスペクトで確認する ことですぐにテストを書くことができる ようになってますはいならここから もぐもぐさんのパートに移り ます はいでは引き続きももが話させていただき ますえ実際にプロジェクトの中で実践した 感想についてお話していきますえ実際の サンプルあソースコードを見せることは できないので感想化したサンプル プロジェクトを作成しましたえ詳しくは この後でライブでも行うのでそこで詳しく お話ししますプロジェクトの構成としては gabのAPIを叩いてえその結果を返す ようなbfffになっていますえGAPI のクライアントとそのbffそしてbff の片定義そしてアプリケーション本体と なっていますえ感想についてお話していき ますえバックエンドとbffの クライアントを同じように実装できました アプリがbffを叩く部分とbffが バックエンドを叩く部分のあがえっと非常 に似ている実装にできるのでえそこで キャッチアップがしやすいなと理点があり ましたえ次にAPI片定義について話して いきます実際の案件では先ほも話したよう にフラッタアプリケーションとbffの リポジトリーが別でしたえで アプリケーションはbffのリポジトリー に依存しているのでそれをどうやって取得 してくるかについて悩みました実際のえ プロジェクトの中ではコトリAPIと スカラAPIのえクライアントとmok そしてbffbffのAPItypes そしてアプリケーション本体があり ますではどのように方を取ってくるかです bffAPItypesをPUBdeで 公開すればいいんじゃと思われるかもしれ ませんがまこれはインシデント確定演出と いうことでダメですえGサブモジュールで BFFのレポジトリをアプリケーション側 に入れ込むことも考えましたがまちょっと 微妙だということでなしにしましたま最終 的にはPUBスペッMのえギット パッケージとして扱うことにしましたこの ような感じになり

ますじゃあCI環境をどうするかについて ですがえCIでアクションズ チェックアウトでアプリケーションの コードをクローンしてえビルドを回すこと ができますがbfffのレポジトリは クロンできませんえそこで今回はG haveデプロイキーというものを利用し ましたデプロイキーとは単一レポジトリへ のアクセスリードまたはリードライトを 許可するSSHキーのことですえサーバー 上でプロジェクトを起動するために利用さ れるものですが今回はCIで利用しまし たえGアクションズ内でSSHの秘密鍵を 展開して実際にパブゲットを行うような形 になり ます3つ目にドッカーを使う話についてし ていきますえドッカーとはバーチャル マシンとは違ってコンテナという単位で アプリケーションを実行するえものですで ドッカーファイルを書くことでコンテナ ビルドの方法をコードで記述することが できますこれにより実行依存あ実行環境 依存のものを減らすことができ ますえ実際のプロジェクトではAWS farゲート上でデプロイする必要があっ たのでこれを書く必要がありました えダートフロッグを今回利用したのですが それのドッカーファイルについてお話して いきますダートフロッグビルドコマンドで えドッカーファイドが生成されるのですが これはダートフロックが実行できる環境が あることが前提になりますそのえなのでえ ホスト環境に依存していますでこの生成 サイトコードをリポジトリに含めることも ま悪くはないんですが差分が大きくなって しまうので今回はなしになりましたそこで 今回はドッカーファイルを自分で書きまし たこのような形になっていますえ大きく2 つの部分に分れていてバイナリーをビす ビルドするためのダートコンテナーそして バイナリーを実行するためのコンテナーに 分れています具体的にはえローカルで依存 しているライブラリーのパブスペック関係 のものをコピーしてえパブスペックゲット 行いローカルで依存しているライブラリー の全体すなわちコードをコピーして実際に ビルドするような形となっていますそして えビルドされたバイナリーをコピして実際 のえスクラッチと呼ばれる軽量な コンテナーで実行していきますでは実際に ライブでもを行っていきますえ先ほどもお 話した通り実際のコーダ見えることができ ないので乾燥化したサンプルをお見せし ますえこのような形となっていますえこの ライブデモについてですがえ株式会社夢み

のフラッターエンジニアのコードチェック 課題でえギットhaveAPIを叩く課題 があってこれをちょうど1年前に自分が やったものなんですがそれを改造してえ 使います えまずはダトfogクリエイについてお話 ていき ます よいしょえこれは現在のえプロジェクトの 中でパッケージの中にアプリケーションと あbffちょっとないことにしてえ アプリケーションとbfff片定義とG HUBAPAPIのクライアントがあり ますそしてCDパッケージとしてタート フロッグクリエイトbffを行うことでえ 簡単にbffのプロジェクトを作成する ことができますこのように作成されました でこれを実行するためにはbffあ ディレクトに移動してダト フロックデブコマンドを叩くことで実行さ れます実際に見てみる とこのようにちょっと文字が小さいのは あれですがまウェルカムtoダッという ことで表示できますでここれのうまみとし て 例えばこのようにレスポンスの内容を変え てホットリロードをすれ ばこのように内容が簡単に書き換えること ができ ますよいしょあちょっと戻っちゃっ たで次にメロスについてお話していきます メロスブートストップコマンドを実行する ことでパブスペックのそ相互のええ依存 関係が解決さされ ますちょっとブランチを切り替え てこのえプロジェクトですがギタブに公開 してるので後で見ていただければと思い ますメロスブートストラップを実行する ことでこのように依存関係の解決が走り それぞれのプロジェクトの中のパブ スペックアムルが解決されますこれで実行 可能な状態となりますでメノスクリーンを 行うことでパブスペックオーバーライドが 消えて元々のクリーンな環境に戻り ますで実際にえエンドポイントを作る ところをお話していき ますえこちらのbffのプロジェクトの中 のルートの中現在えスラッシュ インデックスのみとなっています パッケージのbffに移動してダート フロッグニュルトAPIVIデポジット サーチというコマンドを打つこと でこのように簡単にルートを作成すること ができ ますちょっと時間がないので本当はこれ

実装したかったんですがちょっと実装して あるものを利用しようと思いますで実際に 作成したものはえっとこちらのURLに デプロイしてあってえアプリケーションは クラウドフレアpffはえオラクルの サーバーの上で動いていますちょっと明日 くらいには閉鎖しようと思ってますえ実際 に叩いてみる とあ 違うこちらですね実際に例えばフラット アウト検索するとこのように結果が出てき ますでこれの特徴としてはbff上で えっとこの結果をキャッシュしているので えこれをえ結果を高速に返すことができ ます例えば 違うえじゃあダートフロック検索してみる とまょ時間かかりますがこのように結果が 返ってくるというような構成となってい ますこちらがえ実際にああそうですね こちらがgitHUBAPIを叩いた結果 でこのようなものがすなわちbffがこれ を取ってきてリクエストをいじってま必要 な部分だけ取り出して結果を返すような形 となってい ますこのようにえBF側でえ必要なだ 例えばリクエストの改変であるとかえ セキュリティを追加するであるとかえ キャッシュを行うとかま様々なことを行う ことができ ますでは最後にまとめに入っていきますえ 第1章ではダートバックエンドの世界に ついてお話しました2章では夢みが実際に 入ったプロジェクトの背景3章では実際に 利用した技術スタックの紹介を行い4章で は実際に実践した感想そして最後にライブ でを行いえこのような感じに動くよって いうのをお見せしましたえこの後同じ ルームで夢みのスポンスポンサー セッションを行います通称モモリ山とと いうことでまちょっと勝手に付けたんです けどもありますので是非ご覧いただければ と思いますえこのプロジェクトはえ スライドを作成するにあたって参考にした リンクはこちらの通りとなってい ますご清聴ありがとうございまし [拍手] た DET

FlutterKaigi 2023