初めに

未経験からフロントエンド・エンジニアに転職し１年が経ちました。
初心に立ち返って、この一年間を振り返ってみようと思います。

前職

大学を出た後、

塾の講師　３年
証券会社　１年
経験しました。

基本的にエンジニアとは関係のない仕事をやっていました。
webデザインの学校に半年間、通った後に現在の会社に勤めることができました。

エンジニアになる前のスペック

HTML&CSSでサイトのコーディングができる
jQueryで簡単なアニメーションが付けれる
JavaScriptでToDoアプリが作れる
PHPでwordpressのテーマ作成ができる

独学で主に、ドットインストールを使って学習していました。

そもそも、なんでエンジニアに転職したの？

自分の頭の中にあるイメージを、実際に具現化したかったからです！

元々、塾の講師の仕事をしていた時から、自分でものを作ってみたいというクリエイティブ欲がずっとありました。
塾の講師の仕事は、体制がきっちりしている分、自分で創意工夫できる余地が少なく、給料には満足しているものの、仕事のやりがいが満たされない時期が続いていました。
20代後半になり、そろそろキャリアチェンジできるチャンスもないなと思い、思い切って職業訓練校に通い、エンジニアになることを決意しました。

もともとは、webデザイナーを目指していましたが、無限×無限の組み合わせの中から最適解を見つけるデザインの作業に途方に暮れました。
文字一つとっても、文字の色・大きさ・フォントの種類・文字間・配置の仕方・変形などなど考えないといけないことが多々あります。

一方で、プログラミングの授業に関しては、他の人が「難しい」とか「つまらない」と感じるポイントが、自分の中では「面白い！」と感じることができました。

プログラミングの魅力

プログラミングの魅力は、日常では味わうことができない万能感と無力感を味わえるところだと思っています。

プログラムがエラーを吐くばかりで、まったく思い通りに進まないときは、「自分はなにもできないんだぁ・・・」と無力感でいっぱいになります。(実際、一番最初は画面に「Hello World」を出すだけで何時間もかかっていました。)
しかし、自分の思い通りにプログラムが動いてくれた時は、自分が神にでもなったかのような万能感が味わえます。

職業訓練校で半年間、受講した後、
面接は10社ほど受け、２社から内定を頂きフロントエンド・エンジニアとして転職しました！
(未経験からエンジニアになって、給料は前職の３分の２に下がりましたが。。。)

１カ月目～３カ月目

この時期はとにかく仕事を覚えるのに精一杯でした。
個人制作の時には、必要がなかった知識などがたくさんあり慣れるのに必死でした。
（GTMなどの広告の計測タグがこんなにもたくさんあることを知らなかったです。）
２か月目に納品したデータのレイアウトが崩れる事故を起こしてしまい、めちゃくちゃ凹みました。。。

３か月目～６カ月

仕事にも慣れてきて、余裕が出てきました。この時から、自己学習として、React, Vue.jsのフレームワークをはじめました。
また、自分から「こんなアニメーションを付けてみたんですが、どうですか？かっこよくないですか？」と提案することが多くなりました。（残念ながら、提案23個中、通ったのは１案だけでしたが）
この時期に 「提案は準備段階で９割決まる！」 と実感しました。

６カ月目～９カ月目

初めて、社内の注力案件を担当しました。新ブランドサイトの立ち上げにかかわらせてもらって、クライアントと直接、やり取りする機会もありました。
クライアントの要望が二転三転したこと、納期ギリギリになってしまったことが反省点です。
この時期には、社内のすべてのプロジェクトに何かしらの携わり、常時10個以上のプロジェクトを抱えて、タスクとスケジュール管理が大変でした。

９カ月目～１２カ月目

後輩の人も入ってきて、人に教える機会も増えました。（この時に前職の塾講師の経験が活きました。）
社内の案件は、基本的にまず私のところにやってきて、振り分けをする体制になりました。
現在は社内のメイン・コーダーという位置づけになっています。

１年間通して学べたこと

コードを書くことはエンジニアの仕事のごくごく一部

サッカー選手が１試合(90分)の中で、ボールに触れている時間は、2~3分程度だそうです！
オン・ザ・ボールとは？1試合どれくらい？サッカー用語解説！

サッカー選手は、ボールを持っているとき、もっと言えば、ゴールを決めた時しか注目されないですが、
試合のほどんどの時間をボールを持つためのポジション取りに時間を使っています。

サッカーと同じように、エンジニアもコードを書くことばかりが注目されていますが、
コードを書く以外にも業務はたくさん存在します。

働く前は、エンジニアは画面にコードを打ち込む仕事が中心かと思っていましたが、それ以外の仕事もおおく、例えば、

スケジュール管理
タスク管理
認識のすり合わせ
ドキュメント作成
品質チェック　　などなど

