シェア
はてブ
めまぐるしく変化するテックの世界。技術を身に着けるうえで学ぶべきポイントや学習環境なども年々変わっています。
そこで「もしもいまの環境で、テックのことをイチから学び直すことになったら、自分はどんな風に勉強したいか」というIFストーリーを通じて、技術との向き合い方を考え直してみる企画「テック転生」。
今回は、現役Webエンジニア・大石貴則（@bicstone_me）さんに “自分だったらこう進めたい、ソフトウェアテストの学習ロードマップ” を伺いました。
はじめに
はじめまして。大石貴則（おおいし たかのり）と申します。
私は現在物流業界向けのSaaSプロダクトのグロースを担当しています。Webフロントエンドを中心にWebバックエンドやネイティブアプリなどにも幅広く携わっています。
Webエンジニアとしてのキャリアは6年目で、最初はWebバックエンドエンジニアとしてスタートしました。その後、周辺のスキルを独学で磨き、現在のポジションに至りました。
Webフロントエンドに注力するようになった理由が、Webを利用するユーザーはフロントエンドを通じてプロダクトに触れるため、ユーザー体験を左右する重要なファクターだと考えるようになったからです。また、新しい技術が次々と生まれ、クリエイティブな要素が強いところにも魅力を感じています。
一方で変化が激しく、何から学べばいいのかわからないという方も多いかと思います。そこで、今回は私がWebフロントエンドをイチから学び直すとしたら、どのような学習ロードマップを描くかをお話ししたいと思います。
新たにチャレンジしたい方にとって、どこから始めればよいのか、どのようなマインドを持って学習を進めればよいのか、道しるべとなるような内容になれば幸いです。
Webフロントエンドとは
そもそも、まずWebフロントエンドとは何でしょうか？一言でいうと「Webサイトにおいてユーザーが直接操作できる部分のこと」を指します。
1990年に研究データや文献の共有を目的にWorld Wide Webが誕生したときからWebフロントエンドは存在しています。最初はHTMLで記述された文書が専用ブラウザで表示され、ユーザーによる操作で画面を遷移するだけのものでした。
その後、さまざまなブラウザが登場し開発が活性化します。競争や標準化の過程でJavaScript、CSS、Javaアプレット（サポート終了）、Flash（サポート終了）やWebAssemblyを始めとしたさまざまな技術が登場し、Webフロントエンドは大きく進化しました。
さらには、ハードウェア側にも変化がありました。PCだけでなくスマートフォンやタブレットなどのデバイスも普及し、位置情報、マイク、カメラやセンサーなどの機能を活用したWebアプリケーションも登場しました。
今日のWebフロントエンドは単なる画面遷移のツールだけではなく、さまざまな技術を駆使してユーザーに価値提供をするために重要な要素となっています。
まずは手書きから始める
ゴール: そもそもWebサイトはどのように動いているのかを理解する
今日のWebフロントエンドは複雑化しており、何から学べばいいのかわからないという方も多いかと思います。そこで、まずは手書きでHTML、CSS、JavaScriptを書くことから始めることをおすすめします。
Webフロントエンドにはさまざまなライブラリが存在し、それらを組み合わせて開発することが一般的です。そのため、基礎的な知識が無くとも、ライブラリを活用することでそれなりのWebアプリケーションを作ることができます。
しかし忘れてはならないのは、あくまでもライブラリはブラウザが解釈できるHTML、CSS、JavaScript（など）を出力するのが役目で、最終的には出力されたものをユーザーのブラウザが実行しているということです。
そのため、ライブラリが何を出力するのかを理解していないと、意図せずにパフォーマンスなどの課題が発生したり、ユーザーのブラウザで問題が発生した際に対処できないことがあります。
そのためにも、まずはライブラリに依存せず、基礎的な知識としてHTML、CSS、JavaScriptを手書きで書くことから始めることをおすすめします。
私がフロントエンドを独学で学習し始めた際は、公開されていたWebサイトのソースコードを閲覧し、模写したり操作してみることから始めました。
ブラウザのDevToolsを使うことで、HTML、CSS、JavaScriptのソースコードを閲覧したり、手元で操作したりすることができます。もちろん、この記事もDevToolsを使ってソースコードを閲覧することができるので試してみてください。
HTML、CSS、JavaScriptの基礎を学ぶ
ゴール: HTML、CSS、JavaScriptの基礎を身につける
しかし、現代ではさまざまな技術が使われているWebサイトも多く、理解するのはなかなかハードルが高いかと思います。
そこで、Mozilla Corporationが提供している「MDN Web Docs」や、杜甫々さんが提供している「とほほのWWW入門」などのWebサイトを参考に学習してみてください。
MDN Web Docsでは、Web技術に関して体系的に学ぶことができます。とほほのWWW入門では、より初心者向けに基礎を学ぶことができます。
より気軽に学習したい場合は、CODEPREP（無料）やProgate（一部有料）を始めとした、スライド形式で学べるオンライン学習サービスを利用することで、楽しみながら学ぶことができます。
書籍がよい場合は、技術評論社から出版されている「フロントエンドの知識地図」がオススメです。HTML、CSS、JavaScriptの基礎から、開発の実践まで幅広く学ぶことができます。
いずれにしても、いきなりReactやVueに入らず、まずはブラウザが解釈するHTML、CSS、JavaScriptの基礎的な知識を身につけることが重要です。
アーキテクチャやライブラリが誕生した背景を知る
ゴール: 技術を選定する基礎を身につける
手書きでWebサイトを作ると、複雑な機能の実装や効率的な開発が厳しいのではと感じるかと思います。例えば、ページ全体をリロードしないと最新の情報が取得できない、インタラクティブな要素を作るのが難しい、同じような記述を何度もしなければならないなどの不便さを感じるでしょう。
これらの課題を解決するために、さまざまなアーキテクチャやライブラリが生まれました。今日のWebフロントエンドで使われる技術には、それぞれに生まれた背景があります。
具体的な事例として、Single Page Application（SPA）が誕生するまでの大まかな流れを挙げてみます。
- インタラクティブな要素を動かすためにサーバーと通信するのは遅いため、クライアントで実行されるJavaScriptを用いてUIを操作する必要が生まれました。
- Ajaxは、インタラクティブなWebサイトを実現するために生まれた手法です。ページ全体をリロードせずに、非同期でデータを取得し、画面に反映することができるようになりました。
- jQueryは、ブラウザの差異を吸収し、JavaScriptの記述を簡潔にするために生まれたライブラリです。DOMの操作、Ajaxやイベントの処理を簡単に記述することができ、開発効率が向上しました。
- Reactは、複雑で大規模になったUIを持続可能にするために生まれたライブラリです。仮想DOMにより、DOMを直接操作する必要がなくなりました。UIをコンポーネントに分割して再利用可能にしたり、宣言的UIにより状態の管理の複雑性と保守性の問題を解決しました。
- SPA（Single Page Application）は、よりインタラクティブなWebサイトを実現するために生まれた手法です。UIのすべてをJavaScriptで制御し、1ページで複数の画面状態を表現することで、よりリッチなユーザー体験を実現しました。
今回はSPAを事例にしましたが、執筆時点はReact Server Components（RSC）が盛り上がっています。RSCはSPAなどの手法が抱えていた課題を解決するために誕生しました。
この経緯は、React Server ComponentsのRFC（Request for Comments）内、"Motivation"項から閲覧することができます。
このように多くの場合、"Motivation" や "Background" といったキーワードで、そのライブラリが生まれた背景が公式ドキュメントに記載されています。
このように使用する技術においては、単に使ってみるだけでなく、なぜ生まれたのか、何を解決しようとしているのかを理解することが、Webフロントエンドの上達に最も重要です。
作りたいプロダクトに対して技術を選定し開発を始める
ゴール: 基礎知識と背景を理解した上で、実践に移る
背景を理解するマインドを持ってWebフロントエンドを学習していくと、作りたいプロダクトに対して適切な技術を選定し開発を始めることができるようになってきます。
もちろん、シェアが高いからという理由で技術を採用することもあるかと思います。しかし、プロダクトの理想に対して現状では何が足りないのかを考え、それを解決するためのアーキテクチャやライブラリを選定することが重要です。
一方で、そもそも世の中にはどのような技術があるのか、どのような選択肢があるのか、わからないという方も多いかと思います。
その際には、Devographicsさんが運営しているState of HTML、State of CSS、State of JavaScriptというWebサイトを参考にするのがオススメです。毎年、Webフロントエンドに関するアンケートを実施し、その結果を公表しています。
これらの選択肢の中から、自分たちが必要な技術を選定したら、あとは公式ドキュメントから学び、そのライブラリのベストプラクティスに従い開発を進めていきましょう。
まとめ
本記事では、私が考えるイチから始めるWebフロントエンドの学習ロードマップをご紹介しました。
まずはブラウザで実行されるHTML、CSS、JavaScriptの基礎的な知識を身につけることから始め、技術の生まれた背景を理解し、作りたいものに対して適切な技術を選定し開発を進めることが重要だと理解いただけたかと思います。
Webフロントエンドの責務はより一層広がっていきます。変化の激しい分野ですが、ご紹介したようなマインドを持つことで、新しいアーキテクチャやライブラリにも柔軟に活かせるようになり、より良いプロダクトを作ることができるようになります。
この記事を読んで興味を持った方は、ブラウザのDevToolsを開くところから一歩を踏み出してみてください。きっと、Webフロントエンドの技術の進化と共に自分も成長できる楽しさを発見できるはずです。
