元コーダーの僕がフロントエンドを3年経験して思うこと
WRITER
小池
自称イーガオのマジシャン。
React／Next.jsが好きなフロントエンドエンジニアです。
最近はUI/UXデザインにも手をつけてる。
もくじ
おはこんばんちは！小池です。
イーガオに入社してからかれこれ3年経つので、振り返りも兼ねてフロントエンドのことについて語ろうと思います。
コーダーとしては2年経験していたのでコーダーも合わせると5年になります。
大滝さんの過去記事のちょっとしたまねですw
サムネも拝借しました🙇♂️
未経験からWebエンジニアになって3年が経ったいま、思うこと【前編】
未経験からWebエンジニアになって3年が経ったいま、思うこと【後編】
コーダーとフロントエンドエンジニアの違いって何？と思う方もいると思うので説明しておきます。
コーダー
開発対象が企業のWEBサイトやLPが主
使用技術はHTML、CSS、JavaScript、PHP、CMS（WordPress）あたり
フロントエンドエンジニア
開発対象がアプリやシステムのフロントエンドが主
使用技術はHTML、CSS、TypeScript、React、Vue、Next.js、UIライブラリ、その他ライブラリあたり
コーダーもフロントエンドエンジニアとして呼ばれることもありますが、この記事内では切り分けて定義します。
あと、フロントエンドの経験は自社開発の企業か受託・SES開発の企業かでも大きく変わると思うので、僕自身が経験したSESでの場合として捉えてもらえたらと思います。
なぜフロントエンドを選んだのか
なぜ僕がバックエンドではなくフロントエンドを選んだのか気になる方もいると思うので話しておくと、理由としてはいくつかあるけど以下のような感じです。
- コーダーで今まで培ってきた知識や経験が活かせそうだから
- 今後フロントエンド人材が求められると考えたから
- 新しい技術に触れられる機会が多そうだから
- ユーザーとしてアプリを使用している時に使いづらいアプリがあるのが気になったから
その中でも一番大きな理由は2番ですね。
ちょうどフロントエンドに移ろうと考えてた時期は徐々にフロントとバックで開発を分けるスタイルが浸透し始めていた頃で、そうなるとバックエンドはプログラミングスクールなどで教えられているのでどんどん増えていくけど、フロントエンドはプログラミングスクールではほとんど教えているところはなかったし、新しく誕生した職種なので今後不足するのではと考えてました。
実際のところは、バックエンドに比べるとフロント人材の方が不足している実感はあるけど、それによって大きく給与が上がるとかそういった実感は少ないですね。
コーダー経験は基礎となって生きてる
当然と言えば当然ですが、アプリ開発のフロントエンドも主な業務はアプリのUIをつくることなので、コーダーで培ったHTML、CSS、JavaScriptなどの技術は基本スキルとして十分生かされていて、その点はコーダーやっていて良かったなと思いました。
例えば、フロントエンドではReactやVueでUIを構築していきますが、その時に組み合わせ方や階層がおかしな形だと後からCSSなどでスタイルを当てる時に苦労することになると思います。
UI構造（骨組み）をきれいにつくるのは思いのほか重要なことです。
バックエンド出身のエンジニアの人たちはUIを設計したり・実装したりがたぶん苦手だと思うので、その点コーダー出身だと有利です。
コーダーの方が難しいこともある
フロントエンドはコーダーの上位互換のように一般的には言われるので、当然フロントエンドの方が難しいと思うのが自然でしょうが、経験してみるとここはコーダーの方が難しかったかなと思う部分はありました。
例えばフロントエンドではUIは全くの一から作成することはあまりなくて、たいていはMUIやBootstrapなどのUIライブラリを使ってUIを組み立てていくので素早く実装することができます。
（デザイナーがいる場合は一から作成していくかもしれませんが、それでもアプリのUIはシンプルで整った形が多いので実装はしやすいと思います）
対してコーダーは、デザイナーが丁寧にデザインしたデザインを元に一からHTMLとCSSでUIを作成していくので時間もかかりますし、デザインが凝っていることも多く、スマホとPCで大きく見た目が変わることもあるのでその点ではコーダーの方が難しかったです。
あと、フロントエンドはCSSライブラリを使ってコンポーネント毎にスタイルを当てていくのでCSSの適用範囲はコンポーネント内に限られるけど、コーダーのCSSの適用範囲はグローバル（ファイル全体）なので意図せずスタイル崩れが起きてしまうので、BEMなどでCSS名称が被らないように命名規則を工夫する大変さがあります。
エンジニアとして認められる
コーダーだとHTML・CSSなどのマークアップ言語を書いていることが多いので人によってはプログラミング言語ではないとか言われてエンジニアとして扱ってもらえない可能性が出てきますが、フロントエンドをやっていれば開発する対象がアプリやシステムであったり、UIだけじゃなくJavaScriptでロジックも書くのでまずエンジニアとして扱ってもらえます。
エンジニアとして扱ってもらえると単価感が上がり、給与面で得しやすかったりするので案外大事なことです。
新しい技術は楽しい
フロントエンドは比較的新しめの技術が多いので触っていて楽しさがあります。
例えば、ReactやVueでUIを実装するとページ遷移の方法がSPAなので、ページのロードなしにさくっとページ遷移できるので気持ちがいいし、Next.jsを使うとサーバーサイドで動くAPIやロジックも実装できるのでこんなこともできるのかと驚きがあって楽しいです。
UIライブラリにもそれぞれに特色があるので、流行りの今っぽい見た目を簡単につくることもできます。
いろいろなライブラリを試してみるとの面白いと思います。
要件定義と画面設計はめちゃ大事
最近ひしひしと感じてるのが、実装に入る前の要件定義と画面設計（デザイン）がめちゃ大事だなと思うことです。
要件定義の段階で間違った仕様で捉えていると、いくら使い勝手が良くて優れたUIを作成してもお客さんの満足のいくものはできないし、画面設計でUIの大本やアプリの使い勝手の良さが決まってしまうので、実装の段階でUIを大きく変えようとしても難しくなります。
大きく変わるとバックエンドAPIも修正しないといけない可能性も出てきますし・・・
バックエンドエンジニアにとっての設計はDB設計やAPI設計になると思いますが、フロントエンドエンジニアにとっての設計は画面設計です。
画面設計はデザインなので本来はデザイナーの業務のはずですが、SESの現場ではなぜかデザイナーが一人もいないことが多いので、画面側を担当しているフロントエンドエンジニアが代わりを務めることになります。
デザイナーが一人もいないのはどうかといつも思ってるのですが・・・
フロントエンドとバックエンドが別れていなかったころは、バックエンドも担当するエンジニアが画面設計まで担当していたということなので、すごいなと思うと同時に僕はSESの問題点の1つだと捉えてます。
最近は実装より、要件定義・仕様整理や画面設計に時間を使って普段の業務を進めています。
なので実装段階ではあまり深く考えることは少ないですね。
画面設計には日々悩まされています。
デザイナーのすごさを感じてます。教えてほしい・・・
イーガオではUdemyが社内制度として無料で使えるので、デザインもUdemyで勉強したり、あるいは本を自分で購入して読んでます。
イーガオでは電子書籍端末の貸与を行っていてそちらも使えるんですが、技術本系は大判で電子書籍端末だと読みづらいのと自分で所有したい気持ちもあるので自分で購入してます。
学習支援系の社内制度を紹介します
フロントエンドの先輩・後輩がなかなかできない
現場によるところもあると思いますが、まだまだフロントエンド人材が少なかったり、やってる人もバックエンドの片手間で携わっている人が多い印象があるので、何か悩んだ時にフロント面でしっかりと相談できる人がいなくて困ったことはありました。
ただそうはいっても仕方がないのでググる時は英語でも検索したりAIに聞いたりしてなんとか解決策を見つけていました。
おかげでググる力や自己解決する力はついたと思いますw
あと同じ理由で初っ端からフロントエンドをやりたい人が少ないので後輩もできずらいです。
教えるの好きだから教えたいのにな・・・
言語が万能なのでその後展開していきやすい
割とフロントエンドやっていてメリットだなと思ったことの1つにその後の横展開がしていきやすい点があげられます。
フロントエンドの言語はTypeScript（JavaScript）1択ですが、1択だからこそTypeScriptは色々な周辺技術が生み出されていて同じ言語で様々なことができるようになっています。
例えば、1つの言語で以下のことができます。
- Node.js環境で動くNest.jsでAPIがつくれる
- React Nativeでスマホアプリがつくれる
- Electronでデスクトップアプリがつくれる
あとデザイン分野とも隣接してるのでデザイナーへの転職もしやすいと思います。
バックエンドも学んでおくといい
フロントエンドにバックエンドの知識が必須かというと経験上必須ではないと思います。
バックエンドの知識がなくてもフロント業務としてはできていたので。
ただ、
- DB設計とSQL
- いずれかのバックエンド言語
の基本ぐらいは学んでおくのを推奨します。
そのあたりの知識がないと仕様整理が難しかったり、バックエンドエンジニア同士の会話が意味不明になりますw
あとバックエンドの人とコミュニケーションが取りやすくもなります。
僕もここ最近はDB設計やSQLなどバックエンドの基礎・基本を体系的にUdemyで学習してます。
なんだかエンジニア1年生に戻ったような気分を味わいながら・・・
今後の方針は？
今後はよりエンジニアとしての幅を広げるために、バックエンドにたずさわっていければなと思ってます。
なので最近はバックエンドの根幹となるデータベースやSQLの基本等を勉強してます。
学ぶことは好きなので苦も無く、休日の午前とかで楽しく勉強できてます。
バックエンドにたずさわってからも、他の人たちとの違いを出していくためにフロントエンド部分は軸として自分の強みとして大事にしていきたいです。
君もフロントエンドエンジニアにならないか？✋️👊
もしイーガオにご興味があって一緒に働きたいと思ったらお問合せからどうぞ！！
About us
