はじめに

現在エンジニアを目指して勉強中です。
ポートフォリオを作成したので、
これまで、開発に使用した技術や
アプリ完成まで道のりなどをまとめました。

成果物

Urehitter

背景

友達が楽しく嬉しそうに話していると、
私もなんだか幸せな気持ちになります。
世の中の人たちも、嬉しい話しを聞けば、
「みんなの心も、もっと幸せになるのではないか」と思い、
このアプリを作成する事にしました。

ユーザーが抱える問題

嬉しいことがあったのに、身近に共有できる人がいない！
文章だけ読んでも、どれくらい嬉しいのかわからない！
という人たちの、問題解決を目指します。

メインのターゲットユーザー

嬉しかったことを共有したい人
他人がどんなことに、嬉しかったか知りたい人

解決方法

嬉しかったことを書き込めるSNSを作成します。
少しだけ嬉しかったのか、すごく嬉しかったのか、
嬉しかった感情表現の度合いも表せます。
このアプリを使えば、嬉しかったことを共有できます。

アプリ概要

作成したアプリ「Ureshitter」の機能はシンプルです。
機能としてはメッセージ＆感情の投稿と、メッセージ一覧表示、
メッセージ削除とツイート機能です。

なぜ、ログイン機能やリレーションを行っていないかというと、
今まで機能が複雑なアプリを作成しようとしましたが、
何回も途中で挫折してきてしまいました。

今回は機能をできるだけシンプルにして、
アプリの設計からデプロイまで完成させるというのが、
このアプリを作成し始めた動機でもあります。

デプロイ先(さくらVPS)での主な使用技術

PHP 8.1.2
Laravel 9.40.1
Vue 3.2.45
Node.js 18.12.1 LTS
npm 8.19.2
Bootstrap 5.2.2
Ubuntu 22.04.1 LTS
Nginx 1.22.1
MySQL 8.0.32
GitHub Actions

ER図

アプリの機能をシンプルにすることと、
嬉しかったことを、すぐに書き込みできるように、
わざとログイン機能などは実装していません。
なのでテーブルはひとつのみと、シンプルになっています。

テーブル設計

嬉しかったことテーブル

カラム論理名	カラム物理名	型	型の意味
メッセージID	id	BIGINT UNSIGNED	連番（自動採番）
名前	name	VARCHAR	文字列
感情の強さ	emotion	INTEGER	数値
メッセージ内容	message	TEXT	テキスト

セキュリティ

セキュリティに関わる事なので、詳しいことは書けないのですが、
Webアプリを公開するにあたって、基本的なセキュリティ対策は施しました。

アプリ完成までの道のり

2022年下旬～2023年2月上旬の間に、
ラフスケッチからデプロイまで行いました。

ラフスケッチ、設計

2022年11月下旬
まずはノートにラフスケッチを描きました。
たくさんのページを描いてしまうと、途中で挫折すると思い、
トップページ、メッセージ投稿成功ページなど、
絶対に必要なページのみ描きました。

フレームワーク、プロトタイプの作成

12月上旬
ラススケッチだけでは作成したいアプリの、
イメージが中途半端なのでFigmaにて
ワイヤーフレームとプロトタイプを作成しました。
プロトタイプを作成し終わったとき、
「このアプリなら作れそうだな」と思い、
引き続き、実装も進めました。

作成したワイヤーフレーム

作成したプロトタイプ

開発環境構築

12月中旬

XAMPPやlaradockなど色々使ってみました。
その中で @ucan-lab さんが作成された、開発環境がすごく使いやすかったので、
この開発環境を使わせていただくことにしました。

実装

12月中旬～2023年1月下旬
WSL2からdockerを使用して、実装を行いました。

SPAの実装をするためVue3を使い、
状態管理にはPiniaを使いました。
Piniaはすごく使いやすいです。
Vuexで理解することが難しかったところが、
比較的わかりやすく、実装することができて良かったです。

インフラ環境構築

1月下旬～2月中旬
以前、AWSのEC2やRDSを使用していました。
その経験を活かして、今回はさくらVPSを使うことにしました。

さくらVPSでは、どのOSを使えばいいのか迷ったので、
CentOS7、AlmaLinux、RockyLinux、Ubuntuを触ってみました。
最終的に開発環境のWSL2にも使用しているUbuntuにしました。
開発環境と本番環境が同じOSなら、学習コストも下がるからです。

デプロイ

2月中旬
CI/CDにはGitHub Actionsを使いました。
GitHub Actionsは使いやすいです。
2019年にリリースされたということで、
まだ情報は少ないですが、
使いこなせばテストとデプロイを
自動で行ってくれるようにできます。

おわりに

当初の「アプリの設計からデプロイまで完成させる」という目標が達成できて良かったです。

実装中、Vue router3とVue router4、VuexとPiniaなどの違いには悩まされました。
検索して表示される記事の内容が、自身のバージョンと合うかどうか
見極めることが鍛えられました。

インフラ環境を構築する際、
ひとつひとつのモジュールやディレクティブの扱い方と、
意味を理解するのに苦労しました。

今後に向けて

アプリ作成は、今後も引き続き行っていきます。
まずはログイン機能やリレーションを取り入れ、
徐々に機能が複雑なアプリを作成していきます。

以上です。
ここまで読んでいただき、ありがとうございました。