新しいプロジェクトでFlutterを選んだ理由

こんにちは、インです。グロービスで学習サービスを作ってるエンジニアです。今回新しいサービスの開発でFlutterを選択した理由と心境を共有したいと思います。

まずFlutterはどんな技術ですか？

公式サイトの紹介ではこんな風に紹介されています。
Flutter は、モバイル、Web、デスクトップ、組み込みデバイス向けの美しいネイティブにコンパイルされたアプリケーションを単一のコードベースから構築するための Google のUIツールキットです。

* 実際は綺麗なUIだけではなく、Flutterだけでアプリ自体を開発できます。

Flutterの良いところ：
・同じコードでクロスプラットフォームアプリを開発でき、ウェブアプリ、モバイルアプリを同時にサポートしたい時に、開発工数が低いです。
・開発言語は静的型チェックがあるDartを採用しています。コンパイルタイミングでタイプに関するバグを発見できる（IDEではリアルタイムで発見できる）ので、開発スピードが早く、リファクタリング時も非常に楽です。
・コンパイルスピードが速いです。
・豊富なWidget、膨大なライブラリーがあるので、いろんなことを自分で開発しなくても、早くアプリを開発できます。
・スーパー速いHot reloadがあり、コードを保存すると即時に画面反映するので、開発スピードが速いです。
・多くの有名な会社、開発者がflutterを使って、アプリを開発した実績があるので、安定した技術だと思います。
・同じくフロントエンドの開発技術であるReactと似てるところが多いので、Reactできるエンジニアは速くFlutterをキャッチアップして実践できます。似てるところ：
　 ・widgetはreactのcomponentの概念と似てます。
　 ・Hooksでstate管理をできます。
　 ・Dart言語が静的型の言語なので、TypescriptでReactを開発するのと似てる体験ができます。
・cssを使わないで、綺麗な画面を作ることができるので、cssが苦手なバックエンドエンジニアでも使えます。
・FlutterのUIは宣言的なUIで、UIはWidgetで構成されています。いろんなWidgetを覚えれば、欲しいUIを作れます。もっともエンジニアにうれしいことはWidgetのコードはopen sourceなので、Widgetの全ての詳細をコードから理解できますし、自分で標準のWidgetを参考しながら、カスタマイズしたWidgetを作れます。UIは現在のstateの反映です、なので、直接UIを操作する必要がなく、stateの変化だけに集中すれば良いです。

私たちのチームはどのようにしてFlutterを使うことを決めたのでしょうか

年明け、会社で新しいサービスを作ることになったので、チームのメンバーにスキルアンケートを行いました。調査内容は得意な技術、使ってみたい技術を書いていただくことです。
アンケートの結果、使ってみたい技術にFlutterが多かったんです。
やりたいことも重視して、Flutterを選択肢として検討したいので、小さいプロトタイプアプリを作ることにしました。
利用した技術はClient側はFlutter、API側はRails+Graphqlです。
検証した結果
・技術的には大きな問題はなく、アプリを開発できました。
・開発スピードも速かったんです。
検証結果とやりたい高いモチベーションでFlutter + Railsの利用を決定しました！
* Railsはずっと使ってきた技術なので、新旧技術を使うことでリスクを減らすことができるんじゃないかを思います。

どんな技術も万能ではないです、もちろんFlutterも例外ではないです

実際使ってみて、気づいたFlutterの不足のところ

・Flutterで開発したwebアプリは、標準htmlではないので、search engineがページをインデックスできません。
今のところ、見つけた解決案は同じURLでユーザーが見るページ内容とsearch engine用のページ内容を分けることです。
・標準で表示される文字がブラウザーのCtrl+Fでページ内の検索でがきないので、自分でhtml tagをページに埋め込む必要があります。
・デフォルトのrouting機能が弱いです。webアプリでは必ず必要なrouting parameterをサポートしないので、libraryに依存する必要があります。今、検証中のlibraryはFluroです

Flutterは比較的に新しい技術なので、実践してみると、もちろんいろんな問題にぶつかると思います。その時に、このように考えれば良いじゃないかと思います
・問題を解決することが僕らの仕事です。
・技術は手段に過ぎない。Flutterで実現が難しい時は、代替技術を使って、ハイブリッドにすれば良いです。

以上になりますが、気になるところがあれば、気軽にコメントください。