JavaScript学習法

JavaScript 完全学習ロードマップ 〜初心者から中級者になるための勉強手順を徹底解説〜

アイキャッチ画像

本記事では、JavaScriptを学びたいと考える完全初心者が、中級者、そしてゆくゆくは一線級のフロントエンドエンジニアになるためのJavaScriptの学習ロードマップを徹底解説します。

当記事は大きくパートに分かれます。

まず第パートでは、『JavaScript学習ロードマップ【基礎編】』と題して、完全初心者のあなたがJavaScriptを習得するために避けては通れない必須7ステップを順を追って解説。

パートでは、『JavaScript学習ロードマップ【応用編】』と題して、第1パートを通じて揺るぎないJavaScriptスキルを習得した後に開ける4つの選択肢を紹介。

最後の第パートでは、1・2パートで紹介したJSロードマップを漏れなく網羅的に学ぶためおすすめ教材使う手順を解説。

本記事を読み終わる頃には、完全初心者でも無駄なく最短でjavascriptとwebフロントエンドスキルを体得するために重要となる以下の事項がはっきりと分かります。

本記事で得られること
  • 何をどの順序で学んでいくべきか?
  • JavaScript学習で気を付ける点は?
  • JavaScriptの基礎を身に付けた後にはどんな選択肢がある?
  • JavaScriptをガチで学ぶ上でのオススメ教材は?

 

【基礎編】JavaScript 学習ロードマップ ~脱初心者から中級者への7ステップ〜

JS初心者がゼロからjavascriptを学ぶ場合、次の7ステップを1つのロードマップとすべきです。

  1. html / css
  2. プログラミング及び javascript の基礎
  3. javascriptとhtml/cssの関わり(DOM)
  4. javascript言語仕様(言語の特徴)
  5. 新しい javascript(ES2016) 〜モジュールやclass など〜
  6. Ajax(エイジャックス)
  7. モダンフロントエンド開発環境

なぜ、javascriptをマスターするためには、上記7ステップが必要になるのか?

これに関しては、下記の図に示したように、JS学習7ステップをツイッターなどのwebアプリケーションにおけるjavascriptの役割に当てはめると納得できるはずです。

「」では、下記の図を使って、フロントエンドでのjavascriptの役割をより詳しく解説していますので参考にして下さい。

webアプリケーションにおけるjavascriptの役割の全体像JS学習7ステップがwebアプリケーションの中でどこと対応しているか番号を照らし合わせて確認してみて下さい。

 

こうした全体像をまず最初に知ることが大切で、これ以降の説明もよりスッと頭に入ってくるはずです。

①:HTML / CSS(マークアップ言語)

一番最初は、html/css。

javascriptを学んでいくなら、事前にhtml/cssはざっと理解しておくべき。

webアプリケーションにおけるjavascriptのメインポジションは、フロントエンド(=webブラウザ)。

このフロントエンドでは、javascriptは必ずhtml/cssとセットで使われます。

フロントエンドのhtml/css立ち位置

 

 

②:プログラミング及びjavascriptの基礎

第2ステップでは、いよいよjavascriptに入っていきます。

先ずは、次のようなプログラミングの基礎概念をJSを通じて理解しましょう。

  • 変数とデータ型
  • 演算子(+、ー、=など)とその性質
  • 条件制御 (IF文など)
  • ループ・繰り返し
  • 関数
  • 配列とオブジェクト

これらは、コンピューターサイエンスの基礎でもあり、javascriptに限らずどんなプログラミング言語をやるにしても避けては通れません。

いかなるwebアプリも、その根底には上記のプログラミング基礎概念の組合せのもとに成り立っているのですから。

ただ、学ぶという意味では、めちゃくちゃ大切にも関わらず、全く面白みが無く、苦痛に感じる分野でもあります。

アプリを作るわけでもなく、ただ淡々と無味乾燥なコードを書く羽目になるのでシンプルにつまらないんです。

少なくとも僕はそう感じました。

だから、学習のポイントとしては気楽に一通り触れてみて、60%ほど理解できたかなと感じたら、ひとまず次に進みましょう。

つど復習しながら、徐々に理解を深めていくやり方がベストです。

 

③:DOM ~JavaScript と HTML / CSS の関係性~

第3ステップは、javascriptとhtml / css の関係性。

先ほどjavascriptは、webフロントエンドにおいて、必ずhtml/cssとセットで使われると説明しました。

