この記事はエンジニアと人生 Advent Calendar 2024の 10 日目の記事です。
9日目は @tamanugi さんの「2024 年をつらつらと振り返る」お話でした。
はじめに
10月某日、人生で1度やってみたかった「AppleStore に自分で作ったアプリを載せる！！」という憧れを達成すべく、アプリ開発を学び始めました。
私はこれまで 8年ほどWeb開発を行ってきたのですが、このアドベントカレンダーの主催でもあるエンジニアと人生コミュニティでも iOS 関連の話題が多く、ずっと興味をもっていました。
アプリ審査に思ったより時間がかかって 12月にはみ出してしまいましたが、(実質)約1ヶ月ほどでアプリリリースまでなんとか辿り着いたので、作ってみてどうだったか、私なりのつまずきポイントを交えて書いていこうと思います。
作るアプリの選定
「Tanzaku Todo for Notion」という、Notion 特化型の Todoアプリを作りました。
下記の理由でこのアプリを作ることにしました。
1. 自分がユーザーになれる
今年本格的に Notion でタスク管理を運用しはじめてみて自分なりにいい感じの運用をできているのですが（これも今年中に記事にしたい）、既存の Notion データベースを活用しつつ、モバイルからサクッと操作できる自分好みの環境がほしいなと思っていました。
仕事だとなかなか自分がユーザーになれるサービスに携わることが少ないというのと、自分がユーザーであればアップデートも精力的に行うことができるため、この要素は重要でした。
2. ひととおり基礎が学べそうな題材
CRUD 操作、OAuth、API 通信といった、ひととおりの基礎が学べそうなシンプルな題材がいいかと思いました。
シンプルといっても、実装以外含めはじめてのことが多いので色々と学ぶことは多く、難しすぎず簡単すぎないちょうどいい難易度だったと思います。
3. 機能実装中心
今回はアプリリリースまでのスピードを重視し、かつ機能中心に学びたかったため、オリジナルのUIコンポーネントを作るようなことはせず、MaterialDesignをベースにすることにしました。最初から品質のいいUIコンポーネントが揃っていてさすが標準で入っているだけはあるなと思いました。最初Figmaでデザインを作るつもりだったのですが、終わりが見えなくなりそうだったので、Figjamでざっくりとロードマップだけ作りました。ただ、これでも色選定にはそこそこ時間をかけてしまいました😅
作ったアプリはこちらからダウンロードできます！
なぜ Flutter を選んだのか
使用技術は Flutter にしました。
React Native にするか、Swift にするか等選択肢はいくつかありましたが、
- Javascript/Typescript 以外の言語をやってみたい
- 「Flutter なら React やっとけば簡単ですよ♪」という囁きが聞こえた
- （予定はないけど）クロスプラットフォームに対応している
という理由で Flutter にしました
Flutter を選んでみてどうだったか
結論、Flutterを選んで良かったです！
作り始めの感想は、当初聞いていた印象よりも、だいぶハードル高いな〜〜でした。笑
この原因は Dart言語の文法に慣れていないことでした。
Flutter自体はたしかに、ステートの仕組みなどReactととても思想がよく似ていて、実装に関してほとんど新しく学ぶことはなかったように思います。
React hooksに慣れていれば、flutter_hooks、Recoilを使ったことがあって（使ったことなくても）非同期通信が伴うアプリであればriverpod の導入がおすすめです。
開発環境も（環境構築さえしてしまえば）VSCodeだけで完結することも可能なので、Web開発者にとってもとっつきやすい環境でした。（ちなみに、私は途中でCursorに切り替えました。）
また、Dartも慣れればとてもシンプルで、今では好きな言語になりました。
これまで一人でプロダクトを作りきるほどTypescript以外の言語を使った経験がなかったので、新しい言語を学ぶこと自体が学びになりました。海外を知ると日本のことが良くも悪くももっとわかるみたいな感覚です。
つまずきポイント
開発中には想定内・想定外含めてつまずきポイントがあったのでポイントごとに振り返ってみます。
1. 環境構築
これは想定内でしたし、基本公式ドキュメントを見ながら flutter doctor をしてでてくるエラーを1つ1つ解消していけばいいだけなので、そこまでのつまずきポイントではありませんでした。環境構築だけは昔やっていたので具体的には忘れてしまいましたが、1~2日くらいで構築できたと思います。
2. Dart 文法の把握
最初の難関はここでした。Flutterのサンプルアプリを見ても、そもそも見慣れない言語のためちゃんと理解しようとすると大変でした。
特に、TypescriptとDartを比較して、名前付きコンストラクタやファクトリーコンストラクタがあること、final/const/late について、モジュール単位の import/export がない点などに戸惑い、（やってはだめだとわかりつつ）1週間くらいかけてDartのドキュメントをイントロダクションから読み進め（途中で挫折する）てしまいました。が、結果やっぱりやらなくてよかったかなと思います😂
現代はAIがいくらでも相談相手になってくれるので、大体目を通したらDartPad で試し打ちしながら、実際にアプリを作る過程で慣れていくのが一番だと思います。（実際私も完全に理解していない）
3. 設計
次に時間がかかったのがアプリの全体設計でした。
個人開発なのでスピードファーストでローンチまでいきたいものの、CRUDとデータ通信を含む関係上わりとちゃんと設計しないとかえって難しいことになりそうだな〜の葛藤との戦いでした。結果的に、MVVM+リポジトリパターンを組み合わせて、1週間ほどかけて自分なりに実装に支障ない設計を探りました。（それでもレスポンスデータの型付けなど、妥協点は無数にありますｗ）
その際、こちらの記事を参考にさせていただきました。
zenn.dev
4. Web開発では見たことないエラーの対処
Flutter（というよりネイティブ）開発では、Web開発では馴染のないエラーに遭遇します。
例えば、Webでは実行中に型チェックは発生しないので、最悪 as でキャストして乗り切ってしまうこともできてしまいます。ネイティブでは実行中でも型が違えばエラーになるので、厳密でなければいけません。
また、UIとデータの間で不整合が起きてエラーが発生する（例えばドロップダウンで選択肢にない値が指定されている等）ことはWeb開発ではあまり見た覚えがない（なんとなくUIが崩れる）のですが、Flutterではちゃんとエラーが発生します。ただこちらも、そういうことがあるということが分かれば慣れることができました。
5. Notion API との格闘
これはアプリ開発とは別の話ですが、Notion APIの仕様を理解するのが少し大変でした。Dateフォーマットや、どういったときにどういったエラーが起き、また起きないかなど、実行しながら確認する作業が特に時間がかかった気がします😂 ただこういった外部APIを提供してくれているNotionには感謝感謝です。
6. アプリ審査
こちらも想定内ではありましたが、AppleStoreの審査準備＆審査過程は、ドキュメントを用意したり、フォームに入力していくという作業がそもそも苦手というのもあり、精神的に一番疲れたかもしれないです。。
審査準備については、こちらの記事を参考にさせていただきました。
zenn.dev
また、審査ではアプリ名/サブタイトルについて「Notion」という表記を入れてはいけないという指摘があり、これまであまりちゃんと気にしたことがなかった観点だったので、ブランディングガイドラインに目を通すなどして勉強になりました。
ちなみにNotionのブランディングガイドラインはこちらで、アプリ名に「for Notion」のように使うことは許可されているようで、無事審査を通過しました🎉
リジェクトの指摘内容は想像よりもしっかり内容を見てもらえてるんだなという指摘で、動作確認とプラットフォームの提供をしてもらえることを考えるとApple Developer Programにかかる年間13000円程の値段は高くないなと感じました。
今後
残りの主要機能、ネイティブAPIを使った機能、UI/UXの改善を行いバージョンアップしていく予定です。
これまでは公開さえやったことなかったのであまりイメージついていなかったですが、次は収益化することも考えていければいいなと思います。
大体基礎がわかったので、お遊びアプリも作ってみたい。
まとめ
久しぶりに自分で考えたものを好きなように作るという時間を費やせ、とりあえず公開までもっていけたので、充実した1ヶ月でした！
実装中困った〜とつぶやいたらコミュニティのみなさんに反応してもらえるというのも心強しでした😄
明日は 11 日目、@nabettu さんの記事です。お楽しみに！
