新米フロントエンドエンジニアが考えるシリーズ！今回はフロントエンドの学習ロードマップについて書いていこうと思います。といいつつ筆者もまだまだ道の途中なので、しれっと次の学習のための調べものしてるテンションでまとめておきます。最近は、エンジニアの枠からちょっと片足を出してこんにちはする仕事をしています…
どもども！本日も天気の変わり目が激しくて、エンターテイメントな空模様ですね。在宅勤務なので、一ミリも関係のない龍ちゃんです。お盆真っただ中ですね。姉から姪っ子がミニプールに入っている写真を送ってこられて目覚めました。いや～朝から笑みがこぼれましたね。
さて！お仕事紹介系の記事になります。前回は、「WEBエンジニアってなんだ？」という観点で執筆していました（新米フロント担当がWEBエンジニアについてざっくりと紹介する：非エンジニアに向けて）。ふんわりと導入という感じで第一弾ですね。ざっくりと説明したので、具体的にどういうことを勉強すればよいかという話はしていませんでした。
今回は、そこを埋めるための記事となっています。といいつつも自分もまだまだ道の途中であるので、これから身に着けたい技術や学んだことも一緒に発信できれば良いなと思っています！
とても偉そうに書いていますが、ごりっごりの主観で書いていくのでどこかの誰かに突っ込まれる可能性大です。そこだけはご留意ください。
それでは本題です。
フロントエンドエンジニアって？
意外にも「フロントエンドエンジニアの仕事って何ですか？」って質問をよくされます。がっつり説明しようとすると聞く側も疲れるので、「WEBで動いている画面とかデザインを作る仕事だよ」と簡単に説明します。APIなどの知識がある人に対しては「JSON色付け係」って呼ばれて悲しいと伝えると必ず笑ってくれます（ちなみに本当に悲しいです）。もう少しちゃんと説明すると、「文字のサイズや色などの設定から、動きの設定などを担当する人」となります。
画面を見ていますよね。そこにコンテンツが乗っていると思いますが、すべてのコンテンツをコードで配置して、動きを制御することがフロントエンドの主な作業領域です。このコンテンツが、どこからきてどのように配信されているかに関してはバックエンドの領域です。
弊社のブログで解説すると、入力項目が少ないのでイメージが難しいですが、入力フォームや問い合わせフォームなどで入力を受け取ってバックエンドに情報を渡すといったこともフロントエンドの領分になります。
基本的に中に載っているコンテンツなどは、お客さんもしくはライターさんが考える領域になっているので、文章を書くのはお仕事に含まれていないことだけ念押ししておきます。最近はほぼブロガーとなっている僕が言うのが最高な皮肉ですねｗ
それでは、フロントエンドにかかわる技術と領域について触れていこうと思います。
フロントエンドにまつわる技術と領域
さて！ざっくりとフロントエンドについて説明したところで、実際の仕事領域についての話をしていきたいと思います。先ほどの説明では、「WEBで動いている画面とかデザインを作る仕事」といった雑な説明をしておきました。実際に僕が業務で携わっている部分は、もう少し広いです。ちょっと下に出してみますね。
ちょっと別プロジェクトで使っている技術も乗っけているのですが、ざっくりとはこんな感じです。下に補足を出しておきますね。
僕の作業領域としては、インフラ系とデザインの仕事をちょこっとずつやっていました。「フロントエンドエンジニア」といっていますが、「画面しかやらない！」と考えると少し危険です。
僕の考え的には「画面をメインでやるけど、派生しやすいからいろんな技術を吸収するエンジニア」と認識しています。極論、HTMLとCSSを覚えれば画面を構築することができます。でも仕事となると、相当イケイケなスピードで構築できない限りは仕事になりません。なので、フロントエンドはいろんな技術を持っている必要があるというわけですな。
それでは、フロントエンドエンジニアになるために必要であると考えられるロードマップを作っていきたいと思います。
フロントエンドエンジニアになるためのロードマップ
さて！学習ロードマップを作っていきたいと思います。実はフリーのメンター活動をしています。人が入れ替わり立ち代わりという感じで、二人の方を見ています。バックエンドとフロントエンド志望それぞれ一人ずつという感じです。最近、フロントエンド志望の方が追加されたのでルンルンで作ったものをブログ仕様に変えてみました。
最近の私の持論ですが、「コードを書く前にFigmaを覚えたほうが良い」というのがあります。コードよりも直感的に操作することができるので、デザインの勉強がスムーズに進みます。デザインを作っているときは、思った以上に自分で納得するものが作れないので悲しいです。デザインとコードの勉強を分割することで、学習効率を上げようプロジェクトというわけですね。あらかじめ「くそデザイン」を画面で体感しておくことで、「頑張ってコードを書いたのにくそデザイン」という残念感を減らす目的もあります（いまだに「くそデザイン」を作っていますが）。
アプリの作成まですることができれば、ひとまずはエンジニアとなったでよいでしょう。そこから、友達のエンジニア集団の力を借りてコードレビューや仕様書の書き方を教えて、未経験なのに仕様書もかけるエンジニアを作ろうとしています。
メンター活動の基本はキーワードだけ与えて、自分で調べるスタイルでやっています。質問はやりたい放題プランに加入しているので、何回でも受け付けています。調べる能力もエンジニアには必要不可欠なので、これも練習ですね。もちろん、非同期的な開催だけでなく同期開催で勉強会も開いています。ええ感じにまとまったらそのうち報告しますね。
終わりに
ども！こんな感じで進めていけば、ちょっと仕事ができるフロントエンドエンジニアになれるかもしれません。なりたいという願望ですらありますね。
最近は、バックエンドの技術やインフラの技術にも勉強の幅を広げています。ちょうど後輩が入ってきてバックエンド志望ということもあり、情報交換などもやっていますが厳しい道のりだなと思っています。これからもフロントエンドエンジニアとして気張っていきたいです。
Figmaの記事を頑張って制作予定ですぅ～投稿したらぜひ読んでね。
ではまた～
