Laravelでポートフォリオ作り vol.1【設計編】

Laravelの勉強をして基礎的な学習を終えたあと、次は何をするのか、、、
ポートフォリオ作りです。就職・転職活動をするためにはポートフォリオが必要になります。
もちろんポートフォリオが無くても就職できる会社はあると思います。
しかし、「自分が学習した内容の証明」のためにも、ポートフォリオを作成しましょう。
また就職・転職活動をしないしない方も、学習内容の総復習のために自分でWebアプリを作ることをお勧めします。

やっていくこと

まずは実装前にやっていく設計作業を簡単に説明していきます。
後程、具体例を出していくので、自分の作りたいものについても考えていきましょう。

アプリの方向性を決める

まずはアプリの方向性を決めていきます。
自分の趣味であったり、自分の仕事や作業を便利にするものを考えると、機能も決めやすく実装も進めやすいと思います。
いきなり万人受けを狙っても、どんな機能にするか決めるだけで時間がかかってしまいますからね。

例えば趣味特化のSNS、家計簿アプリ、ゲームの記録管理アプリなどはイメージもつきやすいのではないでしょうか?

「アプリの概要」「作った背景」も考えておけると、就活でも話しやすいと思います。
作った背景は「こんな課題を解決したいと思った」「こんなツールが欲しかったが見つからなかった」といった方向性が考えやすいと思います。
「アプリ名」も付けられると、とても良いですね!

機能を決める

アプリの方向性を決めたら機能を決めていきます。
SNSなら「ログイン」「マイページ」「投稿一覧」、家計簿なら「月間収支一覧」「収支登録」などでしょうか。

色々な機能を付けたくなると思うので、優先度も合わせて設定しておくと良いと思います。
私はよく

  • 高・・・これが無いと成り立たないという機能
  • 中・・・あったら便利だなと思う機能
  • 低・・・作れたら作ってみようという機能

まずは「高:絶対に必要な機能」とそれ以外のランク付けでも良いと思います。

画面イメージを作る

続いて画面イメージを作成します。画面イメージは自分の作りやすいツールで作りましょう。
正直な話、まずは手書きでも良いと思います。
私が画面イメージを作成するときは「手書き」→「ツール」という感じでやったりしています。
最近はツールも手軽に作れるものが増えてきているので、最初からツールを使ってしまうことが増えてきました。
ExcelやPowerPointといったソフトを使っても良いと思いますし、最近の推しは「draw.io」です。ブラウザ版もインストール版もあるので、まずは手軽に使えるブラウザ版で使ってみてください。

細かい色の指定などのデザインよりも、項目やざっくりとした配置について考えていくと良いと思います。
特に項目については、この後のDB設計でも役に立つので項目についてはしっかりと考えていきましょう。

細かいデザインについては、実装しながら案が出てくることもあるので、後回しでも良いと思います。
まずは「ざっくり」のものを早く作っていくことを意識しましょう。

DB設計を行う

続いてDB設計を行っていきます。
必要なテーブルやテーブルのカラムを考えていくわけですね。
この工程が一番難しく、一番大事な工程になっていきます。DB設計が上手くできていないアプリは実装に苦労することも多いです。

DB設計においては「正規化」という考え方が大切になってきます。正規化についての細かい説明は省きますが、要するに「管理しやすい」テーブル構造を考えていきます。
DB設計はとても大切なので、是非正規化について調べてみてください。

具体例

それでは具体例として私もアプリを1本考えていこうと思います。

方向性

今回私は「1on1面談管理アプリ」を作ってみようと思います。
副業でやっているオンラインスクールのメンター業務では、複数の生徒さんに対して週一回の面談をやっています。
その面談の記録を付けるためのアプリですね。

アプリの概要

オンラインスクールの生徒さんとの面談を記録するためのアプリケーション。
ログインをすると、自分の担当する生徒さんに対して面談の記録を作成したり、面談の記録を確認できる。

アプリを作る背景

