【Nuxt.js】番外編：Progate初心者がNuxt.jsでWEBサイトを作るまでのロードマップ②

前置き

前回はこちら
心構えなどを参考にどうぞ🍀

【Nuxt.js】番外編：Progate初心者がNuxt.jsでWEBサイトを作るまでのロードマップ①

初心者がNuxt.jsで
webサイトを作り上げるまでの
ロードマップです！🔰
①はNuxt.jsを使う前のLP模写やGitまで
②はNuxt.js〜の具体的な学習方法
最終的に外部サービスやAPIを使えるまで
をメインに書いています！

この手順で学習することで
挫折せずに効率的に、
そして着実に、
スキルアップができます🌟🌷

最終目標

ドキュメントが読めるようになる📚
ググり方が分かる🔍
Nuxt.jsでWEBサイトが
1から自分で作れる💻
チームで開発ができる👨‍👩‍👧‍👦

📈Stepごとの成長グラフで
最終目標までに対し
自分がどこにいるのか
可視化できるようにしました✨👀

Step6: フレームワークNuxt.jsを使ってみる

目標

環境構築に慣れる
ファイル構造を理解する
エラーに慣れる
エラーなくフレームワークを使える

Vue.js は使わないの？

使わなくてもOKです！
ディレクトリの構造が違いますが
ほとんど同じ物です。
慣れればNuxtの方が楽♪
くらいの認識でOKです！

環境構築/導入する

環境構築は初心者にはかなり難しいと思います。
ですがこれをやらないことには始まりません。
ここもぜひメンターに教えてもらいましょう！👩‍🏫

ここでインストールするか
下のaLiz テンプレートをgit cloneしてください📩

インストール

aLiz テンプレート

Nuxtファイルを
GitHubで用意しています🍒
npmとかyarnとか分からなくても大丈夫です。
とりあえずnuxtがnodeの1つで、
nodeはnpmのパッケージの集まりだから
nodeを使うらしい
くらいの認識で良いです。

aLizテンプレート

cloneしたファイルまでcdで移動し

terminal

$ npm install
$ npm run dev

ファイル構造

pages/index.vue

まずはここだけ分かれば大丈夫です🙆‍♀️
今まで触ってきたindex.vueと同じです⭕️

基本構造を把握しましょう！
<template>タグは<body>にあたる
dataやmethods関数の書く位置

コードを書いてみる

pages/index.vue

徐々にコードを追加しましょう！
こんな感じで徐々に試しましょう🌟

HTMLのみで
$ npm run devでエラーチェック
➕CSSを追加、エラーチェック
➕JSを追加、エラーチェック…

これができたら！

JS含めて自由に
コードを書いてください💃💕

こう書けばこうなるらしい😯
ここがこんな意味っぽい🤔
あ、じゃあこう書けばいいかも？💡😯
この積み重ねです♪

ただこの時点でJS忘れてます！🤣笑
そんな方は先にStep7に行ってから、
またここに戻ってみてください🪐

⚙Vue.js devtools

Chromeで使える拡張機能！
検証タブにVueが出るようになります。

Vue.js devtools

検証 > Vue > Componentsタブ
最初はここを見るようにしましょう！👀

エラーが出たら

ロードマップ①の頃より
ファイルの構造が変わったり
JSを使うことでエラーが増えます😲💦
しかし焦らず🍀😌

検証/console
検証/Vue.js devtools
ターミナル

エラーを確認して
翻訳したりググったりで
解決していきましょう！！

JSFiddle

一応JSFiddleのテンプレートを置いておきます。
ブラウザ上でコードの動作確認ができます。
本来のNuxtファイルとは
どうしても違う書き方になりますが、
ここに追加していけば動きます🌟

ここで正常に動くのに
ローカルではエラーの場合は
ディレクトリ関係のエラーの可能性が高いです。

JSFiddle

SCSSの導入

CSSが階層で書けるようになって便利です💕
https://qiita.com/sam_sam/items/982244407c0f6d17d680

Step7: 1度Progateに戻ってみる

なぜこのタイミング？

Progateは何周もしなくて良い！
のですが、
初めてProgateのJSをやってから
時間が経っているので忘れます😂
短期間でProgateからNuxt.jsが
できると良いのですが
Gitとフレームワークという全く新しい物を
やらないといけないので実際は難しいと思います。

ProgateをNuxt.jsで試す

progateではこの例文しかなかったけど
こうしたらどうなるんだろう…？
と調べながら動作を確認しましょう！
簡単な物でも良いので
まずは色々試してみましょう🎶💗

JavaScript Primerでの勉強もオススメです！

メリット

思ってた挙動と違ったり、
エラーが連発した際に
原因の検討がつくようになってきます。

必ず理解・覚えること

if, switchなどの構文に慣れる
Object{}とArray[]の違いを知る
配列はこちらをぜひ見てください👀
https://qiita.com/Yametaro/items/70e7878c5ea51788b643
returnの有無
真偽値を知る
アロー関数を知る
(関数を省略して書ける)

アロー関数

関数名 = ( ) => console.log('text');

1	関数名 = ( ) => console.log('text');

元々の形

関数名( ) {
console.log('text');
}

関数名( ) {

console.log('text');

}

Step8: Nuxt.jsの学習に戻る

目標

Nuxt.jsのディレクトリ (ファイル構造)や
書き方を活かしたコードが書ける！✨✍️
公式ガイド, APIをみることに慣れる👀
全部は分からなくてOK！
ここの説明はたぶんこういうこと😀
欲しい情報はこのページにありそう😀
そんな感覚を掴みましょう🎶

詰まったら