この第3ステップでは、フロントエンドでの両者の関わり方、専門的な言い方をするなら、DOM(ドム)を学んでいきます。

冒頭の図ですと、赤丸で囲まれた領域となります。

jsとhtml/cssの関わり方

domについてより詳しく知りたいという方は、こちら「」を是非読んでください。

(ブログカード)

このDOMという分野は、1つ前と打って変わって、めちゃくちゃ面白く、成長を感じられます。

というのも、サイコロゲームやTODOリストなど簡単ではあるものの、javascriptを使い自力でアプリを作れるようになるから。

是非この第3ステップでは、アプトプットとして何か簡易ゲームを作りましょう。

その中で、domという概念がjavascriptとhtml/cssをどのように結びついているかを理解していきます。

もっと言うと、この第3ステップは、

  • イベント(Event)
  • コールバック関数(Callback)

というjavascriptをマスターする上でのかなり重要な概念を学ぶ絶好の機会でもあります。

どちらも今後javascriptを学ぶ中でずっと出てくる最重要項目ですので、比較的簡単なこの第3ステップの段階で理解し慣れておくべきです。

 

④:JavaScript 言語仕様

第4ステップは、javascript言語仕様で、とことんjavascriptを深堀していきます。

言語仕様とは、それぞれのプログラミング言語がもつ特徴、性格、クセみたいなものと考えてください。

javascrit言語そのものを学ぶという意味では第2ステップと同じです。

では何が違うかというと、第2ステップでは、どんなプログラミング言語にも通じるプログラムの基本をjavascriptを通じて学びます。

対して、第4ステップでは、javascriptだけに当てはまる性質や特徴を深堀して学んでいくという具合です。

javascriptの言語使用

js言語使用の全体像は次のようになります。

javascript言語使用の体系

ご覧の通り、

  • スコープ
  • 演算子と型
  • オブジェクト
  • 関数
  • デザインパターン

の5つに大別されるのが特徴。

こうしたjavascript言語仕様を理解する最大のメリットは、何と言ってもコードリーディングスキルを一段も二段も挙げられる点です。

「プログラミングは、コードを書くよりも、他人が書いたコードを読む時間の方が圧倒的に多い」とどこかで聞いたことがあると思います。

しかし反面、

  • 理論チックで、
  • 抽象的で、
  • 小難しいく

挙句のあてには、何に役立つのかイメージしづらいので、JS初心者にとっては間違いなく苦行。

そこでアドバイスなのですが、この第4ステップJS言語仕様は、初めはささっと軽く感じとる程度、もしくは、飛ばして、後で必要になったら戻るやり方でいいかと。

この後の第6ステップ AjaxでPromise(プロミス)という技術を学ぶことになります。

このPromiseでつまづいたら、javascript言語仕様に戻って、オブジェクトと関数を深く学び直す絶好のタイミング。

いったん壁にぶつかり、必要性や重要性を自分事として感じてから取り組んだ方が学習効率が格段に高いですからね。

 

⑤:新しい JavaScript  ~ ES6, 7, 8, 9 … ~

第5ステップでは、「新しい javascript」を学びます。

「新しい javascript」とは、正しくはES2016(ES6)と言い、ESはECMAScriptを、2016はリリース年の2016年を表しています。

ここでは、ECMAScript=javascriptと考えてしまって大丈夫です。

javascriptは、ES2016、ES2017、、、、というように、毎年新しい機能が追加されたり、より簡単に書けるようになったりとバージョンアップしている。

その中でも、特にES2016は、それ以前のバージョン(ES2015)から劇的な変化を遂げました。

よって、新しいjavascriptと言えば、普通はES2016のことを指すのです。

第5ステップは、第4ステップ同様、javascript言語をより深く学んできます。

javascriptの言語使用

新しいjavascript(ES2016以降)を学ぶ際は、全てをカバーするのは無理なので、以下8つに絞って身につけるべき。

  • let(変数) と const(定数)
  • テンプレートリテラル
  • アロー関数とアロー関数内て使われるThis
  • オブジェクトと配列の構造破壊
  • スプレッド演算子
  • mapとfilter (配列操作のメソッド)
  •  Class と extends での継承
  • モジュールという概念とimport と export

以上の8つは、ReactやVueなどのモダンJSライブラリでも100%出てくる記法。

将来的に、こうしたJSライブラリに挑戦してみたいと考えている方にとっては必須の技術です。

⑥:非同期通信 ~ JavaScript と Ajax ~

続いては、Ajax(エイジャックス)。