細かい仕事が多かったです。
今後の課題として、作業を自動化するです。
（例えば、誤字脱字がないかの品質チェックは、専用ツールに任せるなど）

コードを整理することは、２週間後の自分を救う

「忙しいから」という理由で、ついついサボりがちになってしまうのですが、コードを整理すること（リファクタリング）は他のエンジニアだけでなく、未来の自分も救います。
（「誰だよ！こんなコード書いた奴！」と思って調べると、過去の自分だったりすることがよくあります。）

２カ月目に、１度、事故を起こしてしまってからは積極的にリファクタリングをするようになりました。
README.md ファイルを作って、詳しく説明したり、
コードの中でJSDocコメントで関数・変数の説明を書くようにしました。

もっとも参考になったのは、「リーダブルコード」です。
他、HTML/CSSの書き方に関しては、CSS設計完全ガイドが非常に参考になりました。

認知資源を無駄遣いしない

エンジニアは基本的に、集中力という認知資源を用いて仕事をする業種だと思っています。

集中力を失ったエンジニアは、ドラクエでMPが0の魔法使いぐらい使い物にならないです。

魔法の杖でモンスターを叩いても大したダメージにはならないように、
頭が疲れている状態で残業するのは非常に生産性が悪いです。

いかに、重要な部分に認知資源を、配分できるかが大事です。

定型文の返信や、確認作業などの脳が働いていなくてもできる作業は残業時間に回して、日中の頭が働いている時間に、複雑なプログラムのコードを書くようにしています

質問は具体的に

エンジニアである以上、常にわからないことが出てくるので、
質問の仕方にも、工夫が必要だと感じました

「曖昧な質問に対しては、曖昧な答えしか返ってこない」

質問するときは、なるべく具体的に、例を挙げながら質問しないと、自分が欲しい答えにたどり着かない。
例えば、「どうすれば、プログラミングが上達しますか？」という質問では、抽象度が高すぎて、「毎日、継続すること」などのざっくりとした答えしか返ってこないです。

もっと具体的な質問をするように心がけています。

ex) 「フロントエンドを担当しているのですが、最近AWSの学習を始めました。ただ、AWSについて多機能すぎて何から学べばいいのか迷っています。実務で使っているAWSの機能について話してほしいです！」
(Podcastのひまじんプログラマーの週末エンジニアリングレッスン #095 フロントエンジニアのためのAWSのいろはで採用いただいた内容です！)

また、わからない箇所を質問するときは、

「この部分がわからない」と場所を特定すること
自分で調べてみたwebサイト
実際に書いたコード

をのせて質問するようにしています。

回答の初期値を与えて尋ねる

上長の許可など、何か確認や交渉が必要な時は、
「私は○○がいいと思うのですが、○○で大丈夫でしょうか？」
のように、なるべくYes/Noや選択肢で答えられるクローズド・クエスションで尋ねるようにしています。
関数化するとこんな感じです。

question.js

function question(currentAnswer = myAnswer){  // 回答(answer)の初期値は自分の考え(myAnswer)を与える
    let answer = currentAnswer;
    members.forEach(member => {  // メンバーに聞いて、回答をブラッシュアップする
        answer = member.ask()
    })
    return answer;
}

相手のメンツをつぶすような発言はしない

職場には、相性が悪い人が1人や2人は要るものです。
そんな、相手に対して、最もやっていはいけないのが、メンツをつぶすことです。

具体的には、
「こんなのも知らないのですか？」
「出来て当たり前ですよ」
など、相手のメンツをつぶしてしまうと、
感情的になってしまい、建設的な議論ができなくなります。

相性が悪い相手とは、

なるべくエネルギーを使わない
ビジネス相手だと割り切る
関係性が悪いだけで、相手の人格まで否定しない

ことが大事になってくると感じました。
職場の人と仲がいいのが理想ではありますが、仲が悪くても仕事と割り切って協力するのがプロだと思います。

今後、やってみたいこと

フロントエンド・エンジニアとしてもっともっとスキルを伸ばしていきたいなと思っています。
具体的には、React(Next.js)を使ってwebアプリ開発の仕事に就きたいと思っています。
最終的には、多くの人に「使ってみよう！」とか「やってみよう！」という気持ちにさせる、行動変容のきっかけとなるwebサービスに携わりたいなと思っています！
(例えば、youtubeやtiktokなどサービスは、映像を受け取るものから発信するものに変えた。)

終わりに

１年を振り返ってみて、HTML/CSSで簡単なレイアウトのページしか作れなかった自分が、JavaScriptでアニメーションを付けたり、PHPで動的サイトを作成出来たりと、自分ができる範囲が広がりました。
ただ一方で、JSフレームワークを使ったSPAやwebアプリ開発の知識はまだまだと実感しています。
エンジニアは一生勉強し続けなければいけない職業だと思っているので、これからもたくさん学習していこうと思います！