新米が考えるフロントエンジニアになるためのロードマップ

新米フロントエンドエンジニアが考えるフロントエンドロードマップ

新米フロントエンドエンジニアが考えるシリーズ!今回はフロントエンドの学習ロードマップについて書いていこうと思います。といいつつ筆者もまだまだ道の途中なので、しれっと次の学習のための調べものしてるテンションでまとめておきます。最近は、エンジニアの枠からちょっと片足を出してこんにちはする仕事をしています…

どもども!本日も天気の変わり目が激しくて、エンターテイメントな空模様ですね。在宅勤務なので、一ミリも関係のない龍ちゃんです。お盆真っただ中ですね。姉から姪っ子がミニプールに入っている写真を送ってこられて目覚めました。いや~朝から笑みがこぼれましたね。

さて!お仕事紹介系の記事になります。前回は、「WEBエンジニアってなんだ?」という観点で執筆していました(新米フロント担当がWEBエンジニアについてざっくりと紹介する:非エンジニアに向けて)。ふんわりと導入という感じで第一弾ですね。ざっくりと説明したので、具体的にどういうことを勉強すればよいかという話はしていませんでした。

今回は、そこを埋めるための記事となっています。といいつつも自分もまだまだ道の途中であるので、これから身に着けたい技術や学んだことも一緒に発信できれば良いなと思っています!

とても偉そうに書いていますが、ごりっごりの主観で書いていくのでどこかの誰かに突っ込まれる可能性大です。そこだけはご留意ください。

それでは本題です。

フロントエンドエンジニアって?

意外にも「フロントエンドエンジニアの仕事って何ですか?」って質問をよくされます。がっつり説明しようとすると聞く側も疲れるので、「WEBで動いている画面とかデザインを作る仕事だよ」と簡単に説明します。APIなどの知識がある人に対しては「JSON色付け係」って呼ばれて悲しいと伝えると必ず笑ってくれます(ちなみに本当に悲しいです)。もう少しちゃんと説明すると、「文字のサイズや色などの設定から、動きの設定などを担当する人」となります。

フロントエンドエンジニアの担当領分

画面を見ていますよね。そこにコンテンツが乗っていると思いますが、すべてのコンテンツをコードで配置して、動きを制御することがフロントエンドの主な作業領域です。このコンテンツが、どこからきてどのように配信されているかに関してはバックエンドの領域です。

弊社のブログで解説すると、入力項目が少ないのでイメージが難しいですが、入力フォームや問い合わせフォームなどで入力を受け取ってバックエンドに情報を渡すといったこともフロントエンドの領分になります。

基本的に中に載っているコンテンツなどは、お客さんもしくはライターさんが考える領域になっているので、文章を書くのはお仕事に含まれていないことだけ念押ししておきます。最近はほぼブロガーとなっている僕が言うのが最高な皮肉ですねw

それでは、フロントエンドにかかわる技術と領域について触れていこうと思います。

フロントエンドにまつわる技術と領域

さて!ざっくりとフロントエンドについて説明したところで、実際の仕事領域についての話をしていきたいと思います。先ほどの説明では、「WEBで動いている画面とかデザインを作る仕事」といった雑な説明をしておきました。実際に僕が業務で携わっている部分は、もう少し広いです。ちょっと下に出してみますね。

僕が最近学んでいる技術一覧

ちょっと別プロジェクトで使っている技術も乗っけているのですが、ざっくりとはこんな感じです。下に補足を出しておきますね。

// デザイン
// コードではなく、アプリ上でデザインを作成する<br/>WEBデザイナーという職があります..

// 画面を作る系
// デザインからデザインをコードに起こす部分<br/>大きさ・色・配置・動きなどを設定する

// インフラ系
// アプリケーションが動く場所。<br/>クラウドのキーワードはAzure GCP AWSあたり

// エンジニア教養
// これはGitHubやVSCodeのことを指しています