Ajaxとは、Asynchronous JavaScript and XML の略。

簡単に言うと、

  • (webブラウザの代わりに)javascriptが
  • 非同期的に
  • JSONというデータ形式を使って
  • バックエンドとHTTP通信する

技術です。

ReactやVueなどで構築するSPA(シングルページアプリケーション)やAPIが当たり前になった今、Ajaxなしに十分な機能を備えたwebアプリケーションを構築することは不可能と言っても過言ではありません。

以下の図の通り、Ajaxのカバーする領域がフロントエンドのwebブラウザを飛び越えてバックエンドにまで及んでいるのを確認してください。

javascriptとAjax

このような性質をもつ現代Web必須技術Ajaxを理解し、使いこなせるようには次のような順序での学習が必要になってきます。

  1. webの仕組み(フロントエンドとバックエンド間のHTTP通信)
  2. 普通のHTTP通信(同期通信)とAjax(非同期通信)の違い
  3. API(アプリケーション・プログラミング・インターフェイス)
  4. Promise
  5. Async / Await
  6. fetch API (Ajaxが簡単に行えるAPI)

javascriptというプログラミング言語だけでなく、http通信やAPIと言ったWeb技術に関する学習も加わる点に注目です。

ちなみに、PromiseとAsync/Awaitは、Ajaxをより実装しやすくするためのjavascriptの記法です。

言い換えると、別にPromiseやAsync/Awaitを使わなくても、Ajax自体は実装できます。

しかし、これらPromiseやAsync/Awaitを使わずAjaxを実装するとコールバック地獄と言われるメンテナンス性が著しく低下したソースコードになってしまう。

だから、Ajaxを使うなら、PromiseとAsync/Awaitは必ずセットで必要な技術なのです。

⑥のfetchAPIに関しては、PromiseとAsync/Awaitが理解できれば、適当にネットでググっておけば瞬殺出来るのでここでは詳しい説明は省きます。

 

⑦:フロントエンド開発環境の構築

最後は、現場標準のフロントエンド開発環境について理解を深めましょう。

具体的には、Node.jsとNPMが土台にあるjavascript実行(開発)環境のことで、モダンJSエコシステムとも言います。

現場標準のフロントエンド開発環境の全体像

このモダンJSエコシステムは、近年の大規模化・複雑化したwebアプリケーションのフロントエンド開発においては必須となる開発環境で、4つのコア技術から成り立ちます。

Node.js javascript実行環境
NPM javascriptに関係する様々な開発ツールやライブラリのプラットフォーム
Webpack 個々の複数のファイルを1つに束ねる開発ツール
Bable ES6以降の新しいJSを全てのブラウザが解釈できる古いJS(ES5)に変換する開発ツール

 

以上、javascript学習の全7ステップとなります。

いきなり全部を完璧に理解できるようになる必要はありません。

まずは一通りざっと学んでみて、躓いたり分からなかったりした場合に復習として前のステップに戻るやり方がいいでしょう。

そして何よりも重要になるのがアプトプットです。

アプトプットのタイミングとしては、

  • javascriptとhtml/cssの関わり(第3ステップ)
  • javascript言語仕様(第4ステップ)
  • javascriptとAjax(第6ステップ)

の3つの内のどこか2つ。

これらタイミングで何か動くものを作ってみましょう。

【応用編】JavaScript 学習ロードマップ 〜基礎を身に付けた先にある4つの選択肢〜

ここからは【応用編】。

これまで説明したJavaScript学習7ステップを制覇すると、JavaScript応用スキルとして以下つ選択肢が開けます。

ここにボックスタイトルを入力
  • フロント開発用のJSライブラリ:ReactVue
  • コンパイルJS:TypeScript
  • バックエンドJS:NodeJS × Express × MongoDB
  • 作業の自動化としてのJS:Google App Script (GAS)

 

選択肢①:フロントエンドJSライブラリ:React、Vue

『ReactJS』サムネイル画像

選択肢の1つ目は、フロントエンド開発(ユーザーインターフェイス構築)のためのJavaScriptライブラリ、すなわち、ReactJSVueJS

この1つ目の選択肢は、フロントエンドエンジニアを目指している人ならば、最も妥当最優先で選ぶべき選択肢と言えます。

というのも、大半のフロントエンド開発現場では、JavaScriptそのものが使われることが稀で、その代わりにReactJSやVueJSといったJSライブラリが採用されているのが大半だから。

