激動の2021年！エンジニア1年目を振り返る

2021年1月からWeb系のエンジニアとしてキャリアをスタートし、ちょうど1年が経ちました。
非常に濃く、激動の1年だったので振り返っていきたいと思います。


この記事はかなり自己満記事になりますが、エンジニアになって間もない方、これからエンジニアになりたい方などに少しでも参考になっていただければ嬉しいです。

エンジニアになるまでの道のり

まず初めにエンジニアになるまでの、道のりを説明したいと思います。
めっちゃ要約すると、前職のサービス業から半年間スクールと独学で勉強し、転職活動を開始。
5社内定を獲得し、そのうちの1社のライブ配信サービスを主軸とする自社開発企業に入社することにしました。


ちなみに内定をいただいた企業はこんなかんじ


・受託開発企業2社(バリバリ開発ができて、CTO的なポジションの方がいる)
・SESと自社開発を行っている企業2社(SESが中心)
・内定を受託した完全自社開発企業(当時エンジニア0人、メインサービスはWordPressで動いている)


「ん？？？」
そうなんです。
自分が入社を決めた企業、サービスは運営しているけど、当時エンジニアが一人もいなかったんです笑

簡単に説明すると、サービスのリリース時ははオフショアで開発していて、だいぶ軌道に乗ってきたので、自社でエンジニアを内政化していきたい！
みたいなフェーズでした。


その時、CTO候補と、それにひっついて開発するエンジニアを募集していたみたいで、ひっついて開発するエンジニアの枠に滑り込んだわけです笑

正直、受託開発の企業の方が、安定したエンジニアライフをスタートできた気がしますが、
既存のWordPressで動いているサービスをフルリプレイスすると話を聞いて、

「なんか面白そうだな笑」

と思って、博打で飛び込むような気分で入社を決断しました。

ここからは1月〜12月に行っていた業務や、出来事を順番に話していきます。

1月

まず1月は入社したてで結構緊張したんですが、ラッキーなことにマーケターのポジションで同じタイミングで入る同期がいた為、気持ち的には結構楽でした！

ただ壁は立ちはだかります。

衝撃的に何もわからない

いやほんとにこれ何にもわからないんですよ笑
なんてたって、自社にエンジニアがいないのだから、、、

本当はCTO候補の方が入社してくる予定だったのですが、まー色々あって結局入社して来ず、
1月入社時点ではエンジニアは自分一人であとはオフショアで開発しているというカオスな状況でエンジニアライフがスタートしました笑

本当になにもわからないんです、、、、笑
・今動いているサービスのソースがどこで管理されているのか？
・ドメインがどこで管理されているのか？
・サーバーの構成がどうなっているのか？
・デプロイフロー

本当に全て謎なんです笑
いやーまじで焦りました笑

わかっていたことは既存のサービスはWordPressで動いていて、それをリプレイスする！
ってことだけです笑


一応当時はリプレイスする言語はJavaScriptベースかGoを使うと言われていました。

そしてエンジニアが結局いなかったので、結局受託企業にリプレイスを委託してそこに自分が加わって開発するみたいな感じになっていました。
1月に入ってまず行ったことは、サービスをリプレイスするにあたってサイトマップの作成です。

入社当時はサイトマップ？？みたいな感じでしたが、結構単純作業だったので、ひたすらスプレットシートに現在のURLや新しいページのURLなどをまとめていった記憶があります。

まースプレットシートも使うの初めてだったので、単純作業ではありましたが、新鮮味はありました笑

これは結構速攻終わって、次に上司の方にワイヤーフレーム作ったことある？？？

と言われたのを覚えています笑

ワイヤーフレーム？？？？

って感じの反応でしたね〜笑
ワイヤーフレーム ... ワイヤーフレームとは webサイトの完成イメージを簡単な線と枠で表現する「設計図」(デザイン前の超簡単なデザイン的な)

リプレイスするにあたってデザインも更新することになっていたので、そのワイヤーフレームを作成する業務があったのです。

そして、また上司から一言

そーいえばコーポレートサイトないんだよね！！作れる？？

