🍜

私のポートフォリオ「上京しても地元麺」について

2023/06/24に公開

Ruby

個人開発

ポートフォリオ

idea

こんにちは！わいわわです。
最近は基本情報技術者試験の勉強と転職活動に取り組んでいます。
いいご縁をいただいた暁には、その企業に沿った勉強を発信していきたいと思います。
（とりあえず明日からはOracleについて学習をしていくつもりです。）

本日は私が転職活動で使用しているポートフォリオである
上京しても地元麺について、書かせていただきます！

PF「上京しても地元麺」

2023年2月　DMM WEB CAMP入学
4月中にポートフォリオの作成を行いました。
そのため、2か月間学習してそのアウトプットになります。

2か月間のうちに学習したのは主にRuby on Rails。
このポートフォリオもRuby on Railsを使用して作成しました。

制作までの流れ

設計
1.基本設計
2.画面設計
3.DB設計、詳細設計
テーマや機能の洗い出し、画面遷移図やER図を作成しました。
　↓
実装
機能リストに沿って実装を開始。
また、Bootstrapでデザインを意識し、
チャレンジとして
・Maps Javascript API
・コミュニティ機能
・ワード検索機能
の作成までの実装を目指しました。
　↓
テスト、デプロイ
1.AWS設定
2.nginx、puma設定
3.Rspecでのテスト（一部）
4.デプロイ

※その後、インフラの構築を学びAWSでインフラを再構築しています。
この工程を約1カ月でスケジューリングし、取り組みました。

テーマ選定

このテーマを選んだ理由
地元（福岡）で毎日のように食べていた豚骨ラーメンが
上京した際に恋しかった経験から、

・東京周辺の「地元の麺」を提供しているお店を簡単に調べることができる
・有象無象のレビューではなく、検索者と同じ地元の人のレビューが見れるサイトならより欲しい情報が手に入る

ようなレビューサイトを作ろうと思いました。
また、

・その地元と関連のない人が「縁がなければ食べない」という状況がもったいない
・地元の麺類について、近くに語る人がいない

という２点も解決できるような機能を持ったレビューサイトに挑戦したいと考えました。

レビューサイト×好きなものである麺　ですね。

一見、ありきたりなサイトに見えますが、
・東京および関東周辺で
・地方の麺類を提供するお店のレビューサイト
は今までなかった選定なのかなと思います。

サイト概要・機能面

サイト概要
東京および関東周辺の地元麺（ラーメン・うどん・そばなど）の投稿・それに対するレビューサイト
ex) 博多豚骨ラーメン・愛知味噌煮込みうどん・山形冷たい肉そばなど

・ターゲットユーザー
地方から東京へ移動してきた方で、地元の麺類のお店を探している人
東京にいながらも地元の好物の麺類について語れる場所が欲しい人

機能面

マイページログイン
マイページログアウト
ゲストログイン
退会機能
投稿機能
投稿検索機能（タグ検索）
投稿検索機能（ワード検索）
レビュー機能（Raty）
マップ表示機能（Google maps API）
コメント機能（非同期通信）
いいね機能（非同期通信）
管理者ログイン機能、管理機能
コミュニティ機能
AWSにてインフラを構築（上記「設計書」内に記載）

特にRatyや検索機能は、難しかったイメージです。
学習できていない部分は自ら調べて実装していく中で、
Ratyは最近更新されていた部分があり文献があまりありませんでした。

何とかみつけた部分を粘り強く確認し、実装できたことはよかったです。

実演（画像）

新規会員登録、ログイン機能は実装されていますが
プラスでゲストログインやaboutページなども作成しています。
ユーザーの方が利用するハードルを下げるという狙いがありました！

TOPページ

こちらはログイン後のtopページです。

トップページにはユーザーのレビューが掲載されていますが
・人気記事3つ（画像で見えている部分）
・新着記事3つ
・ランダムでピックアップ1つ
スクロールすると全部で7つの記事が確認できます。
ここもより使いやすく、さらに次のページにも進んでほしいという思いを込めて、少し凝って作成しました。

投稿一覧ページ

こちらは投稿の一覧です。（下部分）
ヘッダーからも行けますが、topページをスクロールしても行けます。

10記事ごとにページネーションをつけています。
これは学習していたことなので簡単でした。
一番難しかったのは表示しているタグ検索です。

投稿する際にタグを複数つけて投稿できるようになっています。
それを絞って表示するのですが、こちらの実装に苦労しました。

投稿詳細ページ

こちらはさらに進んで、投稿の詳細です。
一覧やtopページから、投稿名や画像をクリックすることで遷移できます。

この星5段階評価がRatyです。
こちらの実装に少し、ハマりましたが何とか実現することができました。
先人の方々が記事を発信してくれていたおかげです。

サイドバーは先ほどから見えていますが、これが全貌です。
名前や記事数、総いいね数など関数を定義して実装しました。
また、一番多いいいねが付いた記事を表示することで
ユーザーの投稿を促進できるよう工夫しました。

先ほどの続きです。
実装で面白かったのはGoogle Maps APIです。
はじめてAPIの取得、実装ができたことは自信になりましたし、
普段使用している食べログなどと同じように地図が出てきたときは感動しました。。。

また、コメントやいいねなどは非同期通信で実装しました。
javaやjavascriptはこれからも使用していくと思うので
学習していかなければいけませんね！

投稿ページ

こちらは投稿ページです。
postテーブルを作り、
タイトル、店舗名、本文、画像、星評価、住所、タグを投稿できます。
一番むずかしかったのはタグの最下部である、「新しいタグ作成」です。

ユーザーが投稿する際に「このタグをつけたいな」と思ったタグを作成し、投稿することができます。
タグ作成より作成すると非同期通信を実装しているので特に画面が遷移せず、
そのまま「みんながつくったタグ」の一番後ろへ追加されます。

そのままチェックボックスにチェックを入れ、投稿するのですが、
この非同期通信が非常に難しかったです。
ここは唯一、メンターさんに教えをいただきながら実装したことを覚えています。

コミュニティページ

最後はコミュニティ機能の画面です。

掲示板のようなイメージですね！
コメント機能を応用した感じになります。
なので、すごく本格的なわけではないです、、
しかし、ユーザーの方でコミュニティが図れる場を実装することができました。
これも最初につけたかった機能になります！

まだまだアピールしたりないですが、このような感じの作品です！！

難しかった点やこれからの課題

苦労した点
・ratyやgoogle maps APIなどのjavaを用いた表記
・複数タグ機能、タグ絞り込み機能
・Turbolinks が与える java やリロードへの影響
・EC2やmySQLなどのデプロイ技術

課題に感じた点
・UXへの配慮を考えたサイト作り
・JavaScriptやjavaの技術向上
・RSpecなどのテストスキルの向上
・DBやAWSなどの知識不足

課題に感じた点はこれから実務についても解決していかなければいけない点です。
一つずつ身に着けていきたいです！

所感

はじめて自分で考えて作成して、1から最後まで携わった作品でした。
サービスを継続する予定はありませんが、
さらに高い技術でこだわって作成した際には、だれかを助けるアプリになるのではと感じています。
これから就職し、人々の役やDX推進の役に立ちたいと思える作品でした。
無駄にしないよう、学習を継続していきます！