【AWS/Docker/CircleCI/Laravel/Vue.js】独学でポートフォリオを作成してみた

はじめに

初めまして！NULLと申します😊
SIer企業のプログラマーとして約11ヶ月間の経験がある僕が、自身のスキルアップとWebエンジニアへのキャリアチェンジを目指して実務で経験のない技術を使ってWebアプリを開発しました。

バックエンドはLaravel、フロントエンドにVue.js等、インフラ技術にDocker、AWS、CircleCIといった構成です。

学習開始から現時点までにおいて、プログラミングスクール等には通っておらず、学習はすべて独学で進めてきました。
独学中心でWebアプリ開発に挑戦したい、ポートフォリオを作成してWebエンジニアへのキャリアチェンジを進めていきたい、と考えている方々のお役に立てれば嬉しいです。

自己紹介

• 未経験からWebエンジニアへの転職を目指しています(2021年の半ばから学習開始)
• 独立系SIer企業のプログラマー
• 朝４時起き、週6ジム、週20食の自炊を継続中

開発アプリ概要

日々のタスクを『SENGEN』することで、ユーザーのタスク達成をサポートするSNS型ToDo管理アプリです。

URL: https://to-do-sengen.com
GitHub: https://github.com/NULL-000000/laravel-vue-app

・ゲストログイン機能搭載

・レスポンシブWebデザイン（PC推奨）

コンセプト

• 目標を宣言することによるプレッシャーを有効活用し、ユーザーの目標達成をサポートする
• 『SENGEN』を達成するまでの過程をユーザー同士で共有し、お互いに高め合う環境を提供する

特徴

• 『SENGEN』を達成するまでの努力過程を発信、共有できる
• 『SENGEN』投稿をカテゴリ別で表示する
• 『SENGEN』を達成できた要因や、失敗した原因の分析結果を発信、共有できる

開発した背景

大学生から社会人になるタイミングで自分の生活を大幅に改善したいと思い、2021年4月に朝活と筋トレの習慣化を決意しました。

早起きや食事制限は、かなり挫折率の高いものだという認識があったので、挫折を防ぐために

• 毎日６時起床
• 年内に体脂肪率1桁

という目標を周りに宣言し、朝活と筋トレの様子をInstagramやTwitterで発信しました。

目標を宣言したことにより、

『もしも目標を達成できなかったら、自分は周りからの口だけの人間だ思われてしまう』

というプレッシャーが生まれ、今までの自分では考えられないくらい行動量が倍増しました。

その結果、

• 朝活と筋トレの習慣化
• 毎日４時起床
• 体脂肪率9.8％（体重マイナス８キロ）

これらを達成することができました。

こうした経験から、目標を周りに宣言することで生まれるプレッシャーを有効利用し、ユーザーの目標達成及び努力の習慣化をサポートしたい、という思いでアプリを作成しました。

使用画面のイメージ

使用技術

• フロントエンド
  • Vue.js 2.6.12
  • jQuery 3.4.1
  • HTML / CSS / Sass / MDBootstrap
• バックエンド
  • PHP 7.4.25
  • Laravel 6.20.41
  • PHPUnit 8.0
• インフラ
  • AWS ( EC2, ALB, ACM, S3, RDS, CodeDeploy, SNS, Chatbot, Route53, VPC, EIP, IAM )
  • Docker 20.10.11 / docker-compose 2.2.1（開発環境）
  • Circle CI 2.1
  • nginx 1.12.2
  • MySQL 5.5.68

インフラ構成図

DB設計

ER図

各テーブルについて

テーブル名	説明
users	登録ユーザー情報
follows	フォロー中/フォロワーのユーザー情報
articles	ユーザー投稿情報
achievements	ユーザー投稿の達成チェック情報
tags	ユーザー投稿のタグ情報
article_tag	articlesとtagsの中間テーブル
likes	ユーザー投稿のいいね情報
comments	ユーザー投稿のコメント情報

機能一覧

• ユーザー登録関連
  • ユーザー登録・ログイン・ログアウト
  • ゲストログイン機能
  • Googleアカウントを利用したユーザー登録・ログイン機能
    • GCP（Google Cloud Platform）のOAuth認証
  • Twitterアカウントを利用したユーザー登録・ログイン機能
    • TwitterのOAuth認証
  • プロフィール編集機能
  • メールアドレス変更機能（SendGrid）
  • パスワード再設定・変更機能（SendGrid）
• ユーザー投稿機能（CRUD）
• SENGEN達成のチェック機能（CRUD）
• ランキング機能
  • ユーザー投稿達成数
  • ユーザー投稿タグ数
• ページネーション機能
• コメント機能（CRUD）
• タグ機能（Vue.js / Vue Tags Input）
• いいね機能（Vue.js / axios）
• フォロー機能（Vue.js / axios）
• 検索機能
  • キーワード検索
  • ソート検索（昇順、降順、いいね順、コメント数順）
  • カテゴリ検索
    • ユーザー投稿一覧画面（すべて、宣言中、達成、失敗）
    • ユーザー詳細画面（SENGEN、いいね、フォロー、フォロワー）
• 画像アップロード機能（AWS S3バケット）
• お問い合わせ機能（SendGrid）
• PHPUnitテスト
• レスポンシブWebデザイン
  • ハンバーガーメニュー（Vue.js / axios）

作者

• Kakeru Sasaki
• Twitterアカウント：NULL/ナル@IT業界1年生