【Rails】実務未経験の僕が共同開発に参加して学んだこと

# 0. はじめに
はじめまして！

この記事では、「実務未経験の私が Rails 共同開発に挑戦し、そこで学んだことや躓いたこと、反省した点」などについてまとめています。

チームでの開発現場経験を積むことで、「コミュニケーションの適切な取り方」や「わからない部分の質問の仕方」、「コンフリクトの解消の仕方」など、一人での学習では決して学ぶことのできない貴重な経験を積ませていただくことができました。

今回はそのような共同開発の現場で実際に学んだことをまとめて、今後の自分の成長につなげることができたらなと考えております！

1. 自己紹介

|　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　
|:-:|
|![3MBのコピー.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209814/17f23ad9-9bdb-4d11-4722-b76154a01e97.jpeg)|)

まずは簡単な自己紹介からさせて頂きます！

- スペック

  - 24歳
  - エンジニアを目指している駆け出しエンジニア
  - 学習中の言語：Ruby, Ruby on Rails
  - 今後学習予定の言語や知識：Javascrict, AWS
  - HTML・CSS・Sass・も出来ます。

- 趣味

  - 勉強 : 好きでやっているので、もう趣味ですw
  - 読書 : 一番好きな本は、SF小説、「千九八四年」です。
  - TVゲーム : 最近は勉強のため封印中。スマブラしたい。

もうちょっとコロナが落ち着いたら、旅行を趣味に加えたいです。

- 性格

  - 割と慎重派だと思います。前職で絶対にダブルチェックを欠かさなかったです。
  - 温厚だと思ってます。怒った記憶がない。怒りは無駄だと考えてます。

# 2. 今回の共同開発に参加しようと思った動機
まず、「なぜ今回の共同開発に参加しようと思ったのか？」の根本的な動機の部分を述べさせて頂きます。端的に言うと、以下のものを「得たい！」と思ったので、共同開発に参加させて頂きました。

- コミュニケーションスキルの向上
- チームでの開発経験
- 問題にぶち当たった時に自分で原因を特定し、解決を図るための「自走力」
- 試行錯誤した上でどうしてもわからない場合、素直に質問できる柔軟性

これらのものを「共同開発」に参加することを通して獲得したいなと思いました。

結果的に、特に「コミュニケーション」の部分に関してはスキルの向上ができたのと、以前よりもより自信を持つことができた気がします。

ここについての具体的なやり取りに関しては後述させて頂きます！

# 3. Rails 共同開発で取り組んだ内容
共同開発で取り組んだ内容を簡単にご説明していきます！

- **成果物**
  - 今回の共同開発では「ECサイト」の購入者視点の画面の実装に取り組みました。

![qiita1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209814/6952acc9-ebcb-6568-0542-f118e762bc4b.png)

- 概要

  - 開発期間：5/1 ~ 6/ 30（2ヶ月間）
  - 週1回のチームミーティングを行い、進捗状況の確認を行う
  - 週2~3回の作業会を行い、それぞれわからないところを質問し合う
- 構成メンバー

  - 講師・TA：現役エンジニア2名
  - 共同開発メンバー：未経験2名, 現役インターン生1名
- **使用した言語・技術**

  - バックエンド
     - Ruby（バージョン：2.7.1）
     - Ruby on Rails（バージョン：6.0.3.5）
   - フロントエンド
     - HTML5
     - CSS3
     - Bootstrap（5.0.0.beta2）
  - インフラ
     - Docker
     - docker-compose
  - データベース
     - MySQL2（0.5.3）
- **使用したツール・環境**

  - Slack：レビュー依頼、進捗状況の確認、日報の共有などをしました。
  - GitHub：タスク管理・確認、プルリクエストを出す、コードレビューを受ける、受けた指摘に対応し、コミットを出すなどをしました。
  - Googleドライブ：モックアップ、基本設計（ER図/画面遷移図）、画面定義書などのファイルを管理・共有のために使用しました。
  - Git / Sourcetree：コミットやプッシュなどの git 操作をするために利用しました。
  - DeepL：英語対策のための翻訳アプリ
  - 使用したエディター：Visual Studio Code
  - 使用したPC：Mac

- ER図

![qiita2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209814/d917198b-05d3-bc8d-c366-2c6ebd11d6c0.png)

