Progate のWeb開発パスは難しい？解説します。

プログラミング初心者御用達のProgate。
何もわからない状態だと、なんだか難しく感じるかもしれません。

本記事ではWeb開発パス(Node.js)を題材に各レッスンの抑えるべきポイントについて解説します。

プログラミング初心者の方の参考になれば幸いです。

Web開発パスのレッスン種類

Ｗeb開発パスのレッスンは以下の通りです。

全12種類で4種類の言語、環境、の構成となっています。

各レッスンの所要時間についてはこちらの記事で解説しています。

ProgateのWeb開発パスの所要時間は?～初心者体験談～

Progate のWeb開発パス、どれくらいの時間がかかるのか気になりますよね。 本記事では初心者の自分がかかった所要時間を紹介しています。 初心者の参考になれば幸いです。

zerokara-app.com

2021.05.31

ポイント解説

各レッスンのポイントを解説していきます。

HTML&CSS 初級編

Ｗeb開発パスの最初のレッスンがHTML&CSS初級編です。
このレッスンの押さえておきたいポイントは次の通りです。

大前提として、このレッスンで学んでいるものが何なのかがわからないと、
なんとなくで進んでしまいます。

もしお使いのブラウザがGoogle Chromeなら、このページの好きな部分で
「右クリック」→「検証」としてみてください。

右側上にこのページのHTMLが、右下にCSSが表示されるはずです。

このように、WebページはHTMLとCSSによって作られています。
このことを理解した上で進めると、より理解が深まりますよ。

Tabキーでの入力補完は次の中級編でも使うテクニックとなります。
時々余計なものまで補完されてしまうことに注意が必要ですが、
文字入力で時間を使うのはもったいないです。
しっかりと使いこなせるようにしましょう。

HTML&CSS 中級編

2個目のレッスンがHTML&CSS中級編です。
このレッスンの押さえておきたいポイントは次の通りです。

『margin 0 auto』 とすると、『margin 上下 左右』の指定ができます。
これにより上下のmargin が0、左右のmarginがautoとなり、
レイアウトの中央寄せが可能となります。

内容は難しいですが、レッスンの内容をちゃんと理解して進めれば大丈夫なはずです。
頑張りましょう！

JavaScript Ⅰ

3個目のレッスンがJavaScript Ⅰです。
このレッスンの押さえておきたいポイントは次の通りです。

この言語は先のHTML&CSSとは全くの別物であることを理解しましょう。
HTML&CSSではコードを書くと即座にページ表示が変わる、という仕様でしたが、
JavaScriptはコードを書き、実行することでコンソールに結果が表示される、という違いがあります。
違いを理解した上で勉強を進めましょう。

Progateは変数や代入の考え方をかなりわかりやすく説明しています。
安心して理解に努めましょう。

JavaScript Ⅱ

4個目のレッスンがJavaScript Ⅱです。
このレッスンの押さえておきたいポイントは次の通りです。

繰り返し処理はプログラミングならではの考え方なので最初は理解しづらいかもしれません。
小さな繰り返し回数(3~5回くらい)で、プログラムの変数の数値と実行結果を紙に書くと理解が深まります。繰り返しがあるけどよくわからない時はぜひやってみてください。

3 ÷ 3 ＝ 1 … 0
6 ÷ 3 ＝ 2 … 0
9 ÷ 3 ＝ 3 … 0

と、3の倍数はすべて余りが0となります。なので「変数 % 3 ===0」とすれば、変数が3の倍数の時を表すことができます。
よく使う条件式なのでしっかりと覚えましょう。

複数のデータを持つ配列ですが、1つの変数、定数として書き表すことができます。
一個の文字なのに中身は複数のデータをもっている、ということに最初は慣れないかもしれません。
そういうこともあるんだ、という気持ちで理解しておきましょう。

JavaScript Ⅲ

5個目のレッスンがJavaScript Ⅲです。
このレッスンの押さえておきたいポイントは次の通りです。

