今日からあなたはフロントエンドエンジニアです！
え、面接でバックエンド・インフラしかやってなかったって言ったのに！？フロント！？どうしよう 😭 [1]
どうも、株式会社カナリーでお部屋探しマーケットプレイスの CANARY を開発している shusann です！
本エントリーでは、 もしあなたが明日から急にフロントエンドエンジニアを任されることになっても困らないよう、私がこの半年間で何をどうやって学んできたかをシェアすることで道しるべとなれることを目指しています。
これから同じ境遇に立つ人やフロントエンド興味あるけど何から手を付ければいいかわからないようなエンジニアにとって、この記事が参考になれば嬉しいです 😍
とはいえ、本エントリーは半自伝的な記事で「ああ、こんなことやってたんだ」という読み物として話半分に読んでいただければ幸いです。
自己紹介
本題の前に、半年前の入社当時の自分の状況をシェアします 💁♂️
- AWS でクラウドインフラの運用をしていました
- ASP.NET と C# を使って、バックエンドの開発をしていました
- React や Next.js のようなフロントエンド技術はチュートリアルを個人開発で触ったことがある程度で、プロダクションでは触ったことがありませんでした
といったようにフロントエンドはほとんど触っていませんでした。
どうやって学んだ？
実際にどうやって学んだかを紹介する前に、学び方に対する自分の特徴を整理します。というのも、学び方は人の数通り存在するようなトピックでありその中で自分にとって「ここちのよい」進め方をするのがもっとも効果的なものであるため、そういったことを念頭に置くことが大事だからです[2]。そして、自分の学習スタイルを知っておくことで目標達成までのプロセスを柔軟に改善できると考えています。
中でも自分は学び方をざっくり分けて ボトムアップ型 と トップダウン型 の2つのアプローチがあると考えています。
ボトムアップ型の学習法
ボトムアップ型の学習法は、小さな要素や具体なスキルからはじめていき、それらを積み上げていくことで全体像を理解することを目指す学習法と定義します。たとえば、「Hello World」を出力するプログラムを書いてみて、その後条件分岐、関数、クラス…といった要素を少しずつ習得していき、気がついたときに全体が見えてくるというものです。
トップダウン型の学習法
トップダウン型の学習法は、まず全体像を把握し、そこから具体的なスキルや手法に落とし込んでいく学習法と定義します。たとえば、「Web とは何か」を理解した後、その中で HTML や CSS といった要素を習得していくというものです。
どちらの学習法が正しいということではなく、学ぶ内容や自分のその時の状態（モチベーション・技術レベル）によって選択したり組み合わせたりすることが大事です。 自分の場合は、小さな成功体験を積み重ね、具体的な実感から学びを深めるスタイルが性にあうためボトムアップ型の学習法がマッチしています。
さて、前置きが長くなりましたが、次からは実際に何を学んできたかを紹介します。
Web の教材で学ぼう
フロントエンドの新しい技術を習得したいケースではトップダウンに Web ベースで学ぶのがよいと思っています。とくに、フロントエンドのドキュメントは実際に触れたり、コードエディターが埋め込まれていたりするので、 理解→実践のサイクルが非常にやりやすい です。
mdn のチュートリアル
まずは触れる環境を作る
知育教材は手で触れられ簡単な操作により明瞭な結果を得られるものが一般的でしょう。たとえば LEGO はブロックを組み合わせて集合としたときに形を成し、機能を発現します。つまり、因果がはっきりとしていて直感的に理解可能なものは年齢にかかわらず新しい概念を習得するためには最適な教材になります。
話をフロントエンドに戻すと、今のフロントエンドの最前線は React や Vue といったライブラリやフレームワークを使って Web アプリケーションを作成していくことが非常に多く[3]、 HTML/CSS を直接書いていく場面はほとんどありません。[4] もちろん、それら基礎となる知識は知っておく必要があるものの、最初の一歩目にその選択をすると多くの人がモチベーションを維持できずに、プロダクションで利用されているフレームワークへ辿り着けないはずです。
React/Next.js の知育教材としてまずは Next.js のチュートリアルを始めるところからが自分的オススメです。このコースを通じて「わからないことがわからない」から「わからないことがわかる」に昇華することが狙いです。
理由として以下が挙げられます
- 章ごとに設問があるので、理解度を確認しながら進めることができる
- HTML/CSS の基礎が固まっていなくてもなんとなくで進められる難易度
TIPS: 英語読むのつらい人向け
フレームワークやライブラリの公式ドキュメントに日本語がある場合は稀で、多くの場合は英語のみが提供されています。ChatGPT や DeepL などを利用するのも1つの手ですが、こういった手の文章は文学的なものに比べて比較的平易に書かれているため単語の意味がわかるとある程度読めてしまう場合が多いです。
マウスをホバーするだけで英単語の意味がわかる Mouse Dictionary は大好きな Chrome 拡張機能です。最初はわからない単語だらけで、翻訳サービスにコピペする時間の方が短いですが、いつか逆転すると思います。
閑話休題
デザインを変えられるようになる
この地点にくると「わからないことがわかる」状態になっているはずです。たとえば、チュートリアルで <div className="py-2"> とか書いてあっても、そのクラス名がどういう意味なのかわからないですよね。
Next.js でフォームを使用してデータをサーバーに送信できることは理解したから、次は自分の好きなデザインにしたいみたいな欲求が湧いているはずです。CSS フレームワークの1つに Tailwind CSS があり create-next-app でも選択すると簡単にインストールできるため、まずはここから見るとよいです。
そこで自分はこのページを見てもほとんど理解できないことに気が付き、絶望の谷に落ちます。[5]
基礎を学ぼう
基礎を学ぶモチベーションは権威バイアスで盲目的にその重要性を信じている場合を除いて、多くの場合その意義や価値を理解することから始まります。木を見るより森を見るアプローチで進んできましたが、その過程で 多くの「わからないことがわかる」ことが生じたならば、基礎を学ぶ絶好の機会が来ていることを示唆しています。 トップダウンからボトムアップへの転換点です。
そこでうってつけは、MDN のコア学習モジュールです。 div を CSS で調整しようにもまったく広がらなかったり、逆に縮まらなかったりする経験をするのは当たり前で、このコースを通じてどういうメンタルモデルで Web のための技術が構成されているかを学ぶことができます。もっぱら 1 から 10 まですべてを舐めるようにやる必要はなくて、自分の理解が足りていなかったり、自信がない箇所に力をフォーカスするとコスパよく進められるはずです。
そしてこれを進めていくうちに、 Next.js や Tailwind CSS で目にした よくわからないもの同士が繋がり始め線となっていく感覚 を徐々に感じ始めると思います。
基礎の次は？
基礎を終えるとしだいに自分がわからないことの解像度が最初と比べて高くなっている段階にあると思います。ここから先は、業務における自身のポジションや技術領域によってさまざまなパスがあると思います。そのうちのサンプルとして自分がやってきたことを紹介します。
デザイナーとの共通言語を持とう
カナリーのマーケットプレイス開発チームには有り難いことにデザイナーが所属していて、日々の機能開発では Figma → 実装 → レビュー のサイクルを回しています。
よりよいユーザー体験を提供するためにエンジニアとしてできることのうち、デザイナーとの共通言語を持っておくことが大事だと考えています。たとえば、自分はこっちのデザインが好きだけど、採択されたのはあっちのデザインでした。でも、どうしてその判断が下されたのかがわからないと、自発的なカイゼンを放棄してしまうことになります。私達フロントエンドエンジニアに期待されていることは、画面やコンポーネントを実装することではなく、 デザイナーがデザインした快適なユーザー体験を動くように翻訳し提供すること にあると思っています。そのような観点で、フロントエンドエンジニアとして少なくとも 何がよくないのかを説明できる のはとっても重要なことです。
そのデザイン原則を理解するために、ノンデザイナーズ・デザインブックをオススメします。
電車で何気なく見かける広告、カフェのメニュー、スポーツジムのチラシ、普段何気なく目にしているものはすべてデザインされていて、それらが どうしてよいのか・どうして違和感を覚えるのか言語化できる ようになる一冊です。
同時に、#まずは触れる環境を作る で触れたように自分で触ってみるためのサンドボックスとして Figma を使えるようになることも大事です。 Figma の YouTube チャンネルで投稿されている Tutorial シリーズを見れば大体使いこなせるようになるはずです。
これから同じ道を歩むかもしれない人たちへ
さて、ひととおり自分がこの半年カナリーのフロントエンドエンジニアとして働くに当たりやってきたことを紹介してきました。本エントリーで紹介するには足らないこまごまとしたことを合わせればたくさんのことが知れたかなと思っています 😊
フロントエンドもバックエンドと同様にコンピュータサイエンスについての理解は新しい技術を効果的に学ぶための共通のルールだと考えています。そして、いざ飛び込んで蓋を開けてみれば拍子抜けするでしょうし、その感覚はバックエンドで一度味わったのではないでしょうか？そういった成功体験を原動力に推し進めると意外とすんなり行くと思います。
半年間頑張ってみた結果確実にフロントエンド領域でできることが増えたし、フレームワークや UI ライブラリのアップデートを筆頭とした新しいニュースを段々と追えるようになってきました。とはいえ、いまだにわからない数多のことがあります。テスト戦略、ディレクトリ構成、ライブラリ選定等々本当にフロントエンド領域は流れが激しく広いですね。
カナリーに入社して、パワフルでナイスなメンバーに恵まれたラッキーな自分はわからないことがあれば気軽に聞いたり、社内で用意されている豊富なドキュメントに何度も助けられたりしてきました。弊社のマーケットプレイス CANARY の技術スタックは Zenn の記事で詳細に語られていて、半年前この記事を見て何もわからないけどすごい！！と目を輝かせた記憶がありますし、今でもアーキテクチャを俯瞰したいときに参照しています。
これからフロントエンド領域がんばるぞい！という方に、この記事が届いてポジティブな気持ちになってくれたら本望ですし、自分も引き続き頑張っていきたいと思っています 💪
それでは、よいフロントエンドライフを ✨
-
茶番要素を多分に含んでいます ↩︎
-
認知学習論を念頭に主張しています。学び方自体、 学習科学 が確立されているかつ自分がほとんど理解していない分野のため、自分なりの考えを主張するに留めています（参考）。このトピックについては、今後あらためて深堀りしたいと思っています。 ↩︎
-
https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/#front_end_frameworks_work ↩︎
-
https://2024.stateofhtml.com/en-US/usage/#html_css_js_balance ↩︎
-
悲しいけど、理解したと思ったら理解していないことに気が付くという ダニング=クルーガー効果 ↩︎
Discussion