10年前のコーダーが、モダンなフロントエンジニアになる話

はじめに

本記事は

• 業務上レガシーな環境で開発をしている
• モダンな環境でやっていきたいけど何を勉強したら良いかわからない

といった方に向けて、何かの助けになればと書いた記事です。

2012年、都内のとある「受託制作会社」

主人公（以下「主」）「またこのタイプのLP制作ですか〜。納期いつなんですか？」

ディレクター「本当に申し訳ないけど、先方都合で今日中で！」

主「（今日中って翌営業日の始業までだから徹夜してやれって事なんだよなぁ）」
主「（今日も徹夜か…）」
主「とりあえずデザイン見せてください。」

ディレクター「ファイ○ースト○ージのURL送るね！」

主「どれどれ。フォトショのバージョン落としてないな…こちとらCS4なんじゃ」

~~ 数時間後 ~~

主「秀○エディター開いて…」
主「XHTMLでっと…」
主「このレイアウトはtableタグで…」
主「この立体的なボタンはいつも使ってるCSSコピペ！」
主「スライダーは、よくわかってないけどjQueryのプラグインで、記述もコピペ！」
主「動くからヨシ！」

~~ 午前4時30分 ~~

主「（なんとか終わって、退社できた…）」
主「（始発で帰ってシャワー浴びて…2時間くらいは寝られるかな…）」
主「はぁ…（いつまでこんな働き方しなきゃいけないのか…）」

？「あぶなーーーーーーーーーい！！！！」

主「え？！？！！！！？」

トラック「キキーーーーーーーーーーッ！！！！！！」

「ドシャっ！！！！！！」

（ヒーポーヒーポー…）

2022年、都内のとある「受託制作会社」

主「う…うぅ（確かトラックにはねられて…）」
主「ここは…？（何か綺麗なオフィス…？）」

後輩（？）「主センパーイ！おはようございます！いつも出社早いですね！」

主「え？（こいつは新卒入社の後輩…？なんかすごく老けてないか…？？）」

後輩「まだ寝ぼけてます？今日は僕ら以外みんなリモートらしいですよ〜。」

主「リモート…（どういうことだ…？）」

~~ 数時間後 ~~

主「なるほど…」
主「数時間で分かったことがある…」
主「ここは2022年…」
主「働き方がだいぶ変わっている…」
主「しかし、フロントエンドというチームに属して、相変わらずコーディングをしているらしい…」
主「そんな感じで、10年後の世界に転生してしまったってことか！！！！！」

＿人人人人人人人人人＿
＞　タイムスリップ　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^￣

主「郷に入れば郷に従えだ…」
主「幸いにも10年間の記憶はないけど、なぜか知識はある…」
主「まずは変わったことを整理しよう…」

...

ナレーション「彼は10年の間にモダンな環境に適応するように、覚えて行ったであろう知識を整理した…」
ナレーション「そして、概要を以下のようにまとめていった…！」

バージョン管理

主「GitHubというものが主流のようだ…」
主「アイコンが可愛い…」

主「ページの公開もできるのか…すごい時代だ…」

HTML

主「当然だがHTMLも進化している…」
主「HTML Living Standardか…なるほど…」

主「もうエンコードがShift-JISのページは、ほとんどないんだな…」

CSS

主「CSSも進化しているな…CSS3…」
主「BEMか…CSS設計も大切なんだな…なるほど…」

主「この世界ではもう基本的にレスポンシブなのか…」

HTMLテンプレートエンジン

主「HTMLを書かなくても、HTMLを生成してくれるだって？！」

主「Pug…EJS…」

CSSプリプロセッサ

主「CSSを書かなくても、CSSを生成してくれるだって？！」

主「Sass…PostCSS…」

パッケージマネージャー

主「HTMLテンプレートエンジンやCSSプリプロセッサを使う、パッケージをマネジメントしてくれるということ？か…」
主「これがあれば色々と便利なパッケージを使えるようになるわけか…」

主「npm…yarn…」

タスクランナー

主「なるほど…HTMLテンプレートエンジンやCSSプリプロセッサを生成するのに使うわけか…」
主「パッケージのタスクをランさせる機能ということか…」

主「npm scripts…gulp…」

JavaScript

主「jQueryも一部使ってるみたいだけど…」
主「基本的には卒業しなければいけなさそう…」
主「プレーンなVanillaJsで書けるようにしないと…」

主「ES6…モジュール…」

モジュールバンドラ

主「JavaScriptで、モジュールを読み込めると。」
主「そしてそれをバンドル（まとめる）するために、必要ということか…」

主「webpack…rollup…」

リンター / フォーマッター

主「JavaScriptやCSSのおかしいところを警告してくれるってことね…」
主「しかも直してもくれるなんて…至れり尽くせり…」

主「ESLint…stylelint…Prettier…」

TypeScript

主「JavaScriptとほぼ一緒だけど、型の概念が大きく進化してるってわけか…」
主「確かにバグを生みづらいし、安全なサイトを作ることができそう…」

主「ググった時に出てくる入門記事には、ミスリードを招いているものもありそうだから注意が必要だな…」

JavaScriptフレームワーク

主「モダンなフロントエンドなら避けては通れなさそう…」
主「コンポーネントという概念も理解しないとな…」

主「React…Vue.js…Angular…」

Jamstack(SSG)

主「データはヘッドレスCMSというものを使って、そのデータを元に静的なページを作成するってことか…」
主「フロントエンドで言うとフレームワークで出てきたReactやVue.jsベースものもがあるんだな…」

主「Gatsby…Next.js…NuxtJS…」

API

主「Jamstackを使うにしても、そのデータを取得することができないとな…」
主「jQueryのajaxは何度か使ったことがあった（コピペで）けど、今はまた変わってるのか…」

主「GraphQL…REST…」

Web Storage

主「Cookie以外にも情報を記録することができるのか…」

主「sessionStorage…localStorage…」

2022年、都内のとある「受託制作会社」

ナレーション「そして、彼は今…」

...

~~ 転生からXX日後 ~~

後輩「主センパイ！プルリク出したんで、レビューお願いします！」

主「LGTM！」
主「さぁ、今日も仕事が終わったし帰るかなぁ」
主「10年前はこんなに早く帰れる日が来るとは思わなかったな…」

？「あぶなーーーーーーーーーい！！！！」

主「また？！？！！！！？」

トラック「キキーーーーーーーーーーッ！！！！！！」

「ドシャっ！！！！！！」

主「ぐっ…（今度は2032年か…？どんな世界になっているのか…）」

...

fin.

最後に

この業界はよく言われる通りまさに日進月歩で、日々インプットが必要かと思います。
本記事に記載の内容はあくまで私が得てきた知識の一部を参考に記載しており、「これだけ抑えればあなたはフロントエンジニア！」と言うものもではないと思っています。
置かれた環境によって必要なスキルも変わってくると思いますので、あくまで一例としてご覧いただければ幸いです。
（10年前は〇〇だっただろ！的なことはあくまでフィクションですので、ご容赦ください）

あとがき

@Yametaro 無職 やめ太郎（本名）さんの 「高卒30代未経験からモダン・フロントエンドエンジニアになった軌跡を全て書いていく」の記事に、感化されて本記事を書くに至りました。
とても読み応えのある記事なので、こちらもぜひ！