3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

こんばんは。おでこと申します🍢

アドベントカレンダー3日目です🎄
ソロ完走を目指しています!!
まだまだ道のりは長いですね…

私は2023年9月1日にフロントエンドエンジニアとして自社開発のSaaS企業に入社しました。
未経験独学で、薬剤師からの転職です。
詳しくはこちらをご覧ください。
未経験独学で自社開発企業へ〜薬剤師からのエンジニア転職記〜

本日は入社してから、取り組んだ課題と初めてのタスクの内容について書きます。
未経験でWEBアプリケーションエンジニアを志している方の参考になれば嬉しいです。

初日

私の会社はフル出勤です。
まずPCを支給されました。
デバイスはMacBookPro M2です。
新しくMacを開封するのってめちゃめちゃワクワクしますよね✨

初日はオリエンテーションとPCのセットアップ、社内ルールの説明を受けました。

メンターさんが1人ついてくださることになり、その方とデスクの席も隣でした。
いつでもすぐに質問できる環境が整っていました。

1週目 ラーニング

2日目から1週間のラーニングに入りました。
入社前から共有されていたカリキュラムに沿って進めていきます。
事前に進めてはいましたが、正直全くわからず不安でしかなかったので、復習をしつつ、進めていきました。
以下が課題として取り組んだ教材です。

JavaScript Primer

第一部: 基本文法を読むという課題でした。
私はRubyしか触れたことがなかったので、JavaScriptの文法を学ぶところからのスタートでした。
しかし、この書籍は正直全く面白くなかったので、さらっと読み飛ばしました😇

現在は実務でわからないコードが出てきた時に、索引から調べて辞書的に使っています。

りあクト!

基本的には3巻全て読むことが課題でした。
一部、社内で使用していない技術に関しては飛ばして良いと言われました。

この書籍めちゃくちゃ難しいです。
入社前にも読んだ初見では、何を書いているのか全くわからず…
再度読みましたが、やっぱりわかりませんでした。

ここで時間をかけても仕方がないということで、理解することを諦めました!
時にはメンターさんに講義のような形で説明を受けながら、とりあえず読み切りました。

モダンJavaScriptの基礎から始める挫折しないためのReact入門

Udemyで有名なReact講座です。
自分で簡単なTODOアプリを作ることができます。

初めて自分で手を動かして、Reactを用いたアプリを作ることができました。
手を動かした方が断然頭に入りやすいですし、何より楽しいです!

2023年11月フルリニューアルしたそうなので、興味のある方はぜひ受講してみてください👍

2週目 OJT研修開始 ついに実務へ

入社2週目でなんと実務に入ることになりました。
いや、流石に早すぎませんか!?

転職期間中に面接を受けた企業のほとんどが研修は3ヶ月だったので、大体どこもそんなものだろうと思っていたのですが、まさかの1週間!!!!
実務に入らせてもらえるのはありがたいけど、本当に大丈夫なのか?と不安でした…

OJTオリエンテーション

まずは社内での開発フローを教えていただきました。
Gitの使い方、PRの書き方、テスト依頼の仕方などです。

印象的だったのは、わからないことはガンガン聞く。悩むのは最大10分というルールです。
大体のことは1人で悩まずに相談した方がいいという考えに基づいているそうです。
特にGitに関することは、わからなければすぐに質問して欲しいと言われました。

このルールは今でも意識しています。
わからないことを物おじせずに質問できる能力はエンジニアには必要だとも先輩に教えていただきました。
これからも遠慮せずにガンガン質問していきます!

次に環境構築を済ませ、いよいよタスクに入ることになりました。

初めてのタスク

「表形式で◯◯一覧を表示する画面で、各行にマウスを乗せた時、その行の背景色の色を変える」というタスクです。
要は、マウスhoverした時CSSでbackground-colorを指定するだけの簡単な実装です。
タスクの説明を受けた時は、あれ意外とできそう!と思いました。
覚えたてのReactの知識も必要なさそうだし、ポートフォリオでも使ったことのある技術だったからです。

しかし、実際にコードを書こうとするといくつか問題がありました。

  • プロダクトの機能がわからないため画面を開けない
  • CSSの書き方が見たことない書き方になっている

プロダクトの機能がわからないため画面を開けない

入社してからプロダクトを触ってはいますが、まだまだ知らない機能がたくさんあります。
入社したらプロダクトについて機能やページを覚える必要があります。
要件を伝えられても、その画面の開き方がわからなければ実装はできないからです。
知らないのは仕方がないことなので、メンターさんに丁寧に教えていただきました。

CSSの書き方が見たことない書き方になっている

ポートフォリオではCSSのクラス名は適当につけていました。
トップページの保存ボタンだったらtop-submitbuttonみたいな感じで自分がわかればいいと思っていました。

一方、プロダクトはSCSSでキャメルケース、BEM命名規則に基づいて書かれていました。
CSSなのにネストが多すぎて別物に見えました。

簡単な実装だと思いきや、実際にコードを書いてみると、そううまくはいきませんでした。
これが実務か…と課題をこなしていた時とは違う難しさを実感しました。

メンターさんに助けられながらなんとか実装することができました。
初めて実装できたのが嬉しくて、何度も表の上でカーソルをぐるぐる動かして色が変わるのを見ていました笑

先輩方が「初めての実装おめでとう」と声をかけてくださり、嬉しさが倍増しました。

終わりに

この機能がリリースされた後、社員全員が参加する会議で、「こちらおでこ。が初めて実装した機能です」と共有していただきました。なんとなく社員として認められた気がして、嬉しかったのを覚えています。

先輩が「初めての実装は忘れられないよね」とおっしゃっていました。私もきっと忘れないだろうと思います。

3
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?