初めてのチーム開発

はじめに

先日までガチ案件としてこうすけさんとチーム開発をやらせていただきました。

今までも数回ぶべさんからガチ実務案件はいただいておりますが、今回はチーム開発だったのと、ShiftBのLPほど複雑なデザインではないですが、デザインカンプありだったので他の案件のデザインはよしなに～とは結構違いがありました。

この記事では技術面は置いておいて、どんな実装をしたかを中心にチーム開発を終えて感じたことをまとめてみたいと思います。

また別で技術的にハマったところ等共有していきたいと思っています。

サイトの画面もコードも公開OKの確認済です！安心してご覧ください！

つくるもの

飲食店の写真、来店したお客様からの投稿を表示するwebサイト

ページ構成

• トップページ

• 画像表示ページ(×4カテゴリー)

• 投稿ページ

全6ページのサイトです。(SP対応あり)

役割分担

ここからは二人で相談して決めて～という感じでしたが、今回の案件の技術的な特徴は

• アニメーションが多い

• 投稿を表示するモーダルが重い

• GoogleMapの表示

• SSR指定あり

といった感じで、アドバイスいただいた上でトップページと下層ページに分けることにしました。

CSS苦手人間(私)とCSS得意人間(こうすけさん)の組み合わせなので、真っ先に「アニメーション多いのトップページですよね？？私、下層ページやりたいです！！」言いましたね。

実際の画面

快諾して頂けたので(感謝)、スムーズに役割分担決定しました。

実装内容(PC)

すべて実装した実際の画面です。

飯テロあり

画像の一覧ページ

ホバーすると要素が出てきて、写真クリックするとモーダルへ、下の投稿内容の部分をクリックすると投稿ページの該当記事の箇所へ遷移するという指定つきです。

投稿ページ

こちらも写真をホバーすると画像ページと同じ要素(同じコンポーネント)が出てきます

モーダル

画像をホバーすると、ナビゲーションボタンが出てきて同じ記事内の写真が見れる、黒い背景部分の矢印で他の投稿を見れるようにという仕様です。

黒いところと右上の矢印でモーダル閉じます。

モーダルが圧倒的に大変でした。

ホバーすると出現する要素はトップページでも使用するものです。(トップページでは色々ありましたが・・💦)

このモーダル自体は投稿ページ上で表示するものですが、画像のページやトップページからも直接クリックでモーダル開くので、どうしたらできるんだとすごく頭使いました・・

実装内容(SP)

こちらも実際の画面です。

画像の一覧ページ

タイトルのカテゴリーは横スクロールできます。

画像クリック時

モーダルでクリックした画像が最初に来てスクロールですべて表示です。

投稿ページ

投稿クリック時

こちらもモーダルです。クリックした投稿が一番上に表示されて、1投稿フルスクリーンでスクロール可能、縦スワイプで次の投稿が見れる(インスタのイメージです)という仕様でした。

Swiper使ったのですが、画像の横スワイプもあるのでネストして実装する形でした。

厄介なんかなと警戒しましたが、一回思った通りにやってみたら普通にいけました。

PCとSPで結構違ったのでtailwindCSSでしたが、md:云々では出来ない実装が多くて、別コンポーネントでSPデバイスか否かのフック使って出しわけるみたいな感じが多かったです。

納期

納期はGOサインから2週間後でした。

感想

初めてSSR対応もしましたが、デザイン完成する前に今回のはSSRだと言われていたので調べておく時間ありました。

さらに優しい優しいぶべさんがサンプル的なのを用意してくださっていたのでそこはすんなりでした。

今回はGETリクエストしかしない、web開発よりはweb制作な案件だったので、私が山となるのはCSSかなと思っていたのですが、他にも躓くポイントあって大変勉強になりました。。

コンポーネントの分け方も、こうじゃないと上手くいかないというようなケースもあり、1回目に上手くいかないのは当たり前という感じなので気にせず、ああかなこうかなと色々考えて実装してみてはダメか、じゃあ次はこれやってみようの繰り返しで、楽しめるようになったなぁと感じました。

ハゲそうなくらい悩むこともありましたが、、、

また別途そのあたりは書きます！

チーム開発で思ったこと

Git、Githubがある程度は使えないと危ないと感じました！！

同時に自分以外の人が同じリモートリポジトリのmainブランチにmergeするということが多発するので、ローカルに最新のmainブランチpullしてなくて完成と思ってpushしてmergeしたら大変なことです。

レビューにはぶべさん入って下さっていたので事故は起きないと思いますが、そのあたりはかなり気を付けました。

自分の実装が完了してから相方のハマっているところ見たりする際も、どのブランチで作業中？今最新の状態？じゃあそこからブランチ切って私ここやりますわ！出来たらそこに向けてプルリクする！みたいなことも何度かあったので、全然わかってなかったらヤバかったなと思いながら慎重に慎重に・・・でした！！

そんな感じで個人開発では基本しないような、今までやらせていただいた案件も一人でそこ実装するだけなので、指定されたブランチからブランチ切ってそこに向けてプルリクの繰り返しで初めて行う操作も複数ありましたし、違う内容で上書きをしてはいけない緊張感もあり。。。って感じでした。

そして、こうすけさんは結構普段から雑談DMもするし、2回ほど一緒に飲んでる人🍺なので、軽い気持ちでDM送れる相手で進捗の共有や相談もしやすくて今回は本当にやりやすかったです・・！

実装期間中は短めの通話を、今いける？のノリで何度もしましたし、納期を守って納品するは絶対守りたかったのでお互いに協力しあって作り上げて、納期にも無事に間に合ってほんとに安心しました。。

安心し過ぎて気付いたらビール６缶空いてました。

おわりに

今回は何したか中心の内容だったので、また躓いたところや技術的な学びも書いていこうと思います。

恐らくまずは私の最大しくじりIamgeコンポーネントの使い方です・・(勘違いというか知らなかったというか)

全く使いこなせてなくて衝撃を受けたのでそのあたり調べながら書いてみようと思います！！

結構夜遅くまで頑張っている中、画面の確認をするということは飯テロを喰らうということになる案件だったことも大変ポイントかもです。(嘘です)

今回は以上です。

ありがとうございました！！