初めに

元々フロントエンドエンジニア志望だったところから
サーバーサイドエンジニア志望に方向転換し
「自分の手でCRUD機能を実装できるのか！！PHPってすごい！！」
と、ひどく感動を覚え知識の定着を目的に作ったアプリです。

また開発の中で一番意識したのはTwitterでアウトプットをすることだったので、当時のツイートとともに見ていただけると臨場感がわかるかな、と思います。

※このQiita記事は「まずはアウトプット！」と思い、記事にしましたのでアプリの内容はいくつかお見苦しい点が申し訳ございません。随時、修正・更新していきます。

学習時間

PHP/SQL学習期間：約１週間（約５０時間）
本アプリ開発期間：約３週間（約１６０時間）

※参考ツイート (ProgateでPHPを学習開始)
※参考ツイート (遷移図作成から開始)

アプリの概要

URL

Github

タイトル

「レコフェス！」

「レコ(Recommend)」＋「フェス(Festival、ここでは音楽フェスの意)」

開発の背景

自分の「好きなこと」の課題解決をしよう！

過去に、友人が、初めて行くフェスに悩んでいたことを思い出し、同じように悩んでいる方のこの課題を解決するアプリを開発しようと思いました。

信用のある情報。それは「経験者による『口コミ』」

今、消費者が信用する情報は実際に経験したことのある人による口コミであることは
Amazonや楽天で買い物したり、
食べログやぐるなびでお店を選んだり、
普段の皆さんの行動から明らかかと思います。
そのようなフェスの口コミが集まるサービスが現状なかったため、開発に踏み切りました。

ターゲット

ターゲット①(フェス初心者)

・10代後半(高校生・大学生)～30代前半の女性・男性
・音楽フェスに行ったことがなく「一度は行ってみたい」と興味ある
・その反面、自分の周りにフェスに詳しい人がおらず、インターネットが主な情報源である人
・初めて行くフェスで失敗したくない
・SNS(Twitter/Instagram)を使っている

ターゲット②(フェス経験者)

・10代後半(高校生・大学生)～30代前半の女性・男性
・フェスに行ったことがあり、フェスへ行く際の注意点やオススメなフェスを知っている。
・「フェス／ライブでつながる仲間(趣味仲間)が欲しい」と思っている
・SNS(Twitter/Instagram)を使っている

使用イメージ

新規登録、ログイン／ログオフ機能

空欄時・既に登録がある場合のエラー表示

口コミ投稿機能

オススメしたいフェスを選んで、思い出の写真とオススメの理由を記載
※~~同じ選択肢(フェス名)が3つになっているのは修正中ですm(__)m~~
⇒修正完了しました。

口コミ内容表示

直近の口コミを思い出の写真と一緒に3つ表示
ログインユーザーのみ自分の口コミ削除や編集が可能
~~※Instagramアイコンが表示されない点、画像が崩れている点については修正中です。~~
⇒修正完了しました。

ユーザー情報詳細

「この人の口コミ役に立つ(^^)」と思ったらその投稿者のSNSまで遷移可能

特典ページ

フェス初心者の悩みである「当日の持ち物は何持っていけばいいか？」を解決
⇒ランキング機能だけでは解決できない課題も解決

使用技術

フロントエンド

HTML/CSS
jQuery 3.4.1

バックエンド

PHP 7.4.1

DBMS

MySQL/PHPMyAdmin

デプロイ環境

Heroku

機能一覧

課題解決のために必要な機能だけ実装することを意識しました。

No	必要機能候補	優先度	×の理由
1	ユーザー登録機能	〇	-
2	ログイン機能	〇	-
3	ゲストログイン機能	〇	-
4	プロフィール編集機能	〇	-
5	口コミ投稿機能	〇	-
6	口コミ編集機能	〇	-
7	口コミ消去機能	〇	-
8	ランキング表示機能	〇	-
9	レスポンシブ機能	△	バックエンド側ができれば使用可能なのでデプロイ後追加
10	口コミへの返信機能	×	本機能はSNS上で実施可能であるため
11	口コミ編集機能	×	同上
12	フォロー／フォロワー機能	×	同上

※参考ツイート

DB設計

非常に簡単なDB設計ですが、DB設計の難しさを経験し
概念設計⇒論理設計(主に正規化)⇒物理設計
の流れが学習できたことは大きな収穫でした。
以下が最終的なDB設計です。

※参考ツイート (手順がわからず、当初はただのテーブルとカラムの羅列のみでした…)