ってことで、1月はリプレイスのワイヤーフレームとコーポレートサイトのワイヤーフレームをひたすら作成することになります。

いやーまじで1月は100ページ分くらいワイヤーフレーム書いた記憶があって、XD使って作ってたのですが、
まじで1ヶ月でXD職人になりました笑

https://www.udemy.com/course/adobe-xd-uux/learn/lecture/18333352?start=0#overview

これで勉強したのですが、めっちゃわかりやすくて、1日でワイヤーフレームかけるようになるのでおすすめです！！

って感じで1月は、開発業務をすることがほとんどなかったです！

ドキュメント作成なども初めてだったので、この時は開発ができていない焦りなどはほとんどなかったです。

この時会社用のgithubのアカウントを自分が作成しました笑
なかなか未経験で入社して、会社のgithubアカウントつくっちゃう人はいないと思います笑
今も自分が主に管理してます笑

プランとかこれでいいのかなとか思って2時間くらいめっちゃ調べた記憶あります笑
とりあえず誰もわからんしつくっちゃえーーーーー！！って感じでした。

2月

2月です。
一月の時点でコーポレートサイトのワイヤーフレームからデザインが完成したので、2月はひたすらコーポレートサイトの開発に入りました！

リプレイスは要件定義のフレーズだったので、自分はここでは全く参加せずひたすらコーポレートサイトを作っていました。


企画から設計、開発とデザイン以外は全てを任せてもらえたので、とても気合いが入っていました。

まーにしてもコーポレートサイトも作ったことなかったので、本当にできんのかなって思っていました笑
そもそもお問い合わせフォームとかどーやって作るの？？？とか思って当時はサイト自体をRailsで作ろうとしていました笑

まー独学時はRailsしか勉強していなかったので、これ以外わからなかったですから、、、

ただリプレイスでReactを使用するかもと言われていたので、だったらReact勉強しておいた方がいいな！！！
と思って当時はやり始めていたNext.jsを使用することにしました。


構成は下記です。

// フレームワーク: Next.js
// 言語: JavaScript
// css: sass
// インフラ: vercel
// フォーム: グーグルフォーム
// ブログ機能: microCMS

これで作成しました。
もう完全にjamstackな構成で当時はかなりモダンな構成だったと思います笑

もう俺しか作る人いないし、好きにやっちゃえー笑
って感じでした。


ちなみにこの時、API??何それ??
くらいのレベルだったので、ヘッドレスCMSを使ったAPI連携などは結構勉強になりました！(といってもこの時期はほぼ理解できていない)

フォームに関しては、グーグルフォームをサイトに埋め込んで、GASとLine messaging APIを使って会社の特定のグループラインに通知が来るようにしました！
これは結構社内でも、評価高くてGASも初めて使用することができたので、かなりいい経験になりました！

3月

2月でコーポレートサイトが大体作り終わっていたので、あとはリリースするだけ！！
みたいな感じでした。


最初はできんのかな笑
って思っていたのですが、気合いで普通に作れました笑


ただリリース日、前日の夜12時くらいにmacの電源が付かなくなるという大事件がおきました笑
いやーあれは今考えると1年で一番焦りましたね笑

まー自分のmacがあったので、githubからソース落としてなんとかいけそうだったのですが、
次の日朝からネカフェに飛び込んで、何年前のパソコンだよ、、、って感じのWindowsPCでテストしたのを覚えています笑


まーなにはともあれ、無事納期までにリリースすることができました！！

一応、一人目のエンジニアとして入社してコーポレートサイトを作ったので、社内での評価はちょっと上がった気がしました！！


そして3月はここからが本番でした、、、、

なんとリプレイスを受託していた企業が自体したんです！！！笑
そんなことありえんの！！！

って当時は思いました。
相変わらずエンジニアは自社に一人でまーまーこの時は絶望してました笑


通常業務では、GASを使って簡単な社内効率化システムを作っていました。
PDFの自動作成とメールの自動送信程度。

4月

その後、新しい受託開発企業が決まり、技術スタックも確定しました。

// フロントエンド: Nuxt.js, TypeScript
// バックエンド express, TypeScript
// インフラ: AWS, Docker
// CI/CD: CircleCI