web、モバイル問わず、一定レベル以上のフロント開発を志すならば、JavaScriptだけでは全くの不十分で、ReactやVue最低でもどちらか一つは習得していることはマスト条件と言えるでしょう。

実際、市場に出ている’まともな’JavaScript教材やスクールのほぼ全ては、こうした開発現場の実情が見事に反映されていています。

【基礎編】で取り上げた7ステップは当たり前として、その後の実践として、必ずReact、もしくは、Vue、少なくともどちらかを学ぶカリキュラム構成となっている。

ただ誤解してはいけないのは、いくら開発現場のスタンダードがReactやVueなどのライブラリだとしても、【基礎編】で説明したJavaScript基礎は不要という意味ではないということ。

むしろ、【基礎編】のJavaScriptの基礎をすっ飛ばして、キラキラ見えてカッコイイという印象に釣られReactやVueに飛びつくことは挫折への第一歩。

実際にReactやVueを書いてみると実感することですが、これらJSライブラリは、その土台にピュアなJavaScriptがあり、結果としてJavaScriptのしっかりとした基礎知識なしに使いこなせることはほぼ100%あり得ないといっても過言ではありません。

 

選択肢②:コンパイルJS:TypeScript

typescript アイキャッチ画像

選択肢の2つ目は、コンパイルJS、すなわち、TypeScript(タイプ・スクリプト)

TypeScriptとは、JavaScript機能や仕様はそのままに、JavaScriptの弱点だった要素を補う機能が追加されたJavaScriptの上位互換進化版と定義できます。

一つ前の選択肢①で、『ピュアJavaScriptがフロント開発現場で使われるのは稀で、ReactやVueが採用されるのがスタンダード』と説明したましたが、より正確に表現するなら以下となります。

ピュアJavaScriptがフロント開発現場で使われるのは稀で、ReactやVueが採用されるのがスタンダードであるが、これらReactやVueはTypeScriptで記述される

よって、フロントエンドエンジニアを目指す場合、ReactやVueなどのJSライブラリを習得しただけではまだ不十分で、最終的には、TypeScriptを理解し、TypeScriptでReactやVue(JSライブラリ)を記述できる必要があるということになります。

何だか途方もなく感じるかもしれませんが、【基礎編】の7ステップを通じてJavaScriptをちゃんと理解していれば、TypeScriptで新しく覚えることは少なく、学習コストはそれほど高くない

それどころか、JavaScriptの不便だった部分をピンポイントで改善してくれる、言わば痒いところに手が届く神様のような存在としてTypeScript無しでは開発する気になれなくなること間違い無しです。

なぜTypeScriptがコンパイルJSかと言うと、コンパイル(Compile)が日本語で『変換する』意味の通り、TypeScriptで書かれたコードは最終的にピュアなJavaScriptに変換された上でJavaScriptとして実行されるからです。

 

選択肢③:バックエンドJS

『バックエンドJavaScript』サムネイル画像

選択肢の3つ目は、バックエンドJS、つまりは、JavaScriptでサーバーサイド(webサーバー)を実装する、ということ。

サーバーサイドをJavaScriptで実装するための代表的な技術スタックとしては、NodeJSExpressフレームワーク、データベース のMongoDBの3点が挙げられます。

役割
NodeJS JavaScriptの実行環境
Express webフレームワーク
MongoDB データベース (NoSQL)

この3つ目の選択肢(JavaScriptでサーバーサイドを実装する)に取り組むベストのタイミングは、ReactなりVueなりのJSライブラリを習得して、更には、TypeScriptもOKという時、すなわち、フロント関連の技術は一通りマスターした後、だと当メディアは考えています

つまり、フロントエンドエンジニアフルスタックエンジニアに転身する際に、このサーバーサイドJavaScriptに着手するのが最適なタイミングということ。

ちなみに、このようなJSフルスタックエンジニアは将来性が高く、米LinkedIn社が発表した『2020 需要が高まる職業15』では第4位にJavaScriptフルスタックエンジニアがランクインしています。

javascriptフルスタックエンジニアの将来性は大いにある

 

逆にそれ以外の場面、つまりは、【基礎編】の後にすぐにバックエンドエンジニアになりたくてサーバーサイドJSをやるのは、下記の動画後半でも指摘されている通り、エンジニアとしてのキャリア戦略の観点ではあまり得策ではないでしょう。

あくまで、JavaScriptはフロントエンド開発のための言語と言うことを忘れずに。

