こんにちは、YOUTRUSTアプリエンジニアのルーカス（YOUTRUST / X）です。 今年のFlutter Connectionというパリに行ってるFlutterイベントにスピーカーとして参加しました。Flutter Connectionのコンセプトは「Flutter好きな人と繋がりを増やしましょう」です。フランス人のFlutter開発者の知り合いがあまりいなかったので、このイベントを機に色々な新しい知り合いができて、楽しかったです。嬉しいことに、このイベントで初めてYOUTRUST社員として海外で登壇しました。
はじめに
この冒険はイベントの前日から始まりました。まず、電車でシュトゥットガルトからパリへ行きました。ホテルまで1時間ほど歩きました。部屋で少し落ち着きたいと思ったところ、部屋に入る時に、とても驚きました。なぜかわからないですが、面白いことに、アイアンマンとストームトルーパーの仮面がベットに飾られていました。ありがたいことに、イベントの委員会はたくさんのフランスのお菓子を部屋に用意してくださいました。
さらに、委員会はスピーカーだけのディナーも開催してくださいました。そういうディナーでは別のスピーカーや委員会の方々と雑談することができたり、登壇することに関連した情報を再び確認したり、グッズをいただいたり、楽しい時間を過ごせました。今回Google社員のロイック・シャルマさんとたくさんFlutterのマルチウィンドウの機能について喋りました。シャルマさんはGoogleの前にMicrosoftで働かれていたので、そのような大きい会社に務めることができた経緯についても話しました。2年間ずっとLeetCodeというコード問題の練習のためのウェブサイトのおかげで、入ることができたそうです。逆にシャルマさんには、「どうして漢字をそんなにたくさん読めるんですか」と聞かれ、僕は「2年中ずっとワニカニ*1で復習したからです」と答えました。夜は、みんなホテルに戻って、次の日のための準備をしました。
スピーカーたちの名前が入ったかっこいいシャツもいただきました。今年のオリンピックはパリで行う予定なので、ダッシュくんはスポーツウェアを着ています。
イベントの日
会場はおしゃれなオーケストラの広間で、朝9時から始まりました。
ウェルカムスピーチの後で、最初の発表が行われました。レイドさんのFlutterFlowのコード生成方法に関するスピーチでした。 レイドさんはFlutterFlowの前はFlutterチームのプロダクトマネージャーをされていましたが、現在は FlutterFlowで働いています。FlutterFlowはNoCodeでFlutterアプリを作るツールで、コードのexport機能もあるので、それについてお話しされました。FlutterFlowに興味があれば、ぜひご覧ください。
次の発表は会社内にどうやってアプリにアニメーションを含めるかという発表でした。基本的にアプリを実装するために、エンジニアはデザインチームから静止画のデザインだけをもらっているので、アニメーションは見られません。しかし、アニメーションが好きなFrontendエンジニアが多いので、アニメーションをよく付けるようにしています。個人的な話ですが、前の仕事でもそういった経験がありました。例えば、別のアプリで、検索アイコンのアニメーションを付けてみたことがあります。
しかし、余裕がなければ、それが有効ではないので、この発表で会社内で新しくスムーズなアニメーションを入れる方法についてお話しされました。毎週「Flutter道場」という四十五分のミーティングがあるのですが、それにXやDribbleなどから探し出した綺麗なアニメーションを実装してみています。
このトークの後に最初の休憩があり、そこで参加者は朝食をとりながら雑談をし、さらにグッズもいただくことができました。僕はCodemagicの売店で、ステッカーやシャツももらいました。その後は、株式会社Bamの売店でクイズもありました。BamはFlutterやReact NativeやネイティブでアプリやWebサイトを作っているフランスにある大きな会社で、イベントのゴールドスポンサーもされていました。クイズはFlutterについての知識を問う問題でした。正解の解答を選ぶ速さに応じて、より多くポイントをもらうことができる早押し形式で、1番最後に一番多いポイントを持っている人が優勝するというものでした。思いがけないことでしたが、なんとか勝つことができました！景品として大きいダッシュくんや公式のFlutterシャツをいただきました。良かった！
次にLeanCodeのマテウシュ・ヴォイチャクさんとマルチン・チュディさんによるLeanのアーキテクチャについての発表が行われました。LeanCodeは世界的に有名なポーランドの会社で、様々なパッケージをリリースし、記事もたくさん書いています。そのため、このトークはとっても気になっていました。このトークで得たアドバイスについて書きたいと思います。
「We want to be pragmatic not dogmatic」英語でも分かりにくいですが、まずこれについて説明してみます。これは、ソフトウェアを書くために、いろいろな方針がありますが、ソフトウェアごとにユニークなので、多くの場合全てが必要な訳ではないということです。例えばこの例では五つのコードレイヤーがありますが、小さなアプリではそれは多すぎます。一般的にレイヤーの目的が説明できなければ、そのレイヤーは必要ではないと言われています。
例えばDTOとモデルが同じ場合、その転換の単数もやりすぎだと思います。ビジネスにとっては価値がありませんが、方針を守りたいだけです。
別のアドバイスとして:
- レイヤーの代わりにFeature元のファイルアーキテクチャ使っています。アプリを大きくなるときに、例えばProviderのファイルがあれば、いつか二百Providerがあるでしょ。探しにくいですね。逆にFeature元のファイルアーキテクチャを作ったら、より早く全部見つけまれます。
- 状態管理パッケージとしてBlocを使っています。理由はBlocはしやすくて、Blocも全部にとって使えますので、スケーラブルです。Riverpodもいいんですけど、フレームワークとして少しプロジェクトの中に深く入ります。例えばStatelessウィジェットの代わりにConsumerwidgetを使ってますので、普通の書き方が異なりすぎるだと言われました。でも、Blocも弱点がありますので、LeanCodeはその問題を解決してみます。BlocではBoilerplateが多くなるかも知れませんので、色んなパッケージをリリースされました。例えばLeanCode_cubit_utilsやLeanCode_formsやLeanCode_hooksがあります。全部あの発表の前に知りませんでしたので、試してみたくなりました。
- DIのためによくProviderを使っています。ProviderはInheritedwidgetのしやすい方法だけですので、しやすいし、Flutterのフレームワークに似てます。Dependencyが多く、Dartだけのサービスしか使わない場合は、Get_itも有利選択となります。
- テストを書くときに、全部のビジネスロジックをテストの目標があて、複雑なUIもWidgetテストして、ゴールデンテストでデザインを変えないのように使って、IntegrationテストはLeanCodeの自分のPatrolのパッケージでやっています。でも、Coverageのパーセントの目標がないで、たまにテストを書きにくいコードもありますので、苦心になるかもしれません。
次のトークはカーダーさんのFlutterの仕草についてでした。仕草についてもっと知りたいなら、ぜひ見てください。色んなタッチ画面種類についても話されていたので、結構興味深かったです。
２番目の休憩の前に、まさひろさんはShorebirdというコードプッシュツールを紹介しました。 App StoreとPlay Storeの遅いアップデートを避けるために、Shorebirdがとても有利です。まさひろさんは色なスタートアップでShorebirdを使われていたので、できた経験も見せてもらいましたので、いいトークでした。
２番目の休憩でもう一度クイズがあって、でも今回は全然解けませんでした…継いてる発表はデニエルさんのサーバからのFlutterUIでした。そのためにRfw(Remote Flutter Widgets)のパッケージ使いました。発表で実際のデモを見せていて、とてもかっこよかったです。サーバからUIをもらったら、App StoreとPlay Storeを遅いアップデートも避けられます。でも、Rfwはデニエルさんによると、あまりスケーラブルではないので、Swapを紹介されていました。Rfwを使ったら、テキストを送らないといけませんが、Swapで直接FlutterのWidgetが使えます。
デニエルさんの後で、僕の発表でした、このトークではElement embeddingの機能について喋りました。この後で自分がスピーチしました。ぜひ見てください。
次のトークにとても驚かされました。テキストについてたくさん知っていると思いましたけど、発表の終わりの前にクイズがあって、難しい質問が多かったです。
最後の休憩の前に、ボリッスさんは自分の作ったHomewidgetパッケージを紹介しました。FlutterアプリでWidgetを追加したことある人は絶対このパッケージを知っています。とっても便利で、ドキュメンテーションもいいですので、最高のWidgetパッケージだと思います。これまでWidgetを実装したことがなければ、このトークは良いと思います。
休憩の後でgeminiのAPI関連してるトークがありました。GoogleはどんどんAIに集中していますので、基本的な知識があれば、いいと思います。Googleによってリリースされたパッケージも紹介しました。
最後のトークの前に既存のアプリにWeb版を追加する時によく起きている問題について喋りました。一番の難しいの一つの問題点は:
- ナビゲーション、Webでページ直接にどこでも行けることあります
- 性能は遅くなるかもしれません
- SEOは大変です
- 別のデザインがあれば、より難しくなります
その問題の中で気になってることがあれば、この発表を見ることが役立ちます。
最後の発表は、前述したシャルマさんでした。このトークもマルチウィンドウのプログレスについて話されました。とても興味深いテーマですので、おすすめです。この表を見ると、新しいウィンドウを作ったときに、どうやってFlutterがそれを取り扱っているかがより分かりやすくなると思います。
このアーキテクチャのおかげで、現在のアプリで使ってる状態管理を続けられます。色んな問題点があるので、マルチウィンドウがリリースされるまでまだ待たないといけません。
発表は以上でした。いっぱい色んなトピック関連してるトークがあって、楽しかったです。最後に委員会とスピーカーと写真を撮って、みんな近くにあるレストランでパーティーしました。 会話で新しい2つのツールについて教えてもらいました:
- Mmkv は一番早くのkeyとvalueストアのパッケージ
- FlashlightはLighthouseのようなアプリをチェックシステもです。とっても便利そうです！
まとめ
全部のトークを見直した後で、トップ3つのおすすめは:
- LeanCodeのアーキテクチャ
- デニエルさんのサーバから生成したFlutterのUI
- シャルマさんのマルチウィンドウ
次の日少し観光して、でもパリへ行ったことがありましたので、アイフェルタワーの代わりに今回パリの街中を調べました。
家に到着した時に、全部のもらったグッズの写真撮りました。今回大きい発掘になりました。
*1:漢字に勉強ソフトウェアです
