そのほか

【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での勉強もオススメです!

メリット

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

必ず理解・覚えること

アロー関数

元々の形


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!

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

おすすめ記事

slot基礎編
props基礎編
$emit基礎編
TODOリスト

Point!

componentsのimportの仕方を知る
分からなければルーティングに戻りましょう!

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

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

directory

components/
--| atom/
----| buttons/
-----| ButtonDefault.vue
--| molecule/
----| listItems/
-----| ListItemUser.vue

分け方についてはここが参考になります!
Atomic Designとは

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を書く必要があるかもしれません。

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】axios導入編:かんたん・お手軽API通信
【Nuxt.js】firebase導入編(Firestore版):データの追加 取得をしよう
【Nuxt.js】Vuex基礎編:コードをスッキリさせよう
【Nuxt.js】アプリ開発基礎編:Nuxt + Vuex + firebaseでシンプルToDoリスト

少しヘビーですがいつも通り
簡単な部分から肉付けしていくスタイルで
丁寧に解説しております🍀

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

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

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

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


終わりに

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

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

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

-そのほか

© 2020 aLiz Nuxt