現在も面談の記録はノートアプリを使って記録しているが、ファイル管理では面談記録での検索がやりにくい部分があったり、面談によって記録のフォーマットが異なってしまうことがある。
面談記録のフォーマットが統一されていた方が、複数の生徒さんに対して同じ基準で面談ができる上に、面談記録の管理や生徒さんの進捗管理もしやすくなると感じたため、面談記録アプリを作ろうと思った。

アプリ名

1on1ノート

アプリの機能

続いてアプリの機能を考えていきます。
今回必要になりそうな機能は

  • ログイン(高)
  • 生徒登録(高)
  • 日報登録(高)
  • 日報テンプレート登録(中)

ひとまずこんなところでしょうか。
日報テンプレート登録も「高」としたいところではありますが、少し手間がかかりそうな気がしたのと、「オンラインスクールの面談記録」という観点では自由なテンプレート作成が出来なくても、あらかじめテンプレートを用意しておけば良いと感じたためです。

画面イメージを作る

続いて画面イメージを作成していきます。draw.ioを使って作成していきます。
簡単に図形を描いて、画面に必要な項目や配置を考える程度でやっていきます。
システム開発ではフレームワークが採用しているCSSなどにデザインが引っ張られることも多々あり、フレームワークを上手く利用していく方が簡単なので、最初はそこに甘えても良いと思っています。

ログイン関連についてはLaravelの拡張機能を使っていくので作成しません。
画面は「一覧」「詳細」「登録/編集」を意識すると画面構成を考えやすいと思います。

  • 生徒一覧
  • 生徒詳細
  • 生徒登録/編集
  • 日報一覧
  • 日報詳細
  • 日報登録/編集
  • マイページ

を作っていこうと思います。

こんな感じでざっくり、どんな項目が必要かが分かるように書いておきましょう。
何かメモがある場合は、メモを添えても良いかもしれませんね。

実装しながら変更したい部分も出てくると思います。
実装し始めて見えてくる部分もあると思うので、ざっくり決める程度で問題ないと思います。

DB設計を行う

続いてDB設計を考えてきます。
ログインに関連するユーザーテーブルはLaravelの拡張機能が用意してくれるものをそのまま使用します。
そのため、自分の機能である生徒や面談関連の機能について考えていきます。

生徒テーブル

論理名物理名メモ
IDidincrements主キー
生徒 姓student_seistring
生徒 名student_meistring
入校日student_from_datedate
退校日student_to_datedatenull許可
生徒メモstudent_memotextnull許可

面談テーブル

論理名物理名メモ
IDidincrements主キー
生徒IDstudent_idbiginteger生徒テーブルのID
面談日meeting_datedate
面談メモmeeting_notetextnull許可

面談の細かい項目については面談によって異なるため、このテーブルでは持ちません。
例えば勉強の面談であれば「勉強の進捗」、就職活動の面談であれば「就活の進捗」といったように、面談の内容によって項目が異なります。
全ての面談に対応できるカラムを設定することは難しいため、別のテーブルで項目を管理していきます。

面談詳細テーブル

論理名物理名メモ
IDidincrements主キー
面談IDmeeting_idbiginteger面談テーブルのID
項目名meeting_item_namedate
項目値meeting_item_valuetext

面談に対して複数レコードを作ることを想定したテーブルです。「面談テーブル」1件のレコードに対して「面談詳細テーブル」N件(複数件)のレコードが作成されるため、1対Nの関係といわれる構成です。
例えば一回の面談で「学習の進捗」「不安なこと」を聞いた場合は、「【項目名:学習の進捗】【項目値:カリキュラムの〇ページまで】」「【項目名:不安なこと】【項目値:学習ペースが今のままで問題ないか不安】」といったような形で、質問の数だけレコードを作成します。

とりあえず設計はこんな感じで終わろうと思います。
もちろん設計の知識がある方からすると、甘すぎる設計ではあると思います。
しかし、勉強明けは深く考えるよりも「手を動かす」時間を増やしていくべきだと私は思います。
設計については経験も必要になってくるので、まずはモノを作ってみて、作りながら考えていくことも大切だと思います。