幸いなことに技術スタック的には、かなりいい経験ができそうだったので、そこが心の救いでした。
一回受託開発企業の使っているPHPの独自フレームワークを使われそうになったので、全力で阻止しようとした記憶があります。(成功(⌒▽⌒))

ReactじゃなくてVueなんかい！！！！
って思った記憶はありますが、とりあえずここから個人的にはVueとTypeScriptの勉強をしていくことになります。


ただ、だいぶバタバタしていたのでリプレイスに参加するのはほぼほぼ諦めていました、、、


ただ社内で別の新規開発の予定があったため、そちらにjoinすることがこの頃くらいに決定しました！！！

そしてついに！！！！！！

4月中旬から、フリーランスでエンジニアの方が1人入ることが決定しました！！！

いやーこん時マジで嬉しかった記憶ありますね笑

エンジニア1人生活が3ヶ月半で終了を迎えました、、、
ここまでよく頑張ったと思う笑


って感じで4月は外部のリプレイスのディレクションと新規開発の要件定義を並行して行なっていた記憶があります。

新規開発はコーポレートサイトが評価されて、主にフロントエンドメインで入ることが決まりました。
この時もワイヤーフレームを鬼のように作った記憶があります。

5月

この頃にさらに会社が加速し、社員でエンジニアの方が1人入社されました！！！！
いやーこん時もマジで嬉しかった記憶があります笑


そしてフリーランスのエンジニアの方も1人入り、
新規開発は4人体制で行うことになりました！！


5月の途中くらいから実装が始まり、
SPAでバックエンドは完全に分離する構成だったので、APIができていなかったので
ひたすら静的なプレビューを作っていた記憶があります。


いや本当にラッキーなことにフロントエンドリーダーのフリーランスの方が、普段はライブラリーを作ったりと超技術力が高くてめちゃめちゃ勉強になりました！
この時cssスキルがバク上がりし、大体のサイトはデザインがあれば作れるなーくらいの感覚になっていたと思います。

初めてのプルリクでコメント72ついていました笑

6月〜7月

この頃も引き続き、実務では、フロント側の開発を進めていました。

SPA開発のCRUD処理を一通り経験できたので、この頃もかなりスキルアップできたと思っています。
またTypeScriptも独学していた頃はあまり使いこなせていなかったですが、現場のコードを直接触ることで
だいぶわかるようになりました。

まーけどやっぱり思ったのはVueはTypeScriptの相性があまり良くないですね、、、、
結構すんなり行けそうなところで詰まることが多かったのも事実です、、


この頃あたりから、個人的にReactの勉強を再開しました！
理由としては、実務で行なっているVueのコードの設計があまりにも綺麗だったので、
このまま個人的にVueの勉強をしてもコピペみたいになってしまうと思ったからです。


Vueで実現できいるコードをReactでどう落とし込むのか？？
を意識して勉強をスタートしていました。


この時思ったのはやっぱり自分はVueよりReactの方が書きやすいと思っています。
Reactの方がJSライクにかけるのと、Vueの実務レベルの情報って本当に少ないです。(書学者向けはめっちゃある)

あとはかなり書き方が色々自由に混在しているので、独自の書き方になりやすいかな〜と思いました。

8月

新規開発が大詰めを迎えている頃に事件が起きました笑

なんとリプレイスを外注していた会社がリプレイスを断念しました笑

え？？？

そんなことあんの！笑
って思ったんですけどこれ本当にあった怖い話なんです。。。

社内事情的に新規開発より、リプレイスを優先する必要があったので、
急遽、新規開発のメンバーが開発をストップして、リプレイスを行うことになりました、、


こうして、リプレイスに逆戻りすることになったのです笑

8月は何も知らないメンバーだったので、まずは仕様の把握と要件定義をするところから入りました。

いやーこれほんとにカオスな状況で、自分以外は5月に入って新規開発していたので、既存のサービスの仕様を全く理解していないんですよね笑

自分もちょっとわかるくらいな状況で、
仕様書なし、社内で仕様を把握している人０みたいな感じでソースをたどる以外に方法がない状況でした笑


