1
/
5

スクールでのチーム開発について

宗友 一史さんのプロフィール
宗友 一史
Web エンジニア
on 2020/08/30

概要

テックキャンプの最終課題にて作成したアプリケーションを紹介します。また本資料では、自身で実装した箇所、および開発を通じて得られた経験についても紹介します。

アプリケーション情報

アプリケーション概要

フリーマーケットのアプリケーションを作成しました。

  • 接続先情報
    • URL http://54.250.69.247
    • ID/Pass
      • ID: final_team_g
      • Pass: g_protein
    • テスト用アカウント等
      • 購入者用
        • メールアドレス: buyer_user@gmail.com
        • パスワード: buyer_user
      • 購入用カード情報
        • 番号： 4242424242424242
        • 期限： Wed Apr 22 2020 00:00:00 GMT+0900 (日本標準時)
        • セキュリティコード：0
      • 出品者用
        • メールアドレス名: seller_user@gmail.com
        • パスワード: seller_user
  • Githubリポジトリ

開発状況

  • 開発環境
    • Ruby/Ruby on Rails/MySQL/Github/AWS/Visual Studio Code
  • 開発期間と平均作業時間
    • 開発期間：8/4〜8/27（24日間）
    • 1日あたりの平均作業時間：10時間
  • 開発体制
    • 人数：4名
    • アジャイル型開発（スクラム）
    • Trelloによるタスク管理

動作確認方法

  • Chromeの最新版を利用してアクセスしてください。
    • ただしデプロイ等で接続できないタイミングもございます。その際は少し時間をおいてから接続ください。
  • 接続先およびログイン情報については、上記の通りです。
  • 同時に複数の方がログインしている場合に、ログインできない可能性がございます。
  • テストアカウントでログイン→トップページから出品ボタン押下→商品情報入力→商品出品
  • 確認後、ログアウト処理をお願いします。

開発担当箇所

担当箇所一覧と確認方法

  • DB設計
  • ユーザーマイページ（フロントエンド）
    • （トップページ右上「マイページ」をクリックするとご覧いただけます。）


  • クレジットカード登録ページ（フロントエンド）
    • （「マイページ」クリック後、サイドバーの「クレジットカード情報登録」をクリックするとご覧いただけます。）
  • クレジットカード削除ページ（フロントエンド）
    • （「マイページ」クリック後、サイドバーの「クレジットカード情報削除」をクリックするとご覧いただけます。）
  • ログアウトページ（フロントエンド）
    • （「マイページ」クリック後、サイドバーの「ログアウト」をクリックするとご覧いただけます。）


  • 商品出品ページ（フロントエンド）
    • （出品用アカウントでログイン後、トップページ右下「出品する」ボタンをクリックするとご覧いただけます。）
  • 商品一覧表示（バックエンド）
    • http://54.250.69.247にてご覧いただけます。


  • カテゴリ機能（バックエンド）
    • （出品用アカウントでログイン後、トップページ右下「出品する」ボタンをクリック、カテゴリ選択することでご確認いただけます。）
  • 商品詳細表示（バックエンド）
    • （トップページのピックアップカテゴリー内に表示されている商品をクリックするとご覧頂けます。）


  • 商品情報編集（バックエンド）
    • （出品用アカウントでログインして出品後、トップページのピックアップカテゴリー内「新規投稿商品」で該当の商品をクリック〜「この商品を編集する」ボタンでご確認いただけます。）
  • 商品購入機能（バックエンド）
    • （購入者用アカウントでログイン後、SOLDマークのついていない適当な商品を選択することで商品購入画面へ進めます。クレジットカード情報の入力を求められた際は、上記の購入用カード情報を入力〜登録後、購入できます。）
  • 商品検索機能（バックエンド）
    • （トップページ上部検索窓に商品名の一部など適当な語句を入力し、右側の虫眼鏡のマークをクリックすると検索結果が表示されます。何も入力せずに虫眼鏡のマークをクリックすると全ての商品が検索できます。）

