フロントエンドエンジニア１年目に知るべきこと

2024年11月23日 14:57

こんにちは、hiroと言います。
未経験から独学でフロントエンドエンジニアなり、1年半年ほど経ちました。

経歴としては独学で学習後、受託開発会社を経て、現在は自社開発会社でフロントエンドエンジニアをしております。

今回はフロントエンジニア１年目にやるべきことを書いていこうと思います。

・これからフロントエンジニアになる人
・フロントエンドエンジニアにどんなスキルが必要か気になる人

そんな方はぜひ参考にしていただけると幸いです！

「動くけど良くないコード」はもう書かない

プログラミング学習では「まずプログラムが動くこと」が重要と言われますよね。

学習時に完璧を目指すのは挫折の要因になるので言いたいことはわかりますが、

現場に入ると「動くけど良くないコード」は書かないようにしなければいけません。

具体的例をあげると、

HTMLの場合
・適切なHTMLタグが使えていない
・p、h1~h3タグなどを使わず全てdivタグにしている
・非推奨のタグを使っている

CSSの場合
・クラスの命名法が適当、現場のコーディング規定に沿っていない
・インラインCSSを使っている
・主要ブラウザでサポートされていないプロパティを使っている
・HTMLタグにスタイルをあてている（クラス名をつけていない）

JavaScriptの場合
・古い構文や非推奨のメソッドを使っている
・変数や関数の命名法が現場のコーディング規定に沿っていない
・冗長な処理になっている

上記の対応でも動きはしますが、他の人が改修する時、解読に時間がかかったり、改修に時間がかってしまいます。こういった「動くけど良くないコード」は書かないようにしましょう。

基本的にはチームで開発するため、ソースコード管理ツールは必須になります。

GitそしてGithubの知識はないと仕事になりません。。
しかし自分もそうだったのですが、独学での学習時は一人なので、gitに関する勉強をあまりしないんですよね。。

仕事として開発を始める前にGithubの学習をおすすめします。
下記が理解できて実際に操作できれば問題ないと思います！

Git：
branch作成、checkout、commit、push、pull、stash

Github：
PR作成、マージ、レビュー、コンフリクト解消

※Git・Githubに関する記事作成中。。。

いわゆる報連相のやり方です。

・報告：slackやchatworkなどのコミュニケーションツールの効率的な使い方
・連絡：連絡の頻度はどれくらいが良いか
・相談：代替案出せるか

私自身、他業界からweb業界に転職しましたのですが
やはりweb業界はスピードが速いです。

自ずと報告、連絡などのスピードも早くなるんですよね。
なのでslackやchatworkなどのコミュニケーションツールをうまく使いこなすのも非常に大切です。

例えば
・Chatwork：よく送る典型文はボタン１つで送れるようにする
・Slack：「承知しました」などはスタンプで時短（スタンプは自作も可能です！）

などツールに合わせて、早めに効率化することをおすすめします！

また報告、連絡する時はできるだけ、スクリーンショットや録画した動画を使って認識を合わせるように意識してます。

文章だとどうしても認識の齟齬が出てしまうので・・

エディターやブラウザなどは毎日使うので、自分用に使いこなせるようにしておきましょう！

職場のルールもあるかもしれませんが、基本はVSCodeやChromeが便利です。

エディターはどれでも良いですが、VScodeはターミナル操作、拡張機能を使ったGitのブランチ管理も見やすく何かと便利です。またショートカットキーも合わせて覚えておくと仕事のスピードが上がります。

またSlackでアプリ連携をすれば、GoogleカレンダーやGithubのレビュー依頼などもリマインドしてくれます。こうした細かい工夫も生産性を上げてくれます。

いかがでしたでしょうか。
フロントエンドエンジニア１年目に必要なスキルをまとめると、

こんな感じですね。これからフロントエンジニアになる人の参考になれば嬉しいです。それではまた！