はじめてのWebアプリ「うたメモ」を作った話

2025年2月からプログラミング・ゼミSiiDに在籍し、少しずつプログラミングを学習してきました。

2025年8月にはLaravelではじめてのWebアプリ「うたメモ」を作成しました。
▶︎GitHubはこちら

企画からロゴデザイン、そしてコーディングまで、全て自分で手を動かしながら形にしていく過程は、想像以上に難しく、そして楽しい経験でした。
今回は、そのはじめての開発体験を振り返りたいと思います。

1.「うたメモ」誕生のきっかけ

私がWebアプリを作ろうと思った最初のきっかけは、プログラミング・ゼミSiiDのカリキュラム後半に用意されていた「Webアプリを開発課題」でした。せっかくなら、ただ課題をこなすだけではなく、日常の中で本当に役立つものを作りたいと考えました。

思い浮かんだのは「カラオケ」での体験です。
ある時、上司に誘われてドラムの生演奏に合わせて歌うことができるカラオケバーに行くことになりました。上司の長い付き合いのある年配の落語家さんやライターさんをご紹介いただける場ということで、「どんな曲を歌えば場が盛り上がるだろう？」と悩み、事前にいくつか候補曲をピックアップしておいた経験がありました。

一方で、友人と行くときは、盛り上がる曲やアニメの曲、今流行りの曲を選曲します。また、ひとりカラオケのときは、ひたすら大好きなB’zやSnowManをおもいっきり歌って自己満足に浸る時間。

このように、シチュエーションや相手によって選ぶ曲は変わるのに、頭の中で整理するだけでは限界があると感じていました。「自分が歌える曲」「盛り上げ用の曲」「練習中の曲」などをパッと管理できるアプリがあれば便利なのにーー

そんなカラオケでの“ちょっとした不便さ”を解決できるWebアプリを制作することを決めました。

2. 企画構想

最初に考えたアプリのコンセプトは、「シチュエーションや相手に合わせて歌える曲を簡単に整理・管理できること」でした。私自身、年齢層の違う方や様々な関係性の方とご一緒する時に、選曲に困った経験があり、この課題を解決したいと思いました。

ターゲットは、カラオケでの選曲に悩んだ経験がある人すべてです。
上司や目上の方との場、友人同士で盛り上がる場、ひとりカラオケで練習する場——それぞれに適した選曲があるはずですが、頭の中で整理するだけでは不十分。そんな人に使ってもらえるようなサービスを目指しました。

アプリの機能としては、

• 歌える曲や練習中の曲を登録できる
• 曲にタグをつけて管理できる
• タグ検索で「盛り上げ用」「世代別」「自分のお気に入り」などをすぐに絞り込める

といったシンプルな構成にしました。
大切にしたのは「すぐに使えて直感的に管理できること」です。MVP開発を意識し機能を盛り込むよりも、まずは自分自身が本当に使いたい“選曲のメモアプリ”に仕上げることを優先しました。

3.「うたメモ」のロゴデザイン

デザイン面では、UIのわかりやすさを最優先にしました。
開発にはLaravelを使い、CSSはTailwindをベースにしたため、凝った装飾よりも「直感的に操作できるかどうか」を重視。曲の登録やタグ検索といった基本操作が迷わずできるよう、シンプルで見通しのよい画面設計を心がけました。

一方で、ただシンプルなだけでは「無機質な管理アプリ」になってしまいます。そこで工夫したのが、ロゴデザインです。
アプリ名を「うたメモ」と名づけ、ロゴにはポップで親しみやすい印象を込めました。参考にしたのは、Vtuberのロゴや配信系のビジュアル。エンタメ要素を取り入れることで、「自分の音楽ライフを楽しく記録できるアプリ」というイメージを表現しました。

「UIはシンプルに、ロゴで遊び心を」そのバランスを意識したことで、使いやすいデザインに仕上がったと感じています。

4. はじめてのアプリ開発への挑戦

私はこれまでデザインやWeb制作は経験していましたが、アプリ開発は完全に未経験でした。今回のアプリ開発では、Dockerを使用しPHP/Laravelで開発しました。

まず躓いたのは、MVCモデルの考え方とLaravelのディレクトリ構造でした。
「コントローラーは何をして、モデルはどう動くのか」「ビューはどこを書けば画面に反映されるのか」といった基本的な部分が分からず、ディレクトリを開いても「ここを触れば何が変わるのか」がサッパリわかりませんでした。
初めのうちは、ファイルをいじっては画面を確認する、という手探りの作業の連続で、まるで迷路の中で暗闇を歩いているような感覚でした。

次に困ったのは、データベースのテーブル構造とリレーションでした。
LaravelではEloquentを使ってモデル同士を関連付けられるのですが、「どのテーブルにどのカラムを作ればよいのか」「リレーションをどう設定すれば正しくデータが取得できるのか」が全くイメージできませんでした。
しかし、実際にER図を作って視覚的に整理することで、各テーブルの役割やリレーションの関係性が一目で理解できるようになり、設計の全体像がクリアになりました。

実際のプログラミングは初めてすぎて、どのコードから書けばいいのか全く分からない状態でした。
そこで、ChatGPTと相談しながら、1行ずつ辞書を引くように理解していくという方法を取りました。
最初は「なぜこの処理が必要なのか」「この関数は何をしているのか」がさっぱりでしたが、一行ずつ意味を確認しながら進めることで、少しずつ自分の中に知識が積み上がっていきました。
ここで大切だったのは、生成されたコードをそのまま使うのではなく、しっかりと理解した上で自分のアプリに適用することです。一行ずつ意味を咀嚼しながら実装することで、コードの仕組みだけでなく、考え方や問題解決のプロセスも身につけることができました。