- **実装した(する予定)機能**

  - 新規ユーザ登録機能
  - ログイン / ログアウト処理
  - 商品検索
  - 商品詳細へ
  - カートへ
  - カートを開く
  - 購入確定
  - Top画面に戻る
  - 履歴を開く
  - 注文検索
  - 注文キャンセル
  - ユーザ情報を開く
  - ユーザ情報修正 / 退会処理
  - 修正確定

# 4. Rails 共同開発で僕が担当した箇所

## ①products 関連の DB構築

ER図を見て、必要なカラムや属性を考え、migrationファイルを作成しました。

↓こういった感じのmigrateファイルを作成

```
class CreateUsers < ActiveRecord::Migration[6.0]
  def change
    create_table :users do |t|
      t.string :password, limit: 64
      t.string :last_name, limit: 16
      t.string :first_name, limit: 16
      t.string :zipcode, limit: 16
      t.string :prefecture, limit: 16
      t.string :municipality, limit: 16
      t.string :address, limit: 16
      t.string :apartments, limit: 32
      t.string :email, limit: 128
      t.string :phone_number, limit: 16
      t.references :user_classification, null: false, foreign_key: true
      t.string :company_name, limit: 128
      t.boolean :delete_flag

      t.timestamps
    end
  end
end
```

## ②商品詳細画面 を作成



![スクリーンショット 2021-05-14 14.00.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209814/c6cada7b-0b1a-a9ab-0dbb-24958c4a084f.png)

商品名・カテゴリ・商品説明・値段 をDBから引っ張ってきて表示するように実装しました。

## ⑤商品詳細画面(存在しないID) を作成

![スクリーンショット 2021-05-14 14.01.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209814/94a6b80a-75a5-3d1c-b0f1-d3927e1e046f.png)

存在しない商品が指定された際には、この画面が出てくるように、
if分岐させました。

## ⑥ユーザー情報更新画面 を作成

![スクリーンショット 2021-05-14 14.01.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209814/2ba2ea4b-edad-71d4-c8ef-9ef3c50bc8c5.png)

ユーザー情報の更新を行う画面の見た目とroutes を作成しました。
`<%= form_with %>`, `<form.label>`, `<form.text_fiels>` を使用して作成しています。

## ⑦ユーザー情報更新機能 を実装

⑥で見た目を実装し、ここで実際の動作を実装しました。

![スクリーンショット 2021-05-14 14.13.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209814/341594dd-4b97-2849-6c74-91a95db12334.png)


flashを利用したアラートを採用し、更新成功時には、user詳細画面にとび、「更新に成功しました」というメッセージを、失敗時には、user情報更新画面にrenderして、「更新に失敗しました」というメッセージを表示するように実装しています。

## ⑧認可処理機能 を実装

![スクリーンショット 2021-05-17 16.14.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209814/1976d341-6789-210b-de9e-16113b0ec6de.png)

![スクリーンショット 2021-05-17 16.11.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209814/4ce2d2e4-771d-2f51-f3b3-487eddb5b815.png)
※Home#index の方は、仮で作ったページなのでデザインが崩れてます

- ログインしていない時に、ユーザー詳細・ユーザー情報編集を開こうとすると、「ログインしてください」のメッセージと共に、ログイン画面へリダイレクトされる。

- ログインしていても、他のユーザーの、ユーザー詳細・ユーザー情報編集を開こうとすると、「他人の情報にアクセスできません」のメッセージと共にroot_path までリダイレクトされる。

この2つの機能を実装しました。

## ⑨注文詳細画面 を実装

![スクリーンショット 2021-05-24 10.29.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209814/76f0e7de-7d60-0ae6-7670-2e73873d522b.png)

❗️ここはかなり頑張りました！

特に、小計 をモデルメソッド化し、さらに、
合計のモデルメソッドを作成し、その中で小計メソッドを呼んで、合計を出す、という方法は、我ながらキレイなロジックに仕上がったと思ってます。
下記に当該のロジックを書かせていただきます。

