このサイトのテーマ『SWELL』を見てみる >>

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

こんにちは。takabeeです。

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

この記事は「いますぐNuxt.jsを始めたい!でも方法が分からない!」という方向けに書いてます。
Nuxt.jsは僕がとくに力を入れて学んでいる分野でもあり、僕も失敗しまくってます。
失敗から得た勉強法をステップごとに解説していくので、ぜひ参考にしてみてください。

 

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

・Nuxt.jsとは?
・Nuxt.jsのメリット
・Nuxt.jsの勉強法
・おすすめの教材

ネコ大先生
この記事は【約8分】で読めるニャ。

 

目次

Nuxt.jsとは何か?

初心者
そもそもNuxt.jsってなに?

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

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

 

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

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

 

takabee
Nuxt.jsはとにかくJavaScriptでの開発をしやすいもの、と認識でいまは大丈夫です。

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

初心者
Nuxt.jsの意味はなんとなく分かったけど、Nuxt.jsを勉強するメリットってなんかあるの?
Nuxt.jsを勉強するメリットを知ることは今後のモチベーションにも関わってくるので、実はめちゃくちゃ大事です。
おおまかに2つあります。
①フロントエンドの基礎が身につく
②実はバックエンドの基礎も身につく
それぞれ解説していきます。

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

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

 

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

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

 

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

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

 

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

takabee
余談ですが、企業が情報流出してしまって問題になるのは、このバックエンドの部分のデータが漏れてしまったということですね。

 

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

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

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

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

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

 

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

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

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

takabee
「分からないことは調べる」これはめちゃくちゃ大事。

Nuxt.jsの勉強法

初心者
学ぶメリットは分かったから、さっさと勉強法を教えて。

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

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

 

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

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

【STEP1】HTML, CSS, JavaScriptを身につけよう!
【STEP2】Vue.jsを身につけよう!
【STEP3】Nuxt.jsを身につけよう!
【やる気のある方向け】Git, Docker, AWS, 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周目くらいには突然分かるようになります。

 

takabee
とにかく自分で手を動かして実践してみよう!

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

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

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

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

「超Vue.js2完全パック(Vue Router, Vuex含む)」(セール時1300円ほど)

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

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

 

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

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

 

takabee
Udemyはマジでオススメです!
神講師による神講座が、揃いに揃っています!

 

【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講座ではこの方の日本語訳の講座が出ているくらいです。

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

 

 

takabee
僕はすでにこの方の講座を3つほど買っています。

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

あわせて読みたい
【Nuxt.js部門】Udemyのベストセラー講座『Nuxt.js – Vue.js on Steroids』をレビュー! *本記事は『Nuxt.js - Vue.js on Steroids』のレビュー記事となっています。 評価:   私がいまメインで使用しているJSフレームワーク「Nuxt.js」の、Udemyでベス...

 

【やる気のある方向け】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を身につけたい方はこの講座をどうぞ。

 

takabee
さすがにここまで出来たら、あとはもう自分で何でも出来ます。

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

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

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

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

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

 

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

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

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

 

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

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

 

takabee
何ヶ月か前の自分と比べてみてください。まったくの別人です。

まとめ:あとはやるだけ

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

 

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

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

 

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

 

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

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

 

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

「超Vue.js2完全パック(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年最新版」

 

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

takabee
では、また次の記事でお会いしましょう!
ネコ大先生
最後まで読んでくれてありがとうニャ!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Webエンジニア兼ブロガー。Nuxt.js, Wordpress, SEO対策などの案件を承っております。
お仕事の依頼はこちらから。
https://www.lancers.jp/profile/takabeee

コメント

コメント一覧 (2件)

コメントする

目次
閉じる