この記事を読んでほしい方
- フロントエンドエンジニアとして転職をしたい方
- Web制作の業務がつらいのかを知りたい方
フロントエンドエンジニアの業務はひたすらPCと向かい合う作業です。
これからフロントエンドエンジニアとしての転職を考えている方は、
この仕事がどのくらいの業務量なのか、精神的につらいのか、気になりますよね。
今回は、僕がWeb制作の現場で働いてきた中で見てきた、フロントエンドエンジニアの実情を書いていきますので、
転職する際の判断基準として、参考にしてみてください！
フロントエンドエンジニア・Web制作の業務はつらいのか？
結論、状況や人によるんですが、
「業務量・作業量は多いけど、つらくならないように仕組みをつくることができる」
というのが僕の回答になります。
フロントエンドエンジニアは、Webサイトなどの見た目を、ブラウザ上で見ることができるように整えていくことが仕事になりますが、
その作業を効率的に回すには、どうすべきか？も考える必要がある業務です。
たとえば、よく使うコードはいつでもすぐに記述できるように「スニペット」を使うとか、
運用がしやすいように、他の人が見ても分かるように、自分なりでも良いのでコーディングルールに則って作業をするなどですね。
スニペットとは？
「スニペット」は、特定のコマンドを打つと、コードが自動的に出てきてくれる仕組みです。
わざわざコードを書き直す手間を省いてくれます。
最初のころは、コードに慣れるためにあまりスニペットを使わないことをおすすめします。
コードを書いているうちに、「このコードよく使う」とか「この長いコードを一瞬で出したい」とか
考えることが出てくると思うので、そのときにスニペット化すると良いかと思います。
おそらく、慣れないうちからスニペットを使おうと思うと、
改良を加えるために何度もスニペット登録を繰り返すことになると思います。。。
スニペットは、コードエディタごとに登録するための記述が違うので、
「ジェネレータ」を使うのが良いでしょう。
ジェネレータを使えば、コードをそのエディタのスニペット記述に自動で置き換えてくれます。
ググったら、出てくると思うので、試してみてください！
コーディングルールに則って作業すべき理由
これは、「修正や運用がしやすいようにしておくため」、「チームで作業できるようにするため」ですね。
例えば、HTMLやCSSでレイアウトを組んでいくとき、
CSSのクラス命名ルールがないと、意図しないスタイルが当たって、
レイアウト崩れが発生したりします。
そうなると、レイアウトを組んだ場所のみならず、
全体を見てレイアウト崩れがないか確認しないといけません。
これが「修正や運用がしにくい」コードの一例です。
クラス名のルールがあれば、上記のような「CSSの干渉」は未然に防げますし、
確認の手間を取らず修正や運用ができます。
また、コーディングルールが一貫していれば、CSSの命名を考える必要がなく、レイアウトを整えたり、スタイルを当てたりすることができます。
これは、チームで制作する上で、大事な考え方だと思います。
ルールを展開すれば、「制作者に問わず、質や工数をある程度一定に保つ」ことができるからですね。
「コーディングルール」という考え方を持っておけば、サイトによって「どのくらい工数がかかりそうか？」を事前に把握できますし、
事前にどのくらいの業務量になりそうかを逆算できますので、
業務がつらくならないための仕組みとしておすすめです。
チームのコーディングルールと、自分のコーディング手法との相性にもよる
とはいえ、すでに所属するチーム用のコーディングルールができていて、自分のコーディング手法と違った場合は、
チーム用のコーディングルールに慣れるまで時間がかかるでしょう。
もちろん、チーム用のコーディングルールは、その案件の特性に対して作られていることが多いと思うので、そのルールに則ったほうが後々問題が出にくいと思います。
なので特に初学者のうちは、色々なコーディングルールに触れておいたほうがいいかなと。
意識しておいたほうが良いと思うのは、
- 案件の修正や運用を任されたときは、一通りコードを見て規則性を確認する。
- コーディング設計を学ぶ。（BEMがおすすめ。）
このあたりですね。
色々なコーディングルールに触れて、それらを修正や運用できるようになれば、
様々な案件を作業することができるので、おすすめです。
また、すでに提唱されている「コーディング設計」は存在するので、
コーディングルールに触れながら設計方法を探してみてください。
BEM設計をざっくり説明
ちなみに、僕がおすすめしたいのは、BEM設計です。
BEMのメリットは、
- パーツやコードを流用・修正しやすい
- パーツをちょっとだけ変えたいときのクラス名ルールがあるので、CSSが破綻しづらい。
このあたりですね。
WordPressなどのCMSにも組みやすいです。
「ちょっとだけ変えたい」の範囲としては、色味を変えるとかの見た目の部分だったり、
ボタンを非活性（押せないようにする）にするなど状態を変えたり、の範囲です。
初心者のうちは、ガンガン作業に打ち込むのがおすすめ
コーディングの設計やルールを抑えることができれば、かなり仕事はしやすくなると思います。
ただ、設計やルールの概念にたどり着く前に、やはり作業に慣れる必要があると思いますので、
初心者のうちは作業に打ち込むことを個人的にはおすすめします。
追々、自分で設計ができるように、作業しつつルールを意識していくことが大切だと思います。
設計やルールが分かってくることも楽しさのひとつなので、
ぜひ意識しながらコーディング作業に取り組んでみてください！
