Nuxt.jsの勉強法を4000円以下でまとめてみた。【1ヶ月でマスター】

こんにちは。takabeeです。

*本記事はNuxt.jsの勉強法について解説をしていく記事となっています。

 

この記事で理解できること

 

Nuxt.jsとは何か？

たとえばいまからJavaScriptでプロジェクトを作りたいとなったとき、JavaScriptだけで作ろうと思うと、結構大変だったりします。

そこでプロジェクトを簡単に作れるのがフレームワークで、JavaScriptフレームワークの中の1つがNuxt.jsです。

 

実はまた別のJavaScriptフレームワークにVue.jsというのがあり、そのフレームワークの欠点を補うように作られたのがNuxt.jsです。

なのでまとめると、JavaScriptで簡単にプロジェクトを作れるようにしたのがVue.js、それをさらに簡単にできるようにしたのがNuxt.jsということです。

 

Nuxt.jsを勉強するメリットは？

①フロントエンドの基礎が身につく

フロントエンドとはユーザーの目に見える部分のことです。

 

たとえばWebサイトではTOPページやAboutページなどがありますが、すべてフロントエンドです。

あなたがいま見ているこのページもフロントエンドです。

 

フロントエンドの反対はバックエンドで、ユーザーの目に見えない所です。

たとえば顧客データとか、商品データとか、ユーザーに見られたら大問題になるような部分がバックエンドといまは捉えてくれれば良いと思います。

 

ユーザーから見れる部分がフロントエンド、見えない部分がバックエンド

 

フロントエンドで動作するプログラミング言語は実はJavaScriptだけです。

なので必然的にJavaScriptを使っているNuxt.jsを使うと、フロントエンドの知識が身につきます。

②実はバックエンドの基礎も身につく

JavaScriptというと、フロントエンドのイメージが強いです。

Nuxt.jsはSSR（サーバーサイドレンダリング）を採用しているフレームワークなので、結構バックエンドの知識が身につきます。

 

たとえばバックエンドについて理解するには、はじめ「クライアント」「サーバー」というものを理解しなければなりませんし、どうやって通信をしているのか、というところもしっかり理解しなければなりません。

それを理解しないと開発が出来ないので、必死に調べます。

するといつの間にかバックエンドについても理解できるようになっています。

Nuxt.jsの勉強法

先ほども出てきましたが、Nuxt.jsはJavaScript、Vue.jsという土台に乗っかっています。

なのでJavaScript→Vue.js→Nuxt.jsという順番で勉強していきましょう。

 

やる気のある方はGit, Docker, AWSという高度なスキル、JavaScriptをより厳密にしたTypeScriptも身につけてみてください。

オススメする教材はすべて僕が自分で試しているので、信頼性は保証できます。

【STEP1】HTML, CSS, JavaScriptを身につけよう！：目安【1週間】

「JavaScriptが何かよく分からない」「JavaScriptの基礎が出来ていない」と思う方は、まずこちらのSTEP1からやってみてください。

オススメの教材はこちらです。

「[HTML/CSS/JavaScript]フロントエンドエンジニアになりたい人のWebプログラミング入門」（セール時に1300円ほど）

ともすた合同会社代表で、多数の本も執筆している「たにぐち まこと」さんが、HTML, CSS, JavaScriptを分かりやすく教えてくれます。

jQueryやVue.jsまで詳しく解説しており、この講座だけでフロントエンドの基礎が身につきます。

これを3周ほど繰り返してみましょう。

 

1.25倍速～1.5倍速で再生し、分からなくても良いので手を動かしながら、動画の通り実践してみてください。

3周目くらいには突然分かるようになります。

 

【STEP2】Vue.jsを身につけよう！：目安【2週間】

JavaScriptの基礎をマスターした方は、次にVue.jsの勉強をしましょう。

ここにとくに時間をかけて理解してください。Vue.jsをしっかり理解できれば、Nuxt.jsはすぐ理解できます。

オススメの教材はこちら。

「超Vue.js２完全パック（Vue Router, Vuex含む）」（セール時1300円ほど）

名前の通りVue.jsについての完全パックです。

合計17.5時間の重厚な動画教材で、Vue.js, Vue CLI, Vue Router, Vuexなど、大事なことをめちゃくちゃ分かりやすくしっかり解説してくれています。

 

正直これがセール時に1300円くらいで買えるのが信じられません。

これも3周くらいしてください。とても1周で終わらすにはもったいない内容です。

 

 

【STEP3】Nuxt.jsを身につけよう！：目安【1週間】

Vue.jsまで身につけたら、いよいよNuxt.jsの勉強をしていきます。

とはいえVue.jsが身についた方なら、一瞬で終わります。ほとんど似てますからね。

オススメの教材はこちら。

「Nuxt.js – Vue.js on Steroids」（セール時1300円ほど）

 

いきなり英語の教材が出してしまいました。すみません。

ただNuxt.jsについては日本語の教材もあるのですが、正直ボリュームが少ないです。。。

 

なのでこちらの英語の教材を字幕をつけて学ぶのがオススメです。

Vue.jsが分かっていれば、英語が分からなくても意外とやっていることが分かります。

 

