MVPから実際に使いやすいポートフォリオへ｜開発で学んだこと

今回作成したポートフォリオはこちらです。

GitHub：

アプリ：

はじめに

私はエンジニアへの転職を目指して勉強する前、製造補助として製造業務と事務作業を行っていました。

仕事をする中で、多くの方と関わる機会があり、長時間同じ姿勢で作業することによる身体の負担や、作業中の緊張によって仕事に影響が出るという話を聞くことがありました。

そこで、

「作業時間を管理しながら、休憩時にストレッチを促してくれるアプリがあれば便利なのではないか」

と考え、作業タイマーとストレッチ機能を組み合わせたアプリを開発しました。

今回は、このアプリを作る中で、

• MVPからどのようにアプリを改善したのか
• Laravelの各ファイルの役割をどのように理解していったのか
• 開発中にどのようなツールを利用したのか
• AIやデザインツールをどのように活用したのか

についてまとめます。

---

アプリ開発の流れ

今回の開発では、以下のような流れで進めました。

Figma
 ↓
E-R図
 ↓
MVP作成
 ↓
アプリ開発・改善
 ↓
README作成
 ↓
デプロイ

今回は、この中でも特に
MVPを作ってから、実際に使いやすいアプリへ改善していくまでに焦点を当てます。

使用した技術

• PHP
• Laravel
• Docker
• Node.js
• Livewire
• Tailwind CSS

※使用したバージョンなどの詳細については、GitHubのREADMEにまとめています。

---

参考にしたアプリ

アプリを作る際には、実際に公開されているアプリのUIも参考にしました。

歩数をポイントに換えるアプリ

参考にしたのは、歩数をポイントに換える仕組みを持つアプリです。

一日の歩数を次の目標までどのくらい達成しているのかが分かりやすく表示されており、「あと少しで達成できる」という感覚を持ちやすいUIになっていました。

私自身、このUIがとても印象に残っていました。

そのため、自分のアプリで作業時間をタイマーに入力するときにも、

「現在どのくらい進んでいるのかを直感的に分かるようにしたい」

と考え、UIを考える際の参考にしました。

ダイエット・ストレッチ系アプリ

もう一つ参考にしたのが、ストレッチやトレーニングを紹介するアプリです。

特に参考になったのが、タスクのUIでした。

「このストレッチがどの部分に効果があるのか」が一目で分かるようになっており、ユーザーが目的を理解しやすいデザインだと感じました。

私のアプリでも、単にストレッチを表示するだけではなく、

「なぜこのストレッチをするのか」

をユーザーに感じてもらえるような表示を意識しました。

---

MVPからアプリ開発へ

最初のMVPはかなりひどい状態でした

実際にMVPを作ってみると、

「そもそも何から作ればいいのか分からない」

という状態でした。

もちろん失敗もたくさんありました。

その中でも特に大きかったのが、セキュリティやLaravelの各ファイルの役割を十分に理解できていなかったことです。

1. セキュリティについて理解できていなかった

最初はログイン機能を作っていても、

• Blade
• Controller
• Model
• Migration
• Config
• Route

など、それぞれの役割を十分に理解できていませんでした。

画面を作ることだけを考えてしまい、

「ユーザーが入力した情報が、どこを通って、どのように処理されるのか」

という部分を理解できていなかったのです。

今振り返ると、ここを理解しないまま開発を進めるのは危険だったと感じます。

そこで、一度立ち止まってLaravelの各ファイルの役割を学び直すことにしました。

---

Laravelの各ファイルを学び直す

今回の開発を通して、特に重要だと感じたものを簡単に整理します。

Migration

Migrationでは、データベースのテーブル構造を定義します。

例えば今回のアプリでは、ユーザーに関する情報を保存するために、usersテーブルを作成しました。

Schema::create('users', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->string('email')->unique();
    $table->string('password');

    $table->unsignedSmallInteger('countdown_minutes')->default(60);
    $table->boolean('sound_enabled')->default(0);

    $table->timestamps();
});

このように、

$table->string()
$table->integer()
$table->boolean()
$table->date()
$table->json()

などを使って、データベースにどのようなカラムを用意するのかを定義します。

MVPを作ったときは、この部分の意味も十分に理解できていませんでした。

しかし、実際にアプリを作りながら、

「この情報はデータベースのどこに保存されるのか？」

と考えるようになり、Migrationの役割を理解できるようになりました。

---

Controllerでユーザーの操作を処理する

Controllerでは、ユーザーから送られてきたリクエストを受け取り、必要な処理を行います。

例えばログイン処理では、入力されたメールアドレスやパスワードを検証し、その情報を使って認証を行います。

今回のアプリでは、以下のような処理を行いました。

$credentials = $request->validate([
    'email' => ['required', 'email'],
    'password' => [
        'required',
        Password::min(8)
            ->max(15)
            ->numbers()
            ->letters()
            ->symbols(),
    ],
]);

ここでは、

• メールアドレスが入力されているか
• メールアドレスの形式になっているか
• パスワードが入力されているか
• パスワードが設定した条件を満たしているか

などを確認しています。

その後、