5. 作ることで知るセキュリティの重要性

そして、自分でアプリを開発して初めて、セキュリティの重要性を身をもって知りました。Webアプリの安全を守るためには想像以上に多くの対策が求められることを実感しました。

「うたメモ」では、以下のようなセキュリティ対策を実施しました：

• SQLインジェクション対策
  ' or 1=1; -- のような入力をしてもSQL文として実行されないようにし、不正なデータベース操作を防止。
• XSS対策
  変数名を {{ }} で囲みエスケープ処理を行うことで、スクリプトの不正実行を防止。
• CSRF対策
  フォームには @csrf を設定し、ワンタイムトークンを実装。ユーザーが意図しない不正なリクエスト送信を防止。
• 入力値バリデーション
  validate を使い、DBに保存する前に値をチェック。意図しない値はエラーとして弾く。
• Mass Assignment脆弱性対策
  fillable を設定して、モデルへの一括代入で意図しないフィールドを書き換えられないようにする。
• 総当たり攻撃対策
  RateLimiter によるログイン失敗回数制限と一時ロックで、ブルートフォース攻撃を防止。
• 認証制御
  middleware によってメールの二段階認証やログインチェックを行い、未認証ユーザーが投稿機能を利用できないよう制御。
• 機密情報管理
  .env を .gitignore に設定し、APIキーやパスワードなどの機密情報が漏れないように管理。

こうして実装を通して学ぶことで、ただ動くアプリを作るだけでなく、ユーザーやデータを守ることの重要性を身をもって理解することができました。
単に動くアプリを作るだけでなく、開発者の大切な責任だと学んだ瞬間です。

6.「うたメモ」の完成！

こうして試行錯誤を重ね、ついに初めてのWebアプリ「うたメモ」が完成しました。
「うたメモ」は、シチュエーションや相手に合わせて歌える曲を簡単に整理・管理できる　ことを目的としたアプリです。
機能はいたってシンプルで「すぐに使えて直感的に管理できること」にポイントをおいて作成しました。

・新規登録＆ログイン機能

ログイン・新規登録の仕組みは、「誰でも簡単に始められること」と「安全に使えること」の両立を意識して設計しました。
新規登録は、メールアドレスさえあればすぐに始められるシンプルな仕組みです。
一方で、セキュリティ面にも配慮し、登録時にはメール認証による本人確認を必須にしています。登録後に届く確認メールのリンクをクリックすることで、初めてログインが可能になります。

・登録機能

登録画面では、曲を「オハコ（得意曲）」か「練習中」かでフラグ分けし、キー設定やタグ、感想を添えて保存できます。これにより、「この曲はどんな場面で使えるか」「どんな感想を持ったか」といった情報を一元管理できるようにます。
歌える曲をパッと選ぶ手助けができるようになり、選曲で迷う時間をぐっと減らせます。

・一覧＆コメント機能

登録した曲は、「オハコ曲」と「練習中」に分かれて一覧で表示されます。
これにより、今の自分のレパートリーをひと目で把握でき、「次に練習すべき曲」や「得意な曲」をすぐに確認できます。
アプリの中で特に大切にしたのは、この“オハコ曲”と“練習中”を手軽に切り替えて管理できる仕組みです。

さらに、他のユーザーがどんな曲を登録しているのかも閲覧できるため、「この人の選曲いいな」「私もこの曲練習してみよう」といった発見も生まれます。
また、コメント機能を通じて他のユーザーの投稿に「私もこの曲好きです！」「このキー合うんですね」といった感想を伝えることも可能です。

個人の記録ツールでありながら、ゆるやかに人とつながれる場所にもなっています。

・検索機能

曲名・アーティスト名から検索できるのはもちろん、タグによる絞り込み検索も可能にしました。
登録時に自分でタグが設定できるので、「盛り上げ用」「世代別」「自分のお気に入り」など目的に合わせて設定すれば、シチュエーションや相手に合わせた選曲が手軽にできます。

7. 自分の可能性を閉ざすのも、広げるのも自分自身

初めてのWebアプリ開発を通して感じたのは、「まず動くものを作ることの大切さ」でした。最初から完璧を目指すのではなく、「MVP（最小限の実用的な形）」でいいから形にしてみる。そうすることで、実際に触って気づく改善点や、次に実装したい機能が自然と見えてきました。

また、コードを書くのは思っていた以上に難しく、何度もエラーと向き合う日々でした。
ですが、今の時代は調べればたくさんの情報があり、適切なツールを活用すれば、一歩ずつ理解しながら前に進むことができる。
今回の開発を通して改めて感じたのは、「できない」ではなく「調べればできる」ということ。これまでの学びや仕事の中でも感じてきた「行動すれば道は開ける」という感覚を、再び強く実感する経験となりました。

そして何より印象に残っているのは、「できるか分からない」という不安の中で、それでも一歩を踏み出した自分のことです。
最初は、「自分にはプログラミングなんて無理かもしれない」と思っていました。けれど、実際に手を動かし、調べ、試行錯誤を重ねていくうちに——少しずつ形ができていく。
その過程で気づいたのは、自分の可能性を閉ざすのも、広げるのも自分自身だということです。

「できるかどうか」ではなく、「やってみるかどうか」。
今回の開発を通して、行動することの大切さを心から実感しました。
これからも、知らないことを恐れずに、一歩ずつ挑戦を重ねていきたいと思います。