#目次
技術
アプリの詳細
使用方法
参考書籍や記事
今後は
#自己紹介
27歳
プログラミングの実務経験なし。在学中に行ってたインターンのECサイトを用いた事業立案コンテストで、「自身にプログラミングスキルがあればビジネスを作ることができる」という考えが思い浮かんだのをきっかけにWeb技術に興味を持ちました。
以前独学でRubyOnRailsを用いてオリジナルアプリを作成して転職活動を行い、PHPで開発をしている自社・受託開発会社から内定を頂いたものの、入社してみると開発案件自体が存在せず社内業務も既存社員で全て回っている状態で止むを得なく退職する経験をしました。その悔しさもあり、開発業務に従事したいという気持ちがより一層強まりました。
#####関連リンク
今回のアプリで2作品目となります。
前作リポジトリ
#技術
フロントエンド
| 使用技術 | 詳細 |
|---|---|
| Nuxt.js 2.15.3(SPA mode) | フロントエンドフレームワーク |
| Vuetify | UIコンポーネント |
| Jest | テスト(Vuexに値が保存されているかを確認するテスト) |
バックエンド
| 使用技術 | 詳細 |
|---|---|
| Rails6.1.3(API) | APIサーバーとして利用。フロントエンド側からのリクエストに対してJSONで返す。 |
| PostgreSQL13.3 | データベースとして利用し、本番環境ではRDSに保存。画像データはActiveStorageでURLを生成して、S3バケットに保存する。 |
| Rspec | request/modelの部分をテスト |
| Rubocop | コードを解析して、必要に応じて自動でリファクタリングする。 |
インフラ周り
| 使用技術 | 詳細 |
|---|---|
| ECS(Fargate) | Dockerコンテナ環境を構築 |
| RDS | 本番環境（PostgreSQL13.3）/画像以外のデータを保存 |
| S3 | ActiveStorageを用いて画像データをS3バケットに保存 |
| Route53 | オリジナルドメインを登録する目的 |
| ACM(AWS Certificate Manager) | お名前.comからドメインを取得して、Route53で作成されたNSレコードをお名前.comのDNSサーバーに登録 |
| CloudWatch | フロントエンドとバックエンドのログを確認 |
| SSM(AWS System Manager) | 本番環境の環境変数を管理 |
| Docker/docker-compose | docker-composeではローカルの開発環境を構築して、DockerはDockerfileを開発/本番環境それぞれ分けて作成 |
| CircleCI | 自動テスト・デプロイ |
| Terraform | インフラ環境をコードで管理 |
全体設計
ER図
#アプリの詳細
最新の技術や開発ツールをレビューし関連する勉強会やイベントを催すことで、同じような技術を用いるエンジニア同士の交流を行うことを目的としたメディアアプリです。
####開発背景
- リモートワークが増えて外出する機会が減った分、対面でのエンジニア同士での交流の機会が減った
- compassやtechplayで勉強会やカンファレンス等のイベントが日々催されているが、200人〜300人規模と人数規模が大きすぎるがあまり、本質的な"交流"という目的を果たせない。
- 初学者や駆け出しエンジニアの参加障壁が高い
- 記事の内容とイベントを紐づけることで、どのような勉強会・交流会なのかがイメージしやすい
- 記事を書くことで技術力証明にもなり、採用活動を行なっている方々が求めている人材とイベントを通じて知り合える
####作成期間
3〜4月
・ポートフォリオのテーマの考察、nuxt.jsのVuexやVuetifyの使い方を学習
5月
・ユーザー認証機能、詳細ページ
6月
・記事投稿機能、いいね・コメント機能
・イベント・勉強会作成機能
・管理者ページ
7月
・イベント詳細/チャット機能
・タグのフォロー機能
・検索機能
〜8月中旬
・terraformでのインフラの構築
・CircleCIでの自動テスト/デプロイ
#使用方法
####機能一覧
| 機能 | 説明 |
|---|---|
| ユーザー周り | 新規会員登録・ログイン・ゲストログイン(ゲストログインのボタンを押すだけでログインできます。)、タグのフォロー機能 |
| 記事投稿機能 | レビュー記事の投稿・編集・削除 |
| いいね機能 | レビュー記事へのいいね機能 |
| 記事へのコメント機能 | レビュー記事へのコメント機能 |
| イベント開催機能 | レビュー記事に関する勉強会・イベント開催機能 |
| イベントへの参加機能 | イベントへの参加機能 |
| イベント内のコメント機能 | 参加しているイベント内でのコメント機能 |
| タグ機能 | ユーザー・レビュー記事・イベントに対するタグの紐付け |
| タグのフォロー機能 | フォローしたタグをユーザーの詳細ページ内に表示する |
| 検索機能 | ユーザー・レビュー記事・イベント・タグの検索機能 |
| 管理者機能 | ユーザー・レビュー記事・記事へのコメント・イベント・イベントへのコメント・タグの編集・削除機能 |
ログイン・会員登録
右上の[ログイン]を押して、[ゲストユーザーでログイン]を押すと、ログインが完了して右上にプロフィールアイコンが表示されます。
会員登録では、VeeValidateを用いて、必要事項を満たした入力がされた場合のみユーザーが登録できるようになっています。
検索
メニューの[検索]を押してください。ユーザー・レビュー記事・イベント・タグの検索ができます。
プロフィール編集
メニューの[プロフィール編集]を押してください。プロフィールの編集では、ユーザー情報の編集、パスワードの変更ができます。
プロフィール詳細
プロフィールアイコンを押してメニューの[プロフィール詳細]を押してください。プロフィールの詳細、レビュー投稿記事、主催イベント、参加イベントを閲覧することができます。
1.円グラフでは、投稿記事・お気に入り記事・イベント・参加イベントにあるタグの数を集計して、ユーザーの技術傾向を表示しています。
2.プロフィール詳細内にあるタグを押してみましょう。タグの詳細が表示されて、タグに紐づけられた記事やイベントが表示されます。また、タグのフォローをすることができます。
投稿レビューを押すと、ユーザーが作成した投稿一覧を確認することができます。構成は以下の通りです。
お気に入りレビューを押すと、ユーザーがいいねした投稿一覧を確認することができます。
投稿詳細ではマークダウンを用いて記事を書いたり、記事へのコメントの投稿もできます。
(1)
(2)
イベントの閲覧・編集
イベント一覧では、主催イベントの詳細の閲覧・編集を行うことができます。
イベントの詳細では、参加者の確認・掲示板でのメッセージのやりとり・イベントのキャンセル(主催者以外)ができます。
参加イベント一覧では、他ユーザーが主催しているイベントの参加リストを確認することができます。
検索機能
ユーザー・レビュー記事・イベント・タグを検索することができます。
#参考書籍や記事
| 書籍・Web記事 | コメント |
|---|---|
| ポテパンキャンプ | わからないエラーを解決するというよりは、実務ベースでのコードの作法を学ぶために利用させて頂きました。深夜1時半辺り(土日は深夜2時まで)コードレビューしていただいた際は感動で涙が出そうでした。 |
| Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発 単行本（ソフトカバー） | Vuexの概念を理解するために使いました。 |
| Vuetify公式サイト | デザイン面が一番苦戦しましたが、Vuetifyのおかげである程度形を整えることができました。 |
| 独学プログラマ | Rails × Nuxt.js × Dockerの環境構築とログイン機能の実装で参考にさせて頂きました。 |
| Nuxt.js + Ruby on Rails + AWS Fargate の開発・デプロイチュートリアル | 初めてフロントエンドとバックエンドをECR(Fargate)で構成することになったので、全体外観の理解のために参考にさせて頂きました。 |
| Ruby on Rails 6 実践ガイド | メソッドの書き方、モデル設計、Rspecのテストコードの書き方で参考にさせて頂きました。 |
| 実践Terraform AWSにおけるシステム設計とベストプラクティス (技術の泉シリーズ（NextPublishing）) オンデマンド (ペーパーバック) – 2019/9/20 | Terraformのコードレシピ集です。ECS(Fargate)でインフラを構築する上で助けとなりました。 |
| terraform公式サイト | 書き方と実際の動きが動画で確認できるので、要所を掴みやすいと思います。 |
| Ruby on Rails × Terraform × ECS × GitHub Actionsで快適なデプロイ環境（CI/CD）を構築する | ファイル群のディレクトリ構成で参考にさせて頂きました。 |
| JavaScript コードレシピ集 単行本（ソフトカバー） – 2019/1/25 | JavaScriptの文法でわからない箇所は、Qiitaとこの書籍で9割方解決します。 |
| CircleCI実践入門──CI/CDがもたらす開発速度と品質の両立 WEB+DB PRESS | Qiitaの記事等と併用して理解を深めました。 |
| Docker/Kubernetes 実践コンテナ開発入門 | 詳細な解説で、今回のポートフォリオの作成では、3~4書ほど読む程度で十分でしたが、EKS(kube8s)の開発をする際には全て読み切ります。 |
#今後は
ポートフォリオの作成は一段落ついたので、転職活動に重点を置きたいと思います。時間に余裕ができたら既存のポートフォリオにTypeScriptを加えたり、Reactの作品も作る予定です。
最後まで閲覧していただきまして有難うございます。
記事執筆にあたって参考にさせていただいた投稿記事