if (! Auth::attempt($credentials, $request->boolean('remember'))) {

によって認証を行います。

最初は「ログイン画面を作ればログイン機能ができる」と考えていました。

しかし実際には、

Blade
 ↓
Request
 ↓
Controller
 ↓
Validation
 ↓
Authentication
 ↓
Database

というように、複数の仕組みが関係していることを学びました。

---

Configについて

Configには、アプリケーションで使用する設定値などをまとめることができます。
※loginのconfigは最初から備わっていることが多いです。

例えば、今回のアプリではタイマーの選択肢を設定するために、以下のような形を考えました。

return [
    'options' => [
        30 => '0:30:00',
        60 => '1:00:00',
        90 => '1:30:00',
        120 => '2:00:00',
        150 => '2:30:00',
        180 => '3:00:00',
        210 => '3:30:00',
        240 => '4:00:00',
    ],
];

このように設定しておくことで、Blade側では選択肢として表示できます。

<select>
    <!-- 設定した選択肢を表示 -->
</select>

MVPを作っていたときは、こうした「設定を一か所にまとめる」という考え方もよく分かっていませんでした。

開発を進める中で、**「変更する可能性がある値は、どこで管理すると分かりやすいか」**を考えるようになりました。

---

2. 開発ツールを活用する

アプリを改善していく中で、どうしても自分だけでは時間がかかったり、調べても理解しづらかったりする場面がありました。

そこで、必要なところでは外部のツールも利用しました。

Livewire

Bladeを使った画面を作成する中で、画面をより動的にしたいと考え、Livewireを利用しました。

Laravelと組み合わせて使用できるため、今回のアプリを作る上で勉強にもなりました。

Cursor

開発中にエラーや実装方法で悩むことが多かったため、AI機能を利用できるCursorも活用しました。

ただし、AIにコードをすべて任せるのではなく、

「このコードは何をしているのか」

を確認しながら利用することを意識しました。

※私はこの方法で使用しましたが、コードを修正する・書いてもらうのも悪いことではないです。自分のペースに合った方法が良いと思います。

分からないコードをそのままコピーしてしまうと、後から修正するときに自分で対応できなくなるためです。

Adobe

タイマー終了時に音を鳴らす機能を追加したかったため、音声素材の作成・編集にAdobeのサービスを利用しました。

期間限定のプランを利用して必要な素材を準備し、タイマー終了時の音として使用しました。

利用するサービスについては、契約内容や無料期間、解約条件などを事前に確認することも大切だと感じました。
adobeはフリー素材としても有名です。可能であれば、期間内にいろいろなものをダウンロードしましょう。

---

3. デザインを整える

MVPでは機能を作ることを優先していたため、デザインについては十分に考えられていませんでした。

しかし、実際に画面を見てみると、

「機能は動くけれど、ちょっと使いづらい」

という部分が出てきました。

そこで、背景やログイン画面などのデザインを改善しました。

Canvaを利用する

デザインを考える際にはCanvaも利用しました。

無料プランでも利用できる機能が多いため、

• 背景デザイン
• 画像
• ロゴ
• その他のデザイン案

などを考える際に活用しました。
全部〇や▢を重ねたり大きくして無理やり作成

デザインに行き詰まったときには、ChatGPTに、

「このようなアプリの場合、どのようなUIが考えられるか」

と相談し、複数の案を出してもらうこともありました。

AIから出てきた案をそのまま採用するのではなく、自分のアプリに合うかどうかを考えながら取り入れるようにしました。

AIを使って分かったこと

今回の開発では、ChatGPTやCursorなどのAIツールを利用しました。

特に便利だったのは、

• エラーの原因を調べる
• コードの意味を質問する
• UIのアイデアを出す
• ロゴやアイコンのアイデアを考える
• テスト項目を考える
• 文章を整理する

といった使い方です。

一方で、AIに任せればすべて解決するわけではありません。

AIが提案したコードでも、自分の環境では動かなかったり、現在のコードとの相性が悪かったりすることがあります。

そのため、

AIに答えを出してもらうのではなく、自分が理解するための補助として使う

ことが大切だと感じました。

まとめ

今回のアプリ開発を通して、私が特に重要だと感じたのは、

「コードを書くことだけが開発ではない」

ということです。

最初のMVPでは、機能を作ることに集中していました。

しかし、実際にアプリとして使えるものにするためには、

• データベースの設計
• Controllerなど各ファイルの役割
• 認証やバリデーション
• UI・デザイン
• ユーザーが迷わない操作性
• テスト
• セキュリティ
• デプロイ

など、さまざまなことを考える必要がありました。

また、分からないことをすべて自分だけで解決しようとするのではなく、公式ドキュメントや既存のサービス、AIなどを適切に利用することも大切だと感じました。

特に初心者のうちは、「全部自分で作らなければいけない」と考えすぎないことも重要だと思います。

既に多くの人が作っているサービスやライブラリを調べ、参考にできるものは参考にする。

その上で、自分のアプリに必要なものを考えて実装する。

この繰り返しが、今回の開発ではとても勉強になりました。

---

感想

初めてアプリを作ったときは、何度も道を踏み外しました。

「なぜ動かないのか分からない」

「どのファイルを修正すればいいのか分からない」

ということも何度もありました。

それでも、エラーが出るたびに調べ、実際にコードを変更し、動作を確認していくことで、少しずつLaravelの構造や開発の流れが分かるようになりました。

最初から完璧なアプリを作ることはできませんでしたが、

MVPを作る → 問題を見つける → 調べる → 改善する

という過程そのものが、今回のポートフォリオ制作で得られた大きな学びだったと思います。

これからも今回作成したアプリを改善しながら、より使いやすいアプリを作れるように勉強していきたいと思います。