フリマアプリのクローンサイト作成

OVERVIEW

TECH::EXPERTのカリキュラムの最終課題として、フリマアプリ「メルカリ」のクローンサイトをチームで開発しました。実際のサイトの様子や開発環境などは以下に記載しております。

YEAR 2019 - 2019

確認方法

下記のボタンからそれぞれご確認いただけます。
※サイトはBasic認証が設定されておりますことをご了承ください
※画面右下の「WEBSITE」ボタンからもサイトをご確認いただけます

サイトへ移動する GitHubを確認する


開発状況

  • 開発使用言語、環境等
    • Ruby / Ruby on Rails / Haml / Sass / jQuery / MySQL / Git / Github / AWS / Visual Studio Code
  • 開発期間と平均作業時間
    • 開発期間:20日

    • 1日あたりの平均作業時間:10時間

  • 開発体制
    • 人数:3人

    • アジャイル型開発(スクラム)

    • 毎日3回(朝、昼、夜)のデイリースクラムミーティング

    • Trelloによるタスク管理


開発担当箇所

  • スクラムマスター
  • フロントエンド
    • トップページ
    • ユーザープロフィール編集ページ
    • ユーザーログアウトページ
    • 商品詳細ページ
    • 商品購入確認ページ
  • サーバーサイド
    • 商品情報編集
    • 商品一覧表示
    • 商品詳細表示

開発を通して

----工夫した点----

1.チームとして工夫を行った点

 基本的に同じ人が、関連するフロントエンドとバックエンドを実装するようにしたため、スムーズに開発することができました。

また、GitHubでのコンフリクトには細心の注意を払い、常にメンバー間での声がけを欠かさないようにしたため、大きなデータの消失などの問題を未然に防ぐことができました。

 1日3回のデイリースクラムでも、お互いの状況の確認(前回ミーティングからの進捗と今後行う予定などの共有)をし、こまめに議事録をつけながら進捗管理を行ったため期間内に必須機能の実装を終えることができました。


2.個人として工夫を行った点

 トップページや商品詳細ページの画像のスライドは、使ったことのなかったjQueryのスライダープラグインを積極的に実装に取り入れました。

 また、ユーザー登録時のマイグレーションエラーなど、本物の挙動確認に時間がかかるものは、予め実装前にまとめて画像を取り、共有ファイルとして準備しておくことでスムーズにかつ、より本物に近い実装ができるようにしました。

 開発の途中経過を確認するスプリントレビューでは、私が発表担当だったので率先して準備を行いました。初回のレビューでは段取りがわからず躓いてしまいましたが、次回レビューからは機能一覧と該当リンクをつけた原稿を用意し、わかりやすくなるよう関連する機能の順番で発表しました。そのため、円滑に進み短時間で質のあるレビューができました。この体験で事前準備の大切さを再認識しました。また、チームメンバーからも好評で私自身のやる気にも繋がりました。


----苦労した点----

1.GitHub

 作業当初は各々がマージする際にコンフリクトが発生し、解決策が分からずデータが消失するなど苦労しました。書籍や開発を進めていく中で使い方を学び、連携を行ったため大きな問題の発生を防ぐことができました。

 今後のチーム開発の中で、わからないことや自信のないことはチームメンバーへ相談したり、自分ですぐに調べたりする習慣が大切だと学びました。そのために日々のコミュニケーションや検索力磨きを怠らないようにしたいです。これはプログラミングに限らず言えることで、どの分野に対してでも心がけるべきものとも思いました。


2.マークアップ

 マークアップする際に、構造の作り方やCSSの適用手段を本物と同じようにしても、適用されているCSSが違う箇所も出てくるため、思う通りにビューを作成できないことがありました。そこで、無理に同じように作ろうとせず、自分なりに考えて最終的に見た目が同じになれば、と気持ちを切り替えることで、作業もスムーズに進み実装時間も短くすることができました。

 この体験から同じ挙動でも再現する手段はいくつもあることを再認識できました。今後も様々な角度からアプローチをして最適なマークアップを心がけ、効率よく実装したいと思っております。


3.未知の機能の実装

 トップページと商品詳細ページの画像表示で利用したスライド機能は初めての実装でした。そのため、最初は思った通りに画像が表示、スライドせずに作業が難航していました。そこでJavaScriptの基礎の復習とネット上の記事を参考にして自分の実装に合うよう調整し実装まで至りました。

誰かが実装した動くコードをそのままコピーアンドペーストしたくなりますが、その場合は誰かが実装したコードについての理解と自分の実装に合うように調整することが大事だと感じました。また、改めて基礎の大切さも実感しました。

 今後は情報の取捨選択の判断ができるよう、基礎を理解した上での実装を心がけて行きたいと思います。

WEBSITE