松本　駿

【GitHub】 https://github.com/ShunMatsumoto/freemarket_sample_66_e 概要 TECH::EXPERTの最終課題にて作成したアプリケーションを紹介します。また本資料では、自身で実装した箇所、および開発を通じて得られた経験についても紹介します。 アプリケーション情報 【アプリケーション概要】 フリーマーケットアプリケーションを作成しました。 接続先情報 URL https://www.freemarket-sample-66-e.com/ ID/Pass ID: admin Pass: 2222 テスト用アカウント等 購入者用 メールアドレス: buyer@gmail.com ユーザー名:山田太郎（ニックネーム:タロちゃん） パスワード: buyer123 購入用カード情報 番号：4242424242424242 期限：1/23 セキュリティコード：123 出品者用 メールアドレス名: seller@gmail.com 田中一郎（ニックネーム:いっちゃん） パスワード: seller123 Githubリポジトリ https://github.com/ShunMatsumoto/freemarket_sample_66_e 【開発状況】 開発環境 ruby/Ruby on Rails/MySQL/Github/AWS/Visual Studio Code 開発チーム 開発期間と平均作業時間 開発期間：約4週間 1日あたりの平均作業時間：約10時間 開発体制 人数：5名 アジャイル型開発（スクラム） Trelloによるタスク管理 【動作確認方法】 Chromeの最新版を利用してアクセスしてください。 ただしデプロイ等で接続できないタイミングもございます。その際は少し時間をおいてから接続ください。 接続先およびログイン情報については、上記の通りです。 同時に複数の方がログインしている場合に、ログインできない可能性がございます。 確認後、ログアウト処理をお願いします。 開発担当箇所 【担当箇所一覧と確認方法】 DB設計 トップページ（フロントエンド） ○https://github.com/ShunMatsumoto/freemarket_sample_66_e にアクセスするとご覧いただけます。 ユーザー本人確認ページ（フロントエンド） ○ログイン後、ヘッダー右側のマイページに入って頂き、サイドバーの中にあります「本人情報」よりご覧頂けます。 ユーザー新規登録、ログイン（フロントエンド） ○新規会員登録を行う際に遷移していく画面の実装です。 商品一覧ページ（バックエンド） 最新のアイテムから10件分のデータを表示できるように実装しました。 パンくずリスト（バックエンド） ヘッダーの下部にある、自分がWebサービス上のどこにいるのかを視覚的にわかるようにする機能です。 商品情報編集機能（バックエンド） ○出品済の商品の内容を編集できる機能です。画像はプレビュー表示し、Javascriptで追加・削除ができます。 【各担当箇所の詳細】 トップページ ○　概要 　　　　　■　トップページより各サービスへ遷移できるページ 　　　　　■　最新の商品10件を表示している 　　　 ○　担当内容（バックエンド） コントローラーに商品を紐付いた画像を含めて、新着順に10件の商品を持ってくるように記述しました。 画像は一つの商品に付き10枚まで投稿出来る仕様になっているので、トップページでは1枚目を表示するように記述しています。価格と商品名を表示しています。 　　　○　担当内容（フロントエンド） haml,scss,javascriptを使用しトップページのマークアップ作業を行いました。 ユーザー本人確認ページ ○　概要 　　　　　■　登録したユーザー情報を表示するページです 　　　 ○　担当内容（フロントエンド） haml,scssを使用しトップページのマークアップ作業を行いました。 ユーザー新規登録、ログインページ ○　概要 　　　　　■　ユーザー登録の際の遷移ページです 　　　 ○　担当内容（フロントエンド） haml,scssを使用しトップページのマークアップ作業を行いました。 パンくず機能 ○　概要 　　　　　■　現在表示されているページの階層が分かり易くなるように、ページの左　　　　　　　 上にパンくず機能を設置しました。 　　　 ○　担当内容（バックエンド） Ruby on Railsの”gretel”というgemを使用し、パンくず機能を追加しました。 商品情報編集機能 ○　概要 　　　　　■　出品されている商品情報を編集出来るように実装しました。 　　　 ○　担当内容（バックエンド） 保存されている画像をプレビュー表示させるために画像データをバイナリーデータに変換しました（本番環境ではAWSのS3を使用しているため、aws_sdkの記述もしています）。 コントローラーで定義した変数をJavascriptで使用するために、”gon”というgemをインストールし、定義しました。 Javascriptで既存の画像の配列、新しい画像の配列、その全てが入る配列を定義しました。 一つの商品に付き10枚まで画像を持たせる事が出来る使用になっており、5枚を一行で表示させるようにしました。 編集前の画像が4枚以下の時、5枚の時、6枚以上9枚以下の時、10枚の時で条件分岐を記述しました。 さらに、既存の画像が削除された時、新しい画像が追加された時、それぞれの事象が起きた時に画像が何枚なのかを上記と同じように条件分岐させました。 　　　　　　　　 ■　上記で行った編集をajaxのリクエストとしてupdateアクションへ送りまし　　　　　　　　　　 た。 　　　　　　 ■　編集完了後、商品詳細ページへのredirectを記述しました。ajaxからのリ　　　　　　　　 クエストではredirect_toが発動しませんでしたので、helperにajaxのredirect　　　　　　　　　　を記述し、該当のコントローラーへ読み込ませました。 　　　　　　　 ■　この時に作成したjsファイルがあらゆるjsファイルに干渉していたので、　　　　　　　　　　　edit.jsでしか使用していない変数”gon”がundefindedでなければ実行とい　　　　　　　　　　 うif文で干渉を解決しました。 開発を通じて得られた知見 工夫した点 ①チームとして工夫を行った点 　土日も可能なメンバーはチームで集まり開発を進めました。お互いに分からないところを解決しながら進めましたのでスムーズに実装が行えました。 ②個人として工夫を行った点 　商品情報編集機能で使ったことのないライブラリや手法を積極的に取り入れました。また、初めて使うライブラリや手法についてブログやツイッターでアウトプットし、知識の定着に努めました。 苦労した点 ①DB設計の見直し 　実装前に行ったDB設計ですが、実装を進めている中で変更が生じた事が何度かありました。データベースは設計の根幹ですので変更を行った場合は確実に周知するようにチームでルールとしておくべきでした。後半は反省しできていました。準備の精度の向上は開発するサービスの向上に直結するはずですので、改善します。 ②コードレビュー 　メンターにコードレビューを出す前にメンバーで行いますが、不十分であったと感じました。現場ではメンターはおりませんので、自分たちでコードをチェックすることは重要ですし、まだまだ経験、知識が不十分であるからこそ自分たちで確認し合うことが重要であると感じました。自分以外の人が記述したコードを見ることも勉強になると思いますので、コードを確認は癖づけていきたいです。 ③初めての連続 　初めて使用する技術や初めてみるエラー等、楽しい反面、困難の連続でした。しかし、自分で調べに調べて解決したり、チームメンバーと話し合ったりとエンジニアとしての自走力が高まったと感じました。新しいことに挑戦し、自分を高めることは続けたいと思います。 以上