今年も残すところ僅かとなりました！
皆さんいかがお過ごしでしょうか？
僕は新調した強強自作PCで遊び倒していますw
今回のテーマはフロントエンドエンジニアになるまでの攻略チャートとなります…！
（僕の実体験を基にお話しできればなと！）
それではHapInSアドベントカレンダー2023、12日目やっていきましょう！
そもそもフロントエンドエンジニアってなんぞ？
そういった方も居るかと思います…
大雑把に表現するとWebサイトの表示に関係する技術を担当する人のことを指します！
ボタンの色、サイズ、表示位置やアニメーション、
背景色に画像の表示…etc
これらの実装を幅広く担当します！
必要な知識/スキルは何？
色々ありますが、HTML、CSS、javascript、これらは絶対に必要になります！
それぞれの役割として以下のようなイメージです！
- ・HTML → 文書（テキスト）の表示
- ・CSS → ページの装飾（色、サイズ、表示位置…etc）
- ・javascript → ページの動き（アニメーション、検索/ソート機能…etc）
上記以外にもデザインやバックエンドの知識もあれば尚良しといった感じです！
どうやって勉強したの？
僕はこれまで3社でお世話になっていて、
バックエンドエンジニアをやったりフロントエンドエンジニアやったりしていました…！
それぞれの企業でどんなことを学びどのように勉強したのか？
ここからは僕が実際にフロントエンドエンジニアになるまでのお話しです！
1社目：かけだしエンジニア（習得スキル：Java、SQL）
適当な学生生活を送っていながらも拾ってくれた会社さんがいました…！
そこではJavaをはじめとするバックエンドエンジニアをやっていました！
SQLを書きまくりデータと睨めっこのフロントエンドエンジニアとはかけ離れた世界です…
特に書くことは無いですw
2社目前半：ワイ、転生しフロントエンドエンジニアを目指す（習得スキル：HTML/CSS）
ここからは転職し昔から憧れていたフロントエンドエンジニアを目指すこととなります！
HTMLもCSSも全く分からない状態で軽く研修を実施した後に、
このデザイン通りにWebサイトを構築してねー！と作業を振ってもらいました！
書いては指摘、書いては指摘の繰り返しですw
転職してしばらくすると、とある先輩と一緒に案件をこなすことが増えてきました…！
そう、師匠との出会いです！
知識量、スピード、精度どれを取っても最強のフロントエンドエンジニアで、
その人の元で沢山のことを学びました！
最初は師匠の作成したHTML/CSSを参考に似たような画面を実装、
分からないことや疑問に思ったことは調べ、師匠に質問し解決。
少しずつ知識を自分のものにしていきました！
ただ、javascriptに関してはからっきしで師匠に助けてもらっていましたw
1年ほどでHTML/CSS、デザインの知識を習得することができました！
ここでの攻略法は以下の3つです！
- ・最初はとにかく写経（手を動かす）。編集してどこを変えればどう変わるのかを知る。
- ・慣れてきたら写経するだけでなく、なぜこの書き方（コード）なのかを理解する。
- ・自分の書いたコードを誰かに見てもらう。
2社目後半：vue.js？何それ？（習得スキル：HTML/CSS、javascript）
転職して2年目くらいからは参画した案件でお客さんから動きのあるページを作りたいという要望もあり、
本腰を入れてjavascriptを習得する必要が出てきました…
当時参画していた案件ではvue.jsを使ったWebサイトで何それ？状態です…
SPA、コンポーネント、store…聞いたことのない単語ばかり(´・ω・)
とにかく調べ有識者に質問、書く→エラーの繰り返しです…
幸い、メンバーの中にできるエンジニアがいたので本当に助かりました
半年もトライ＆エラーを繰り返した結果、ぼちぼち書けるようになりましたw
ここでの攻略法は以下の3つです！
- ・分からない部分、エラー文を調べる
- ・15〜30分くらい考え調べても解決しないなら有識者に聞く
- ・いきなり全体を実装するのではなく、細かい単位で実装
3社目：ワイ、覚醒…！（習得スキル：HTML/CSS、javascript）
2社目では学べることがなくなったので転職をしました！
なお、この記事を書いている現在でもお世話になっている企業になります！
最初の案件は前回と同じくvue.jsを使ったWebシステムです
チームの構成は僕がサブリーダー、メンバーが2人でした
初めてのサブリーダー…不安でいっぱいです…
僕以外の人間はvue.jsを触ったことがなかったので1から教えました…w
大変だった反面、自分自身改めて学ぶことも多かったです！
実装に関しても段々とロジカルな思考が身に付いてきました！
Aを実装したい→どこからデータを持ってきてどのように加工すれば良いのか？
目的を達成するために必要な処理を最小単位で考える
頭の中でフロー図を書くようなイメージですね
この瞬間、何かを掴んだ気がしました
ここでの攻略法は以下の3つです！
- ・実現したいことを理解
- ・データの流れを理解
- ・目的を達成するために必要な処理を最小単位で考える
現在は何をしているのか？
現在はreactを使ったWebシステムの実装やレビューといった、
フロントエンドエンジニアとしてやらせてもらっています！
react自体は初めて触ったのですが、
これまでの経験や攻略を活かすことで特に苦労することなく対応できるまでになりました！
今でも心掛けていることは、
- ・他の人のコードを見る・理解する
- ・エラーで詰まったり、分からない部分は調べる・質問する
- ・目的を達成する為にどう実装すれば良いかを最小単位で考える
上記を駆使すれば大抵のことはなんとかなりますw
長くなりましたが、これからフロントエンドエンジニアを目指そうとしている人の参考になればなと思います！
