はじめに
どうも、すけさんです。
私はこれまでインフラ周りに携わることが多かったのですが、今年度になって Web(フロントエンド)周りを扱うことが増えてきました。
そこで、
- Webエンジニア・フロントエンドエンジニアに必要なスキルは何か？
- どのようにスキルを身に付けていけば良いか？
といった疑問を解決するために、調査しながらまとめていきたいと思います。
特に、最近使い始めた JavaScript を中心に書いていきます。
Webエンジニアのロードマップ
新人や未経験者が最初にぶち当たる壁、それは 何が分からないか分からない という状態です。
でも大丈夫です。
迷子にならないために、先人達がロードマップを示してくれています。
https://github.com/kamranahmedse/developer-roadmap
これは超有名どころで、ラーニングパスやトレンドを把握するのに便利なので、ロードマップがあるということは覚えておきましょう。
ロードマップの読み方
"Frontend Roadmap", "Back-end Roadmap", "DevOps Roadmap" という3区分で示されています。
今回は "Frontend Roadmap" に注目して見ていきます。
とはいえ、全てを細かくは見ません(いや、見れません)。
ロードマップは毎年更新されます。技術の変遷は非常に早いので、翌年に大きく変わる可能性があることを念頭に置いて、読むと良いでしょう。
Qiitaでバズってる記事を一読しておくと良いです。
下記が参考になります。
Webエンジニアがはじめに学ぶべき3つの基礎技術
[Front-end] の先を見てみると... まず基礎的な学習項目３つが挙がっています。
- HTML
- CSS
- Basics of JavaScript
気になっていた JavaScript は、はじめに学ぶべき基礎技術の1つなのですね。
余談ですが、界隈で有名な 阿部寛のホームページ には、静的な HTML のみ で構成されており、CSS や JavaScript が使われていない そうです。 (参考: 爆速で有名な阿部寛さんのサイトを真面目に分析してみた。)
HTML / CSS / JavaScript とは？
ググったら分かりやすく説明しているサイトはたくさんヒットしますので、ここでは簡易な説明のみ記載しておきます。
よく見かける説明は以下の通りです。
- HTML : テキストや構造
- CSS : スタイリング
- JavaScript : 振る舞い
ぱっと見で分かりやすい説明しているサイトがあったので参考までに。 https://fastcoding.jp/blog/all/jquery/html-css-javascript/
押さえておきたい JavaScript の基礎技術
ロードマップの図をみると、[Basics of JavaScript] から 5本の点線が伸びていることがわかります。
JavaScriptの基礎の構成要素となりますので、まずは項目だけ押さえておきましょう。
- 文法、構成
- DOM 操作の理解
- Fetch API / Ajax (XHR)
- 仕様、モジュールの仕組み
- 理解すべきいくつかの基礎概念
まとめ
長くなってきたので、まとめます。
- エンジニア向けのロードマップがある
- Webエンジニアが最初に学ぶべき3大基礎技術
- HTML
- CSS
- JavaScript
JavaScript の学ぶべき項目もわかったので、今後は手を動かしたりしながら深掘りしていきます。
以上
