実務未経験エンジニアがLaravel&ReactでWebアプリケーション開発に挑戦してみた！（要件定義・設計編）

# 実務未経験エンジニアがLaravel&ReactでWebアプリケーション開発に挑戦してみた！（その１）

## 0. 初めに
みなさん、こんにちは！
**荒木.php**と申します。

今回から長い期間をかけて、実務未経験エンジニア（就職はしているけど研修期間中）の僕が一からWebアプリケーションを開発する様子をお届けしたいと思います！

初心者の方でもわかるように（自分が後から見返してもわかるようにw）丁寧目に書いていきますので、同じく実務未経験の方は参考にしていただければ幸いです。

タイトルの通り、主な使用技術は**Laravel**（phpというプログラミング言語のフレームワーク）と**React**（JavaScriptというプログラミング言語のライブラリ）です！
「フレームワークとかライブラリって何だよ！（怒）」って方は、後で軽く解説するのでお待ちください～。
あと、先に言っておくとPCのOSはWindows11です。
メモリはできれば16GB以上推奨です。

ちなみに記事の投稿は初めてなので、至らぬ点しかないと思いますが、徐々に改善していくと思いますので、温かい目で見守ってくださると幸いです。"(-""-)"
では、さっそく参りましょう～！

## 1. 要件定義・設計
いきなり難しい言葉が出てきてビビったかもしれませんが、一つずつ解説していくので慌てずに行きましょう！（笑）
まず、「要件定義」ですが、こちらは、

**「何を作るかを明確にするための、最初の重要な話し合いと記録」**

...とGeminiさんがおっしゃっておりますw
具体的には、

**・誰が（顧客や利用者）**
**・何を（作りたいのか、解決したい課題は何か）**
**・なぜ（それが必要なのか、どんな価値があるのか）**

といったことをまとめて書くそうです。

**...ってそもそも個人開発でワイ一人だけやから話し合いもくそもねーよっ！**

ということで、今回はChatGPTさんとどういうものを作りたいかを話し合って、その内容をまとめることにします。

次に「設計」ですが、これはそのままの意味で、この要件定義をもとに具体的にどのような機能が必要かを考えて、形を構想することですね！
今回は、必要な機能を洗い出した後に、**ワイヤーフレーム**（画面のレイアウト図的なもの）と**ER図**（どういうデータが必要かを示す図）の２つを作成します！

では、さっそく要件定義からやっていきましょう！

### 要件定義書
本来であれば、社内の企画の人や直接顧客と話し合いをして、その結果どういたシステムやアプリケーションを開発するのかを決めて文章に残します。
しかし、先ほど言った通り、今回は個人開発で特にマネタイズするわけでもないので、ChatGPTと会話をして、どういうものを作りたいのかを決めます。

僕は、「**研究室のレビューアプリ**」を作ってみたいと思います。
細かいプロンプト（AIに与える指示や質問のこと）は割愛しますが、最近の生成AIはすごくて、割とざっくりとした質問でもそれなりな解答を生成してくれます。
例えば、「〇〇みたいな機能を作りたい」とか「〇〇をグラフで表したい」とか「LaravelとReactを使いたい」などと聞いていくと、よい感じに学習してくれると思います。

大体作りたいものがイメージ出来たら、最後に「要件定義書のフォーマットを作って」と指示すればOKです。あとは、生成された要件定義書の細かい部分を修正していきましょう。
完成したのが、こちらです。

