そのほか

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

前置き

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

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

yossy

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

純粋に技術の習得ステップを書いているので
案件の取り方などはこちらをどうぞ


最終目標

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

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


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

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

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

例えばこれらが重なると爆発します💥🤯

  • Windowsからmacにしたけど
    まずmacの使い方が分からない😭
  • 分からないことが分からない😭
  • ググり方が分からない😭
  • 用語を知らないからググれない😭
  • 一言一句覚えると思って
    ひたすら紙に書いた😨
  • 覚えるな!と言われても
    どこまでがダメなのか分からない😭

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


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

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


心構え

🎓学習の姿勢

  • 全部理解しなくてOK
    最低限の必要な知識だけで
    基礎を積み上げましょう
  • ほぼ暗記はしなくて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などを使って
    画面共有しながら
    効率的に学んでいきましょう!

おすすめハッシュタグ

#エンジニアと繋がりたい
#駆け出しエンジニアと繋がりたい
#プログラミング初心者


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上で習ってないタグを
    使用しているためだと思われます。

Step3: コードエディターを使って実際にやってみる

コードエディターとは

1から自分でプログラムを書ける物です。
VSCode, Atom が有名です。
この2つから選びましょう!
使用者が多く質問もしやすいですからね🌟

yossy

私はVSCodeです!

index.htmlを作る

まずはとにかくファイルを作ってみましょう!
Progateで学んだことを書いてみてください♪

Point!

  • JSはやらなくてOK
  • CSSファイルを作って取り込んでみる
  • インデント をしっかりつける

emmetの設定をする

Progateのショートカットと
同じことができます✨

更に!
ul>liと書いてタブを押せばこの通り!
困ったらチートシートを見てみましょう
https://docs.emmet.io/cheat-sheet/

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

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

必ず理解・覚えること

CSSを当てる要素には必ずclass名をつける

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

NG

OK

flex

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

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

入れ子の種類を知る

入れ子チートシートが便利です!
慣れてきたらみてみましょう👀
https://yoshikawaweb.com/element/

ショートカットキーを覚える

最初は慣れないので最低限
効率的にできるところだけ覚えましょう!
VSCodeの場合です。
いつでもVSCodeの
画面左下の歯車から確認ができます👀

  • tab:インデント下げる
  • tab + Shift(⬆︎):インデント上げる
  • command + 矢印:端までカーソル移動
  • command + D:単語選択、連続で押すと複数選択が可能
  • 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をする癖をつけていきましょう♪


Step4: LPを模写する

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

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

Point!

  • エラーに慣れる
    とにかく検証開いてconsoleを確認しましょう!
  • HTMLの入れ子が合っているか?
  • CSSを当てる要素が間違っていないか?
    チートシートやMDNを見て確認していきましょう!
  • SEOを意識したコードを書いてみる
    ここが参考になります!
    https://creive.me/archives/8814/

困ったら

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

Step5: ターミナル, Git, GitHubを使ってみる

GitHubとは

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

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

aLizサークル

1人1人の質問に答えるサークルを
用意しております!🌟🙋‍♀️
「初めての案件をやるけど不安😭」
という方はぜひ!
しっかりサポートしますよ❤️☺️

Gitとは

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

Nuxt.jsが先じゃないの?

後々チームに加入して
ディレクトリ が複雑な状態から
初めてGitHubを使い出すと
大変なことになります。

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

手順

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

git

これだけできればOK!!!
git stashとかいらない、、、

  • cdとかmkdirして
  • git initからpushまで
  • git cloneからpushまで
  • ファイルを増やしてbrを切る
  • 切ったbrの作業分をpushしmargeしてみる

Point!

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

-そのほか

© 2020 aLiz Nuxt