ちなみにこの英語教材を出しているMaximilianさんはめちゃくちゃ有名なUdemy講師の方で、世界中で受講生が140万人近くいて、しかも講師の評価が4.7という化け物です。（2021.04.07時点）

Nuxt.jsはないですが、あとで説明するTypeScript講座ではこの方の日本語訳の講座が出ているくらいです。

ぜひその凄さを体感してみてください。

 

 

こちらの講座はレビュー記事も書いたので、見てから購入を検討してみてください。

 

【やる気のある方向け】Git, Docker, AWS, TypeScriptを身につけよう！：目安【1ヶ月】

Nuxt.jsまで終わった方は、結構実力がついていると思います。

少なくとも、おそらく未経験とは言えないレベルでしょう。

 

でも、もっともっと成長したいというやる気のある方は、Git, Docker, AWSにチャレンジしてみてください。

どれもエンジニアに必須のスキルとなっており、マスターしたら一気にあなたの市場価値が上がると思います。

そんなあなたにオススメの教材はこの3つ。

 

● Git

「米国AI開発者がやさしく教えるGit入門講座」（クーポン適用時のタイミングによる）

アメリカの大手Tech企業に勤めている「かめ れおん」さん（通称かめさん）が、powerpointで実際に図を動かしながら、わかりやすく解説をしてくれる動画です。

いままで受けた動画講座の中でも抜群のわかりやすさでした。

 

ただかめさんの講座は一切セールにならないので、買うときはかめさんのtwitterでクーポンをゲットしてから買ってください。

1ヶ月ごとに価格が高くなっていくので、買う方は早めに買うことをオススメします。

 

●Docker

「米国AI開発者がゼロから教えるDocker講座」（クーポン適用時のタイミングによる）

こちらもかめさんの講座です。相変わらずのわかりやすさでした。

これも1ヶ月ごとに価格が高くなっていくので、買う方はtwitterでクーポンをゲットしてから、早めに買ってください。

 

● AWS

「AWS：ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得」（セール時1300円ほど）

こちらは京都大学大学院を卒業後、マーケターからスタートし、Webエンジニアになった山浦さんが教えるAWS実践講座です。

実際に手を動かしながら実践することで、受講後に実力がメキメキとついていることに気づきます。

 

●TypeScript

TypeScriptというJavaScriptをより厳密に書けるプログラミング言語を、Nuxt.jsに組み込むことも増えてきました。

なのでさらに実力つけたい方はTypeScriptも勉強してみてください。

 

「【世界で7万人が受講】Understanding TypeScript – 2020年最新版」（1800円ほど）

こちらが先ほど出てきたMaximilianさんの日本語訳の講座です。

これを翻訳されている濱田さんも翻訳が上手く、スッと説明が頭に入リます。

いち早くTypeScriptを身につけたい方はこの講座をどうぞ。

 

Nuxt.jsを勉強し終わったあとは？：【結論】何でもアリです。

すべて終わったら、次は何をすれば良いのでしょうか？

結論から言うと、何でもアリです。

フロントエンド、バックエンドを身につけ、やる気のある方はGit, AWS, Docker, TypeScriptまで身につけました。

市場価値は結構高いと思いますし、実力もしっかりついていると思うので、選択肢は結構広いです。

 

Nuxt.jsを使ったアプリ制作をしても良いですし、別のJavaScriptフレームワークを勉強しても良いです。

別の言語を勉強してみるのももちろんアリです。

実力は間違いなくついているので、これから他の言語を勉強するときには、最初と比べてめちゃくちゃ簡単に感じると思います。

 

ただクラウドソーシングで案件に応募するという選択肢もあるのですが、残念ながらクラウドソーシングのNuxt.js案件は、実務経験者が条件のものがあるので、そこに行くのはキビシイかもしれません。

ただ何度も言いますが、ここまで継続できた方なら実力は間違いなくついているので、それを武器にいろんなことにトライしてみてください。

 

まとめ：あとはやるだけ

ここまで、お疲れ様でした。

 

僕は自分の失敗しまくった体験から、正しいと思える勉強法を提示しました。

オススメの教材も全部出しました。Nuxt.jsをマスターするなら4000円もかかりませんし、1ヶ月で出来ます。

 

あとはあなたがやるだけです。言い訳は出来ません。

 

【STEP1】HTML, CSS, JavaScriptを身につけよう！

「[HTML/CSS/JavaScript]フロントエンドエンジニアになりたい人のWebプログラミング入門」

 

【STEP2】Vue.jsを身につけよう！

「超Vue.js２完全パック（Vue Router, Vuex含む）」

 

【STEP3】Nuxt.jsを身につけよう！

「Nuxt.js – Vue.js on Steroids」

 

【やる気のある方向け】Git, Docker, AWS, TypeScriptを身につけよう！

● Git

かめさんのTwitter（クーポンをゲット！）

「米国AI開発者がやさしく教えるGit入門講座」

 

● Docker

かめさんのTwitter（クーポンをゲット！）

「米国AI開発者がゼロから教えるDocker講座」

 

● AWS

「AWS：ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得」

 

● TypeScript

「【世界で7万人が受講】Understanding TypeScript – 2020年最新版」

 

ぜひトライしてみてください。