// 認証系
// Google認証などを使いたいとこに設定する<br/>自力で設定するよりも超絶簡単だから使わないと無理

僕の作業領域としては、インフラ系とデザインの仕事をちょこっとずつやっていました。「フロントエンドエンジニア」といっていますが、「画面しかやらない!」と考えると少し危険です。

僕の考え的には「画面をメインでやるけど、派生しやすいからいろんな技術を吸収するエンジニア」と認識しています。極論、HTMLとCSSを覚えれば画面を構築することができます。でも仕事となると、相当イケイケなスピードで構築できない限りは仕事になりません。なので、フロントエンドはいろんな技術を持っている必要があるというわけですな。

それでは、フロントエンドエンジニアになるために必要であると考えられるロードマップを作っていきたいと思います。

フロントエンドエンジニアになるためのロードマップ

さて!学習ロードマップを作っていきたいと思います。実はフリーのメンター活動をしています。人が入れ替わり立ち代わりという感じで、二人の方を見ています。バックエンドとフロントエンド志望それぞれ一人ずつという感じです。最近、フロントエンド志望の方が追加されたのでルンルンで作ったものをブログ仕様に変えてみました。

// プログラマー基礎
// GitやUnix系のコマンドをちょっと触ってみる

// デザイン// Figmaの使い方を覚えて、簡易的なデザインをしてみる<br/>一つWEBデザインを作ってみるところがゴール

// WEBデザイン基礎// HTML/CSSの基礎や書き方を覚える<br/>CSSフレームワークを使って感動を体感してみる!!<br/>TailwindやMaterial UIなどなど...

// WEB基礎// React +TypeScriptの基礎的な部分を勉強する<br/>ライブラリを使う練習などを行う

// インフラ系// アプリのデプロイをやってみる<br/>Azure or AWS or GCPのどれかの無料枠使う<br/>ここでCI/CDについて学ぶことができると素晴らしい

// アプリ作成
// これまでの学びを生かして何かを作ってみる<br/>デプロイする体験やコードレビューを体験する

// 商業プログラマーとしての知識
// 仕様書の書き方やきれいなコードの書き方などの知識習得<br/>仕様書の書き方は私も知りたい....

最近の私の持論ですが、「コードを書く前にFigmaを覚えたほうが良い」というのがあります。コードよりも直感的に操作することができるので、デザインの勉強がスムーズに進みます。デザインを作っているときは、思った以上に自分で納得するものが作れないので悲しいです。デザインとコードの勉強を分割することで、学習効率を上げようプロジェクトというわけですね。あらかじめ「くそデザイン」を画面で体感しておくことで、「頑張ってコードを書いたのにくそデザイン」という残念感を減らす目的もあります(いまだに「くそデザイン」を作っていますが)。

アプリの作成まですることができれば、ひとまずはエンジニアとなったでよいでしょう。そこから、友達のエンジニア集団の力を借りてコードレビューや仕様書の書き方を教えて、未経験なのに仕様書もかけるエンジニアを作ろうとしています。

メンター活動の基本はキーワードだけ与えて、自分で調べるスタイルでやっています。質問はやりたい放題プランに加入しているので、何回でも受け付けています。調べる能力もエンジニアには必要不可欠なので、これも練習ですね。もちろん、非同期的な開催だけでなく同期開催で勉強会も開いています。ええ感じにまとまったらそのうち報告しますね。

終わりに

ども!こんな感じで進めていけば、ちょっと仕事ができるフロントエンドエンジニアになれるかもしれません。なりたいという願望ですらありますね。

最近は、バックエンドの技術やインフラの技術にも勉強の幅を広げています。ちょうど後輩が入ってきてバックエンド志望ということもあり、情報交換などもやっていますが厳しい道のりだなと思っています。これからもフロントエンドエンジニアとして気張っていきたいです。

Figmaの記事を頑張って制作予定ですぅ~投稿したらぜひ読んでね。

ではまた~

ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です