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

はじめに

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

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

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

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

基本設計と詳細設計の違い

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

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

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

基本設計

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

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

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

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

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

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

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

詳細設計

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

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

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

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

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

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

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

まとめ

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

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

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

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

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