新人エンジニアが実務に入ってから、苦労したこと3つ

本記事を閲覧いただきありがとうございます！
この記事は、[クラウドワークス Advent Calendar 2022](https://qiita.com/advent-calendar/2022/crowdworks)の17日目の記事です。

# はじめに

2022年9月からクラウドワークスでWebエンジニアとしてのキャリアをスタートさせた
**駆け出しエンジニア**の松尾です。（現在実務3ヶ月目）

今回はそんな私が**実務に入ってから苦労したこと**をピックアップして紹介します。
そして、苦労したことへの対応策も併せて、記しました。
なので、以下のような方には参考になるかと思います！
- 未経験エンジニアとして中途入社前の方
- 来春から23卒のエンジニアとしてキャリアをスタートさせる方
- 自分と同じく歴の浅い（1年未満）エンジニアの方


▼入社前の勉強・転職活動のことは以下の記事にまとめてあるので、よろしければご覧ください。

https://engineer.crowdworks.jp/entry/the_story_of_job_change_to_crowdworks_after_programming_school

# 結論
**結論**から言います！
**新人エンジニアが実務に入ってから苦労したこと**は、以下の3つです。

:::note info
**苦労したこと**
①Git
②テストコード(RSpec)
③影響範囲
:::



# ①Git
![git_scm_logo_icon_170097.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1584967/c4a33932-c18b-13eb-e69e-313e3f1cb082.png)


### 【エピソード】苦労したこと
入社してから、言語(Ruby)よりGitが理解できてないことに気づきました（笑）
入社前までに理解していたことは、チーム開発でよく用いられるGit運用の手法（[git-flow](https://atmarkit.itmedia.co.jp/ait/articles/1708/01/news015.html))などです。（詳細は[こちらの記事](https://qiita.com/fukubaka0825/items/c7710b4e87d478c8ba3b)）
転職活動用の[ポートフォリオ](https://qiita.com/matsuken314/items/2ae660c7635cca726283)の制作もGit・Githubを使って、開発してたので、ある程度自信はありました。

ですが、**現実はそんなに甘くなかったです**。

入社してすぐに以下のような状況になりました。


>自分「リモートにプッシュしましたけど、実装中に方針が変わって、リモート・ローカルの両方でn個前のコミットまで状況を戻したいです。」
>先輩「git reset --hard とかでいけるんじゃないですか。」
>自分「すみません。git resetとかちょっとよく分かんないです。:sweat_smile:」

その時は先輩の言う通りにgitコマンドを叩いて、なんとか状況は打開したんですが、
**「やばいな（焦り）」**　と思いました。



先輩からは、「`git reset`のコマンドは結構使うので、自分で使えるようになると良いですよ。後、Gitの全体像も理解しといたほうが良いです。」と助言を貰いました。

それからはGitの理解に力を入れました。



### 今後の対応策
以上のことを通して、
Gitの理解には以下の**全体像を理解して、開発することが重要**だと思いました。
なので、現在Gitで詰まった時は全体像に立ち返って考えるようにしています。
>1.  ワーキングツリー（自分の作業場）
    - `git add`：「ワーキングツリー → インデックス」への反映
>2.  インデックス
    - `git commit`：「インデックス → ローカルリポジトリ」への反映
>3.  ローカルリポジトリ
    - `git push`：「ローカルリポジトリ → リモートリポジトリ」への反映
>4. リモートリポジトリ(みんなの作業場)



**全体像を理解して、開発すること**の具体例(１例)を以下に示しました。
>- 【目的】：n個前のコミットを取り消してワーキングツリーの変更も取り消したい 
>- 【目的達成のため理解が必要なこと】
>    - `git reset --soft` と`git reset --hard`の修正範囲の違いが分かること
>      - `--soft`：「ローカルリポジトリ」のみ
>      - `--hard`：「ローカルリポジトリ・インデックス・ワーキングツリー」全て
>- 【目的達成の為の手段】 
>   - `git reset --hard HEAD~{n}`




▼自分でも文章だけじゃなく、Gitの全体像を図解でまとめてみました。
![スクリーンショット 2022-12-12 11.26.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1584967/76c76eff-52ba-6253-b70d-c30238fdfe5b.png)



### タメになった記事

理解度を上げるのに、以下3つの記事が有用だったので、紹介しておきます。

▼`git reset`の全容把握
-  [[git reset (--hard/--soft)]ワーキングツリー、インデックス、HEADを使いこなす方法](https://qiita.com/shuntaro_tamura/items/db1aef9cf9d78db50ffe)

▼Gitの全体像把握
- [ファイル管理で必須の【 git 】とは？全体像を図解で説明](https://canmakewakuwaku.com/git_about/)

▼Gitコマンド逆引き辞典（ブックマークしてます）

- [Gitでやりたいこと、ここで見つかる](https://qiita.com/shimotaroo/items/b73d896ace10894fd290#%E6%A6%82%E8%A6%81)

### ここまでレベルを上げたい

https://qiita.com/kyanro@github/items/3f0d4303882e668e1e85

▲上記のGit理解度チェックリストが
**Gitの使いこなせるレベルを定量的に示した**分かりやすいものだったため、引用します。

>- [ ] merge に失敗したらmerge前に戻れることを知っている
>    - [ ] そのやりかたも知っている
>- [ ] rebase に失敗したらmerge前に戻れることを知っている
>    - [ ] そのやりかたも知っている
>- [ ] (cherry-pick についても上記merge,rebaseと同じ程度理解している)
>- [ ] merge中のコンフリクトを解消できる
>- [ ] rebase中のコンフリクトを解消できる
>- [ ] rebase -i で自分のコミットを綺麗にまとめることができる



上記のことも**サクサクできるようしていきたい**です！

Gitに関しては毎日使うものなので、エンジニアライフのQOLを上げるため貪欲にレベルアップを図りたいと思っています。


# ②テストコード（RSpec）
![RSpecロゴ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1584967/7ee410f6-cf10-df76-8696-a106fc3898f9.png)




### 【エピソード】苦労したこと
正直テストコード（RSpec）をろくに書いたことなかったので、入社したては色々と苦労しました。

そして、入社後に初のタスクで、テストを書く時、**テスト用フォルダの中身が膨大すぎて**、
「まずどのファイルを編集すればいいんだろう:sweat_smile:」
というテストコードを書くスタートラインにも立てない状況がきました。（笑）

その時の実務1発目の頭の中を振り絞ったテストコードを先輩に見てもらうと
**<font color="blue">「そもそものテストコードを書くファイルが違った」</font>** ことが発覚しました笑

その後、1からテストコードを修正し直しました笑



▼他にもいろんなことがありました
 - テストコードが意図した通りに全く動かないこと
 - やっと実装できたタスクも「あ、テスト書いてない」とすっかりテストを忘れていたこと
 - 数時間かかっても書けず、ハマって先輩に助けを求めたこと




### 今後の対応策
まだテストコードに関しては、難しく感じることが多く、**実務を通して知見・書くスピード**を上げていきたいと思ってます。
実装前の段階で、テストの箇所にあたりをつけたいので、以下のことをやっていこうと思ってます。

- 「このタスクを行う上で、追加・変更すべきテストコードは何か」を調査
    - 調査後、追加・変更するテスト箇所をドキュメント(Notion)に書き出す

### タメになった記事
以下4つの記事は、テストコードのバイブルとして、いつも見ていて有用だったので、紹介しておきます。
いずれも@jnichitoさんの記事です。

- [使えるRSpec入門・その1「RSpecの基本的な構文や便利な機能を理解する」](https://qiita.com/jnchito/items/42193d066bd61c740612#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)

- [使えるRSpec入門・その2「使用頻度の高いマッチャを使いこなす」](https://qiita.com/jnchito/items/2e79a1abe7cd8214caa5)
- [使えるRSpec入門・その3「ゼロからわかるモックを使ったテストの書き方」](https://qiita.com/jnchito/items/640f17e124ab263a54dd)
- [使えるRSpec入門・その4「どんなブラウザ操作も自由自在！逆引きCapybara大辞典」](https://qiita.com/jnchito/items/607f956263c38a5fec24)


# ③影響範囲
### 【エピソード】苦労したこと
プルリク発行後のコードレビューで、先輩から以下の指摘がありました。
>先輩「〇〇コンポーネントはサイト全体で共有されているので、画面Aの要件に寄せた改修が画面Bにも影響出ちゃってます。」

ここで何が起こっていたかというと、

Reactコンポーネントのデザインを仕様通りに変更すると、
「画面Aのデザインを変えたいだけなのに、画面Bのデザインも変わった」現象が起こりました。
原因としては、**Reactの共通コンポーネントの「影響範囲」について理解していなかった**からです。

▼図解すると以下のような状況です！

![スクリーンショット 2022-12-14 8.01.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1584967/273e3855-fc6b-0fd5-dd65-214d919d1143.png)


![スクリーンショット 2022-12-14 8.53.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1584967/efbda05f-a34f-f45d-d6b4-d369de19bdef.png)



▼その時は、**解決策**として
共通コンポーネントに条件分岐を入れ、画面Aの時だけデザインが切り替わる仕様に変更

![スクリーンショット 2022-12-14 11.30.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1584967/52464fe6-ecc2-a5a8-f376-5493466cef92.png)



### 今後の対応策
以上の少しやらかしたエピソードの原因は、**共通コンポーネントの影響範囲を理解していなかった**ことによるものです。
なので、共通コンポーネントの変更を要するタスクを行う際、どの画面でそのコンポーネントが使用されているのかを把握してから、実装するように心がけています。

# まとめ

というわけで今回は新人エンジニアの私が実体験を通して、苦労したこと3つを書いてみました。
特に未経験で入社前のエンジニアの方に参考になると嬉しいです。

振り返ってみると、Git・テストコード(RSpec)に関しては入社前にもうちょっとできるようになっておけば良かったなあと思っています。
特にGitに関しては毎日触れるものなので、「Gitって何？」てレベルだったら普通に詰むと思いました笑

そして、私の「分からないことが分からない」系の質問に対しても、丁寧に答えてくださる先輩方がいる環境にも感謝しています。

# この記事を読んでいるあなたへ

最後に、僕が所属している[クラウドテック](https://crowdtech.jp/)の開発チームでは事業と開発をリードしてくれる仲間を募集しています！
ご興味のある方は以下のリンクからご応募ください！

https://herp.careers/v1/crowdworks/55iN0Ruziwjt