※ [3. Rails 共同開発で取り組んだ内容](#3. Rails 共同開発で取り組んだ内容)に添付の、ER図を見ると分かり易いと思われます。

```models/order_detail.rb
# 小計を計算するメソッド。小計の画面表示にも使用。
def sub_total_price
  product.price * order_quantity
end
```

```models/order.rb
# 注文内の小計全てを合計するメソッド。合計金額の画面表示にも使用。
def total_price
  order_details.sum do |order_detail|
    order_detail.sub_total_price
  end
end
```


**※今後も実装完了次第、追加していきます！**

# 5. 【必ず身に付けておきたい】 講師に学んだプルリクエストの出し方

共同開発では、開発業務以外にも Git や GitHub の操作方法がとても学びになりましたが、その中でも特に「 Pull Request（プルリクエスト ）の出し方」が個人的には参考になりました！

今後の開発を進めていく上での基礎として、必ず身に付けておきたいと思いました。

## ▼ プルリクエストを出す際の雛形となるテンプレート

以下は講師が提供してくださったテンプレートを元に僕が作成したプルリクエストの一例です。

![screencapture-github-quest-academia-qa-rails-ec-training-azalea-pull-73-2021-05-14-13_08_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209814/9616206a-2e4f-ddf0-36f6-f3ab96ea0a52.png)

プルリクエスト出す際は、以下のようなフォーマットをもとに作成しています。

- **プルリクエストの最終的な確認項目**
  - このプルリクエストで実行したこと（概要）
  - 対象 issue
  - 重点的に見て欲しいところ（不安なところ）
  - 実装できなくて後回しにしたところ
  - チェックリスト（動作確認・ rubocop の実行など）
  - その他の参考情報（参考にした記事のリンクなど）

このようなフォーマットを元に書くことによって、**レビュアーの方にとってわかりやすいプルリクエストの作成に繋がる**と感じました。

特に**「重点的に見て欲しいところ（不安なところ）」**の項目では、**「問題に躓いた時にうまく人に頼れるスキル」**も大事になって来ると思うので、不安だったことについては小さなことであっても、必ず書くようにしました。

## ▼ 1指摘1コミット
また、コードレビューを受ける際は**「1指摘1コミット」でやり取りをするようにしました。**つまり、複数の指摘を同時に受けたとしても、対応する際は一つずつコミットを出して個別に対応していくということ。

これは講師の方から「意外と知らない人が多いけど、大事なこと」として教わりました。

以下のような感じです↓

![スクリーンショット 2021-05-14 13.20.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209814/b4414ca2-75cc-eed6-97fb-703ffa4ecf6a.png)

基本的なことかもしれませんが、だからこそ、この機会で知ることができた意義は大きい！と考えています。

# 6. Rails 共同開発で躓いた点・大変だったこと

共同開発において躓いたことや大変だったこと、またそれに対する僕の対応です！

主に、以下の点でつまずきました。

① コンフリクトの発生

※ 追加あるかもです。(無いことを願う。)

## ① コンフリクトの発生
コンフリクト発生に関しては、共同開発が始まった初っ端から躓いてしまい、かなり焦りました💦

しかし、練習段階で失敗することに意味があるんだろう。
と考え、自分を奮い立たせて対処しました。

何度か、コンフリクトを発生させているうちに、
「あぁ、多分、ここが原因だろ、一回、developをmergeして…。よし！」
ぐらいの気軽さで対処できるようになりました。

Gitの基礎は抑えられたのでは？
と考えています。

# 7. Rails 共同開発に参加する経緯＆身についたこと
2021年2月頃までは僕は主に一人でプログラミング学習に取り組んでいました。

しかし、エンジニアなるためには、実務に近い、チーム単位での経験が必要なのではないか、お互いの進捗状況を確認しあったり、わからないことを相談しあったりするなどと言った「協調性」が必ず必要になってくるのではないかと考えていました。

今回の共同開発で、早めにそのスキルを身につけておくことによって、技術的なサポートをして頂く際の**「質問力」**であったり、スムーズやりとりを行うための**「コミュニケーション能力」**の面においては、他の未経験者よりも前に立てたのではないか、と考えています。

この経験は、これからエンジニアになっていく上で、この上なく大事な経験だと思っていますし、この経験があれば、きっとエンジニアになれる！という自信にも繋がりました。

技術的にまだまだ未熟な自覚はあります。
しかし、それ以外の、エンジニアにとって大切な、**「協調性」を身につけられた**という点において、この共同開発への参加はとても有意義だったなぁ。と感じています。

# 8. さいごに【まとめ】

有意義！！
その一言に尽きる経験でした。

エンジニアとして働く上で必要なことがほぼほぼ詰まっていましたね。
・開発における「協調性と自分のポジショニング」
・ためらわず、適切な言葉での「質問力」

これですよ。これが大きすぎる。
この二つがあれば、割とどうとでもなりそうな気がします。

コーディングなどはやっていればどうにかなる部分は結構ありますからね。

やってよかった！
それがこの講義への感想です。