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

# 前置き

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

この手順で学習することで
**挫折せずに効率的に、
そして着実に、
スキルアップができます🌟🌷**
そのため爆速で超ハイレベル！💨💨💨
を求めている方にはオススメしません。

😀 { 筆者のスキルはポートフォリオ や
　　これまでの記事を見てください📝
　　文系ほぼ未経験。
　　中学生の時にホームページ作りが流行る。
　　独学でyahooサーバーで
　　HTML/CSSだけで作った。
　　まぁほぼポンコツのひよこです🐣

純粋に技術の習得ステップを書いているので
案件の取り方などはこちらをどうぞ
https://note.com/aliz/n/n7e1d338b2a71#JNijX

# 最終目標

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

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

<img width="691" alt="Frame 4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/b9d43b3a-d5b2-b947-0308-ae34b74f2edf.png">

# なぜロードマップが必要か

この業界ではググる力が全て！！
ですが！
遠回りする前に🐌
最初から知っておいて
良いこともあると思ったからです。
全てを1からググるのは結構消耗します🤯🔋

挫折も必要ではありますが、
最初から挫折ばかりでは成功体験がなく
先に進むことが難しいです🏃‍♀️💦

【例えば】
・Windowsからmacにしたけど
　まずmacの使い方が分からない😭
・分からないことが分からない😭
・ググり方が分からない😭
・用語を知らないからググれない😭
・一言一句覚えると思って
　ひたすら紙に書いた😨
・覚えるな！と言われても
　どこまでがダメなのか分からない😭
これらが重なると爆発します💥🤯笑

そういった自分の経験から
ある程度のロードマップは
あるべきだと思いました💡

# この手順通りじゃないとダメ？

そんなことはありません！
基本的を最短で学べるように考えていますが、
飽きたり、別のことに
興味が出ることもあると思います。
そんな時は一旦自分の好きなようにやってみて、
また飽きたり詰まったりしたら
この記事を参考にしてください🌸

# 心構え

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

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

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

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

# Step1: Twitterでアカウントを作成
まずはここから！
とにかく先輩エンジニアたち、
同じ頃に学習し始めた人たちを
フォローしてみましょう！

**【なぜ必要❓】**
プログラミング独学は挫折率9割💥
・周りにエンジニアがいない
・聞ける人がいない
・学習を共有する場がなく
　モチベーションが上がらない
→これらを解決しましょう！

**【メリット】**
・情報収集ができる
・他者の勉強ツイートで
　モチベーションに繋がる
・メンターが見つかるかも
　(実際に私のパターン)
　zoomなどを使って
　画面共有しながら
　効率的に学んでいきましょう！

**【おすすめハッシュタグ】**
 #エンジニアと繋がりたい
 #駆け出しエンジニアと繋がりたい
 #プログラミング初心者

<img width="691" alt="step1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/2534f6cc-4dd9-6b90-59a7-d1d14b958629.png">

# Step2: Progateで基礎を学ぶ
**【やるコース】**
・HTML & CSS
・JavaScript
最初はスマホでも良いですが
必ずPCでコードを書く練習をしてください！👩‍💻
有料でやるなら1ヶ月以内に終わらせましょう💡

**【必ず理解・覚えること】**
**🌷HTML & CSS🌷
・タグに付けられる属性を知る
・親子関係を知る**
　└入れ子：ulの入れ子はli
　└ネストが深い：入れ子が沢山あること
　└CSSをどこに当てるか：
　　親に書くのか子自身に書くのか
　　MDNを見てみましょう！
　　https://developer.mozilla.org/ja/
**・display: block;**
　inlineやinline-block
　ここが参考になります！
　https://saruwakakun.com/html-css/basic/display
**・レスポンシブ 対応を知る**
　必ず必要な知識です！！　

🌷JS🌷
**関数,引数(第二引数), 変数や
テンプレートリテラルなど📚**
これらがどういう使い方をして
どう動くかを簡単に説明できるようにしましょう
これはずっとお付き合いするものなので
覚えて良い単語・構文です。

**【Point !】**
**・<>とか一言一句を覚える必要はない！**
　試しにh1と入力してタブキー(Qの左)
　を押してみてください🌸
**・コードを紙にメモする必要はない！**
　図として理解したいとか
　整理したい時だけで十分です。
**・意味は1回理解だけすればOK**
　hrefはhrefはhypertext referenceの略とか
　特に使う場面がないです。
　もちろん分かっていた方が良いですが！
　まずはこのタグはこれをしたい時に使う、
　だけで十分です！！！！
**・何周もしなくてOK**
　次のstepに進みましょう！
**・コースを通して何ができるか理解する**
　家で例えるなら、
　└HTML：素材
　└CSS：装飾
　　　　　色を塗ったり配置を変えたり
　└JavaScript：動作
　　　　　　　　照明スイッチを押せば
　　　　　　　　電気のon, offができる
　　→これだけあれば大体のことはできます。
**・ここで挫折した人は
　この業界をオススメしません。**
　序の口どころではないからです。
　もしくは一旦PHPなど全く
　別のものを試してみてください。
　どのコースもダメなら…
　今後苦痛しかありません。。。

**【困ったら】
・答えがどうしても合わない**
　→コードの比較をしてみてください！
　　https://difff.jp/
**・見た目があっているのに正解にならない**
　→Progate上で習ってないタグを
　　使用しているためだと思われます。
<img width="691" alt="step2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/3ead22b5-0afb-092c-da03-730b9a9a9278.png">

# Step3: コードエディターを使って実際にやってみる
**【コードエディターとは】**
1から自分でプログラムを書ける物です。
VSCode, Atom が有名です。
この2つから選びましょう！
使用者が多く質問もしやすいですからね🌟
😀{ 私はVSCodeです！

**【index.htmlを作る】**
まずはとにかくファイルを作ってみましょう！
Progateで学んだことを書いてみてください♪
ここでのPointは…
・JSはやらなくてOK
・CSSファイルを作って取り込んでみる
・インデント をしっかりつける

**【emmetの設定をする】**
・Progateのショートカットと
　同じことができます✨
　＋更に！
　　ul>liと書いてタブを押せばこの通り！
　　困ったらチートシートを見てみましょう
　　https://docs.emmet.io/cheat-sheet/

```index.vue
<ul>
   <li></li>
</ul>
```

・!を押すと
　右にtabを押した場合
　何を書けるか表示してくれます💕
　(htmlでも同じです⭕️)
　(VSCの場合、下の青いバーの右
　ファイル構成がHTMLになっているか✅👀)

　ちなみにlangをjaにする設定はこちら
　https://qiita.com/tedkuma/items/67876e6be3369b0e730c

<img width="682" alt="スクリーンショット 2020-05-04 14.00.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/0b3db636-f6a3-2ef7-f9b2-08d08161c3c4.png">

**【必ず理解・覚えること】**
**・CSSを当てる要素には必ずclass名をつける**
　この癖をつけないと
　Nuxt.jsを使い始めた時に苦労します笑
　同時にできれば命名も考えてみてください💡
　役割をつけてあげると分かりやすいです🌟
　下記の例だとh1は1番メインのタイトルなので
　main-titleとしています。

❌NG

```index.vue
<style lang="css">
 h1 {
  color: red;
 }
</style>
```

⭕️OK

```index.vue
<style lang="css">
 .main-title {
  color: red;
 }
</style>
```

**・flex**
　Progateで横並びのcss
　floatをやりますが実際あまり使いません。
　displayをflexにしてから　
　justify-contentで指定しましょう💡
　flexチートシートで色々ためしてください🌟
　https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

　よく使うのはこれです。
　中身の要素が1つでも使えるのが便利です♪
　試しにbuttonを作ってやってみてください✍️

```index.vue
<style lang="css">
 .button {
  display: flex;
  justify-content: center;
  align-items: center;
 }
</style>
```

**・入れ子の種類を知る**
　入れ子チートシートが便利です！
　慣れてきたらみてみましょう👀
　https://yoshikawaweb.com/element/

**・ショートカットキーを覚える**
　最初は慣れないので最低限
　効率的にできるところだけ覚えましょう！
　VSCodeの場合です。
　いつでもVSCodeの
　画面左下の歯車から確認ができます👀
　tab：インデント下げる
　tab + Shift(⬆︎)：インデント上げる
　command + 矢印：端までカーソル移動
　ctrl + S：保存

**・width, min-widthはセットで使う**
　レスポンシブ 対応で使っていくので
　今のうちに慣れておくと良いです！

**・calc, vh, vw, em, remなどの計算を知る**
　今はまだ使い道が分からないかもしれません
　が模写をしていくと
　使いどころが分かってきます💡
　こんな物があるんだな、
　と知ることが大事です！♪
　https://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.html

**【エラーに慣れる】**
Chromeの検証を開いて
consoleをする癖をつけていきましょう♪

<img width="691" alt="step3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/61deadef-f9b0-d058-d8cd-5f93d3040388.png">

# Step4: LPを模写する
今までの知識を総動員して
模写してみましょう！💃✨
意外と難しいことに気づきます笑
LPじゃなくても良いですが
難易度的に1番簡単だと思います🔰🌸
(JSはやらなくてOKです)

実在するwebサイトでも、
noteで販売してるものでも、
なんでも良いです！
レスポンシブ 対応もやりましょう💕💪

**【Point!】**
・エラーに慣れる
　とにかく検証開いてconsoleを確認しましょう！
・HTMLの入れ子が合っているか？
・CSSを当てる要素が間違っていないか？
　チートシートやMDNを見て
　確認していきましょう！

**【困ったら】**
・模写したいサイトを検証👀
　実際のコード確認してみましょう！
・レスポンシブ が難しかったら
　Bootstrapなどの
　ライブラリを使ってやってみるのも手です。
　まずは作れた！という達成感を得ましょう💕
　そして徐々にメディアクエリ に慣れましょう！
・それでも分からなければ聞きましょう👩‍🏫

<img width="691" alt="step4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/9e071737-448b-25d5-2389-c574cc61b192.png">

# Step5: ターミナル, Git, GitHubを使ってみる
**【GitHubとは】
この辺から少し難しくなってきます。
チーム開発で必ず必要なGitHub。**
チームで開発をする際に、
ブランチ(branch)というもので
分けて同時進行で作業していくものです。
**これを使えなければ
仕事はできないと思ってください💥**

なのでここは
**確実にできるようにしましょう！**
ぜひメンター、教師、
エンジニアの友人や先輩に、
力を借りてください！

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

**【Gitとは】**
GitHubがオンラインでやるもので
Gitはローカルでやるもの
くらいの認識でOKです。
GitHubを使うためにターミナルや
Gitも使うことになります。

**【Nuxt.jsが先じゃないの？】**
後々チームに加入して
ディレクトリ が複雑な状態から
初めてGitHubを使い出すと
大変なことになります。

**私のように何をしているか分からず
作業が全てパーになってしまったことも！🤣**
だからまずindex.htmlだけで
使い慣れておくことが近道です！！

**【手順】**
まずは簡単なところからできれば大丈夫🙆‍♀️
キーボードcommand + スペースで
spotlightにターミナルと入力して開きましょう！
htmlファイルを作成しgit init
GitHubにpushしてみましょう！
慣れてきたらファイルを増やしてbrを切ったりして
全体の仕組みを理解していくと良いです。

**【git】**
・cdとかmkdirして
・git initからpushまで
・git cloneからpushまで
・ファイルを増やしてbrを切る
・切ったbrの作業分をpushしmargeしてみる
これだけできればOK！！！
git stashとかいらない、、、

**【Point!】**
記事を読んだりするよりも
動画で流れを理解することがスムーズです。
メンターと一緒にやる際には
zoomなど画面共有で
正確に教えてもらうと安心ですね。
オススメ動画はUdemyのこちらです。
Udemyはセール時に安くなるので、
タイミングが合えば購入してみてください！🉐
難しいコマンドは省いて大丈夫です🙆‍♀️
Udemy: Gitを完全マスター

<img width="691" alt="Frame 4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/9cca2a7d-22b9-494f-faaf-5b0ccf262e1a.png">

# 次回
ロードマップ②
5/12(火)に公開予定です🌟
いよいよNuxt.jsを触っていきます🤗
stepは多いですが、
着実にスキルアップします💕