WEB DEVELOPER ROADMAP

フロントエンドエンジニアになるには Part2

2020年7月6日

フロントエンドエンジニアになるには Part2

前回からの続きで、フロントエンドエンジニアになるために学習すべきこと、順序を解説していきます。

WEB DEVELOPER ROADMAP 2020とは

GitHubで公開されているWeb系エンジニアなるために学習すべき知識、順番などを示してくれているものとなります。

フロントエンドエンジニア

ロードマップ

アイコンの説明

各ブロックの左上についているアイコンの意味を説明します。

パープルのチェック

個人的にオススメ。
優先度は一番高い。

グリーンのチェック

紫のチェック以外の選択肢、これか紫のチェックについて学ぼう。
２番めに優先度は高い。

グレーのチェック

いつ学んでもよい。
優先度は最も低い。

グレー

オススメしない。
個人的にはやらなくていいと思う。

HTML

HTMLについて。
webサイトの骨組みになるところです。

基礎を学ぶ
セマンティックなHTMLを書く
フォームとバリデーション
コーディング規約とベストプラクティス
アクセシビリティ
SEOの基礎

基礎を学ぶ

HTMLには複数バージョンがあり、今はHTML5というものが主流です。
学習するときは間違えないように気をつけましょう。

学習はProgateあたりがいいのではないでしょうか。
今の子たちはこういうものが溢れているので羨ましいです。。

セマンティックなHTMLを書く

これに関してはできてないエンジニアが大多数です。
しっかりできているエンジニアは1人しか見たことありません。
とりあえずは知識として持っておく程度でいいかもしれません。

フォームとバリデーション

フォームとフォームの入力値のチェックです。

html5のフォームバリデーションの記述例

以前はjavascriptやphpで行っていたフォーム送信内容のチェック（バリデーション）もhtml5以降は簡単にできるようになりました。簡単と言ってもパターンチェックでは正規表現の知識が必要です。ここでは入力項目に応じたパターンの記述例を紹介します。

Takayuki Yukawa

コーディング規約とベストプラクティス

コードをどう書くか、どう書いたら自分が読みやすいかですね。
大人数で書く場合は必ず定義します。

アクセシビリティ

区とか市とかのサイトにある文字を大きくしたりするボタンなどのことです。
これはほぼやることはないです。
自分も銀行系と官公庁系でやったぐらいです。

SEOの基礎

個人的には概念は必ず学習してください。
SEO対策という言葉が独り歩きしていて嘘の情報に惑わされている可能性があります。
正しく理解し、正しく人に伝えてください。

記事が長くなるので今回はここまで。
次回はCSSについてやります。