工夫した点

自走することとチーム開発という実務を見据え開発を意識しました。

1.とにかくTwitterでアウトプット

タイトルや冒頭に記述した通りですが、実装した機能やつまづいた箇所についてはコードの処理を言語化し１行１行の理解を深めました。
また、次回アプリ開発時の復習材料として見返せることも見据えて欠かさずアウトプットしました。
※参考ツイート

2.自力でなるべく解決

自走力を高めることを目的に
実装後にうまく実装できない場合の解決のアプローチは
1.タイプミスがないかチェック
2.ini_set(...)やvar_dump(...)を用いてエラー文を読み、エラーの原因箇所を重点分析
3.どうしてもわからない場合はメンターの方に質問
を実施しました
※参考ツイート

また「やりたいこと」をコードでどのように実装するか悩んだ際は
1.「やりたいこと」を紙に文章化
2.書いた文章をDB情報やコードで置き換える
事で実装がうまくいきました。
これはデータベース上でどうやってリレーションを引けばいいか困惑していたときに非常に役に立ち、繰り返し実施することでリレーションの理解が格段に深まりました。
※参考ツイート

3.Githubの活用

Githubについては以下のように活用しました。
・issueを出してタスク管理
・issueをpull requestで結び付けてタスクを消化
・ぱっと見で何をしたかわかるcommit messageを意識
※参考ツイート (Githubのissue立て)
※参考ツイート (Githubのcommit message)

苦労した点

1.データベースの設計及びリレーション処理

当初はリレーションの理解が浅くSQLの書き方がわかりませんでした。
工夫点の2.で記述した通り紙に書いて対策を取りました。
※参考ツイート

2.queryとprepare/execute/fetchの意味の理解

$members = $db->query('...');

や

$members = $db->prepare('...');
$members -> execute('...');
$member = $members ->  fetch();

を使いデータベースから値を取得しますが、これらの使い方ついて最後まで理解できず、つまづいた点もありました。
~~(別途Qiita記事投稿予定)~~
⇒コチラのQiita記事でアウトプットしました。
※参考ツイート (prepareとquery)
※参考ツイート (fetch)

3.Herokuでのデプロイ

特にローカル環境(MyAdmin)から本番環境(MySQL Workbench)へデータベースを移行する際、SQLの処理がうまくいかず苦戦しました。
~~(別途、Qiita記事投稿予定)~~
⇒コチラのQiita記事でアウトプットしました。
※参考ツイート

<追記>4.データベース情報をGithubにマージしてしまった

完全に「やらかし」ですが、このQiita記事を投稿後にコメント頂き
Githubにデータベース情報(ユーザー名/データベース名/ホスト名/パスワード)を公開しているということの危険性を初めて認識しました。

コメント頂いた通り、すぐに当時のデータベースアカウントを削除し、新しく取得したデータベース情報は環境変数を用いてGit管理しました。

今回の事態の原因は2点で
「Github上のコードは公開されているということの意識の欠乏」
と
「ステージング方法の悪い癖」
です。
※コチラのQiita記事でアウトプットしました。

このような事態が起こったのが個人開発であって本当によかったと思いました。

課題

以下が残存課題です。随時修正していきます。

DBから値をうまく取得できていない

　⇒画像が表示されない、DBの値が重複している、など

レスポンシブ対応

　⇒ターゲットが若年層であり、スマホからの利用が多いことを考えると必要

他のランキングも増加

　⇒フェス初心者の悩みは尽きないので、他のランキングを作成し、多角的なフェスに関する悩み解決できるアプリにしていきたいです。
(例：オススメアーティストは？オススメフェス飯は？オススメ写真映えスポットは？など)

学んだこと

・アプリの内容自体はフレームワークなしでありレベルが高いとは言えませんが、実務を見据えた開発経験ができたこと自体には価値があり、WEBエンジニアに不可欠な自走力が身についたと実感します。
・PHPのみで開発を進めることで、フレームワークの利便性に頼らない基礎のPHP及びMySQLの理解を深めることができました。
・直近はこの経験を活かして、フレームワーク(Laravel)を使ったアプリ開発に挑戦し、最終的にはWEBエンジニアとして実務を全う実務で活躍することを目指します。

最後まで読んでいただきありがとうございました！！！m(__)m

【アウトプットしたツイートで振り返る】PHP/MySQLだけで「音楽フェスランキング」作ってみた

初めに