実務未経験エンジニアが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です。あとは、生成された要件定義書の細かい部分を修正していきましょう。
完成したのが、こちらです。
それっぽくできているかなと思います。文章中には難しい言葉もあるかもしれません。
ですが、さっと眺めてもらって、ざっくりと「こんな雰囲気のアプリを作るんだな」と思っていただければOKです。
必要そうな機能もまとめてあるので、大まかな設計もこれでよいかなと思います。
2. ワイヤーフレーム作成
続いて、さらに具体的な設計手順に移ります。
ワイヤーフレームというのは、ざっくりいうと画面の設計図です！
「どの場所にどういうボタンが必要か」とか「何をどのように表示するか」などを決めます。
今回は、diagrams.net(draw.io)というサービスを利用します。Googleドライブ経由で利用できるアプリケーションです。
まあ、正直画面設計は、パワポとか最悪紙のメモ帳とかでも全然良いのですが、せっかく便利がツールがあるので利用していきましょう！
最近はFigmaというサービスを使うのが流行っているみたいです。
今回は、細かい使い方は割愛しますが、興味がある方はぜひ調べてみてください！
作成したホーム画面をお見せするとこんな感じです。
ん？色もついていないし、なんかしょぼいって？
ま、まあ、設計段階で凝ったもの作ってもな...っははは！💦
開発の最後の方で頑張るので今は目をつむってくださいっ！
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を用いて作成しました。
いや、文字小っさくて、全然見えへんやんっ！
ということで、「なんかいっぱい箱作って線でつないでるな～」とざっくり理解してもらえればOKです。（笑）
この一つ一つの箱みたいなやつがテーブルを表していて、線がそれらの繋がり（リレーションと言ったりします）を表しています。
今回は、ER図の細かい作り方は割愛しましたが、データベース設計というのは結構奥が深いので、興味がある方はぜひ調べてみてください！
僕もただいま勉強中で、もっとうまく設計できるように頑張ります！
4. まとめ・次回予告
ということで、今回は、Webアプリケーションを実際に作るための要件定義と設計を行いました。
かなり、ざっくりとした説明ばかりでした。
次回は、いよいよ環境構築編です。
実際に手を動かしていく場面が増えますので、お楽しみに！
最後まで読んでくださり、ありがとうございました。
次回の記事でお会いしましょう～