前回からの続きで、フロントエンドエンジニアになるために学習すべきこと、順序を解説していきます。
WEB DEVELOPER ROADMAP 2020とは
GitHubで公開されているWeb系エンジニアなるために学習すべき知識、順番などを示してくれているものとなります。
kamranahmedse/developer-roadmap
Roadmap to becoming a web developer in 2020. Contribute to kamranahmedse/developer-roadmap development by creating an account on GitHub.
kamranahmedseフロントエンドエンジニア
ロードマップ
アイコンの説明
各ブロックの左上についているアイコンの意味を説明します。
パープルのチェック
個人的にオススメ。
優先度は一番高い。
グリーンのチェック
紫のチェック以外の選択肢、これか紫のチェックについて学ぼう。
２番めに優先度は高い。
グレーのチェック
いつ学んでもよい。
優先度は最も低い。
グレー
オススメしない。
個人的にはやらなくていいと思う。
JavaScript
次はJavaScriptです。
ここが一番最初の山で、挫折する人が非常に多いです。
今まではどちらかと言うとデザインに近いものでしたが、急にプログラミングになります。
- 構文と基礎構成
- DOMの操作を学ぶ
- Feach API / Ajax(XHR)を学ぶ
- ES6以上の構文とJavaScriptモジュール
- 概念を理解する
構文と基礎構成、DOMの操作を学ぶ、ES6以上の構文とJavaScriptモジュール
ひたすら勉強してください。
必要であれば本なども買うといいかも。
先に言っておきますがjQueryを学習するのはやめましょう。
あれは古代遺産ですので、今から学習するのはオススメできません。
JavaScript - Wikipedia
Contributors to Wikimedia projects
JavaScript
JavaScript (JS) は軽量で、軽量なインタープリター型、あるいは実行時コンパイルされる、第一級関数を備えたプログラミング言語です。ウェブページでよく使用されるスクリプト言語として知られ、多くの非ブラウザー環境、例えば Node.js や Apache CouchDB や Adobe Acrobat などでも使用されています。 JavaScript は プロトタイプベース で、シングルスレッドで、動的型付けを持ち、そしてオブジェクト指向、命令形、宣言的 (例えば関数プログラミング) といったスタイルをサポートするマルチパラダイムのスクリプト言語です。詳しくは JavaScript に…
Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
Feach API / Ajax(XHR)を学ぶ
外部のデータを非同期的に読み込む際のやり方ですね。
ページを遷移せずにデータを取得しているのがこれです。
Fetch API
Fetch API には (ネットワーク越しの通信を含む) リソース取得のためのインターフェイスが定義されています。XMLHttpRequest と似たものではありますが、より強力で柔軟な操作が可能です。
Ajax - Wikipedia
Contributors to Wikimedia projects
始めましょう
この記事は AJAX の基礎の概観と、入門のための二つの実践的なサンプルを示します。
概念を理解する
非常に難しいです。
軽く読んで流しましょう。
Hoisting (巻き上げ、ホイスティング)
巻き上げ(Hoisting) は、ECMAScript® 2015 言語仕様より前には、どんな規範的な仕様書にもなかったものです。巻き上げは JavaScript の実行コンテキスト (特に作成と実行のフェーズで) では一般的な方法と考えられていました。しかし、巻き上げの概念は誤解に繋がる可能性があります。
イベントの紹介
イベントは、あなたがプログラムを書いているシステムで生じた動作、出来事を指します。システムからあなたへ、イベントとして何かあった事を知らせてくるので、必要であればそれに何らかの反応を返す事ができます。例えば、ユーザーがウェブページ上でボタンを押したとき、ある情報を表示するように反応させたいと思うかもしれません。この記事では、イベントに関する重要な概念を取り上げ、ブラウザーの中でのイベントの振る舞いを見ていきます。ここでは、全てを説明するのではなく、この段階で知っておくべき内容を取り上げます。
Scope (スコープ)
実行の現在のコンテキスト。値 と式が「見える」、または参照できる文脈。変数や他の式が ”現在のスコープ内にない” 場合、使用できません。スコープを階層構造で階層化して、子スコープから親スコープにアクセスできるようにすることもできますが、その逆はできません。
Object のプロトタイプ
プロトタイプは JavaScript オブジェクトが機能を互いに継承するメカニズムです。この記事ではプロトタイプチェーンの動作を説明し、prototype プロパティを使用して既存のコンストラクタにメソッドを追加する方法を見ていきます。
shadow DOM の使い方
Web コンポーネントにおいてカプセル化 (構造やスタイル、挙動を隠し、同じページの他のコードと分離すること) は重要です。これにより他の場所でのクラッシュを防ぎ、またコードが綺麗になります。Shadow DOM API はこの隠され分離された DOM を付加するための方法を提供しています。この記事では Shadow DOM を使う基本を記述しています。
Strict mode (厳格モード)
JavaScript の厳格モードは、 JavaScript の制限された変化形を利用する方法であり、それによって暗黙的に “sloppy mode” をやめることができます。厳格モードは単なるサブセットではありません。通常のコードとは意図的に異なる意味を持っています。
記事が長くなるので今回はここまで。
次回はバージョンコントロールシステムについてやります。