はじめに
フロントエンドアプリケーションを実装するとき、みなさんは設計していますか？
ワイヤーフレームがあって、それを見ながらいきなり実装していませんか？
チーム開発する上では、やはり設計書があった方がいいですよね？
この記事は、マインドマップを使ってフロントエンドアプリケーションを設計するための方法を書いたものになります。
マインドマップは MindMup 2 という無料で使えるツールを使っていきます。
ページ一覧
まず、フロントエンドアプリケーションを実装する上で、1番大きな単位となるページから設計を説明します。
ワイヤーフレームでは URL に関しての情報を含んでいないことが多いと思います。
それは、クエリパラメータなど実装に関わってくる情報があるからではないでしょうか？
マインドマップは、階層構造を表すことが得意なので、 階層構造を持つ URL を表すことができます。
Qiita のページ一覧を部分的にですが、マインドマップで表してみました。
図より、URLの構造が明らかなのが分かると思います。
記事は「/ユーザー名/アイテム/記事」という URL の階層で成り立っていることが分かると思います。
また、アカウントは「/設定/アカウント」という URL の階層で成り立っていることが分かります。
ただ、マインドマップは、複雑な画面遷移を表すことは向いていません。
ですが、画面遷移は、ワイヤーフレームの段階で決まってくることが多いのではないでしょうか？
ワイヤーフレームでは画面遷移以外の情報も含んでいるので、見づらいことがあるかもしれません。
その場合は、 Draw.io などで画面遷移図を作成するとよいかもしれませんね。
コンポーネント一覧
コンポーネント一覧は、コンポーネント設計にあたる部分です。
再利用できそうなパーツや、役割が明確なパーツは、コンポーネントとして切り出すことが多いと思います。
Qiita のトップページのコンポーネントを部分的にですが、マインドマップで表してみました。
前述した通り、マインドマップは階層構造を表すことが得意です。
図の階層構造より、コンポーネントの依存関係が明らかだと思います。
状態管理
執筆中です。