TECH::EXPERT8週目を振り返る

今週はチーム開発の２週目でした。

今週の学習内容を振り返ってみましょう。

今週の学習時間

今週の学習時間は以下の通りです。（合計63時間）

• 6/1（土）9時間
• 6/2（日）9時間
• 6/3（月）11時間
• 6/4（火）0時間　←　休みました
• 6/5（水）11時間　
• 6/6（木)  11時間
• 6/7（金）12時間

チームの進捗に影響が出てしまうのは申し訳ないのですが、今週は1日だけ休みました。（１週間ぶっ続けだと疲れちゃう）

今週の学習内容

チーム開発

先週に引き続きメルカリのコピーサイトをチームで開発しています。今週僕が担当した部分は以下の通りです。

1. 商品出品機能
2. デプロイできないエラーの解決

商品出品機能

メルカリであるからには商品の出品ができなければ話になりません。この必須の機能を実装しました。

実装に取り掛かる前は「ただの新規登録だから簡単だろ」と思っていたのですが、実はこの商品出品は機能がてんこ盛りでした。主なものあげると以下の通り。

画像の登録

・親モデル（商品）の新規登録と同時に子モデル（画像）が登録できる

・画像は最大１０枚登録できる

・画像はドラッグ&ドロップでもアップロードできる

・画像がアップロードされたらプレビューと削除ボタンが表示される。

・削除ボタンが押されたらプレビューとアップロードされている画像を削除する

商品情報の入力

・商品のカテゴリーは３階層ある（親カテゴリー、子カテゴリー、孫カテゴリー）

・１階層上のカテゴリーが選択されると、次の階層のカテゴリーの選択肢が表示される

・１階層上のカテゴリーによって次の階層のカテゴリーの選択肢は変わる

・カテゴリーが服系だった場合、サイズの選択肢は服のサイズになる（S,M,Lなど）

・カテゴリーが靴系だった場合、サイズの選択肢は靴のサイズになる（25cm, 25.5cmなど）

・サイズのないカテゴリーだった場合（時計、本など）、サイズの入力画面は現れない

・ブランド名はインクリメンタルサーチで候補が表示される。

・配送料の負担者によって配送方法の選択肢が変わる。

・価格を入力すると手数料と販売利益が表示される。 

うわっ…商品出品の機能、多すぎ…？

完成系はこんな感じです。

画像をドラッグ&ドロップで登録

ドラッグ&ドロップで画像登録するにはdropzone.jsというものがあるそうなのですが、そのまま使うとドラッグ&ドロップしただけでデータベースに保存してしまうようで、調べる時間がなかったのでjQueryのみで実装しました。

実装は割と簡単にできます。

1. 画像ファイル選択部分（<input type="file">）はデフォルトでドラッグ&ドロップでアップロードできる。
2. 画像ファイル選択部分をopacity: 0; で透明にする
3. 親要素に「ドラッグ&ドロップ、またはクリックしてファイルをアップロード」のテキストとcssで適当なドラッグ&ドロップエリアを作る
4. 親要素が背景、画像ファイル選択部分が手前になるようにpositionを使って重ねる。
5. 親要素と画像ファイルが同じ大きさになるようにcssを調整する。

このステップでできます。

画像プレビューの表示は以下のサイトを参考にしました。

qiita.com

カテゴリーの選択

こっちも基本的にjQueryです。

1. カテゴリーテーブルにデータを入れておく
2. 親カテゴリーが選択されたら子カテゴリーの選択肢をajaxで取得して表示する
3. 子カテゴリーが選択されたら孫カテゴリーの選択肢をajaxで取得して表示する
4. 孫カテゴリーが選択されたら、子カテゴリーが服系、靴系、その他のどれかを判別する
5. あらかじめサイズの選択肢にはずべての選択肢を入れておいて、サイズの選択肢を配列としてjQueryで取得する。
6. カテゴリーに合わせて配列の中身を選別し、再挿入する
7. 服系、靴系の場合はサイズの選択肢を表示する

ちなみにカテゴリーは以下の記事を参考に多階層カテゴリーにしています。

qiita.com

サイズはテーブルとして存在していないのであまりスマートな方法でないかもしれません。サイズテーブルがあればカテゴリーと同様にajaxでいいと思います。

配送方法の選択

こっちもサイズと同様に、配列の操作をすることで実装しています。

1. あらかじめ配送方法はdisplay: noneにしておく
2. 配送料の負担が選択されたら、出品者負担か購入者負担かを判別する。
3. 出品者負担の場合は全ての選択肢を表示する（そのままdisplay: blockにする）
4. 購入者負担の場合は、選択肢を配列として受け取って選別したのちに際挿入する

デプロイできないエラーの解決

昨日はデプロイできていたのに今日はデプロイできない（泣）

といことがということがほぼ毎日起こります。（基本的にブランチがマージされるとそうなります）

でもエラーログを見るとだいたい些細な問題だったりします。例えば、

・モデルのアソシエーションに誤字脱字がある

・ファイルにシンタックスエラーがある

・application.jsのファイルを読み込む順番が間違っている

などです。エラーが出てもエラーログをちゃんと見れば解決できます。（エラーログがヒントにならない場合もあるので注意）

２回目のスプリントレビュー

１週目はいいペースだったのですが、２週目からは失速し、今週のスプリントレビューでは少し遅いと言われてしまいました。

原因はいくつかあります。

1. 誰かの実装待ちになってしまっている
2. 単純に開発時間が短い
3. メンバーのフォローができていない

誰かの実装待ちになってしまっている

ユーザーのログインができなければ出品ができません。そして出品ができなければ出品一覧が実装できません。

このように前提とする機能の実装できていないために、手は空いているのに次の実装に移れない、ということが頻発していました。

実際、僕が担当していた出品機能が実装できていないせいで出品一覧が実装できない、という問題が発生してしまいました。申し訳ないです・・・

必要最低限の実装ができたら完成度を高める前にマージする、みんなが並列に実装できるように担当を割り振る、などの工夫が必要だったなと思います。

単純に開発時間が短い

メンバーの中にはなかなか教室に来ることができない人もいます。そのメンバーは開発時間が短くなってしまい、チーム全体としての開発時間が短くなってしまいます。（家でも開発していると信じていますが・・・）今週はメンバーがなかなか揃うことがなく、開発時間が短かったかな〜と思います。

メンバーのフォローができていない

メンバーの中には理解度が高い人もいれば低い人もいます。理解度が高い人は一人でもゴリゴリ実装できますが、理解度が低い人はフォローしてあげないといつまでも同じところでつまずいている印象です。

実際あるメンバーが担当していたマークアップはchromeの検証に表示されているcssをそのままコピーし、BEMが採用されていない内容だったので一からやり直しになってしまいました。

メンバーのわからないことを把握して教えてあげるなどして、実装の障害となるものを排除するのがスクラムマスターの役目なのにそれができていませんでした。

今週は僕が担当した実装に苦戦したこともあってメンバーのフォローができなかったかな〜と反省しています。

まとめ

少し実装が遅れ気味な１週間でした。周りのチーム様子を見ると、必須の実装は全て終わっていてプラスαの実装に写っているところもあるようです。早いですね

なんとか挽回できるように頑張りたいと思います。