2022年に駆け出しエンジニアがフロントエンドを学ぶとしたら（はじめに）

（7月14日更新)今後の更新予定はありません。

最近、フロントエンド開発を基本的なところから勉強しています。前職（受託開発）でフロントエンドの案件もやったのですが、スキルが足りていない等の課題があったため一旦blankを入れることにしました。それでも機会をいただいた前職の会社には感謝しています。

初心に立ち返ってフロントエンドを学び直すことにしたので、「駆け出しエンジニアが2022年にフロントエンド開発を学ぶとしたら何をすべきか」という問題設定で、やろうとしていること、およびやったことを記録していこうと思います。

過去の実務経験よりもレベルの高いプロジェクトに入ることを目指しているのだから、何ができるのか（勤務開始までに何ができるようになるのか）、どんな方向性を目指しているのかを応募対象の企業の人と共有する必要があるでしょう。私のGitHubアカウントにはWeb関係のプロジェクトがほとんどない（ほとんどがEmacs Lisp、あとはNixが少々、その他はスターが付いていない）ので、残念ながらWebエンジニアとして求職する場合にポートフォリオとして機能しません。そのためひとまずは、Zennのスクラップにて初心者らしく努力をアピールしようと思います。

副作用として、フロントエンドエンジニアを目指している駆け出しエンジニアの方や、新人教育カリキュラムを構築しようとしている方の参考になればと思います。

前提スキル

全くの未経験者が新たにウェブ開発を学び始める場合には、もしかしたらWindowsやMacの操作方法から学び始めなければならないかもしれませんが、そのような基本事項から說明するのはあまりにも骨が折れます。実際に私がそこから学び直す必要はありませんし、時間もありません。「コードを書くための基本的なスキルは既に備えている」ことを前提とします。

具体的には、以下のスキルは既に備えていることを前提とします。自己紹介です。

• Linuxデスクトップに親しんでおり、コマンドラインに抵抗がない: 2011年からほぼデスクトップLinux一筋で、2011年からArch Linux、2019年はChrome OS、2020年以降はNixOSのユーザです。
• Visual Studio Code / Emacs / Vimのいずれかのエディタに習熟している: 2011年からVimユーザでしたが、2017年からはEmacsを使っています。
• Gitの使い方を知っており、rebaseやcherry-pickなどのコマンドを使って必要に応じて歴史を修正することができる
• GitHubを使った経験があり、 Ship / Show / Ask の使い分けができ、GitHub Actionsでテストを自動化することができる
• AnsibleやTerraformの基本的な使い方を知っている: Terraformについての記事 を2017年に書きましたが、運用経験はありません。
• Nixで開発環境を構築することができる: 個人では現在NixOSを使っているので、勉強目的の開発環境は100% Nixです。数ヶ月前に twist.nix を書いたほどNix言語に慣れ親しんでいます。
• Haskell等の関数型言語を学んだ経験があり、MonadやFunctor、Monoid/Semigroupなどの型クラスがどのような状況で使われるのかを理解している: 私がGitHubで最初に出したPRはHaskellのフレームワークに対するものです。
• HTTPについての基本的な知識がある: ウェブ開発の経験はありますが、あまり自信がありません。
• 計算機科学についての学部レベルの知識はないものの、基本的な情報科学の知識はある: 私は計算機科学系の学科は卒業していません。計算機科学の大学院修士過程に入ったものの中退しました。
• 英文の基本的な読み書きができる（DeepL等の機械翻訳を使うのは可）

これらのスキルのすべてが必要だとは思いません。典型的な駆け出しエンジニアが勉強開始時点で持っているスキルセットではないと思います。ただし、ここに挙げた知識は比較的変化が緩い（実際にほとんどは私が何年も昔に習得したスキルです）部分でもあるので、情報はいくらでもあると思います。Nixだけが例外かもしれませんが、現時点でフロントエンドエンジニアにNixのスキルを要求する会社はほとんどないでしょう。今回のシリーズの主題は、フロントエンドのトレンドと、そのために必要なカリキュラムの内容なので、あまり関係ない内容には触れません。

逆に、随分と昔からLinuxやプログラミングに触れてきたのに、何で未だにこんなに程度の低いことをやっているのかという指摘もあるでしょう。実際に私の前職の給与はおそらく業界で最低水準に低かったですし、経験の内容も給与に見合って（もしくはそれ未満に？）乏しかったと思います。これには主に前々職の採用に起因する事情があるのですが、詳しくは説明しません。給与収入をブラックでないIT企業の初任給以上にはしたいというのが今回の求職活動の動機です。

主な目標

今回の一連の練習の目標は以下の通りです。

Reactのフロントエンドエンジニアとしてプロジェクトの開発タスクをこなすために必要なスキルを習得する。フロントエンドに関して他のエンジニアのサポートに頼らずに、開発環境の初期構築からリリースまでイテレーションを回せるようになる。（細かいところは後で実プロジェクトをこなしながら習得する。）

期限としては3か月程度が目標ですが、少なからぬ時間を情報収集に割いているため、その分だけ超過してしまうのはやむを得ないと思います。私の採用が決まったら、勤務開始時点で終了します。残念ながら私がどこにも採用されずに諦めてしまう場合も途中で終了します。期間の開始は4月です。勉強自体は既に始めており、今回の投稿は転職サイトの状態の変更に伴うものです。

「かけだしエンジニアがかんがえた2022年さいきょうのフロントエンドスタック」

新規開発を想定して、ツールチェーンやライブラリは現時点で最新のものを利用することにします。既存のプロジェクトに入る場合は、たとえば Webpack や Babel を設定しなければならないこともあるでしょうが、ここではとりあえず Vite を使うことにします。レガシーへの対応は考え出すときりがないので、いったんは無視します。

以下のリストは、「あらゆる制約を無視して技術選択できるとしたら、何を利用したいか」です。条件はこれまで長らく主流だったウェブベースのプロダクトの開発（Web3はとりあえず無視）で、サーバサイドは一般的なマイクロサービス構成とします。このようなプロジェクトで、フロントエンドのアプリケーションUIを開発するのに何を使いたいかという「願望」を羅列したものです。私ができることのリストではないし、できるようになりたいことのリストでもありません。現実には以下と違う技術を使っている会社に入るのは「全然あり」ですし、おそらくそうならざるを得ないと思います。

• React 18
• Vite
• Vitest
• (Cypress)
• (Storybook)
• Redux + Redux Toolkit + RTK Query
• またはurql
• またはReact Location?
• React Aria
• Tailwind CSS
• Figma

好奇心もあって一部主流でないと思われるものも含めています。特に状態管理やクエリ周りについては、まだどれも使ったことがないのでわかりません。これから試してみようと思っています。

TODOリスト

こちらのスクラップを随時更新していく予定です。