JavaScriptをProgateで勉強したことのまとめ
こちらにまとめたHTML/CSSに続き、ProgateでJavaScriptを勉強してきました。
JavaScriptも以前にドットインストールで一通りのレッスンはやったのですが、ほとんど何も覚えていない。。。
そんな難しくなかったよなーとかうっすら覚えてるくらいの状態からのスタートで、だいたい4時間かかりました。
コースは古いバージョンのES5と新しいバージョンのES6用に分かれているんですが、僕はそもそもどっちをやっておくべきなのかわからなかったので、ProgateオススメのES6をやることにしました。
一通りやり終えての感想としては、このコースだけでは何かを作れる気がしないといった感じです。
コンテンツが悪いとかそういう意味ではなくて、内容が基礎に徹しているので、HTML/CSSのようにもう一歩実践寄りの内容が欲しいなと。
もしかしたら、この後のjQueryにそんな内容が盛り込まれているかもしれないので、期待しましょう。
以下、JavaScript編のまとめです。
Contents
JavaScriptⅠ (学習コース)
これは2Hのコースで、ブログにまとめながらでだいたい1.5時間かかりました。
まとめなければ、1時間くらいですかね。
変数や定数などの基本的な話しから、if文とswitch文辺りまでの内容。
JavaScriptⅡ (学習コース)
2Hのコースで、こちらもブログまとめながら、お菓子食べながらで、1.5時間くらいでした。
for文、while文などの紹介と、配列、オブジェクトの説明があり、これらを組み合わせた演習付きでした。
JavaScriptというよりは、プログラミングの基礎っぽい雰囲気です。
JavavScriptⅢ
これも2Hのコースで、1時間くらいかな。
関数の定義方法とか使い方がメインで、やっぱりプログラミングの基礎という感じ。
ⅠからⅢまでやってみたけど、ブロクでJavaScript使うには、もう少し実践向けの何かが必要そう。
JavaScriptⅣが間もなく用意されるみたいなので、もしリリースされたらやってみようと思う。
JavaScriptの基本的な使い方
コンソール上に文字を出力する
コンソール上に文字を出力するにはconsole.log()を使う
1 |
console.log("この中をコンソールに出力するよ") ; |
計算もできる。(紹介されていたのは、+ , - , * , / , % )
1 |
console.log(5 + 3); |
数値として扱われるか、文字列として扱われるのかは、””(ダブルクォーテーション)でくくるかどうか次第。
組み合わせ方によって、表示される内容はこんな風に違う。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 文字列の連携と認識され、38と表示されるパターン console.log("3" + "8"); // 数式と認識され、11と表示されるパターン console.log(3 + 8); // 文字列の連結と認識され、383と表示されるパターン console.log("3" + 8 + 3); // 計算して連結され、113と表示されるパターン console.log(3 + 8 + "3") // 計算をさせたければ、かっこでくくればいい (この場合311と表示される) console.log("3" + (8 + 3)); |
if文
条件によって分岐する処理を書きたい時に使う。
構文は以下のとおり。
1 2 3 4 5 6 7 8 9 10 11 12 |
// if (条件式) { // <実行したい処理> // } let num = 8; if (num > 5) { console.log("numは5より大きい"); } else if (num > 3) { console.log("numは3より大きいけど、5以下"); } else { console.log("numは3以下"); } |
比較演算子は以下。
- 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文
これも特定の条件のときの処理を記述する。
構文は以下のとおり。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// case "<条件>" : // <条件に合致したときの処理> // break; // default : // <どの条件にも合致しなかったときの処理> // break; // } let num = 5; switch (num) { case 5 : console.log("numは5だよ"); break; case 3 : console.log("numは3だよ"); break; default : console.log("numは5でも3でもないよ"); break; } |
while文
繰り返し処理を行う時に使う。
条件式はif文と同じで条件に該当する限り、繰り返し処理を行う。
1 2 3 4 5 6 7 8 9 |
// while (条件式) { // <処理> // } let num = 1; while (num <= 100) { console.log(number); num = num + 1; } |
for文
これも繰り返し処理で使う。
1 2 3 4 5 6 7 |
// for (<変数の定義>; <条件式>; 変数の更新) { // <処理> // } for (let number = 1; number <= 100; number ++) { console.log(number); } |
その他
コメント
JavaScriptのコメントはこんな感じ。
1 |
// コメントはスラッシュ2つ |
変数
書式は以下。変数を呼び出すときは特に何も付けずに変数名だけ指定すれば良い。
1 2 3 4 5 6 7 8 9 10 |
// let <変数名> = <値>; // 数値の場合 let age = 31; // 文字列の場合 let name="Yosuke"; // 変数を使用する console.log(name + "の年齢は" + age + "歳です。"); |
変数名の命名ルールの基本は英語を使うことと、2語以上にする場合は2語目の最初を大文字にする。
日本語とかローマ字表記の変数名はあんまりよくないらしい。
数字スタートはだめ。
定数
定数は “let” ではなくて “const” を使って定義する。
テンプレートリテラル
ES6から使えるようになったよう。
変数と文字列を組み合わせて使用するときの記述方法。
全体をくくるのは、シングルクォートではなく、バッククォートなことに注意。僕はハマった。
1 2 3 4 5 6 7 8 |
let name = "Yosuke"; let age = 31; //今までの記述方法 console.log(name + "は" + age + "歳です"); // テンプレートリテラルの書き方 console.log(`${name}は ${age}歳です`); |
配列
複数の値をまとめて管理する時に使う。
定数(変数)名は複数形を使うことが一般的だそう。
1 2 |
let numbers = [1,2,3]; let fruits = ["apple", "lemon", "orange"] |
要素は、左から順番に 0 , 1 , 2 というインデックス番号が付与されているので、以下のように指定すれば、その番号に該当する要素だけが出力される。
1 2 3 4 5 6 7 8 9 |
let fruits = ["apple", "lemon", "orange"] // lemon が出力される。 console.log(fruits[1]); // 要素すべてを処理するようなfor文を書くとこんな感じ for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } |
オブジェクト
配列は値(要素)のみだったが、オブジェクトはプロパティ名とその値として保持する。
1 2 3 4 5 6 7 8 9 10 |
const fruit = {name:"レモン", price:140}; // 特定のプロパティの値だけ取得する console.log(fruit.name); // 配列の中にオブジェクトを入れることもできる const fruits [ {name: lemon, price:140}, {name: apple, price: 120} ]; |
関数
関数自体は複数の処理をまとめたもの。
JavaScriptでは以下のように定義して、使用する。
1 2 3 4 5 6 7 8 9 |
// const 定数名 = function() { // <まとめたい処理> // }; const hello = function() { console.log("こんにちは!"); }; hello(); |
ES6からアロー関数というのも使えるようになっている。
動きは普通の関数と同じで、記述方法が少し違うだけ。
1 2 3 4 5 6 7 |
// const 変数名 = ()=> { // <処理> // } const hello = () => { console.log("こんにちは!"); }; |
引数を使う場合はこんな感じ。
1 2 3 4 5 |
const hello = (name) => { console.log(`こんにちは、${name}さん`); }; hello("ヨウスケ"); |
他には、returnで戻り値を返すとか、そのあたりをやったくらいかな。
次はjQueryを受講します。