はじめに
私は2021年4月から未経験からウェブ系エンジニアをゆるっとやってる女子です！この4月でやっとエンジニアになって一年経つので、一度振り返っておこうかなと思い、この記事を書いてます。
筆者の簡単な経歴
2年ほど飲食店員をしたのちに、2021年4月から未経験でサーバーサイドとして入社。最初に入った案件がフロント実装がメインだったこともあり、2021年7月ごろから気づいたらフロントエンドエンジニアやってました。今もフロントメインでコード書いてます！
入社時の技術レベル
恥ずかしながら残念すぎるぐらいの技術力の低さでしたwww
本当になぜ入社できたのか考えれば考えるほどわからんってやつですね。今の会社には拾って頂いた感謝しかありません。
- 入社前に作成したポートフォリオは、
Rails+jQuery+heroku+テストコードなし+docker使ったことないという底辺レベル - 内定頂いた後の1.5ヶ月間にlaravelとdockerの学習を始め、なんとかdockerの上にlaravelを動かせるようになったレベル
- cssは
display:flexも使えずに、横に要素も並べられないレベル - JavaScriptで
mapもfilterも使えないレベル。apiを叩くなんてやったことないですぅという底辺レベル - VueもReactも使用経験なし。Nuxt.jsなんて聞いたことねえって感じでした
- TypeScriptなんて存在すら知らなかったレベル
こんだけ低レベルな私が、この１年間で何をして、どう成長したのかを振り返っていこうと思います!
業務に関する振り返り
私が入社した会社は、
- 受託開発メイン
- メイン技術はLaravel + Vue.js
- 新しい技術をどんどん取り入れる傾向ある
- 未経験エンジニアでも入社してすぐ実装タスクに入る
- みんな若くて成長意欲高すぎる
という環境なのもあって、入社直後は知らない技術のキャッチアップや周りについていくのにかなり苦労しました。
当然、入社当時の技術も低すぎたので「エンジニアとして評価される」ことは到底考えられない状態でした。
ただ、そこから自分なりに考え試行錯誤して動いた結果、それなりに評価していただけました(多分w)。何より入社前と比べて明らかに成長できたと思います！
「どういった行動を取ったのがよかったのか」
を言語化しておくと、今後の自分のキャリアを積み上げる上でも有用なのと、もしかしたら参考にしてくださる方もいるかもしれないと思ったので、振り返りとして書いておこうと思います！
担当業務
案件としては3案件に携わり、ゴリゴリコード書かせていただいてました！！！
1案件目
入社して 初めてアサインされた案件。期間は1.5ヶ月。React+TypeScriptで画面実装を担当してました。慣れない技術で精神的にキツかった部分もありましたが、最終的には無事に案件を終えれたのはよかったという感じでした。
2案件目
タスク管理アプリの新規開発の案件。期間は8ヶ月。Laravel+Vueで作られたシステムのフロント側実装をゴリゴリやってました（現在進行形)。
案件開始直後は、フロントが実装のみ担当してましたが、今はありがたいことに、仕様整理、詳細設計、スケジュール管理、実装、テスト、サーバー側のバグ改修など幅広い業務を任せていただいてます~
3案件目
行政向け申請システムの保守運用の案件。期間は2ヶ月。Go+Nuxt.jsで作られたシステムののフロント側のバグ改修や追加実装を担当してました。
案件以外では、入社して9ヶ月ぐらいしてからは、フロントエンドチームのチームリーダー、工数見積もり、社内勉強会の主催,面接対応などいろんな業務に挑戦してきました。
業務内で意識していたこと
今年一年間で意識してたことは3つあります！
- わからないことはすぐに聞く、周りを上手く頼る。
- とにかく目立つ
- 主体性持って行動する
この３つを意識してたことで、いろんなことに挑戦するチャンスや小さな評価につながってるのかなと思います。少しだけそれぞれの項目について深掘りでもしとこかなと思います！
わからないことはすぐに聞く、周りを上手く頼る。
技術的なことは30分調べて実装方法がわからないときは、先輩に質問するようにしてました。詰まって時間を浪費するよりは、聞いて確実に実装できた方が案件にも迷惑かからないかなと思って、遠慮なくガンガン質問いってましたww。、意外と積極的に聞きにいってもよっぽどなことない限り、みんな丁寧に対応してくださったので、本当に助けられました!
最近では本当に難しい実装と直面したときは、そもそも仕様としてこの機能は必要なのか、実装を簡素化するために仕様やデザインやサーバーの設計を変えれば改善できないか、など根本から考え直した上で周囲に相談をしたり、思い切ってその実装を他の人に任せてみるなど、ソフト面から課題を解決できないかを考えるようにしています。おかげで技術的に足りてない部分が多少あっても、プロジェクトを前に進めることに少しは貢献できてるのかなと思います!
とにかく目立つ
私の会社は毎月のように未経験エンジニアが3~4人入社してくるような会社だったので、未経験エンジニアの中で埋もれてしまうなと入社直後に察しました。入社当初の私は低レベルすぎる技術力だったので、技術力で目立つのは無理そうだったので未経験エンジニアの中で一番頑張ってる子って先輩方に認識してもらうことで目立とうと、入社時に一年間の目標に定めました。実際未経験エンジニアの中で一番頑張ってる子と思われてたかは謎ですが、多くの先輩方に頑張ってるな、伸び代があるとは思って頂けてるのではないかと思ってますwwww
具体的に目立つために意識したことは,目の前の案件に全力で取り組む、主体的な発言や行動をする、先輩方と積極的に話す、質問する、仲良くする、自己学習の内容を見える形でアピールするです。
目の前の案件に全力で取り組む
これは意識してたというより、全力出さないと周囲や納期についていけなかったって感じですね
主体的な発言や行動をする
この後の章で記載します
周囲と積極的に話す、質問する、仲良くする
私自身おしゃべり好きだったのもあり、案件一緒かどうかかかわらずいろんな人に話しかけてました！仲良い方が困ったときに助けを呼びやすいのもありますが、普通に仕事してて楽しいがメリットとして大きかったですね！
入ってた案件はリモートの方が多い案件でしたが、仲良いから、楽しかったし、サーバーやフロントなどの垣根をこえた協力体制が整ったし、雑魚な私も意見言うことで存在感を出せたので、積極的に話して仲良くするんは本当に大切やなと思いました！
自己学習の内容を見える形でアピールする
勉強会で登壇したり、オリジナルアプリのレビューを先輩にお願いするなどして、学習内容を上司や先輩にアピールしてました。おかげで学習してた内容を扱う案件に入れてもらえたりと私にとってはメリット大アリでした
主体性持って行動する
具体的に2つのことを取り組めたかなと思ってます!
議論の場でしっかりと発言
これはこの2つの記事に書いてあることにインスピレーションを受けて意識するようになったことで、特にアサインしている案件にて意識してることです！
特に一つ目の記事の下記ができてないことに危機感を感じました。
サービス開発における議論の場でしっかりと発言できる
この記事を読む前は、この記事に書かれているように、ディレクターから「ボタンの色を変えて欲しい」、「ドラッグアンドドロップのUIを滑らかにしてほしい」など言われるがままに、疑問を持たず実装だけしてました。この記事を読んでからは、これではあかんと思い、言われた指示に対して既存仕様や実装と照らし合わせを行い、懸念点をや疑問点を発言するようにしました。また、半年以上携わっている案件であったので、新規実装に関しては、この記事に書いてあるように通常状態以外の表示のハンドリングまで考慮し、設計の段階で漏れがないように、積極的に仕様を決める議論に参加しました。おかげで、考慮もれを減らすことにつながったかな思います！
案件の課題解決
プロジェクトの中で課題に感じたことは放置せず、自分なりに原因と対策を考え、失敗してもいいからチャレンジしていくことは意識してました。
具体的には、例えばこんな感じのことやってました！
| 課題 | 原因 | チャレンジしたこと | 結果 |
|---|---|---|---|
| QAからのバグ起票が多い | 実装漏れと仕様の考慮もれが多かった | 仕様書と設計書の作成を開始 | バグの数激減！ |
| コードが散らかっている | vueファイルでtemplateとロジックを1つのファイルに書いていた | 大幅リファクタ実施 | 可読性UP+無事リリースできた！ |
できないなりにチャレンジはできたのかなと思いますww
自己学習に関する振り返り
１年間、業務以外では業務に使いそうものにフォーカスして自己学習をゆるくやってました。自己学習した内容が、業務に役立つことは数多くありましたので、少しずつやってたことはよかったなと思ってます。
誰かの参考になるかもという願いも込めて、振り返りながら紹介できたらと思います。
どの技術も入社して初めて触ったものでしたので、最初に勉強した際に利用した教材リンクを紹介致します！
| 月 | 学習技術 |
|---|---|
| 2021年4月~5月 | Agora.io,JavaScript,React,TypeScript,styledComponent |
| 2021年6月~7月 | SCSS,Vue,TypeScript |
| 2021年8月~10月 | Nuxt.js,Firebase,Vuex,VeeValidate, |
| 2021年11月~1月 | React,Amplify,GraphQl,デザイン |
| 2022年2月~3月 | Laravel,Jest, |
Agora.io
最初にアサインした案件がAgora.ioを使うとのことだったので、rails+ 生のJavaScript+AgoraSDKでzoomみたいな簡素なビデオ通話できるものを作ってました。
参考記事とかあまりなかったので、Agoraのドキュメントをわからんなりにも必死に当時読み込んでました。 結局業務ではAgoraは使用しなかったのですが、公式ドキュメントを読みながら自分で形にできたことは当時の自分には自信になったかなと思います。
JavaScript
入社当時はJavaScriptの基礎をわかってない状態でしたので、4月下旬に基礎学習をした記憶があります。
https://dotinstall.com/lessons/basic_javascript_grammer_v2
React
2021年4月中旬に、案件がReactであることが発覚し、必死でReactHooksの学習をしたのを覚えています。Udemyで学習を始めたのですが、JavaScriptの基礎が定着してない状態でしたので、最初の1.5週間ぐらいは何度教材を見ても、わからないことがわからないの連続で泣いてましたが、２週間ぐらい経ってやっとステートフックやPropsなどの基礎概念を理解し、少しずつ自分で実装できるようになリました。Reactに慣れてきてからは、ドラックアンドドロップできるTODOアプリを作ったりしてました！
TypeScript
入社して初めて存在を知ったTypeScript。<T> って既存コードに書いてあって、Tってなんやねんって思いながら、勉強した思い出がありますww
Udemyでなんとなく基本学習をして、それからは実践で使っていきながら慣れていきました(現在も大の苦手ではありますがwww)
styledComponent
これも入社して初めて存在を知った技術で、JavaScriptとCSSをなんで一緒に書くねん！って思いながら勉強してました。
公式ドキュメント読んでからReact+Typescript＋styledComponentで、大好きなNiziUのサイト模写に挑戦してました。当時普通のCSSも怪しい状態でしたので、模写したNiziUを先輩にレビューをお願いしたりもしてました(本当に優しい先輩方に感謝でしかない)
SCSS
入社して３ヶ月目のタイミングで、CSSにも設計や書き方のルールがあることを知り、急いで学習を開始。と言っても、社内のcss設計がITCSSとRSCSSに決まってたので、ITCSSとRSCSSで2つほど静的なサイト模写して先輩にレビュー出すって感じで書き方を練習しただけですが、、、
あとは、css周りだとこのyutubeは扱ってるwebサイトやUIコンポーネントが綺麗な感じだったので、見たり、模写したりしました!
Vue
入社して３ヶ月目のタイミングで初めてVueを触りました。Reactを薄く理解してたので、比較的キャッチアップしやすかった印象でした。
案件でvue3を使うことが確定していたので、学習方法としては、半分ぐらいvue2のUdemyやった後に、vue3の公式ドキュメントを1日かけて読み込んでた気がします。こんなん読んだところで、最初はcomputedや emitも理解できてない状態でに実務で苦戦しかなかった感じでした。実践で使ってレビューをもらううちに少しずつ書けるようになった気がします~
Nuxt.js
入社して半年のタイミングで Nuxt.jsとfirebaseの学習を始めました。勉強した理由は、弊社のフロントエンドはNuxtの案件が多いから、firebaseは社内勉強会で紹介されてたからです。
学習方法は、以下です！
- ハンズオン教材をやってみる。
- Nuxt.jsとfirebaseでオリジナルアプリを作成
- 作成したアプリを社内勉強会で発表
詳しいオリジナルアプリの概要
オリジナルアプリを作成したことで、下記の学びがあったので非常にやって良かったなあと思いました
- Nuxt,Vuex,VeeValidate,firebaseを最低限使えるように成長できました！実務でもここから学んだ知識がめっちゃ役立ちました
- 色んなライブラリを使ったので、ライブラリのドキュメントの読解力+ライブラリのカスタマイズ力がUP
Amplify
基礎学習とハンズオン教材をやったのちに、Next.js+Amplifyでオリジナルアプリを作成して学習しました。
NextとReactの基礎はこの人の動画を見ました!日本語やし、丁寧で初心者向きなのでめっちゃ良かったです
https://www.youtube.com/channel/UC-bOAxx-YOsviSmqh8COR0w
ハンズオン教材に関しては、どれやったか忘れてしまいましたが、2日ほどでNext.js+Amplifyで認証付きTODOアプリぽいものができた気がします。
デザイン
デザインは興味本位で学習してました！
XDの使い方を学んで、自作アプリや友人のお手伝いで広告やHPのデザイン作って遊んだり、本を読んだりとゆるっと学習してました。真剣に学習すればよかったと少し後悔してます、、
実際に実務で使ったりご意見番できるレベルまではまだまだなので、いいUIと悪いUIを判別できるようにこれから頑張りたいです！
よかった本を備忘録として書いときます
Laravel
案件がlaravelを使っていたので、サーバー側の理解が必要だなと感じ学習を開始。
学習方法は実務コードを真似ながらハンズオン教材をやること!（Laravel8＋MySQL+Reactでやりました)
おかげで、CRUDの簡易API作成や実務でもサーバー側の軽めのバグチケット対応とかはできるようになりました！
その他
-
他の企業の技術ブログとかゆるく読むようになりました
-
フロントエンドのロードマップに書いてあるところを少しずつyoutube動画見たりしてゆるく学習してしてます
https://roadmap.sh/roadmaps/frontend.png
終わりに
こんだけやってきたことをつらつらと書きましたが、これで一人前だとは全く思ってません。
技術的な部分は今も雑魚であることには変わりません。まあ、入社前と比べると明らかに成長したかなとは思ってますが..ww
ともかく、やっとwebエンジニアとしてスタートラインに立てたぐらいなのかなと思ってます。
まだまだ足りない部分ばかりなので、特に、保守性と可読性の高いコードの書き方を重視し、２年生でも技術的なキャッチアップは引き続きして行こうと思います! 技術以外の部分に関しては今年できたことを継続するに加えて、できる先輩方の案件での立ち振る舞いを真似していくことで、プロジェクトに貢献していきたいです！
あとは、色々やらせてもらえてる今の環境に感謝だなあと思ってます!これからも任せていただいてることは全力で頑張ろかなと思います！
長くはなりましたが、以上で振り返りを終えたいと思います！
長いのに、ここまでお読みいただきありがとうございました😊