各担当箇所の詳細

  • DB設計
    • 概要
      • 必要なテーブル、カラムの選定
      • アソシエーションの決定
    • 担当内容
      • 必要なテーブル、カラムの選定
  • ユーザーマイページ
    • 概要
      • ログインしたユーザーのマイページ
      • 出品した商品一覧ページ、売却済み商品一覧ページ、クレジットカード情報登録ページ、クレジットカード情報削除ページ、ログアウトページに遷移できる
    • 担当内容（フロントエンド）
      • haml,scssを使用してのマークアップ作業
  • トップページ（商品一覧表示）
    • 概要
      • 新着順に商品が一覧表示されるページ
      • ピックアップアイテムに該当するカテゴリーの商品を出品すると、トップページに一覧表示される
      • 検索窓で商品検索ができる
    • 担当内容（バックエンド）
      • 商品が一覧表示されるように実装
      • 検索機能の実装
  • 商品出品機能
    • 概要
      • 商品を写真付きで出品することができる機能
    • 担当内容（フロントエンド）
      • haml,scssを使用しての商品出品ページのマークアップ作業
  • カテゴリ機能
    • 概要
      • 商品出品時、商品編集時にカテゴリ選択ができる
    • 担当内容
      • ancestryを用いての多階層カテゴリ実装
  • 商品詳細表示
    • 概要
      • 商品の詳細情報を確認できる
      • 出品したユーザーは編集・削除ができる
      • コメントすることができる
    • 担当内容（バックエンド）
      • カテゴリ・サイズの表示
  • 商品情報編集機能
    • 概要
      • 出品したユーザーが商品の情報を編集できる
    • 担当内容（バックエンド）
      • 出品時カテゴリのデフォルト表示・カテゴリ編集
  • 商品購入機能
    • 概要
      • 商品をクレジットカードを用いて購入する機能
    • 担当内容（バックエンド）
      • 購入機能（クレジットカード登録後）の実装
      • 購入された商品への売り切れ表示の実装

開発を通じて得られた知見

工夫した点

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

チームとして工夫を行った点は「情報共有」です。
検索して役に立った知識をTrelloで共有したり、全員が必要になってくる知識や技術はZoomで画面共有するようにしたりしました。結果、全員がコミュニケーションを取りながら教え合うという状況ができ、安心して開発を進めることができました。

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

できるだけアウトプットをするよう心がけたのが個人的に工夫した点です。
開発中に得た知識はGitHubへ投稿し、チームメンバーに情報共有することでGiveができるよう努めました。
アウトプットをすることで他のメンバーの助けになるとともに、自分の知識の整理やさらなる知識の習得につながりました。今後もアウトプットは継続していくつもりです。

苦労した点

①チームとして苦労した点

「今（次）誰が何をやるべきなのか」を決めることに苦労しました。
タスクの割り振り、作業時間の見積もり、進捗の共有などをし、メンバーで話し合いながら都度判断をしてきました。
途中、必須実装のタスクが終わることを見込んで先に追加実装のタスクに手をつけ始めてしまったりと、実装の難易度の見積もり、優先順位の見積もりが甘かった場面がありました。
実装する順序を見極めるのが難しかったこともあり、思っていた以上に工数がかかってしまいました。
最初に全体像をしっかり把握できていなかったのが反省点です。
最終的にはメンバー同士でフォローし合い、実装することができました。

②個人として苦労した点

自分自身の知識が足りず、手探り状態での実装になり時間がかかってしまったことが個人的に苦労した点です。
基本的なことでも思い出すのに時間がかかったことがあったので、情報を整理して必要に応じてすぐに取り出せるようにしておくことが必要だということを学びました。
また、事前にミニアプリを作成して挙動を確認すると比較的早く実装ができる上に頭の中が整理できることに気づき、チーム開発で実践しました。
今後開発に携わる上でも、むやみに先を急ぐのではなく情報を整理した上で臨んでいきたいと思います。

開発 チーム