オリジナルWEBアプリの設計とレビュー！設計の役割とは？

テックアカデミーに入会して約1ヶ月、全てのレッスンを終えてオリジナルWEBアプリの製作の取り掛かりました。

今まではテキストを読みながらAmazon CLoud9でプログラミングをして答え合わせをして‥という風に進めてきた訳ですが、このプログラミングスクール最後のレッスンは自作のアプリです。

いきなりプログラミングに取り掛かるのではなく、「設計書」を作成してから、それを講師にレビューをしてもらってから出発します。

一般的な開発現場を想定して設計書を書いていくという事ですね。

ここではテックアカデミーでの設計はどんな風に進んでいったかをレポしたいと思います。

設計書の意味・役割とは

開発現場に入ると大きく次のような書類を作ることになります。

・企画書（仕様書）
・設計書

企画書というのはこれからどういったアプリを作るのか、その背景・目的・市場・売上予想などをまとめたものです。つまり夢を詰め込んだもの！こういう物を作りたい！というのが企画書です。

設計書はその企画書をもとにどういったアプリを構築していくかを書類にしたものです。設計書には例えば次のような物があります。

・データベース設計
・サイトマップ
・ワイヤーフレーム

僕が10年以上前にSEをやってたときはサイトマップとかワイヤーフレームなんて言葉はありませんでした（汗

サイトマップていうのは昔の言葉で言い直すと画面遷移図、ワイヤーフレームは画面イメージ図、てなもんでしょうか。

設計書の役割として「情報の共有」があります。プログラミングって目に見えない物なので、それらを意思疎通するのって難しいです。紙に書いて図示することで他のメンバーとも認識を合わせる事ができるようになります。

また、プログラミングを外注する場合も、何をどう作るのかを指示するためにはやはり設計書が必要ですね。

自分の設計書を公開します

今回ボクが作ろうとしているWEBアプリはパパ・ママ向けの飲食店の口コミサイトです。

それを設計書に起こしました。

このようなものを作ることができました。予想してたよりもシンプルな設計になって自分でも不安になってきました（笑

現段階で重要なのは「どうしても必要な機能のみを作る」「見栄えは優先度低」という事なので今はこれでヨシとしています。

サイトマップ

データベース図

ワイヤーフレーム

将来的にというかレビューが入ったり、途中で設計を変える事はあるので設計書は最新性を保つようにしていきたいと思います。

設計を行うための無料ツール「Cacoo」

このツールは初めて使いました。CacooというWEBのツールです。無料登録で設計書を簡単に作ることが出来ます。

→Cacoo

サイトマップ、データベース、ワイヤーフレームのテンプレートも予め用意されているので本当に簡単にできました。

ちなみに無料だと5枚まで作れて、それ以上作るなら有料版の契約が必要です。

またこのCacooで作成した書類はWEB上で共有ができます。それらをテックアカデミーの講師と共有して、見てもらう事ができるのでとても便利だと思いました。

テックアカデミーでレビューして頂いた

プログラミングに入る前に提出することが課題にもなっているので、テックアカデミーのシステム上で課題提出を行いました。

嬉しいお言葉が！（原文ママ）

↓再提出後↓

このような形で、レビューを頂きました。メンタリングの講師は専属の1名が就いているのですが、課題のレビューは他の複数の講師の方にレビューをしてもらったりします。

講師（メンター）の役割とか

見ていただくとわかると思いますが、単純にレビューをするだけじゃなくて励ましてくれたり、褒めてくれたり、モチベーション維持を促すようなコメントをいただけます。

僕はもうオジサンですが嬉しいものですよ。

講師は技術屋ってだけじゃなくてけっこう優秀な人が（といったら失礼ですが）多いんだなぁと思いました。

レビューが終わればプログラミングで作り込み

さてこれから作り込みを開始します。
とは言え、飲食店の口コミサイトという事で地図や店舗情報を扱う必要があるため、他社APIを使う事になります。

なので他社APIの仕様やメソッド等も勉強して理解しながら進めて行かなくてはいけません。

ちょっと大変ですが最後まで頑張りたいと思います。