ウェブ開発者がFlutterでアプリを作って感じたこと
更新
これまで私は、WebでECサイトや比較サイト、不動産管理サイトなどを作ってきました。
Web開発には、それなりに慣れています。
画像は images、JavaScriptは js、CSSは css。
バックエンドなら、データベースへのアクセスは model、画面に表示するものは view。
もちろんフレームワークによって構成は変わりますが、長くウェブ開発に触れていると、「これはここに置くもの」という感覚が身についてきます。
そんな自分が、今回まともなスマホアプリを作ろうとしています。
使っているのはFlutterです。
そして最初に気になったのが、意外にも「コードの書き方」ではありませんでした。
「このファイル、何をどこに置くんだ?」
ウェブと同じ感覚では考えられない
アプリを作り始めるにあたって、まずFlutterのプロジェクト構成を理解しようとしました。
どこが画面を担当していて、どこが処理を担当するのか。
画面を描画する部分と、それ以外の処理をどう分けるのか。
ウェブではMVCなどの考え方に慣れていたので、Flutterでも同じように「役割ごとに整理したい」と考えました。
特に画面にあたる部分は、後から自分で細かく調整する可能性が高い。
だったら、画面を描画するコードの中に、あれもこれも処理を書き込んでしまうのは避けたい。
AIにコードを書いてもらえる時代だからこそ、「AIが動くコードを書いてくれる」ことと、「自分が後から理解できるコードになっている」ことは別の話だと思っています。
このあたりは、今回アプリを作っていて最初に意識した部分でした。
「動くところまで」は、思ったより簡単だった
実際にアプリを作り始めてみると、基本的な機能を実装して、エミュレーターで動かすところまでは、思っていたよりスムーズでした。
もちろん、これはAI(特にClaude)の支援がかなり大きいです。
一昔前だったら、Androidの開発環境を整えるだけでも苦労していたと思います。
特にAndroid系でGradleの設定でエラーが出たり、エミュレーターのAPIレベルを気にする。
使いたい機能に対応したパッケージを探す。
そのパッケージを入れたら、今度は別のバージョンと衝突する。
「この機能を作りたいだけなのに、なんでこんなところで時間を使っているんだ?」
ということが、アプリ開発では珍しくありませんでした。
まるで、昔のウェブサイトをIEの複数バージョンで確認していた頃を少し思い出します。
「作りたいもの」以外に気を遣うことが多い。
ところが今は、AIにエラーを渡して原因を聞けば、かなりのところまで一緒に解決してくれます。
そう考えると、最近のFlutterはかなり良い環境になっていると感じます。
私は「全部AIに任せる」やり方をしていない
開発環境については、最初はCursorを使っていました。
というのも職場でCursorを使っており、VS Codeの互換とはいえ少しは慣れておこうと思い…。
ただ、FreeプランではAIの利用に制限があり、結局Cursor上のAIは使う事はなくなり、最終的には慣れ親しんだVS Codeに戻りました。
そしてAIを使った開発について、もう一つ自分なりに決めていることがあります。
一気に全部作らせないことです。
AIに「このアプリを作って」とお願いして、ファイルを全部生成してもらい、ビルドまで一気に進める。そういう開発方法もあります。
でも私は、
「まずこの機能を追加する」
↓
「ビルドする」
↓
「実際に触ってみる」
↓
「ここはちょっと違う」
↓
「じゃあ次の機能を追加する」
という進め方をしています。
そのため、AIには「アプリを作ってもらう」というより、コーディングを支援してもらっているという感覚のほうが近いです。
当然、効率だけを考えれば遅いです。圧倒的に!
AIに一気に作ってもらったほうが、成果物はすぐに作れるはず。
それでも、この方法を選んでいます。
なぜ、一つずつ作るのか
理由は単純で、何かがおかしくなったときに、どこからおかしくなったのか分からなくなるのが怖いからです。
機能を一気に10個追加して、その後に動かなくなったとします。
どの変更が原因なのか。
どこで挙動がおかしくなったのか。
自分には分からない。
一方で、1つずつ追加して、その都度動作確認していれば、
「さっきまでは動いていた」
「この変更を入れてからおかしくなった」
という切り分けができます。
これはAIを使うかどうか以前に、ソフトウェア開発の基本なのかもしれません。
私はまだアプリ開発については素人同然なので、なおさらこの方法が合っているのだと思います。
AIに相談するときも、
「あとでこういう機能を追加したい」
「この機能は外したくなるかもしれない」
といったことを伝えながら、必要なコードを部分的に提示してもらっています。
結果として、生産スピードは明らかに遅いです。
でも、今の自分にはそのほうが安心できます。
AI時代だからこそ、基礎を知っていたい
もちろん、開発経験が豊富で、コードの構造やメンテナンスにも自信がある人なら、AIに大部分を任せても問題ないのだと思います。
むしろ、AIを使ってスピード重視で開発するほうが合理的だと思います。
ただ、自分の場合、スマホアプリ開発はまだまだ経験が浅い状態。
だからこそ、「AIがこういうコードを書いた」だけで終わらせず、
「なぜここにこのコードがあるのか」
「このファイルは何を担当しているのか」
「この変更をしたら、どこに影響するのか」
くらいは、自分でも分かっていたい。
AIが賢くなればなるほど、コードを書く能力そのものの価値は相対的に下がっていくのかもしれません。既に下がっているとも思いますが。
との一方で、
何を作るのか。
どう分けるのか。
何が起きたのか。
そして、どう直すのか。
そういった「理解する力」は、むしろ重要になっていく気がしています。
アプリを作っていて、意外なことに気づいた
今回、実際にアプリを作り始めて、自分が思っていた以上に「作る過程」を楽しんでいることに気づきました。
もちろん、完成して画面が動いた瞬間は嬉しいです。
でも、
「ここを変えたらこう動いた」
「じゃあ次はこうしてみよう」
「このエラーは何が原因なんだ?」
と、1つずつ確かめながら進めていくこと自体も面白い。
ものすごく時代の流れと真逆に向かっているとは思います。
もしかすると私は、完成したアウトプットだけを見て喜ぶタイプではなく、そこに至るまでの過程を見るのも好きなのかもしれません。
ウェブ開発をしていた頃には当たり前だと思っていたことも、環境が変わると改めて考えさせられます。
今回のアプリ開発は、単にFlutterを覚えるためだけではなく、「自分はどうやってモノを作りたいのか」を考える機会にもなっているようです。
AIに全部作ってもらえば、もっと早く完成する。
たぶん、その通りです。
でも、私はそれをやりたいわけではないらしい。
エラーが出たら原因を知りたいし、コードを変更したら何が変わったのか確認したい。
遠回りだし、効率も悪い。
それでも、1つずつ理解しながら作って、最後にちゃんと動いたときのほうが嬉しい。
結局のところ、私は「アプリを完成させたい」というより、「アプリが完成していくところを楽しみたい」のかもしれません。
AIによって「作る」ことが簡単になった今だからこそ、しばらくはこの非効率な作り方を楽しんでみようと思います。