【具体例あり】ポートフォリオの基本設計と詳細設計の方法【結論：分解です】

<br>

## はじめに
この記事は、僕のポートフォリオ作成の実体験を元に、これからポートフォリオを制作する人へ向けた、参考記事になります。

前回の記事はこちらになります。
⬇️【具体例あり】ポートフォリオの案出しの方法【２種類の思考法】
https://qiita.com/yuki4839/items/91cf6412666d9f47126f
<br>

さて今回は、案出し(いわゆる要件定義)ができたところで、次にやるべき(実務で言う所の)基本設計や詳細設計について、僕なりのやり方を紹介していこうと思います。

結論、基本設計や詳細設計は、分解になります。
<br>
<br>

## 基本設計と詳細設計の違い
まずこの言葉を初めて聞いた、と言う人もおられるかと思いますので、簡単に違いを説明すると以下になります。

<ul>
  <li>基本設計
    <ul>
      <li>案出ししたものを基に、Webアプリの機能を分解していく。</li>
    </ul>
  </li>
  <li>詳細設計
    <ul>
      <li>基本設計で分解した物を基に、実際に必要なプログラムやデータベースを洗い出す</li>
    </ul>
  </li>
</ul>

ただこれらは企業によって若干認識の差異があるようなので、ここでは「こんな感じに決めていくんだ〜」程度に思ってもらえれば大丈夫だと思います。
<br>
<br>

## 基本設計
上記でも説明した通り、基本設計とは案出し(要件定義)で大雑把に決めたもの基に、それらを実現するために機能毎に分解を行っていく作業です。

言葉だけだと難しいと思いますので、実際に僕が案出し(要件定義)したものから、基本設定を行った一部を、紹介します。
<br>

<ul>
  <li>要件定義
      <ul>
      <li>派遣などを行っている企業に対して、シフトの管理や打刻の管理などを、メールなどの人力作業ではなく、ある程度自動化されたシステムを作ることにより、人件費などの経費削減に繋げる。</li>
    </ul>
  </li>
</ul>
<br>

<ul>
  <li>基本設計
    <ul>
      <li>シフト管理
        <ul>
          <li>シフトをアプリで提出できる。</li>
          <li>提出予定のシフトを保存できる。</li>
          <li>シフトの入力情報を使いまわせる。</li>
          <li>確定したシフトをカレンダー方式で確認できる。</li>
          <li>全体版のシフトと個人のシフトで切り替えられる。</li>
        </ul>
      </li>
      <li>打刻管理
        <ul>
          <li>ワンタッチで出勤と退勤の打刻が可能。</li>
          <li>通知で打刻忘れを防止。</li>
          <li>退勤時に必要であれば業務報告が可能。</li>
        </ul>
      </li>
      <li>給料管理
        <ul>
          <li>シフトと時給情報を基に、給料予測を算出。</li>
          <li>これまで受け取ってきた給料を確認できる。</li>
          <li>源泉徴収票をアプリからダウンロードできる。</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<br>

こんな感じです。ポイントは、上記のシフト管理や打刻管理のように大枠を決め、そこから必要な機能を分解していくイメージですね。

また実務では、基本設計はクライアントに詳細を伝える際にも利用するケースがある見たいなので、この時点では専門用語はあまり出さず、機能の洗い出しのみを行う感じです。

>ちなみに上記は「機能要件」と言われるもので、これとは別にセキュリティや可用性などを決める、「非機能要件」と言うものも存在します。ポートフォリオの段階で「非機能要件」まで考えるかどうかは、個々のスキル次第な所もあると思うので、ここでは割愛します。
<br>
<br>

## 詳細設計
基本設計がある程度できてきたら、次に行うのが詳細設計になります。これも基本的には、分解をイメージしてもらうと、考えやすいです。

例えば上記のシフト管理の部分を詳細設計すると、以下のようになります。

<ul>
  <li>シフト管理
    <ul>
      <li>シフトをアプリで提出できる。
        <ul>
          <li>個別に入力してもらったシフト情報を、保存するテーブルを作成。さらにそれを管理者のテーブルとリレーションを組み、情報共有する事ができるシステムの構築。</li>
        </ul>
      </li>
      <li>提出予定のシフトを保存できる。
        <ul>
          <li>シフト情報に関するCRUD処理を構築。</li>
        </ul>
      </li>
      <li>シフトの入力情報を使いまわせる。
        <ul>
          <li>テンプレートを保存できるDBを作成し、そこにCRUD処理を設ける。</li>
        </ul>
      </li>
      <li>確定したシフトをカレンダー方式で確認できる。
        <ul>
          <li>HTMLにてテーブルタグを利用し、6週7日のカレンダーを作成する。</li>
        </ul>
      </li>
      <li>全体版のシフトと個人のシフトで切り替えられる。
        <ul>
          <li>DBから取得する値を、使用するクエリ文の切り替えで分け、それをユーザがボタン一つで切り替えられるように構築。</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<br>

これはほんの一例ですが、実際に実務で詳細設計を行う際は、実装を他の会社に外注する場合に、文章で相手と意思疎通ができるように、さらに詳細に書く必要があります。

ただ、個人的にやってて思ったのは、詳細設計を詰めていくよりも、実際に実装を行い、さらに単体テストや結合テストをゴリゴリ書いていくことの方が、ポートフォリオ作成おいては大切だと感じました。

そのため、全く詳細設計などをやらずに、いきなり実装を行うのは逆に難しいですが、ある程度(上記のような感じ)で詳細設計ができれば、ひとまず次のコーディング(ないしはデザイン制作)に移ればいいと思います。

>他にも詳細設計では、使用する言語やバージョン、インフラ設計、DB設計なども含まれますが、何はともあれ転職にはスピード感が大事なので、これらは実装しつつ考えても良いと思うので、ここでは割愛させていただきます。

<br>
<br>

## まとめ
今回はIT転職を目指している、僕なりのポートフォリオ設計に関して、ご紹介させていただきました。もう一度まとめると、

<ul>
  <li>要件定義(案出し)
    <ul>
      <li>企業や職場の問題解決や、ニッチな市場での便利な機能を考案。</li>
    </ul>
  </li>
  <li>基本設計
    <ul>
      <li>案出ししたものを基に、Webアプリの機能を分解していく。</li>
    </ul>
  </li>
  <li>詳細設計
    <ul>
      <li>基本設計で分解した物を基に、実際に必要なプログラムやデータベースを洗い出す</li>
    </ul>
  </li>
</ul>
<br>

ここまである程度行う事ができれば、いよいよポートフォリオの制作に移ります。次の記事では、実際にポートフォリオの見た目を、Adobeのソフトを利用して作成したものを、ご紹介させていただこうと思います。

最後まで読んでいただき、ありがとうございました！
<br>
<br>
<br>

筆者：yuki｜IT業界のリアルな転職事情など発信｜元トップ営業マン(訪販)→未経験からエンジニア転職へ
Qiita：https://qiita.com/yuki4839
Twitter：https://twitter.com/yukifullstack
<br>