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

# 前置き

前回はこちら
https://note.com/aliz/n/nb89303a84f66


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

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

# 心構え

**【🎓学習の姿勢】**
**・全部理解しなくてOK**
　最低限の必要な知識だけで
　基礎を積み上げましょう
**・ほぼ暗記はしなくてOK**
　ある程度の構文・単語は
　覚える必要があります。
　英文法・英単語を覚えないと
　英作文ができないのと同じです！
　ただ他はググればOKです！
**・ひたすらコードを書いて実践✍️**
　読んで理解も大事ですが
　動かしてみることが大事です🍀
**・なぜなぜをし出すとキリがない**
　「よく分からんけど
　　こう書いたらなんかこうなるらしい💭」
　　くらいの認識でOK！

**【🔍調べ方】**
**・MDNで検索**
　https://developer.mozilla.org/ja/
　最初のHTML/CSS, JSのうちは
　ここで知りたい単語で検索！
**・知りたいことだけに集中する**
　1つのことだけ知りたいのに
　ググるといくつものコードや
　ライブラリ、フレームワークが混じった
　サンプルコードが出てきます。
　パッと見めっちゃ難しそう👀💦
　なんてことがよくあります。

　「全部理解しないといけないのか😔」
　ではなく知りたいことだけに集中しましょう！
　簡単にできるものを
　難しく複雑に考えないように🍀

**【❓聞き方】**
**・5〜30分調べても分からなかったら聞く**
　基本は30分が理想ですが、
　それはある程度ググる力がある場合です。
　最初の頃は5分など調整して聞いてみましょう。
**・バグる可能性があるならすぐ聞く**
　PCの設定など直すのが大変そうな場合です💥
**・テンプレート**
　聞く＝相手の時間を奪うので
　理由を明確にして質問し
　スムーズに解決できるよう努めましょう🌟
　最初の頃は失敗も多いですが
　諦めずに改良していきましょう☺️💕
　
　一度teratailで質問をしてみると良いです！
　質問する前の注意や
　質問の仕方のテンプレートが確認できて
　とてもオススメです！！
　https://teratail.com/

**【aLizサークル】**
もちろんaLizのサークルでも大歓迎です🌟
1人1人の質問に答えます！
しっかりサポートしますよ❤️☺️
https://note.com/aliz/circle

# 最終目標

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

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

<img width="675" alt="Frame 6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/458628cb-688e-65f7-16b7-240c69dd3e90.png">

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

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

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

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

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

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

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

https://github.com/aLizlab/product_nuxt-template

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

```bash:ターミナル
$ 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](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja)

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

![picture_pc_a15291ad064f078205bbbe70939629b5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/922e86c8-ef70-6f4b-7fdc-5f4e0ef0a502.png)

**【エラーが出たら】**
ロードマップ①の頃より
ファイルの構造が変わったり
JSを使うことでエラーが増えます😲💦
しかし焦らず🍀😌
・検証/console
・検証/Vue.js devtools
・ターミナル
エラーを確認して
翻訳したりググったりで
解決していきましょう！！

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

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

https://jsfiddle.net/mogu10/2skjhn9c/

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

<img width="675" alt="step6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/c44cdb11-69a9-2a4d-dbcd-6da5e3442ee4.png">

# Step7: 1度Progateに戻ってみる

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

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

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

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

```index.vue
関数名 = ( ) => console.log('text');
```
元々の形

```index.vue
関数名( ) {
console.log('text');
}
```
<img width="675" alt="step7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/800e4e9b-975f-8805-7a9e-bd6c1eb63efe.png">

# Step8: Nuxt.jsの学習に戻る

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

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

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

**①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系

```index.vue
<template>
 <div class="page">
   {{ message }}
 </div>
</template>