バックエンドJSは、フロント関連の技術をマスターしたフロントエンジニアがバックエンドの知見とスキルを身につけるために補足的に取り組むもの、という位置付けが妥当でしょう。

【基礎編】の7ステップ目『フロントエンド開発環境の構築』でもNodeJSを取り上げました。

NodeJSは、ここで説明した『サーバーサイドをJavaScriptで実装するためのプラットフォーム』なのはもちろん、モダンフロントエンドの開発環境構築においても必須技術。

ReactやVueなどを活用したシングルページアプリケーション(SPA)開発やTypeScriptからJavaScriptへのコンパイル作業にNodeJSは欠かせません。

 

選択肢④:作業自動化としてのJS

『Googe App Script』サムネイル画像

4つ目の選択肢は、JavaScriptを活用して単純作業の自動化ができるGoogle App Script(通称GAS)。

googleドキュメント、googleカレンダー、googleスプレッドシートなど、Googleが無料で提供するSaaSはあなたも既に使っていることでしょう。

GASを活用することで、これらGoogleが提供するサービス上での各種の定型作業を自動化が出来ます。

GASは、各種Googleサービスの作業自動化のための便利なAPIが一つにまとめられたプラットフォーム。

GAS上の専用エディターでは、特別なライブラリのインストールは一切なしに、こうしたAPIが簡単に使え、簡単に作業の自動化を実現できます。

【応用編】の4つの選択肢の中では、1番難易度が低く気軽にチャレンジできる

また、開発エンジニアだけでなく、ビジネスサイドの人間ITリテラシー向上のために使えるようになっておきたい技術と言えるでしょう。

 

 

【まとめ】JavaScript 学習ロードマップ 〜おすすめ教材とその進め方〜

ここまで、JavaScript 学習ロードマップを、【基礎編】の7ステップと【応用編】の4つの選択肢という形式で解説してきました。

最後に、【基礎編】から【応用編】まで含めて、このロードマップに沿った学習をするために是非とも使いたい教材・サービスを同じくロードマップという形で示して、本記事を締め括ります。

全体像は以下となります。

JavaScript完全学習ロードマップ

 

【お試し】ProgateでHTML/CSSとJavaScriptを触る

JS学習ロードマップ〜お試し〜

’完全’初心者の方は、先ずは【お試し】として王道のProgateからスタート。

HTML/CSSコースJavaScriptコースの両方をやってみて、「HTML/CSSってこんなものか〜」、「JavaScriptってこんな感じで書くのか〜」というような、何となくの感覚を掴めればOKです。

 

【本番】JS基礎7ステップとReactを独学orスクールで学ぶ

JS学習ロードマップ〜本番〜

Progateで【お試し】を終えたら、いよいよ【本番】。

本記事の前半で解説してきた、【基礎編】のJS学習7ステップ【応用編】の選択肢①:JSライブラリ(React or Vue)学習・実践に入っていきます。

これらを学習するに当たっては、大きくつの選択肢:『独学』 or 『スクール』があります。

メリット デメリット
独学 お金を節役できる(最大2万) 時間や効率においてロスがある
スクール 学習効率・生産性を最適化できる お金がかかる(最低15万)

独学では、お金を大幅に節約できる反面、学習における時間や効率に関して懸念点があります。

対して、スクールは、お金はそれなりにかかる(最低15万)一方で、無駄を省き漏れなくダブりなく体系化されたカリキュラムのもと最短・最適学習が可能となります。

独学が向いているのは、時間は有り余っているけど、お金が厳しい大学生、特に大学1、2年生

逆に、スクールが向いているのは、お金にはある程度余裕があるが時間制約が厳しいエンジニア転職をなるべくコスパよく成し遂げたい社会人

向いている人
独学 時間はあるがお金のない大学生
スクール お金はあるけど時間のない社会人

 

『独学』で学ぶ

当サイトは、独学ならばオンライン学習サービスのUdemyを推しており、『【20厳選】Udemyのjavascript おすすめ講座はコレ!初心者から中級者まで厳選した20講座を一挙紹介!!』にて独学におすすめな厳選したJavaScript講座を紹介しています。

アイキャッチ画像
【20厳選】Udemyのjavascript おすすめ講座はコレ!初心者から中級者まで厳選した20講座を一挙紹介!!【2020究極完全版】当記事では、udemyのJavaScriptのオススメ講座を20厳選して紹介しています。【入門編】【基礎編】【応用編】【発展編】【番外編】の5つにカテゴライズしてまとめているので、完全初心者から中級者まで、あらゆるレベルの方に応じた最適なJavaScirpt講座がきっと見つかることでしょう。...

 

