【Progate】プログラミング学習HTML&CSSの次【JavaScript編の感想】

 

こんにちは、やまぴー(@Astro8754)です。

 

「俺のプログラミング(おれぷろ)」はプログラミング学習の備忘録です。

 

第3回目の今回は、ProgateでJavaScript (ES6)を初学した様子を書いていきます。第1回と第2回はHTMLやCSSの学習だったので、ここからはいよいよプログラミング学習といった感じです。

 

 



 

JavaScript学習前の状況(初心者です)

 

ProgateでJavaScriptを学習する前は、ProgateでHTML / CSSを全2周と、【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)でHTML / CSS編を受講済でした。

 

ですので、HTML / CSSについては基本を抑えていますが、それ以外の言語については完全初心者といった感じです。

 

ちなみに大学は機械科だったのですが、2留するほど劣等生でしたので、もはや授業でどの言語を扱ったかも知りません。いろいろ、ごめんなさい。

 

Progate (Javascript) のコース内容について

 

全6レッスン+2記事で構成されています。

 

完全初心者向けのサービスなので、基本文法から学び始め、レッスン6ではメソッドを使った新しい配列の作成まで学べます。また、2記事では環境構築とパッケージの使い方が解説されています。

 

時間の目安は、レッスン番号順に

 

2h + 2h + 2h + 3h + 2h + 1h = 「12時間」

 

ということです。僕はHTML / CSSのとき同様に、1周目はメモをとりながら丁寧に、2周目はサクサクと学習しようと思っていたので、12時間かそれ以上かかったかもしれません。

 



 

Progate (JavaScript) を学習した感想

 

暗記はほぼできていませんが、JavaScriptの文法や様々な処理について、調べれば自分で理解できるようにはなりました。

 

ただ、正直に書くと、JavaScriptが身につくペースは遅かったと思います。反省として理由を考えてみたのですが、大きく分けて2つあるかなと思います。

 

反省1、JavaScriptを学習/習得する目的

 

大きな反省点として、僕の場合はJavaScriptを学習する目的がはっきりしていませんでした。

 

実際、「なんかよさそう」とか「なんとなく」とか、そういう感じでした。確かに、「なんか(いろいろ使えそうで)よさそう」なのですが、何に使えそうなのかを少しは考えるべきでした。

 

手順として後手になってしまいましたが、もう1周学習するかどうかも含めて、JSを勉強する理由を考えたいと思います。

 

反省2、JavaScriptの実装イメージ

 

こちらも反省なのですが、JSが実装されるイメージが持てなかったためにモチベーションが上がりにくかったです。

 

学習の目的にも通ずる部分で、JSを使うと何ができて何が便利になるのか、事前インプットが不足していました。知っているかどうか、知識ベースで十分だったとさえ思います。

 



 

JavaScriptのつまずきとおすすめ学習法

 

つまずきポイントだらけなのは否めませんが、特にウザいな気をつけたいなと思ったのは” ; ”(セミコロン)でした。

 

 

基本的に文末には” ; ”が必要なのですが、見やすく改行したりすると上記のように” ; ”を忘れてしまいます。4行目、正しくは” }; ”です。

 

さらに追い打ちをかけるように、if / switch / while / for文ではセミコロンは不要。ググってみると、式ではなくブロックだからだとか。それに、” ; ”があっても動作するだとか。ウザいです。

 


 

気を取り直して、良かった学習法を紹介したいと思います!

 

それは、独り言をブツブツ言いながらコードを入力するという方法です。以下のコードをご覧ください。

 

 

アロー関数内に記述した条件式に合う1つ目の要素を配列の中から取り出す、「findメソッド」を使っています。上記をコンソールすると、「5」が出力されます。

 

ちょっと気持ち悪いかもしれませんが、このようにコードをブツブツと独り言を呟きながら入力すると、定着が早かったです(実際には口パクです)。

 

独り言はこんな感じ↓

 

「numbersの配列、要素は1, 3, 5, 7。」

 

「foundNumberを定数にして。findメソッドを使って、numberっていう引数の中に、3以上の要素をnumbersの中から見つけてきてreturnする。それが定数foundNumberと。」

 

「最後にfoundNumberをコンソール。どうやろ、あってるかな?」

 

原文ママのリアル独り言を書いてみました。ちょっと恥ずかしいですね。

 

ただ、Progateだとどうしても「スライドを見てから実際にコードを書く」の繰り返しで、特に難しい内容だと理解が追いつかないことがありました。

 

よくある勉強法として、「人に教えることで定着する」というものがありますよね。これを自分に向けて疑似的に実行するイメージです。

 



 

Progate (Javascript) のコース学習(まとめ)

 

いかがでしたでしょうか?

 

第2回に引き続き、今回はProgateでJavaScriptを一通り学習した感想を記事にしました。

 

難易度はHTML / CSSより上がっていますし、イメージもしにくいです。1周では到底マスターできないので、JSを身に付けたい場合は繰り返し学習が必要だと思います。

 

Progateは記事内のProgateの文字、もしくは以下の画像にリンクを貼っています。ちなみに、アクセスしても月額会員になっても、僕には1円も入りません。

 

Progate 「Progate」トップページより画像引用 

 

前回の「俺のプログラミング(おれぷろ)」の過去回についてもリンクを貼っておきます。

 

(まだ3回目ですが、回が重なったら前回分と初回分のリンクのみにします。また、次回記事についても更新し次第、以下のようにリンクを貼っていきます!)

 

 

今後も、なるべく学習記録を残していきたいと思います!

 

 

やまぴー
Have fun!