<script>
export default {
 data () {
   return {
     message: 'Hello Nuxt.js!'
   }
 },
}
</script>
```
**②ルーティングに慣れる**
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

```bash:path
http://localhost:3000/
```

pages/sample.vueのpath

```bash:path
http://localhost:3000/sample
```

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

**③componentsを知る、
　親子間のやりとりに慣れる**
https://jp.vuejs.org/v2/guide/components.html

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

![picture_pc_916791644e87cfc466d8cde7d29deabc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/b5b701cc-5614-9ed5-29ef-62169afeb5fc.png)

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

![picture_pc_6eb4cef899bef7502c04d3a2ce4ae05b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/6cb0e8de-453a-3d94-df67-67c587aa0fc6.png)

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

**【オススメ記事】**
過去の記事でオススメはこちら
slot基礎編：https://note.com/aliz/n/n8a0f81fc6583
props基礎編：https://note.com/aliz/n/n99144d4556b9
$emit基礎編：https://note.com/aliz/n/nd6e771724cd7
TODOリスト：https://note.com/aliz/n/nda7438249ca8
　　　　　　　slot, props, $emitで作ります🍓✨

**【Point!】**
・componentsのimportの仕方
　分からなければルーティングに戻りましょう！

**④アトミックデザインでコンポーネントを分ける**
ディレクトリ をこんな風に要素の大きさごとに分けます。
どこに何があるのか分かりやすく非常に便利です！

```bash:file
components/
--| atom/
----| buttons/
-----| ButtonDefault.vue
--| molecule/
----| listItems/
-----| ListItemUser.vue
```

分け方についてはここが参考になります！
[Atomic Designとは](https://design.dena.com/design/atomic-design-%E3%82%92%E5%88%86%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%A4%E3%82%82%E3%82%8A%E3%81%AB%E3%81%AA%E3%82%8B/)

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

**【Point】**
・router.pushを知る
・params, queryを知る
まずはどんな物かをこちらで確認してください🌸
基礎編：https://note.com/aliz/n/ndf76ebe9853b#2zJAk
復習編：https://note.com/aliz/n/ne1d2fc4fb1ef
実践編：https://note.com/aliz/n/n8bb439a426a8

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

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

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

```index.vue
<li v-for="fruit in fruit" :key="fruit>{{ fruit }}</li>
```

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

<img width="675" alt="step8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/bc725e76-becb-1504-2401-704828dfcdf1.png">

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

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

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

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

**🤯難しい💥**
　と感じたら
　✅今までのstepで
　　理解できてない部分がないか❓
　　→該当stepや記事を理解
　✅欲しい情報があるかも❓🔍
　　「aLiz 知りたい単語」でググるか
　　note一覧から検索
　　https://note.com/aliz
　✅実践が足りない❗️
　　→次のstep🏃‍♀️💨

**😌ちょっと息抜きしたい**
比較的簡単にサクッとできる
こちらの記事を試してみてください♪
plugin：https://note.com/aliz/n/nfd2bfc514ace
　　　　https://note.com/aliz/n/nbd10153f563f
filter：https://note.com/aliz/n/ncaab37ed5ef5
　　　https://note.com/aliz/n/n41876785728d
他：https://note.com/aliz/n/n286f815135f8
　　https://note.com/aliz/n/n06b9e53984a2

<img width="675" alt="step9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/796200d2-9f8f-318a-dbf3-13be7cde6cc1.png">

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

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


**【オススメ記事】**
少しヘビーですがいつも通り
簡単な部分から肉付けしていくスタイルで
丁寧に解説しております🍀
axios導入編：https://note.com/aliz/n/na8d49fa6462b
firebase導入編：https://note.com/aliz/n/nacc97fe7d019
Vuex基礎編：https://note.com/aliz/n/n497914c981c8
🍒アプリ開発基礎編：https://note.com/aliz/n/n8411db2c9a20

**【内容】**
**・API通信(axios)**
　機能を共有できる仕組みです！
　amazonの商品データを引っ張ってきて
　売れ筋商品を把握する、
　なんてことができます。

**・firebase**
　オンラインにデータを保存できて
　取得もできる優れものです！
　チャットアプリなどに使えます。
　リアルタイムにデータを保存・同期できるので
　メッセージを送り合うことが簡単に💌

**・Vuex**
　状態管理のライブラリ。
　簡単に言うとデータ保存ができるもの。
　ログイン情報が
　ページ遷移後も保持できたり💡


**・アプリ開発基礎編**
　Vuexとfirebaseを使った
　TODOアプリの記事です！
　外部サービスでも
　リファレンス の見方が分かってきたり
　Nuxt.jsでの書き方がわかってきたりします🤗💕

[【Nuxt.js】アプリ開発基礎編：Nuxt + Vuex + firebaseでシンプルToDoリスト](https://note.com/aliz/n/n8411db2c9a20)

<img width="675" alt="Frame 6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/97a7cc4f-c75b-e951-7c46-d7160a0441d6.png">

# 終わりに

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

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

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