Do not live to eat!

JavaScriptをProgateで勉強したことのまとめ

こちらにまとめたHTML/CSSに続き、ProgateでJavaScriptを勉強してきました。
JavaScriptも以前にドットインストールで一通りのレッスンはやったのですが、ほとんど何も覚えていない。。。
そんな難しくなかったよなーとかうっすら覚えてるくらいの状態からのスタートで、だいたい4時間かかりました。
コースは古いバージョンのES5と新しいバージョンのES6用に分かれているんですが、僕はそもそもどっちをやっておくべきなのかわからなかったので、ProgateオススメのES6をやることにしました。

一通りやり終えての感想としては、このコースだけでは何かを作れる気がしないといった感じです。
コンテンツが悪いとかそういう意味ではなくて、内容が基礎に徹しているので、HTML/CSSのようにもう一歩実践寄りの内容が欲しいなと。
もしかしたら、この後のjQueryにそんな内容が盛り込まれているかもしれないので、期待しましょう。
以下、JavaScript編のまとめです。

JavaScriptⅠ (学習コース)

これは2Hのコースで、ブログにまとめながらでだいたい1.5時間かかりました。
まとめなければ、1時間くらいですかね。
変数や定数などの基本的な話しから、if文とswitch文辺りまでの内容。

JavaScriptⅡ (学習コース)

2Hのコースで、こちらもブログまとめながら、お菓子食べながらで、1.5時間くらいでした。
for文、while文などの紹介と、配列、オブジェクトの説明があり、これらを組み合わせた演習付きでした。
JavaScriptというよりは、プログラミングの基礎っぽい雰囲気です。

JavavScriptⅢ

これも2Hのコースで、1時間くらいかな。
関数の定義方法とか使い方がメインで、やっぱりプログラミングの基礎という感じ。
ⅠからⅢまでやってみたけど、ブロクでJavaScript使うには、もう少し実践向けの何かが必要そう。
JavaScriptⅣが間もなく用意されるみたいなので、もしリリースされたらやってみようと思う。

JavaScriptの基本的な使い方

コンソール上に文字を出力する

コンソール上に文字を出力するにはconsole.log()を使う


計算もできる。(紹介されていたのは、+ , - , * , / , % )

数値として扱われるか、文字列として扱われるのかは、””(ダブルクォーテーション)でくくるかどうか次第。

組み合わせ方によって、表示される内容はこんな風に違う。

if文

条件によって分岐する処理を書きたい時に使う。
構文は以下のとおり。

比較演算子は以下。

  • xはy以上 : x >= y
  • xはyより大きい : x > y
  • xはy以下 : x <= y
  • xはyより小さい : x < y
  • xはyと等しい : x === y
  • xはyと等しくない : x !== y

複数条件で使うのは、
And条件は &&
Or条件は ||

switch文

これも特定の条件のときの処理を記述する。
構文は以下のとおり。

while文

繰り返し処理を行う時に使う。
条件式はif文と同じで条件に該当する限り、繰り返し処理を行う。

for文

これも繰り返し処理で使う。

その他

コメント

JavaScriptのコメントはこんな感じ。

変数

書式は以下。変数を呼び出すときは特に何も付けずに変数名だけ指定すれば良い。


変数名の命名ルールの基本は英語を使うことと、2語以上にする場合は2語目の最初を大文字にする。
日本語とかローマ字表記の変数名はあんまりよくないらしい。
数字スタートはだめ。

定数

定数は “let” ではなくて “const” を使って定義する。

テンプレートリテラル

ES6から使えるようになったよう。
変数と文字列を組み合わせて使用するときの記述方法。
全体をくくるのは、シングルクォートではなく、バッククォートなことに注意。僕はハマった。

配列

複数の値をまとめて管理する時に使う。
定数(変数)名は複数形を使うことが一般的だそう。

要素は、左から順番に 0 , 1 , 2 というインデックス番号が付与されているので、以下のように指定すれば、その番号に該当する要素だけが出力される。

オブジェクト

配列は値(要素)のみだったが、オブジェクトはプロパティ名とその値として保持する。

関数

関数自体は複数の処理をまとめたもの。
JavaScriptでは以下のように定義して、使用する。

ES6からアロー関数というのも使えるようになっている。
動きは普通の関数と同じで、記述方法が少し違うだけ。

引数を使う場合はこんな感じ。


他には、returnで戻り値を返すとか、そのあたりをやったくらいかな。
次はjQueryを受講します。

Let's share this article!