04．はじめてスマホアプリを作ってみた（設計フェーズ）

記事の概要

こちらの一覧の4つ目、「設計フェーズ」の記事。

ダイジェストで読みたい方はこちらの記事を。

アラフォー初心者だけどスマホアプリを開発～リリースまでがんばってみた【Android・Xamarin.Forms】

あらすじこの度、素人ながらスマホアプリ開発に挑戦してみた。今回の記事では概要と経緯について書き綴ってみたい。実際に行った作業の詳細は、全7回に分けた記事を別途作成

www.neputa-note.net

インストールはこちらから。

Androidのみ iOS版は現在リリース未定

はじめてのスマホアプリ開発設計フェーズ

スマホアプリの設計を開始する

an image of design — Photo by：Med Badr Chemmaoui in Unsplash

前回は、スマホアプリ開発に必要なフレームワークや言語、その他サービスを決めていく過程について書いた。

ここまでで「どんなアプリを作るか」「要件をどうするか」「どの技術を使うか」が決まった。いよいよ設計作業に着手する。

できる限り設計作業を進め、開発ツールを立ち上げているときはコーディングに専念できるよう準備を進めていきたい。

全体のアーキテクチャを考える

blog image — Photo by：Alex wong in Unsplash

この時点でわかっていることは、「画面構成」「画面遷移」「各種機能」の3つ。

これを設計に落とし込んでいくにはどうすればいいか。

今回の作業と並行し、設計に関する情報をWebや書籍で調べていった。

その中で、設計作業にとくに役立ったのが以下。

参考にしたウェブサイト

Peacock-ANDERSON

参考にした書籍

オブジェクト指向のこころ（SOFTWARE PATTERNS SERIES）
ドメイン駆動設計入門ボトムアップでわかる！ドメイン駆動設計の基本
Clean Architecture　達人に学ぶソフトウェアの構造と設計

各書籍等の内容についてはこちらの記事にもまとめている。

アラフォー初心者だけどスマホアプリを開発～リリースまでがんばってみた【Android・Xamarin.Forms】

この度、素人ながらスマホアプリ開発に挑戦してみました。今回の記事では概要と経緯について書き綴ってみたいと思います。実際に行った作業の詳細は、今後それぞれ記事を書き、こちらにリンクを追記します。作ったアプリ「OneThird」の概要毎日の睡眠を入力によって記録するアプリです。寝た時間、起きた時間

www.neputa-note.net

一読してすべてが理解できたわけでは当然ない。

今回の作業工程で必要な情報がどの本のどこに書いてありそうかを把握し、その都度ウェブ検索で周辺情報を広いながら活用した。

なぜシステムアーキテクチャを理解しておきたかったか

いざプログラミングをする際、どのファイルにどんなコードを書けばいいか迷ったりしないだろうか。

このあたりは設計に関する知識不足が大いに影響しているのだと思われた。

「ドメイン駆動開発」を参考にする

an image of ddd — Photo by：Brazilian Experience

今回のアプリは非常に規模の小さいモノでオーバースペックな気もしするが、「ドメイン駆動開発」をとくに参考にした。

初心者のわたしが正しくドメイン駆動開発を実践できたわけではないが、先に挙げた迷いが払しょくされ大きな助けとなった。

「睡眠記録を保存する」と一口に言っても、いざ設計を考え始めると、

その日の記録対象の睡眠時間の範囲はどうするか
起床時間が就寝時間より過去だとおかしい
重複した時間帯を記録させたくない

などいくつもルールが必要なことが分かってくる。

要件をプログラムでどう表現すればいいか

具体的に言うと、どのファイルに書けばいいか迷うわけだ。

上記の参考にした書籍では、こういったコアルールは「Domain」に書こう！とある。

今回、結果的に2つのデータベースを切り替える機能を実装した。

では、データベースとやり取りする処理はどこに書けばいいか。