単語だけでググってみる
Vue.jsやNuxt.jsの公式を確認👀
詳細リンクがあればそちらも見る
Qiitaで検索
「知りたい単語 JavaScript」などでググる
teratailやメンターに聞く

これを繰り返してみましょう！
いくつかのページを読んでみて
「こうググれば良いのか」
「ここには答えがありそう」
「なんか全然知りたい内容と違うっぽい」
という当てがつくようになります🌟
これはある程度の経験が必要です💡🐴

1. Udemy動画を見る

オススメはこちら！
Udemy: Vue.js完全ガイド

セール時を狙ってくださいね🉐
Vueの動画ですがNuxtとほぼ一緒です！
Nuxt.jsではVueインスタンスという物を
書く必要がないので楽です🉐
section1-3からsection3までを
Nuxt.jsでやりましょう！

Point!

データバインディング
https://v1-jp.vuejs.org/guide/syntax.html
v-bind: タグの属性を変数にしたい時(省略して:のみで使える)
v-if, v-on(@), v-forなどv系

<template>
 <div class="page">
   {{ message }}
 </div>
</template>

<script>
export default {
 data () {
   return {
     message: 'Hello Nuxt.js!'
   }
 },
}
</script>

</div>

</template>

export default {

data () {

return {

message: 'Hello Nuxt.js!'

}

</script>

2. ルーティングに慣れる

https://ja.nuxtjs.org/guide/routing/

ディレクトリによる
path(ファイルやフォルダのある場所、URL)
を把握しましょう。
これはNuxt.jsのファイル構造によるものです。
なのでまずはNuxt.jsのガイドを確認してみてください🌟

pages/sample.vueや
pages/users/_id.vue
pages/_id/index.vue
などを試してみてください♪

pages/index.vueのpath

http://localhost:3000/

pages/sample.vueのpath

http://localhost:3000/sample

慣れたら
vue-routerの公式も見てみましょう。
興味があることを確認するくらいでOKです。
Nuxt.jsではインストール不要なのでそのまま使えます♪
https://router.vuejs.org/ja/

3. componentsを知り親子間のやりとりに慣れる

https://jp.vuejs.org/v2/guide/components.html

componentsとは

再利用可能な物体！
どういう事かというと
webサイトに同じbuttonって
何個も使ったりしますよね？💡

サイズは一緒で色だけ変えたい時とか

componentsで
このbuttonの形を作っておくんです。
それを親で取り込んで、
親で色やテキストを指定することができます！
修正したい時は親さえ見れば良いので、
いろんな所を見なくても良いんです！！👀
まぁ何かと便利なわけです！！🤗

4. アトミックデザインでコンポーネントを分ける

ディレクトリをこんな風に要素の大きさや
機能ごとに分けます。
どこに何があるのか分かりやすく非常に便利です！

5. Vue Routerを知る

https://router.vuejs.org/ja/
Nuxtのルーティングページより
細かいことを学んでいきましょう！

Point!

router.pushを知る
params, queryを知る

これができるとページネーションなどが
できるようになります！
ページ数に合わせて表示させる内容を
変えることが可能です♪

6. udemyを進める

Udemy: Vue.js完全ガイド
section4以降をぜひ進めてみてください♪
section14くらいまでは進められると思います🌟
環境構築など不要な所は飛ばしましょう👋

Point!

動画をある程度で止めてなるべく見ずに
動画と同じコードを書けるよう意識しましょう！
section8：components応用
props, $emitのみでOK
eventBusは後のVuexで簡単でできるため不要
section10：TODOリスト
ESlintで:keyを書く必要があるかもしれません。

<li v-for="fruit in fruit" :key="fruit>{{ fruit }}</li>

1	<li v-for="fruit in fruit" :key="fruit>{{ fruit }}</li>

section15以降は更に難しくなります！
ここはStep9, Step10で
必要に応じてやっていきましょう♪

Step9: Nuxt.jsでWebサイトを作ってみる！

さぁここまでくれば
あとは作りたいものを作るのみ✨
ぜひチームで作ってみてください👨‍👩‍👧‍👦

沢山の記事を見て答えを得る感覚を
掴んでいると思います！🤗💕
分からないことがあっても
質問慣れしているとスムーズです♪

着実に力がついてると
実感できていると思います🌟

難しい

そんな時はこれをチェック！

今までのstepで理解できてない部分がないか
このサイトで知りたい情報を検索してみる
実践が足りないかも、次のstepへ！

息抜きしたい

比較的簡単にサクッとできる
こちらの記事を試してみてください♪

【Nuxt.js】plugin実践編：vue-scrolltoでスムーズにスクロール
 【Nuxt.js】dayjs導入編：リアルタイムな日時を表示してみよう
 【Nuxt.js】filter実践編：数字3桁ごとにカンマを入れよう！
【Nuxt.js】filter実践編：文末を…で省略しよう！
【Nuxt.js】カスタムディレクティブ基礎編：とりあえず使ってみよう！
【Nuxt.js】transition基礎編：ページ遷移アニメーション

Step10: もっと実践を積みたい！

そんな方は❗️
着実にスキルアップするこちらをどうぞ！
実践に慣れていきましょう！！💕

終わりに

決して短くはない道のりですが
最終目標を達成しているはずです♪

ドキュメントが読めるようになる📚
ググり方が分かる🔍
Nuxt.jsでWEBサイトが
1から自分で作れる💻
チームで開発ができる👨‍👩‍👧‍👦

この業界は1回学べば終わり
ではなく学習できることが無限にあります🌐📚
皆さんが楽しんで成長しながら
この業界に関われますように🌸🙏