はじめに

2023年7月19日からインターンシップという形でiPresence合同会社のアプリ制作に関わらせていただいているイギリスの高校に通う17歳です。今回は初めて触れるFlutterを用いて、リモートで入退室管理アプリの開発に携わらせていただきました。

Flutterは自分にとってまったく新しいフレームワークでしたが、要望に合わせて実際のアプリを制作できた貴重な体験となりました。本記事では、このFlutter/Dartプロジェクトを通じて学んだことや開発の過程で心がけた点を紹介していきたいと思います。

プロジェクト

まず初めに、このプロジェクトはオフィスに出入りする人の入退室記録をFirebaseというデータベースを使って記録、保存、そして表示するというものでした。このプロジェクトを進めるにあたり、イギリスからのリモートワークだったので時差との兼ね合いで毎日一時間ほどのミーティングをiPresenceの芳賀さんと行い、その前日の進捗確認と自分ひとりでは直しきれなかったバグの修正を手伝ってもらいました。

Widget

Flutter を使うにあたってまず最初に苦労したのがWidgetというものでした。Flutterは、モバイルアプリの構築において画面上の要素を表すために、ウィジェット（Widget）というコンセプトを使用します。ウィジェットはボタンやテキスト、画像など、アプリ内の様々な要素を指しますが、その階層構造や種類の多さに戸惑うことが多かったです。ただ、これがどう動くかを理解していないとFlutterでの開発はとても厳しいと感じるほどこの言語を扱うのに大事なものでもありました。ですが、HTML をやるにあたり、各タブを一つの箱ととらえるような考え方をしていたことをこの言語に活かすことでこの言語への理解を深められたと思います。

Flutterには沢山のWidgetがありどれもとても開発において大事なものばかりでした。その中でも特に重要だと思ったWidgetを以下に記しました：

Scaffold

アプリの基本的なレイアウトを提供するWidgetです。AppBar、Drawerなどを簡単に実装できます。この大きな箱の中にいろんな物を入れるというイメージで自分は理解しました

Container

装飾やレイアウト調整が可能な汎用的なWidgetです。背景色、境界線、影などを簡単に設定できます。このWidgetが個人的にWebアプリを作るのが他より簡単だと感じた理由のうちの一つです。イメージとしてはScaffoldという大きな箱の中に簡易的な箱を作り出しその中で色々出来ると言う物です。入退室記録を作るにあたって様々なボタンを実装したのでこの機能はよく使いました。

上記は実際にアプリでContainerを使ったものの抜粋です。このコードは単純な文が書かれた箱をWeb上に出現させます。 widthやcolorなどのプロパティで箱のサイズや装飾を決められるんですが自分はこの部分がCSSと似ているという風に感じたので比較的簡単に飲み込むことができました。

Center

子Widgetを中央に配置するためのWidgetです。ColumnやRowと組み合わせて使います。

Row

水平方向にWidgetを並べるレイアウトWidgetです。mainAxisAlignmentで配置を指定できます。

Column

垂直方向にWidgetを並べるレイアウトWidgetです。crossAxisAlignmentで配置を指定できます。

上三つのWidget は箱の配置に使うイメージです。RowやColumnで他の箱との位置関係を示し、Centerでそのすべての大きな箱の塊を真ん中に寄せるという覚え方をしました。この上記の三つはContainer 等を囲ってその位置関係を示せるのでUIの位置関係を決めるときにとても役に立ちました。
ここでよく使ったのがRefactorというVSCodeの機能です。何かをWidgetで囲いたいときその対象が長すぎると最後のかっこをつける位置を探すのに時間がかかったりしますが、これを使うと自動で囲ってくれます。使い方もシンプルです。囲いたい対象を左クリック->Refactor->Wrap with ...という文言が複数個並んでいるはずなので任意のWidgetを選択、という風にすると任意のWidgetで囲ってくれます。
他にもRefactorにはExtractという機能もあってこちらは名前の通りその対象を取り出して関数として作り直してくれます。同じようなボタンを複数個作る場合などにこの機能を使えば大幅な時間短縮ができるので覚えておいて損はないです。

Database

次は、各記録を保存するために使ったFirebase について話していこうと思います。

Firebaseはモバイルアプリ開発でよく利用されるバックエンドサービスです。
このデータベースの中に誰が、いつ、入室/退室したかということを保存するために使いました。
FirebaseをFlutterで使うにあたって色々手順を踏みました。
まず、Flutterプロジェクトのpubspec.yamlに、firebase_coreと使いたいFirebase製品のパッケージを追加します。そしてその後main.dart等でFirebase.initializeApp()を呼び出し、初期化を行います。
ここまで来たら後はインポートしたらもうFirebaseの基本的な物は使えるようになります。
これがざっくりとしたFirebase を使えるようにするための手順でした。
この後はこの機能を使いデータベースから各記録を保存、取り出しの機能を使い、ページ上に表示させたり、コード上の条件や計算といった用途でこの記録されたデータを扱いました。

Testing

開発をする上で最も大事なテスティング、ここでも何個かポイントがありましたので話していこうと思います。まずはホットリロードと呼ばれるものから； Flutterアプリを作成している間、ソースコードの変更内容はすぐに反映されるのがホットリロードです。アプリの状態を維持したまま、変更されたWidgetのみを再構築することで実現しているそうです。これを使うことによって、変更後のUIをすぐに確認できる、アプリの状態を維持できる、よって開発者の生産性が向上するというメリットがあります。これは特に特別なことをすることなくVSCode等のエディタを使っていたら自動で使えるものになっています。
この機能を使ってデバッグ作業は進めていました。ここでよく出たエラーの中に"このデータ型は受け付けません"というものがありました。そしてこれが頻発するので毎回どこか探して型を変えていったんですが、ホットリロードの機能がなければ大量の時間がアプリの立ち上げに使われていたと思うのでこの機能はとても効率的なものでした。後は、大幅にコードを変えるときに変える部分を消すのではなくあくまでコメントアウトで残しとくのも大事だと感じました。もし変更後のコードがうまく動かなくても保険があれば元々動いていた状態に戻せるし、その元のコードから抜き取れる部分もあると思うので。

感想

中学でPython、高校でJava、 JavaScript、 HTMLに触れてきましたがFlutterはこのどれとも違う自分にとっては真新しい言語でした。個人的には構成の仕方は若干HTMLに通ずる部分があるように感じましたが、Widgetなど馴染みの無いものが多く、最初は苦労しました。ただ、慣れるとほかの言語より比較的簡単にWebアプリを作れるようにも感じられました。このアプリを開発するために初めてデータベースと同期してバックエンドで他の物を使うということができたのも実際のサービス運用時には必須の技能なので、今回の開発でこれを経験できたことはとても為になりました。
そしてこれは毎回新たな言語を始めるときに思いますが、これまで培ったPythonやJavaScriptなどの知見が、Flutterの学習を促進する効果がありました。プログラミング言語には共通のパターンがあり、知識が互換性を持っていることを強く実感しました。

最後に

感想ベースにはなりましたが今回させてもらった自分の経験をもとに初心者としてFlutterを使う上での重要だと感じたポイントをあげさせてもらいました。今回この様な貴重な体験をさせてくれたiPresenceの方々、ありがとうございました。