「Infrastructure」だ。

こんな具合に、アプリの各機能やルールをプログラミンでどう表現していくか、システムアーキテクチャが助けてくれる。

アーキテクチャを考慮するメリット

また、「ドメイン駆動開発」や「Clean Architecture」を参考に設計すると、後々のメンテナンス不可を軽減するメリットもあるという。

現段階では非常に小規模なアプリだが、いずれ分析などの機能追加をする野望がある。

不完全ではあると思うが今回構築したこの設計は、後々わたしを助けてくれると思う。

ただ最初はやはり難しい

本に書かれていることも、実際に壁にぶつかって初めてその必要性を実感できたりする。

一行もコードを書かずに設計を洗練させるなんて初心者には難しい。

理解できなかったとしてもそこで手を止めず、何度でもイチから作り直す気持ちでやってみるといいかもしれない。

個人開発の良さの1つではないだろうか。

実際わたしは、わからないまま進め「そういうことか！」となり、使えるコードは流用し、イチから作り直すことを何度かした。

これを繰り返し、納得のいく設計に近づけていった。

実際に作った設計内容（コンポーネント図）

以下は、今回のアプリを構成するコンポーネント図。

「Visual Studio」を使用しているため、図の「Domain」などは独立した「プロジェクト」として構成した。

コンポーネント図

Domain

Domain Model
- いつからいつまで当日分とするとか、二度寝は記録できるけど重複した時間帯は保存しない、といったビジネスルール
Repository
- インターフェイスなど。

Application

Xamarin側のCoreとドメインのインターフェイスを介したInfrastructureとのやり取りを中継。

Core

Xamarin Formsのcommonプロジェクト。Android、iOSの共通部分を実装。

Android・iOS

各プラットフォームに依存する部分を実装。

Infrastructure

RealmとCosomosDBとのやり取りを実装。

ユーザがログインしていればCosmosDB、そうでなければRealmに接続する。

RealmはSQLiteのようなローカルDBを提供してくれる製品。

Tests

ユニットテストをここに書く。

テスト対象のプロジェクト毎にフォルダを作り、その中にテストファイルを置く。

「Visual Studio」固有の話しになるが、各プロジェクトを構成し、参照を貼る方法は以下の記事を参考にした。

C#でドメイン駆動開発Part2 - ピーコックアンダーソン

#01_プロジェクトの作成 #02_プロジェクトの追加 #03_依存関係 #04_ドメイン駆動開発でAppli

anderson02.com

C#のXamarin.FormsでPrismを使ってMVVMで実装する方法【目次】 - ピーコックアンダーソン

VisualStudio2019にPrismのテンプレートをインストールして MVVMアーキテクチャーで実装す

anderson02.com

各プロジェクト（コンポーネント）の中身を考える

これでアプリ全体の骨格ができた。

次は、各プロジェクトの中身を考えていく。

本来であれば「UML」などを扱えるツールでドキュメントを作成しながら設計を進めていくべきかと思う。

しかし、ドキュメントをひとつひとつ作成することはできれば避けたい。

最終的なアウトプットはできるだけ自動生成できるツールを頼る。

まずは試行錯誤

手順としては、まず紙とペン、ツールでも何でもいいのでどのような「クラス」を展開していくかを考えた。

ちなみにこの試行錯誤は「drawio」というツールを使った。

Web版ツールとして公開されていおり、Microsoft Storeから入手することもでる。

draw.ioの使い方を解説〜無料の高機能作図ツールを使って資料の質をあげよう！

作図ツール「draw.io」の使い方を解説します。「draw.io」はフローチャートやオフィスのレイアウトなど図を作成できる高機能のツールです。長机や窓といったオフィスレイアウト向けの図形や、パソコンやメールなどのアイコンも豊富なので、少ない手間で質の高い図を作成できます。会員登録も不要なので、ぜひこの機会に利用してみてはいかがでしょうか。