[個人開発] プログラミング学習記録アプリ (Laravel使用)

はじめに

• 自己紹介

　25卒上智大学経済学部のAkiraです。
僕は、(当時大学1年)2021年6月からプログラミングの勉強をはじめ、POSSEという大学生プログラミングコミュニティで運営しつつ学習しながらハッカソンやチーム開発を行っています。

POSSEのリンク先
Instagram：https://www.instagram.com/posse_programming/
Twitter：https://twitter.com/posse_program

• 記事の概要

　今回、POSSEコミュニティでカリキュラムの一環として扱われる「プログラミング学習記録アプリ」をWEBフレームワークLaravelを用いて制作しました。
開発目的としては、あくまでもWEBフレームワークの学習なので、MVCモデルへの理解など、学習したことを中心に記事にアウトプットしていきたいと思います。

• 想定読者

　・プログラミング初学者
　・エンジニア学生
　・WEBフレームワーク・Laravelに興味がある方
　・ぶっちゃけ誰でもOK

目次

1. MVCモデルとは
2. 技術スタック
3. 制作物
4. ER図
5. 機能一覧
6. 躓いた点
7. 振り返り
8. 参考文献

MVCモデルとは

はじめに軽くMVCモデルの説明をします。
そもそもMVCモデルとは、Model、View、Controllerのそれぞれの頭文字3文字を表します。PHPのフレームワークLaravelは、以下のアプリケーションの処理を行っています。

• Model・・・DBとのやりとりを行う。
• View・・・Controllerからデータを受け取り、見た目部分を表示する。
• Controller・・・クライアントから受け取るRequestに応じてデータをModelと送受信し、その結果をViewへ渡す。
  (Requestに応じるとは、受け取ったRequestをルーティングで処理してからControllerを扱うことを指します。)

　MVCモデルの構造は以下の図の通り。

技術スタック

• フロントエンド： JavaScript, CSS
• バックエンド　： PHP, Laravel
• DB： MySQL
• 環境： Docker

コミュニティのカリキュラムに沿って行うため、技術選定はありません。
※カリキュラム(企業の場合は研修とか？)は、初心者にとって学習の効率を引き上げる利点はありますが、課題解決などの目的に向かって開発するわけではないため、技術選定やこだわり、工夫などを考える機会は、自発的な開発や長期インターンの実務経験を積む必要があると思われます。

制作物

リポジトリはこちら。（ブランチ：main）

制作したものは、ユーザー画面、管理者画面、ユーザー管理画面です。

ユーザー画面

gifで学習記録の動作を紹介（登録後、数値やグラフがしっかり更新されます）

管理者画面

WEBフレームワークを扱ったCRUD学習のため、見た目はテキトーですが、データの整合性はしっかり取れています。

ユーザーリスト管理画面

真ん中にポツンと

ER図

ER図はこちらになります。

ER図からわかること：

• 勉強した言語と勉強したコンテンツを選択せずに勉強時間のみを記録することも可能。
• 勉強した言語と勉強したコンテンツを複数選択することが可能。

機能一覧

ユーザー画面

• ログイン/新規登録 （ユーザー別に学習記録のデータを管理）
• 学習時間の記録
• 言語、コンテンツの学習記録
• 学習時間を「今日」「今月」「全体」で表示
• 今月の学習時間の棒グラフ表示
• 言語、コンテンツの学習割合の円グラフ表示
• 学習記録を登録時、ツイート機能を設置

※グラフはGoogle Visualization APIを使いました。

管理者画面

• 学習言語、学習コンテンツの項目を新規追加
• 学習言語、学習コンテンツの名前を編集
• 学習言語、学習コンテンツのを削除

ユーザー管理画面

• 名前、メールアドレス、パスワードの変更
• ユーザーのアカウント削除

躓いた点

私が今回特に記憶に残る躓いた点は2箇所。

• Modelから渡されてきたデータをGoogle Visualization APIに格納させる部分。
  → Eloquentで渡されてきたデータは返り値がオブジェクトなので、一度View内のJSに渡し、json形式に変換した後に配列でAPIに格納させる必要がありました。

• 無限リダイレクトにハマったこと。下の画面が一時期ずっと表示されていました。
  

原因は、なぜか下記のように、Auth::routes();がauthのミドルウェアの中で閉じこもっていただけでした。（普通に考えれば当然なことでした。。。）
実際このようなエラーこそ、ルーティングに問題がありそうだなとエラーの原因をすぐに推測できるのがMVCモデルのメリットであると感じました。

「外出時に鍵を持たずオートロックの扉を閉じてしまった感じ笑」

振り返り

今回、このwebアプリを制作する上で特に得たこととして、

• GETとPOSTへの理解が深まった。
  → Controllerを扱う上で、webサービスの通信を気にする必要があったから。
• MySQLのテーブル結合と外部キーについて理解が深まった。
  → ユーザーのアカウント別にDBの送受信を選ぶ必要があるから。
• 認証機能におけるミドルウェアについて理解が深まった。
  → 無限リダイレクトにハマったから。

今後、もっと学んだ方がいいこととして、

• DBとやりとりをする際、ModelとControllerのどちらにメソッドを記述するべきかの判断について。
  →今回、fillableの記述以外、ほとんどControllerでメソッドを記述していました。そして、そのことを完成してから疑問として気がつきました。これからメンターさんなどにレビューをお願いしてもらい、理解を深めていきたいと思います。

[追記]
メンターさんからの回答
ModelとControllerのどちらにメソッドを記述するべきか
→ 一人でやる分にはどこに書いても大丈夫。
→ また、設計次第のため、設計思想を学んで自分の書きたいようにやるのが良い。
→ 加えて、共通化できるところがあれば、Modelに書くとか。

参考文献

• 「MVCパターンについて」 (Laravel学習帳)
  https://laraweb.net/surrounding/922/
• 「Laravelの仕組み~MVCの理解~」(CRI BOOT CAMP)
  https://cbc-study.com/training/backend/laravel3