このレッスンでアロー関数が出てきますが、これは単に書き方の問題です。
『なぜこうなるのか？』ではなく『こういう書き方もあるんだ』と理解するようにしましょう。

最後にgetMax関数を作る、という演習がありますが、ここで詰まる人は多いと思います。
ノーヒントで作るのは難しいので10分考えてできそうになければヒントを見てみましょう。
ヒントを見てif,else ifの条件分岐を使うことに気付けばできるはずです。
頑張りましょう！

JavaScript Ⅵ

6個目のレッスンがJavaScript Ⅵです。
このあたりからやや複雑になってきます。
わからなければ紙に書いて流れを追うなどして、理解を進めましょう。
このレッスンの押さえておきたいポイントは次の通りです。

レッスンの都合かわかりませんが、メソッドの定義が抜けているのでここで解説します。
メソッドとは『オブジェクトに定義された関数』のことです。
なので、オブジェクト名.関数名(引数)で実行することができます。
こういうものをメソッドというんだな、くらいで理解をしておきましょう。

JavaScript Ⅶ

7個目のレッスンがJavaScript Ⅶです。
このレッスンの押さえておきたいポイントは次の通りです。

この章だけではコールバック関数の意味が分からないかもしれません。
まずは「こういう書き方もできるんだ」くらいの理解で進めましょう。

Node.js Ⅰ

8個目のレッスンがNode.js Ⅰです。
このレッスンの押さえておきたいポイントは次の通りです。

Node.js Iでは、

• HTML&CSSで学んだWebページの作り方
• JavaScriptで学んだ繰り返し処理、配列、オブジェクト、forEachメソッド

が出てきます。しっかりと理解した上で臨みましょう。

また、前半部分はほとんどが書き方のきまりの話になっています。
この部分は『こうやって書くんだなぁ』くらいの理解で十分なので、
あまり悩まないようにしましょう

SQL Ⅰ

9個目のレッスンがSQL Ⅰです。
このレッスンの押さえておきたいポイントは次の通りです。

このレッスンで学べる事はすべてデータの読み取り命令の書き方となっています。
書き方を素直に覚えていけば詰まることはないかと思います。

頑張りましょう！

SQL Ⅳ

10個目のレッスンがSQL Ⅳです。
このレッスンの押さえておきたいポイントは次の通りです。

このレッスンで学べる事はデータの追加、更新、削除命令の書き方となっています。
SQL Ⅰと同様、書き方を素直に覚えていくことが大事です。

次のNode.js Ⅱにて実践的に使っていきます。
しっかりと身につけて次へ臨みましょう

Node.js Ⅱ

11個目のレッスンがNode.js Ⅱです。
このレッスンの押さえておきたいポイントは次の通りです。

このレッスンからNode.js Ⅰで学んだことに加えてSQLの知識が必要となってきます。
クエリとはデータベースへの命令のことでした。
SQLのレッスンではわかりやすいように改行されて記載されていましたが、
このレッスンでは改行無しで使われていることに注意しましょう。

このレッスンではNode.js Ⅰの内容を何度も使います。
もしわからないことがあったら見返してみましよう。
きっと疑問を解決してくれるはずです。

Node.js Ⅲ

最後のレッスンがNode.js Ⅲです。
このレッスンの押さえておきたいポイントは次の通りです。

Node.js Ⅱと同様にクエリが『改行無し』で使われていることに注意しましょう。

SQLで学んだデータの削除、読み取り、更新の作業に加えて、Node.js Ⅱまでの知識が総動員されたレッスンとなっています。
わからない部分は前の章を復習して、理解しつつ進めるようにしましょう。

まとめ

本記事ではWeb開発パス(Node.js)を題材に各レッスンの抑えるべきポイントについて解説しました。

JavaScript Ⅵのあたりからややこしくなってくる印象です。
1回で理解できなくても、2回、3回と復習すれば理解できます。
ぜひ頑張ってください。

本記事が初学者の参考になれば幸いです。