はじめに
プログラミングの学習を始めて3ヶ月程度で基礎的な理解ができたので、オリジナルアプリを作りました。
本記事ではオリジナルアプリの概要と、どのように取り組んだかを解説しております。
これからポートフォリオを作ろうと思っている方にも参考になれば幸いです。
どんなアプリ？
ブリードした爬虫類の個体をWebサイトに載せるための投稿&管理アプリです。
説明とかいいからはよ触らせて！という方は、以下のURLからどうぞ。
ALBINO MANIA | ヒョウモントカゲモドキ（レオパードゲッコー）のブリーディング・小売・卸
※現在はユーザー画面のみの公開としています。
※初めて作ったオリジナルアプリで、完成度も100%ではありません。孫を見守るおじいちゃんのような優しい目で見ていただければと思います。
ポートフォリオ制作時のレベル感
事前学習：3ヶ月(約250時間)程度
- HTML/CSSの学習(約100時間)：SASSを使って基本的な模写・レスポンシブができる程度
- PHP：文法を理解して基本的なアルゴリズムを組める(paiza Cランク程度)
- Laravel：基本的なCRUD機能を実装できる程度
- Docker：Udemyの教材にて学習
- Git/GitHub：push/pull/clone等の初歩的な操作
- AWS：Udemyの教材にて学習
- その他：SQL・jQuery等(Progate)
開発期間
3ヶ月(約300時間)
使用技術
フロントエンド
HTML/CSS(SASS)
バックエンド
PHP：7.4.13
Laravel：6.20.17
Google Maps API
開発環境
Docker/Nginx/MySQL(LEMP環境)
インフラ
AWS( EC2, ELB, S3, RDS, Route53, VPC, IAM )
現在は予算の都合上、Herokuにて公開中です。
レンタルサーバーにて本番運用中
ソース管理
Git/GitHub
開発背景
兄が爬虫類のブリーダーを始めた際に、WordPressを使いWebサイトにアップしていました。
しかしWordPressではカスタム性が悪く使いづらいといった課題があり、それを解決しようと思いポートフォリオのテーマにしました。
また、他にもいくつか作りたいものはあったのですが、
- 身近に必要とされている
- 必要な機能が実装できそう(ブログアプリの応用)
といった点で今回のアプリ開発に至りました。
アプリの概要イメージ
トップページ
個体詳細ページ→個体名自動入力→お問い合わせフォーム
CRUD(管理画面)
複数条件での絞り込み・検索・並び替え(管理画面)
個体の生息地をGoogleMapで表示
レスポンシブ対応
機能一覧
- 個体の投稿/表示/編集/削除
- 個体の絞り込み
- 個体の検索
- 個体の並べ替え
- 複数条件での絞り込み検索
- フォームバリデーションエラー表示
- お問い合わせ内容修正時の入力内容保持
- お問い合わせフォーム メール送信&データベース保存
- 管理者ログイン
- ページネーション機能(検索・絞り込み時も保持)
- パンくずリスト
- 個体名自動入力(個体ページからお問い合わせページへの遷移時)
- 個体の生息地をGoogleMapと表示機能(API使用)
設計概要
設計で作成したものを一部紹介します。
エレベーターピッチ
使用ツール：PowerPoint
アプリの概要をフォーマットに沿って短文で説明したものです。
ユーザーストーリーマッピング
使用ツール：Excel
アプリの機能を視覚的に確認するためのものです。
また、実装優先順位をつけることで効率的に開発ができます。
ワイヤーフレーム/画面遷移図
使用ツール：Adobe XD・Overflow
Overflow | User flows done right
デザインは素人なので必要なデザインカンプは作らず、ワイヤーフレームからコーディングし後から細かいデザインを固めていきました。
ER図
使用ツール：Lucidchart
https://www.lucidchart.com/pages/ja
データベースの設計図です。
設計が固まらず何度も修正いたしました。
データベース定義書
使用ツール：Excel
データベースの設計書です。
こちらも同様に何度も修正しました。
画像のような表を全テーブル分延々と作ります。エクセル得意でよかった。
インフラ構成図
EC2インスタンスは無料枠(Amazon Linux2)を1台構成で費用を抑えています。
データベースはプライベートサブネットにRDSを置き、画像ファイルはS3に保存するベーシックな構成となっています。
※現在はAWSでの公開は終了しています。
開発で意識したこと
要件定義から一通りやってみた
「この程度のアプリに設計なんて効率悪くね？w」と言われてしまいそうですが、目的が一連の開発工程を勉強するためでもあるので調べながら時間をかけてやりました。
ユーザー視点を持ち、UIにも時間を使った
実際にリリースする前提なので、ペットの検索サイトやお弁当屋(ほ○とも○と)のメニューのページなどを見てUIを研究しアプリに取り入れました。
自走力をつけるとこを意識した
具体的には以下の3点です。
- 分からないことは可能な限り自力で調べ解決を試みた
- 公式ドキュメントを常にブラウザで開いておき見る癖をつけた
- メンターに質問する際は、解決までのプロセスをチェックした(デバッグの方法や、エラー文の読み解き方など)
開発で苦労したこと
技術面
画像の編集/削除 機能
画像を削除する際、DBには画像のパスを削除すると同時に、実際の画像データを保存している場所からも削除する処理に苦労しました。タグ付け機能
中間テーブルを挟み多対多のリレーションをしましたが、データの出し入れの書き方が分からず苦労しました。管理者ログイン機能
ユーザーログインも今後実装する可能性があることからマルチ認証を前提に実装を進めていったら、かなりエラーに悩まされました。
結果的に一箇所adminと書く所をuserと書いていただけでした(笑)
メンタル面
丸一日作業しても全然進まなかった日は心が折れかけました。
家族に弱音を吐いたり、毎日参加している勉強会で相談したりと、周りの方々に支えられた部分が多くあります。(皆さまありがとうございましたm(_ _)m)
今後実装したいこと
HTTPS化
CI/CDパイプラインの構築
テストコード
一連の開発工程という意味ではこちらも必須JavaScriptを使い、UI/UX向上
個体の画面の拡大や、SPA化などにも挑戦したい
使用した教材等
書籍：PHPフレームワークLaravel入門 第2版 | 津耶乃, 掌田 |本 | 通販 | Amazon
Laravel青本と言われる定番の書籍！公式ドキュメントが読みにくい初学者にとって噛み砕いて説明されているので重宝いたしました。
Docker：米国AI開発者がゼロから教えるDocker講座 | Udemy
Docker初学者にも非常に分かりやすく体系的に学べる内容でとても良かったです！
環境構築：最強のLaravel開発環境をDockerを使って構築する - Qiita
こちらの記事を参考にDockerの環境構築をいたしました。補足説明も充実しててオススメです！
AWS：ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得
ES2などのAWSの主要なサービスを使い、インフラの基礎的かつ実践的な内容を学べます。情報のアップデートにも対応されていて個人的には書籍より良いと感じます！
Laravel公式ドキュメント：ReaDouble
常にブラウザで開いてたやつです。早くお友達になりたい。
その他にも多くの先人達の軌跡(Qiitaなど)に頼って開発を進めてきました。
先人は偉大だ。
さいごに
最後までお読みいただきありがとうございました。
現在ポートフォリオを改善しつつ都内を中心に転職活動中です。
もしもこの記事を読んでご興味を持っていただける企業様がいらっしゃいましたら、TwitterのDM等でご連絡いただけたら幸いです。
↓
都内の自社開発企業様に内定をいただき、2021年5月よりエンジニアとして開発業務に従事しております！諦めず一歩ずつ進めてきて本当に良かったと感じています。
また、この記事を機にヒョウモントカゲモドキに興味を持っていただけたら嬉しいです。
ペットをお探しでしたら是非ALBINO MANIAへ！笑
良かったと思ったらLGTMしていただけると嬉しいです！