『スクール』で学ぶ

スクールに関しては、厳選した以下つのスクールを推しています。

【社会人向け】JavaScript / フロントエンドが学べるスクールでおすすめを3つ厳選』にて、これら3スクールの詳細な比較ができるようになっています。

アイキャッチ画像
【社会人向け】JavaScript / フロントエンドが学べるスクールでおすすめを3つ厳選【2020年版】本記事では、プログラミング言語 JavaScriptとそのライブラリReactJSやVueJSを用いたフロント開発スキルを習得できるスクールを3つ厳選して紹介します。どのスクールも完全オンライン対応なので時間と場所に制約のある地方の社会人の方でも問題なく受講でます。...

 

JS学習ロードマップ〜独学 or スクール〜

独学』なのか『スクール』なのか、かかるお金だけに惑わされず、自分の立場や状況を考えながら最適な判断ができると良いですね。

なお、コンテンツの質(クオリティー)に関しては、独学(Udemy)とスクールでは差はほぼ無い、と当サイトは考えています。

 

【発展】UdemyでTypeScriptを習得する

JS学習ロードマップ〜発展〜

【本番】の次は【発展】で、TypeScriptに取り組みます。

TypeScriptの学習に関しては、教えているスクールは確認できませんでした。

よって当サイトはUdemyの講座『ハンズオンで学ぶ TypeScript – JavaScript エンジニアのための TypeScript徹底入門』を活用した独学をおすすめしています。

 

【仕上げ】バックエンドJSを習得しフルスタックJavaScriptエンジニアになる

JS学習ロードマップ〜仕上げ〜

TypeScriptでReactやVueを書けるようになったら、いよいよ【仕上げ】です。

【仕上げ】のフェーズでは、バックエンドJavaScriptで構築するスキルを身に付けます。

おそらく【仕上げ】までのバックエンド開発は、Firebaseで代用していることでしょう。

バックエンドをFirebaseで代用するのが悪い訳ではありません。

しかし、せっかくここまできたのですから、バックエンドもJavaScriptできるフルスタックJavaScriptエンジニア(将来性も抜群)を目指さない理由はありません。

先ほども説明しましたが、バックエンドをJavaScriptで実装するためには、NodeJSExpressフレームワークデータベース(MongoDBかSQL)を使えるようになる必要があります。

これら技術を学ぶためのおすすめ教材は以下

バックエンドJSを学ぶためのおすすめ

1つ目のN予備校は、株式会社ドワンゴが月額1000円で提供するサービス。

webプログラミング、特にサーバーサイドをNodeJS、Express、PostgresSQLで学ぶ非常に珍しいカリキュラムなのが特徴で、サーバーサイドJavaScriptを学ぶのに最適な講座です。

2つ目は、UdemyのNode.js: The Complete Guide to Build RESTful APIs

英語ベースの講座ですが、サーバーサイドJavaScriptの中でもAPIサーバーの構築方法が学べます。

N予備校が従来通りのサーバーサイド・レンダリングを扱うのに対して、本講座はSPAのバックエンド実装に直結するAPIサーバー(JSONデータのみを返すサーバー)をピンポイントで扱います。

よって、英語が苦にならない方なら、N予備校よりもNode.js: The Complete Guide to Build RESTful APIsをおすすめします。

 

【力試し】フロントからバックまでJS一本で統一したSAPを開発する(ポートフォリオ)

JS学習ロードマップ〜アウトプット〜

最後は【力試し】、これまでに学び習得した知識・スキルを総動員して本格的なSPA(シングルページアプリケション)を作ります。

フロントエンドはReactJSかVueJS、バックエンドはNodeJS、Express、MongoDB(or SQL)で、フロントからバックまでオールJavaScirptで統一されたSAPを実装するのです。

SPAの参考例として以下2つを紹介します。

SPAの参考例
  • DVDレンタルサイト
  • 服のECサイト

インプットしただけでは全く不十分です。ここまで学んだことを定着させるために、かなり負荷はかかりますが、オールJavaScriptでSAP開発にチャレンジしましょう。

おそらく、ここまでやる人は全体の1割程度でしょう。

大半が挫折しhtml/css、jqueryしかできないweb制作エンジニアで諦めます。

よって、やり遂げられれば周囲をだし抜けますし、未経験でもフロントエンドエンジニアとして非常に高い評価を得られることでしょう。