[要件定義書](https://docs.google.com/document/d/e/2PACX-1vSsnqWxFx4shxe7Ii12iwKsMGYPHCLHiBh8qTGPBerRT_gdZ-7AHmDrOdE99Hns2_VSykq8huQqKYYg/pub)

それっぽくできているかなと思います。文章中には難しい言葉もあるかもしれません。
ですが、さっと眺めてもらって、ざっくりと「こんな雰囲気のアプリを作るんだな」と思っていただければOKです。
必要そうな機能もまとめてあるので、大まかな設計もこれでよいかなと思います。

## 2. ワイヤーフレーム作成
続いて、さらに具体的な設計手順に移ります。
ワイヤーフレームというのは、ざっくりいうと画面の設計図です！
「どの場所にどういうボタンが必要か」とか「何をどのように表示するか」などを決めます。
今回は、[diagrams.net(draw.io)](https://app.diagrams.net/)というサービスを利用します。Googleドライブ経由で利用できるアプリケーションです。
まあ、正直画面設計は、パワポとか最悪紙のメモ帳とかでも全然良いのですが、せっかく便利がツールがあるので利用していきましょう！
最近はFigmaというサービスを使うのが流行っているみたいです。
今回は、細かい使い方は割愛しますが、興味がある方はぜひ調べてみてください！
作成したホーム画面をお見せするとこんな感じです。

![スクリーンショット 2025-05-03 142613.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4075450/51e7ebc6-49fa-4e88-a02d-d9be3e09af64.png)

ん？色もついていないし、なんかしょぼいって？
ま、まあ、設計段階で凝ったもの作ってもな...っははは！💦
開発の最後の方で頑張るので今は目をつむってくださいっ！

# 3. ER図作成
ER図というのは、アプリケーションを動かすために必要なデータをどのように保存するかを示した設計図です。
すなわち、**データベース設計**の成果を示した図ということになります。
データベースと聞くと難しく感じる方もいらっしゃると思いますので、軽く解説しておきます。
具体例を考えるとわかりやすいです。
例えば、「うずまきナルト、16歳、男、ラーメン好き」みたいな情報があるとします。
これも立派なデータです。
このデータの最小単位を**レコード**と言います。
他にも、「はたけカカシ、30歳、男、読書好き」みたいなレコードもあり得ます。
これらが集まったものを**テーブル**と言います。
また、レコードの一つ一つの項目名を**カラム**と呼んだりします。
今回の例で言うと、"name", "age", "sex", "hobby"みたいな感じです。
このレコードを横の行に、カラムを縦の列にして、表の形でテーブルを表すことが一般的です。

例: Usersテーブル
| name | age | sex | hobby |
|:-:|:-:|:-:|:-:|
|  うずまきナルト | 16  | male  | ラーメン  |
| うちはサスケ  |  16 |  male |  修行 |
|  春野サクラ |  16 |  female |  暗記 |
| はたけカカシ  |  30 | male  |  読書 |

他にも、Jutsu（術）テーブルとか、Sato（里）テーブルとかがあってもいいかもしれません（ナルトを知らない方、すみません💦）。
このようにしてテーブルが集まったものを**スキーマ**と言います。
厳密には違うらしいのですが、このスキーマをデータベースと呼ぶこともあります。
データベース内では、複数のテーブルが繋がりあいます。
すなわち、ER図を作成するというのは、スキーマを定義するということなのです！

長々と解説しましたが、実際に作るとこんな感じです。
ワイヤーフレームと同様にdraw.ioを用いて作成しました。

![スクリーンショット 2025-05-04 094936.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4075450/b7415064-f98b-4180-b3b8-de25423ac688.png)

**いや、文字小っさくて、全然見えへんやんっ！**

ということで、「なんかいっぱい箱作って線でつないでるな～」とざっくり理解してもらえればOKです。（笑）
この一つ一つの箱みたいなやつがテーブルを表していて、線がそれらの繋がり（リレーションと言ったりします）を表しています。

今回は、ER図の細かい作り方は割愛しましたが、データベース設計というのは結構奥が深いので、興味がある方はぜひ調べてみてください！
僕もただいま勉強中で、もっとうまく設計できるように頑張ります！

## 4. まとめ・次回予告

ということで、今回は、Webアプリケーションを実際に作るための要件定義と設計を行いました。
かなり、ざっくりとした説明ばかりでした。
次回は、いよいよ環境構築編です。
実際に手を動かしていく場面が増えますので、お楽しみに！

最後まで読んでくださり、ありがとうございました。
次回の記事でお会いしましょう～