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

プログラミング学習

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

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

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

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

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

  • HTML&CSS 初級編
  • HTML&CSS 中級編
  • JavaScript Ⅰ
  • JavaScript Ⅱ
  • JavaScript Ⅲ
  • JavaScript Ⅵ
  • JavaScript Ⅶ
  • Node.js Ⅰ
  • SQL Ⅰ
  • SQL Ⅳ
  • Node.js Ⅱ
  • Node.js Ⅲ

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

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

ポイント解説

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

HTML&CSS 初級編

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

  • Web ページがHTMLとCSSで作られていること
  • 「Tab」キーで入力補完できること

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

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

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

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

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

HTML&CSS 中級編

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

  • 『margin 0 auto』とすると、『margin 上下 左右』の指定ができること

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

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

JavaScript Ⅰ

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

  • HTML&CSSとは別物であること

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

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

JavaScript Ⅱ

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

  • 繰り返し処理を小さな繰り返し回数で実際にやってみること
  • 3で割って余りが0の数が3の倍数となること
  • 配列を定数、変数として扱うことができること

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

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

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

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

JavaScript Ⅲ

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

  • アロー関数は書き方であることを理解すること
  • getMax関数がわからなければヒントをみること

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

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

JavaScript Ⅵ

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

  • メソッドとはオブジェクトに定義された関数であること

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

JavaScript Ⅶ

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

  • 関数を引数に持つ関数があること
  • 引数の中で関数を定義できること

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

Node.js Ⅰ

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

  • 前半部分は『こうやって書くんだなぁ』くらいの理解でとどめておく
  • JavaScriptをhtmlに埋め込む部分が大事

Node.js Iでは、

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

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

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

SQL Ⅰ

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

  • データベースからのデータの読み取り方を学んでいること

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

頑張りましょう!

SQL Ⅳ

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

  • データベースへのデータの追加、更新、削除の方法を学んでいること

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

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

Node.js Ⅱ

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

  • SQLで学んだクエリが『改行無しで』使われていること
  • わからなかったらNode.js Ⅰを見返すこと

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

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

Node.js Ⅲ

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

  • SQLで学んだクエリが『改行無しで』使われていること
  • データの削除、読み取り、更新の作業をしていることを意識すること

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

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

まとめ

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

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

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

コメント