[学生時代のポートフォリオ1] 文章で繋がれる完全SPAのSNSアプリ

注意！！！

• 現在このアプリケーションは動作しておりません
• 学生時代に作成したものです

サンプルアプリのURLはこちらから↓

ユーザー名１：[email protected]

ユーザー名２：[email protected]

パスワード：password

でテストユーザーとしてログインできるので是非お試しください！

現在、いたずら防止のため、ユーザー登録のメール認証は停止しております。

恐れ入りますが、サンプルユーザーでのログインをお願いします。

コードはこちらから↓

LaravelとVue.jsを使い、これまでの技術の総復習のために制作いたしました。

文章を共有するサービスははてなダイアリーやnoteなどが有名ですが、「文章を書いた人と話してみたい」という思いがいつもあり、そんなサービスを作ってみたいと思い制作しました。

極力色の少ないモノトーンのデザイン、文章を書くことを邪魔しないデザインを心がけました。

ER図

使用した技術

フロントエンド：

• 言語：Javascript
• フレームワーク：Vue.jsによる完全SPA化
• CSSフレームワーク：Material Desgin for BootStrap
• リッチテキストエディタ：VueEditer2

バックエンド：

• 言語：PHP
• フレームワーク：Laravel
• テスト：PHPUnit
• データベース：Mysql

インフラ：

AWS EC2, S3, Route53, VPC, Nginxなど

開発環境：

Docker、Docker-compose

CI/CD：

CircleCIによる自動テスト、デプロイ

その他：

外部サービスPusher, Laravel Echo, LaravelのBroadcast機能を使用してリアルタイムチャット機能を実装しました。

機能：

ユーザー機能：

登録、ログイン、メール認証機能、プロフィール編集

タイムライン機能：

タイムラインの投稿、いいね

作品：

作品の執筆、編集、削除、コメント、ブックマーク、ジャンルやブックマークの数で並び替え

チャット機能：

メッセージ付きでチャットリクエストを行い、承認されれば自動的にチャットルームが作成されます。チャットはリアルタイムチャットを実装しています。

工夫した点、拘った点、成長した点：

まず、LaravelとVue.jsの連携や、メール認証、ブロードキャスト機能など一般的な入門教材には載っていない機能を充実させたので、公式のドキュメントを読み込む力や、検索スキル、エラーの向き合い方など、多くの知識を得ることができたと思います。

今まで作成した中で最も大きい規模のアプリだったので、1からアプリを設計する力が身につきました。

これまではHerokuを用いてデプロイをしてきましたが、実践的な力を身につけるためAWSで自力でインフラを構築し、その後は修正などに集中するためCircleCIの自動デプロイまで実装しました。

デプロイ先を間違えてアプリが全く動かなくなったり、思いの外AWSの金額が高額で驚いたりと、単純なプログラミングだけでは経験できない貴重な経験をさせていただきました。

反省点：

アプリ全体の規模を大きくしすぎたため、実装に時間がかかったこと：

当方生物系の学生であるため、研究などの両立に苦戦して半年間という時間がかかってしまいました。やはりアプリは小規模から始めることが大切であるなと実感しました。

Vue.jsコンポーネントの使用：

前回のアプリよりはコンポーネントの再利用などを心がけましたが、もし次にVueを使用する機会があれば、一番はじめにどこをコンポーネント化するのかを考えてから作るほうが混乱しづらいなと思いました。

今後の予定：

本来ならばSSL化までやりたかったのですが、AWSのELB の費用の都合上、一旦保留としています。

自動テストをより充実させる

リアルタイムチャットのページネーション機能

初期読み込みの高速化

など