FlutterKaigi2023に参加してきました！

# はじめに
こんにちは！ヨシカワです。2023年11月10日に開催されたFlutterKaigi 2023に参加してきましたのでそのレポートをまとめていきます。

https://flutterkaigi.jp/2023/

# FlutterKaigiとは
> 2023年、日本国内でFlutterをメインに扱う技術カンファレンス。
> FlutterやDartの深い知見を持つ開発者によるセッションを多数企画します。
>
>FlutterKaigi 2023公式サイトより

# 参加した経緯
私がFlutterKaigiに出会ったのは去年のことでした。Flutterをメインに扱うカンファレンスがオンラインで開催されるという話を聞いて「それは嬉しいことだ！」と思って参加をしました。当時、オンラインではあったものの楽しくセッションを聴いていたのを覚えています。FlutterKaigiは今回で３回目の開催となりました。しかも今回は初のオフラインでの開催なので、 **セッションも聞けて参加者のみなさんと交流もできるチャンス！** と思い今年はオフラインでの参加を決意しました。

# 会場の様子
会場の写真を貼っていきます。

### スポンサーブース
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877808/5cd1782d-037b-e317-e55f-44fbb951653e.png">

スポンサーブースです。プラチナスポンサーとゴールドスポンサーの企業が出展しています。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877808/3be4d375-c1e3-9eb7-d237-51a91c9c6136.png">

株式会社ゆめみさんのブースです。れいっちさんの看板がインパクト大ですね（笑)
ゆめみさんはちょっとしたクイズが用意されていました。コードのビルドエラーを探してどう修正すれば良いでしょうかというクイズでした。いや〜わからなかったです。まだまだですね...。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877808/777b7a83-85ed-9f1c-fb3c-d982be7e0c68.png">

株式会社ナビタイムジャパンさんのブースです。駅から会場へ向かう時にもナビタイムさんのサービスを利用させていただきました。ナビタイムさんもFlutterを採用しているプロダクトが複数あるらしく、そのうちの１つである「ユニタビ」を紹介しているチラシを配布していました。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877808/5e48227e-4991-2b4d-4ded-6c82ef0a9370.png">

株式会社出前館さんのブースです。出前館さんはユーザーが出前館アプリから注文をした場合の注文受付や配達依頼がどのように届くかが示された「出前館アーキテクチャ」のパネルが展示されてました。出前館アプリのフロントはFlutterで、なんなら加盟店アプリや配達員アプリのフロントもFlutterらしいです。初めて知った...。

# セッション
私が聴いたセッションの中で特に印象に残っているものをまとめていきます。

### Flutterにおけるアプリ決済〜カレー屋編〜
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877808/d1e5703a-70b8-a18d-5899-78d1755d3a95.png">

このセッションでは「TOKTO MIX CURRY」という実際の商用プロダクトを４年間運用して得た決済方法に関する知見を紹介していました。異なる決済方法(クレジットカード、Pay Pluginを統合したネイティブペイ、PayPay)を実装するにあたりどのような課題があったかとか、店舗に設置してあるセルフレジの構成の紹介と運用にあたって発生した課題もお話しされていました。
TOKYO MIX CURRYはもともとiOSネイティブで実装していたらしく、マルチプラットフォームにするためにFlutterを選択したようです。マルチプラットフォームにする上で決済をどう実装するか悩んだそうです...。それにセルフレジでは開発側が意図していないユーザーの行動に振り回されたりと大変そうな感じも伝わりました。

### DartにおけるBFF構築・運用 ~Dart Frog✖️melos~
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877808/93615bae-ad75-27a2-a69a-45f8d91e341c.png">

このセッションはDartを使ってバックエンドやBFF(Backend For Frontend)を実践する際に使用するdart_frogというパッケージの特徴や、マルチパッケージの管理支援CLIツールであるmelosの紹介をしていました。また、それらを使ってバックエンドとBFFのクライアントを実践してみた感想も発表されていました。
私はバックエンド自体あまり実践したことなく、BFFという単語自体もその日初めて知ったくらいの者なのであまり重要な部分は理解できませんでした...が聴いてみたらバックエンドフレームワークはdart_frog以外にも[ServerPod](https://serverpod.dev/)や[Shelf](https://pub.dev/packages/shelf)というモノもあり、かなりFlutterってバックエンドにも力入れているんだなと思いました。発表中にdart_frogとmelosのライブデモも行ってましたね。すげぇー。

https://dartfrog.vgv.dev/

https://melos.invertase.dev/

### Flutterで構築する漫画ビューア
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877808/9dabb711-dd2d-7099-a2cb-a1b04bf6bfe1.png">

このセッションでは発表者さんが漫画アプリをFlutterで開発した経験から、Flutterで漫画ビューアをどのように実装していくのかを動画やコード付きで解説していました。画像の表という簡単なところから、画像を拡大する、全画面表示に対応する、ページを操作するといったように段階的に解説していったので初心者の方でも親しみやすい内容だったと思います。
全画面表示に対応するお話でシステムUI(バッテリーの残量とか時間とかが表示されてるアレ)の裏にコンテンツを表示するのはいつかやってみたいと思いました。どの機能を実装するためにどのWidgetを使うのかという具体的なアプローチが知れたのが良かったですね。

### 魅せろ！Flutterで目を惹くUIデザインを実装する
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877808/780393f0-02bb-e1ab-19ec-2c8ddaa420e0.png">

このセッションでは発表者さんが海外のFlutterのハッカソンに参加してみて入賞作品のUIが魅力的だったことを背景に、Flutterで目を惹くUIデザインを実現するための手法を紹介していました。
４つほど手法を紹介されていましたが、特に面白そうだと感じたのはRiveというデザインプラットフォームを用いた2Dアニメーションです。RiveにはRive Editerと呼ばれるFigmaのようにデザインしたり、アニメーションをつけることができるエディターとRive Runtimeという作成したRiveを実行できるライブラリ群があります。この２つを使えば簡単に2Dアニメーションを実装できてしまうようです。
アニメーションや描画は視覚的におもしろい機能がたくさんあるので暇つぶしに学んでみるといいかも知れません。

https://rive.app/editor

https://rive.app/runtimes

# おわりに
FlutterKagi2023、すごく楽しかったです！1日開催なのが惜しいくらいです〜！
普段会えないFlutterエンジニアの方だったり、僕と同じ学生の方にも出会えました。やっぱりカンファレンスは人と技術についてお話ができたり、知らなかった技術に出会えるので「今日話した〇〇を試してみたい！」「これからも開発頑張りたい！」とモチベーションが湧いてきます。

というわけで、FlutterKaigi2023すごく楽しかったです！本当にありがとうございました〜！
来年はプロポーザル出してみたいかも。あと運営にもチャレンジしてみたり！？

最後に懇親会で机に並んだ料理をドリンク片手にパシャリ📸
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877808/51b01a8e-b5ff-9afd-cd1e-9e96203ca14e.png">