足りないデザインも大量にあって、この頃デザイナーさんの手も足りていなかったので、自分も10ページくらいは既存のデザインを参考にしながらデザイン作っていました笑

もうむちゃくちゃな状況でXDとFigmaはだいぶ手慣れたと思います笑
個人的にはクラウドで管理した方が管理しやすいのでFigmaの方がおすすめです！

9月

9月はひたすら開発をするといった感じです。
新規開発と違って既存のデータを考慮しながらの開発になったので、カオスではありましたが、キャリアの初段会で
リプレイスを経験できたのはかなり大きかったと思います。


WordPressからのリプレイスって一見しょぼく聞こえるんですけど、

全然そんなことなくて、
まずWordPressで作ってあるのに、全然小規模なサービスじゃないんですよね笑

普通WordPressって簡単なブログサービスくらいで作るものなんですけど、普通にwebアプリケーションがWordPressで作られてるんです。。
決済機能も単発決済と継続決済の両方があり、しかも決済サービスもリプレイスするため、決済データも移行する必要があるという、もう意味わから〜んみたいな感じだったのを覚えています笑


この頃くらいから、個人開発をはじめました。

身内でECサイトを作って欲しいと要望があったので、面白そうだったので引き受けました。
技術構成は下記です。

// フロントエンド: Next.js, TypeScript, GraphQL
// バックエンド: shopify, store front API
// 　インフラ: vercel

Next.jsとTypeScriptは個人でずっと触っていたので、かなり慣れていました。
GraphQLは使うのが初めてだったので、挑戦してみましたが、かなり使いやすいな〜といった印象です！

Apollo Clientを状態管理で使ったのですが、これもかなり使いやすくて、もしGraphQLで開発することがあればApolloを使うかなと思いました。

shopifyは初めて使ったのですが、shopify自体は使いやすかったですね！
管理画面もわかりやすくて、しっかり作れる人がいるならbaseとかよりショッピファイの方が拡張性は高いかな〜と思いました。


store front apiに関しては使いやすいことは使いやすいですが、このAPI欲しいな、、、みたいのは結構ありましたね、、
少なくともsg構成でページネーションを作ったりするのに、もう少し欲しいプロパティがあるな〜とかは結構思いました。

10月~12月

本業ではひたすら開発です。
一通りのフロント開発を経験できたので、ログイン周りや決済周りなど、SPAでどのように構成していけばいいのかがわかりました。
この頃にはかなり成長を感じていて、普通のcrudと認証周りのアプリケーションだったら普通に作れそうだな〜って感じにはなっていました。

結論から言うとリプレイスは12月までに終わらず、1月に完了する予定です笑

本当は5月くらいに終わる予定で入社したのですが、結局1年終わってしまいました笑


個人開発ではこのブログをリリースしました！！！
Next.jsとTypeScriptでデザインから実装まで、全て行なって、コンポーネント設計など意識して行なったので、これもかなり勉強になりました。


メガベンチャーのメンターさんを雇ってコードレビューもしてもらいました！
この頃には入社してから基本給が10万くらいはあがっていたので、だいぶ自己投資できる金額も増えていっていました。

このブログは1年間実務を積んで、アウトプット的な感じで作ったので、1年学んだレベル感が出ていると思います。
よかったら見てください笑
https://github.com/abeshi03/tech-blog


あとはFirebaseを用いて、簡単なSNS的なサイトを現在開発中です。
いや〜Firebase最強だなって思う毎日です笑

1年を通して学んだこと

実務で触った内容

// Next.js, Nuxt.js, TypeScript, AWS, GAS, XD, Figma, vercel, microCMS

実務以外で触った内容

// GraphQL, Firebase, Node.js, shopify

まー割と濃い経験ができたんじゃないかと思っています！！
あとは社員にエンジニアが2人しかいなかったので、結構ディレクション周りとかもやらせてもらえて、これも大きな経験になったと思いました。

来年の目標

来年はバックエンド周りを結構触って行きたいな〜と思っています。
あとは来年からの新規開発でプロジェクトリーダーを任せてもらえることが決定したので、
気合を入れてディレクション周りもやって行きたいなと思っています！！