はじめに
記事の目的
ポートフォリオとして作成したWebアプリケーションの紹介記事です。
言語はPHP、フレームワークはLaravelで作成しています。
目次は以下のとおりです。
1. 作成したアプリについて【概要と機能】
2. 作成したアプリについて【技術】
3. 作成した目的・背景について
4. 作成時・作成後に考えたことについて
5. 作成のための学習について
アプリ自体のご紹介のほか、アプリ作成に至るまでの学習内容などにも触れられたらと思います。
作成した人（投稿時点）
- 地方の大学4年生（文系）
- オンラインのプログラミングスクールで3ヶ月間学習
- 趣味は運動と読書
- 現在、就職活動中
1. 作成したアプリについて【概要と機能】
まず、どのようなアプリを作ったかについては、以下のとおりです。
(1)アプリの概要
(2)アプリの特徴
(3)アプリの機能一覧
(1). アプリ概要
-
自分に合ったお酒を検索、友達やみんなとおすすめのお酒を共有できる Webアプリケーションです。
-
サービス名は『ここ酒』にしました。
※レスポンシブ対応しておりますので、スマホからもご覧いただけます。
※「Google Chrom」「Safari」でのみ、動作確認しています。
20 歳になってから居酒屋や家でお酒を飲むようになりました。
ある日たまたま友達と Bar に入ったところ、
「お酒の種類がありすぎてどれがいいのか分からない。」
「自分にあったお酒やアルコールの度数も分からない。」
「みんなは bar に行って何を飲むのだろうか？」
など様々な困りごとや疑問に直面しました。
この時、
「自分にあった、おすすめのお酒を直感的に選択することで教えてほしい。」
「どんな種類のお酒があるのか知りたい。」
「作り方が分かれば、自分の家でも作ってみんなで飲み比べしてみたい。」
「みんなは普段どんなお酒を飲んでいるのか知りたい。」
といろいろなことを感じました。
それを実現させるために、作成したのが「ここ酒」です。
テスト用アカウント
ログイン画面から↓
- Email:「test@example.com」
- password:「password」
※テスト用アカウントを使わず、新規登録を行なってもらっても大丈夫です。
(2). アプリの特徴
お酒検索機能
① お酒検索・検索結果一覧
フリーワードに入力、お酒のベース、甘口-辛口、度数の選択項目から選択することで、おすすめのお酒を検索してくれる機能を実装しています。
※ログインしていなくても利用可能です。
お酒の検索の時に選択形式をメインとし、初心者でも分かる選択項目(ベース、味、度数)にしました。
※お酒の検索にヒットしなければ、下の画面が表示されます↓
② お酒検索詳細
検索一覧から、出てきたお酒を押すと、そのお酒の詳細画面へと遷移します。
お酒詳細画面では、前半にそのお酒の情報、後半にお酒の作り方を配置し見やすいように工夫しました。
お酒共有機能(SNS)
お酒の投稿機能やいいね機能、フォロー機能を実装しています。
※ログインしていなくても、投稿一覧と投稿詳細は見ることができます。
※お酒を投稿したり、いいね機能やフォロー機能を使う場合にはログインが必要になります。
① 投稿一覧・投稿詳細
投稿一覧画面は、すべてのユーザー投稿を最新の投稿順で表示されます。
また、
- 画像またはタイトルを押すと投稿の個別詳細画面へと遷移
- ユーザーのアイコンまたはユーザー名を押すと、投稿したユーザーのページへと遷移
します。
ハートのアイコンを押すと、いいねすることができます。
※自分の投稿であれば、投稿の右上に三点アイコンが表示され、そこから編集、削除することができます。
② 新規投稿
新規投稿の入力欄が多いことから、名前だけ必須として他の項目は入力しなくても投稿できるようにしました。
投稿のハードルを下げることによって、気軽に使ってもらえれば良いなと考えました。
③ 編集
自分の投稿したものを編集することができます。
新規投稿画面と見た目がほぼ同じになるため、ユーザーが迷わないようフォームの色を変更し、差別化するように工夫しました。
ユーザーページ
ユーザーページに行くと、自分の投稿といいねした投稿を見ることができます。
また、フォローを押すとフォローしているユーザーが表示され、フォロワーを押すとフォロワーのユーザーが表示されます。
(3). アプリの機能一覧
現時点(2022年5月)で作成済みの機能は、以下のとおりです。
お酒検索機能(API | Cocktail -f liquor)
| 機能 | 概要 |
|---|---|
| 検索機能 | フリーワード、ベース、味、度数からお酒の検索が可能 |
| 検索結果一覧機能 | 検索項目から、取得した検索結果一覧を表示 |
| 検索結果詳細機能 | 検索結果の個別詳細を表示 |
お酒共有機能(SNS)
| 機能 | 概要 |
|---|---|
| 投稿一覧機能 | ・投稿された記事が最新順で表示 ・編集画面(自分の投稿のみ)、ユーザーページ、投稿詳細へと遷移可能 ・投稿の削除(自分の投稿のみ)、いいねが可能 |
| 投稿詳細機能 | ・投稿の個別詳細を表示 ・編集画面(自分の投稿のみ)、ユーザーページへと遷移可能 ・いいねが可能 |
| 新規投稿機能 | ・新規投稿が可能 |
| 投稿編集機能 | ・投稿の編集が可能 ・投稿の削除が可能 |
ユーザーページ機能
| 機能 | 概要 |
|---|---|
| ユーザーページ機能 | ・ユーザーのフォロー数、フォロワー数、投稿一覧、いいね一覧を表示 ・表示されているユーザーがログイン中のユーザー自身でなければ、ユーザーをフォロー・フォロー解除するためのボタンが表示 |
認証機能
| 機能 | 概要 |
|---|---|
| 認証機能 | ユーザー登録・ログイン・ログアウトが可能 |
(参考)レスポンシブ対応
全画面対応しています。
2. 作成したアプリについて【技術】
次に、どのような技術を使って、どのような構成で作ったかについては、以下の通りです。
(1). 使用技術
(2). DB設計
(1). 使用技術
フロントエンド
- HTML
- CSS
- jQuery 3.6.0
- Bootstrap 4.6.1
- Vue.js 2.6.11
レスポンシブ対応しやすいように、フレームワークのBootstrapで骨格を作りつつ、デザインはCSSを一から書いていきました。
Vue.jsは、学ぶ対象とはしていませんでしたが、必要に応じて使用しました。（いいね機能、フォロー機能)
バックエンド
- PHP 7.4.27
- Laravel 7.30.6
- MySQL 10.5.13
- composer
言語とフレームワークについて、PHP/Laravelを選定した理由は、スクールで学習した言語であったこと、求人数がPHPは比較的多いと考えたため選びました。また、RDBMSにMySQLを選定した理由は、普及率が高い点を考慮しました。
その他
- PHPMyAdmin
- VSCode
- Git / GitHub
- Xserver
- AdobeXD
(2). DB設計
ER図
作成したER図については、以下のとおりです。
各テーブル
個別のテーブルについて、以下のとおりです。
users table
| カラム名 | 属性 | 役割 |
|---|---|---|
| id | 整数 | ユーザー ID |
| name | 文字列/ユニーク制約 | ユーザー名 |
| 文字列/ユニーク制約 | メールアドレス | |
| email_verified_at | 日付と時刻 | 未使用 |
| password | 文字列 | パスワード |
| remember_token | 文字列/null 許容 | 未使用 |
| created_at | 日付と時刻 | 作成日時 |
| updated_at | 日付と時刻 | 更新日時 |
articles table
| カラム名 | 属性 | 役割 |
|---|---|---|
| id | 整数 | 投稿 ID |
| name | 文字列 | タイトル |
| base | 文字列/null 許容 | ベース |
| taste | 文字列/null 許容 | 味 |
| feature | 文字列/null 許容 | 特徴 |
| material | 文字列/null 許容 | 作り方 |
| comment | 文字列/null 許容 | コメント |
| image | 文字列/null 許容 | 画像 |
| user_id | 整数 | 投稿したユーザーの ID |
| created_at | 日付と時刻 | 作成日時 |
| updated_at | 日付と時刻 | 更新日時 |
likes table
| カラム名 | 属性 | 役割 |
|---|---|---|
| id | 整数 | いいね ID |
| user_id | 整数 | いいねしたユーザーの ID |
| article_id | 整数 | いいねされた投稿の ID |
| created_at | 日付と時刻 | 作成日時 |
| updated_at | 日付と時刻 | 更新日時 |
follows table
| カラム名 | 属性 | 役割 |
|---|---|---|
| id | 整数 | フォロワー・非フォローの ID |
| follower_id | 整数 | フォロワーのユーザー id |
| followee_id | 整数 | フォローされている側のユーザー id |
| created_at | 日付と時刻 | 作成日時 |
| updated_at | 日付と時刻 | 更新日時 |
3. 作成した目的・背景について
続いて、アプリを「どのような目的・背景で作ったか」については、以下のとおりです。
なぜポートフォリオを作ろうと思ったのか
ポートフォリオを作ろうと思った大きな理由は、以下の2点です。
①就職活動時に必要不可欠と考えたため
②ゼロからのアプリ開発を経験することで成長したいため
①就職活動時に必要不可欠と考えたため
私は経歴や学歴が決して高いほうではありません。Fランク大学の文系未経験の学生がエンジニアとして就職したいと考えたときに、どうしても高学歴な学生や理系の学生と比べたら劣ってしまうと考えました。なので私にとって、ポートフォリオを作るということは必須なことなのだと考え、時間が多少かかっても作ることにしました。
②ゼロからのアプリ開発を経験することで成長したいため
ProgateやUdemy、書籍などでひたすらインプットを繰り返していた時期がありましたが、要件定義や設計、エラー解決といった場面に遭遇することはあまりありませんでした。しかし、ゼロからアプリ開発をするとなると課題定義や要件定義、設計や、環境構築、エラー解決などたくさんの問題にぶつかリました。また、それを一つ一つ解決していくことで成長スピードが格段に上がりました。また、自分が作ったものを友達や家族に実際に使ってもらい意見を聞いて修正するという経験もすることができました。
4. 作成時・作成後に考えたことについて
(1). 作成時に意識したこと
(2). 作成時に苦労したこと
(3). 今後の実装予定・課題
(1). 作成時に意識したこと
特に意識したことを挙げると、以下の3点です。
①実務を想定する
②タスクをばらす
③まず終わらせる
①実務を想定する
実務では、一人で開発するのではなくチームで開発することが基本だと教わりました。そのため、スクールのチーム開発で学習したGit/Githubについては、ブランチを切って、プルリクをして機能追加をするようにしました。また、issueに機能追加を登録しておいて、完了したらcloseする手順で、タスク整理をしました。
学習、中盤にGitを学んで以降、その方法で継続してきたので、少しづつ草が生えました。
他にも、実際にアプリを使用してもらった人からフィードバックをもらって、それをもとに機能を追加したり修正したりしました。
②タスクをバラす
『ここ酒』の実装当初は、どこから手をつけていいのか分からずに全然進みませんでした。しかし、それを解決するために、一つ一つを小さく、タスクをバラし優先順位をつけていきました。そうすることで、今やるべきことが明確になったり、タスクを一つ終わらせるごとに達成感を感じれたりと、実装を最初よりかはスムーズに取り組むことができました。しかし、タスクのバラしが不十分で一つのタスクを終えるのにかかる時間を大きく見誤ってしまったり、タスクの優先順位を間違えてしまったりなど様々な問題にもぶつかりました。
エンジニアには、タスクをしっかりとバラして、管理する能力が必要だと学びました。今後、機能を追加したり違うアプリを作ったりするときには、タスクばらしの精度を上げて、タスク完了の予測時間と実際にかかった時間が一致するようにしたいと思います。
③まず終わらせる
『ここ酒』の実装を行なっているときに、デザイン面や機能面などいろいろなところを修正したくなってきます。実際に最初は、自分が納得いかなければ優先順位がそれほど高くないところにも時間をかけて実装をしたりして目的を見失っていました。しかし、このアプリに本当に必要な機能は2つだけで、「お酒を検索できる」「お酒を共有できる」です。このことを思い出し、最低限の機能をまず終わらせてからではないと追加の機能や細かいデザインにはこだわらないと決めました。
実際デプロイが完了した現在も、まだ不十分な機能や見た目のところはたくさんあります。しかし、まず最低限の機能が使えて、人に見てもらえれるレベルに持っていくことを意識しました。
今後も不十分な機能や見た目を修正して、自分の納得のいくアプリに仕上げていきたいと思います。
(2). 作成時に苦労したこと
①バックエンドについて
②フロントエンドについて
③Git/GitHubについて
④デプロイについて
①バックエンドについて
-
Laravelが裏でどういった処理をしてくれているのか、理解が難しく、認証系やお酒共有機能の実装には時間を要しました。理解できなかったことも多かったのですが、参考教材を使ったり、じっくりコードを読みこんでみたり、調べてみたりして、少しずつ大体でも理解できるようにしていました。
-
「Cocktail -f liquor」のAPIを使ってお酒検索機能を実装しましたが、これまで外部APIを利用したことがなかったこともあり、文法的なものや、API通信の仕組みについて理解するまでが難しく感じました。
まず、APIと通信を行うためにGuzzleをインストールしました。
最初は、APIの呼び出し方が全く分かりませんでしたが、様々な記事や公式ドキュメントを参考にしつつ試行錯誤を繰り返しているうちに、少しずつ実装が進んでいきました。
APIからデータは取れているのだけど、どうしてもviewに渡せないといった問題が最後にあったのですが、海外の記事が決め手となって、無事実装に成功することができました。
②フロントエンドついて
-
Vue.jsについて、しっかり学ぶことなく浅い知識のまま使っていたので、エラー解決に苦労しました。
-
フロントエンドのコーディングで一番時間がかかったところは、アプリを開いたときに一番最初に出てくるトップページのところです。ここでは手書き風ローディングや一番後ろの背景に動画を埋め込むことなどjQueryを調べながら実装しました。また、cssでpositionを多用していたため、レスポンシブ対応させるときに細かく調整する必要があったので、苦労しました。
-
お酒検索では、初めAPIで画像も取得することを前提で、フロントを作っていました。しかし、APIの実装をしているうちに、画像はAPIで提供されていないことが分かり、画像がなくても見やすく地味にならないように検索一覧・検索詳細画面のフロントを一から作り直し、二度手間になってしまいました。
③Git/GitHubについて
- Git/GitHubを使用するときに、GUIツールである「GitHub Desktop」を使いました。ブランチを切って、プルリクなど基本的な操作はスムーズに行えるようになってきたのですが、コンフリクトやGitのエラーなどが起こったとき、GUIツールだけでは対処が難しく、ターミナルからGitを操作する必要もありました。そのとき、GUIツールに慣れきっていたので、初めはターミナルでのGitの操作に苦労しました。
④デプロイについて
- 現在レンタルサーバーでデプロイしているのですが、元々このドメインは自分がWordPressで作ったWebサイトを公開しており、まずそれを削除しました。(今考えるとドメインを新しく取得すれば、Webサイトを削除しなくても良かった)
GitHubの設定、必要なパッケージのインストール、データーベースの設定など全てが初めてなので、うまくインストールできなかったり、置かなければいけないファイルの階層を間違えて無駄な時間がかかったり、たくさんの苦労をしました。
(3). 今後の実装予定・課題
①今後の実装予定の機能
②今後の課題
①今後の実装予定の機能
- お酒検索のページネーション機能を実装（現状、検索一覧画面が見えにくくなっている）
- お酒共有機能の新規投稿時のバリデーションエラーの表示（現状、新規投稿時にエラーが表示されず、ユーザーに混乱を招く恐れがある）
- ユーザーページのアイコンを好きな画像に変更可能にする（現状、ユーザーアイコンが全て同じなので、誰が誰だか分かりにくい）
- パスワード再設定機能（この機能を実装しないとパスワードを忘れたときに、アプリのログインできなくなる。セキュリティ的にも危険）
現状思いつくだけでも、まだまだたくさんの改良の余地はあります。他にも見つけた問題や改善箇所をどんどん解決していきたいと思います。
②今後の課題
1. テストコードを書く。
現状では完成を優先させたため、肝心のテストコードが全く書けていません。テストコードについては、PHPUnitやテスト駆動開発について教材で概念を学習し、今度は実務で必須であるテストコードを書きながら開発を進めれるようになるということが今後の課題です。（本アプリについては、後付けでもテストコードを書き足して行きたいと考えています。）
2. AWSでデプロイする。
これも完成を優先させたため、今回はレンタルサーバーでデプロイしました。実務ではインフラにAWSを使うことが主流ということを学びました。インフラの設計や構築についての知識はまだまだ浅いので、インフラの基礎から学習し、最終的には本アプリもAWSでデプロイできるようにしたいと考えています。
3. 土台となる知識全般
PHP、SQL、Linux、ネットワーク、セキュリティ、Web技術などの土台となる知識の理解を深めて、基礎固めすることが大きな課題の一つです。
5. 作成のための学習について
最後に、アプリを作成するためにしてきた学習についてです。
(1). 作成&学習期間
(2). プログラミングスクールを利用した理由
(3). 参考にした学習教材
(1). 作成&学習期間
作成期間（2022年3月・4月）
- Laravelでのポートフォリオ作成については、2022年3月と4月の2ヶ月間です。初めの1ヶ月間はスクールの最終課題としてチーム開発で作りました。しかし、その時は機能が不十分、デザイン崩れしている、レスポンシブ対応できていない、デプロイできていないなど様々な問題がありました。そのままスクールを卒業となりますが、せっかく作ったのだから完成させたいと思い、スクール卒業後の1ヶ月間で個人開発を行い、機能の追加や拡張、デザイン修正、レスポンシブ対応、デプロイし完成させました。
学習期間(2022年1月~)
- HTML・CSS・jQuery・WordPressの学習は独学で半年程行っていましたが、バックエンドエンジニアの学習は、オンラインのプログラミングスクールに入校し2022年1月から開始しました。プログラミングスクールの内容は、3ヶ月間で主にPHP/Laravelを週/8時間オンラインの複数人授業形式でした。
- 現状、学習開始から1日も休まずに学習を継続しています。本気でエンジニアになりたいと思い、学習開始から1日の大半をプログラミングの勉強に当ててきました。
↑上の画像は、スクールで提供された学習記録表であり、2022年1月10日~4月28日まで、毎日の勉強を記録してあります。総学習時間は787時間で、1日の平均学習時間は、7時間を超えていました。(2022年4月28日現在)
(2). プログラミングスクールを利用した理由
最短ルートでバックエンドエンジニアの学習を進めたかったため
- 私は、HTML・CSS・jQuey・WordPressの学習をスクール入学前の半年程独学で勉強してきました。そのとき、最短ルートで学習をするのではなく、あまり意味のない学習もたくさんしていました。(Progateを何十周も周回するなど)また、2022年の4月から大学4年生になり、就職活動を始めていく中であまり時間もなく、できるだけ無駄がなく最短で勉強したいと考えプログラミングスクールを利用しました。
スクールで提供されていたチーム開発が魅力的だったため
- プログラミングを勉強していく中で、個人開発をずっとしてきました。しかし、エンジニアは個人で開発するよりも、チームで開発することが一般的だということ知り、就職前に一度経験してみたいと感じました。実際スクールでチーム開発を経験し、中でもリーダーを任せていただき個人で学習を進めていくだけでは学べないことをたくさん学ぶことができたと思います。
(3). 参考にした学習教材
メインは、スクールの学習教材を使用して学習を進めていましたが、ポートフォリオやスクールの教材以外で使用した教材は、以下の通りです。
- 独学エンジニア
- paizaラーニング
- Udemy
- Techpit
- 書籍
-
Qiita
- このQiitaの記事は、@ryamateさんの記事の構成を参考に作成しました。
さいごに
まず、プログラミンの勉強やWebアプリを作ることはとても楽しいです。
しかし、エンジニアとして今後やっていくには、まだまだたくさんのことを理解して使いこなせるようになる必要があるのだと実感しました。
就職活動中ですが、これから採用をいただく会社で、実務で自走できるエンジニア、価値を与えることができるエンジニアとなれるよう、一つ一つ着実に前進していきたいと思います。
これからまだまだ、ポートフォリオや自分自身の技術力を上げるために勉強していきたいと思います。
最後までお読みいただき、ありがとうございました。