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

2018.07.02

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

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

Contents

1 JavaScriptⅠ (学習コース)
2 JavaScriptⅡ (学習コース)
3 JavavScriptⅢ
4 JavaScriptの基本的な使い方
- 4.1 コンソール上に文字を出力する
- 4.2 if文
5 switch文
- 5.1 while文
- 5.2 for文
6 その他

JavaScriptⅠ (学習コース)

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

JavaScriptⅡ (学習コース)

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

JavavScriptⅢ

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

JavaScriptの基本的な使い方

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

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

console.log("この中をコンソールに出力するよ") ;

1	console.log("この中をコンソールに出力するよ") ;

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

console.log(5 + 3);

1	console.log(5 + 3);

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

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

// 文字列の連携と認識され、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));

// 文字列の連携と認識され、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文

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

// 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以下");
}

// 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文

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

//   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;
}

// 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文と同じで条件に該当する限り、繰り返し処理を行う。

// while (条件式) {
//   <処理>
// }

let num = 1;
while (num <= 100) {
  console.log(number);
  num = num + 1;
}

// while (条件式) {

// <処理>

// }

let num = 1;

while (num <= 100) {

console.log(number);

num = num + 1;

}

for文

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

// for (<変数の定義>; <条件式>; 変数の更新) {
//    <処理>
// }

for (let number = 1; number <= 100; number ++) {
  console.log(number);
}

// for (<変数の定義>; <条件式>; 変数の更新) {

// <処理>

// }

for (let number = 1; number <= 100; number ++) {

console.log(number);

}

その他

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

// コメントはスラッシュ２つ

1	// コメントはスラッシュ２つ

変数

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

// let <変数名> = <値>;

// 数値の場合
let age = 31;

// 文字列の場合
let name="Yosuke";

// 変数を使用する
console.log(name + "の年齢は" + age + "歳です。");

// let <変数名> = <値>;

// 数値の場合

let age = 31;

// 文字列の場合

let name="Yosuke";

// 変数を使用する

console.log(name + "の年齢は" + age + "歳です。");

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

定数

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

テンプレートリテラル

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

let name = "Yosuke";
let age = 31;

//今までの記述方法
console.log(name + "は" + age + "歳です");

// テンプレートリテラルの書き方
console.log(`${name}は　${age}歳です`);

let name = "Yosuke";

let age = 31;

//今までの記述方法

console.log(name + "は" + age + "歳です");

// テンプレートリテラルの書き方

console.log(`${name}は　${age}歳です`);

配列

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

let numbers = [1,2,3];
let fruits = ["apple", "lemon", "orange"]

1 2	let numbers = [1,2,3]; let fruits = ["apple", "lemon", "orange"]

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

let fruits = ["apple", "lemon", "orange"]

// lemon が出力される。
console.log(fruits[1]);
 
// 要素すべてを処理するようなfor文を書くとこんな感じ
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

let fruits = ["apple", "lemon", "orange"]

// lemon が出力される。

console.log(fruits[1]);

// 要素すべてを処理するようなfor文を書くとこんな感じ

for (let i = 0; i < fruits.length; i++) {

console.log(fruits[i]);

}

オブジェクト

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

const fruit = {name:"レモン", price:140};

// 特定のプロパティの値だけ取得する
console.log(fruit.name);

// 配列の中にオブジェクトを入れることもできる
const fruits [
  {name: lemon, price:140},
  {name: apple, price: 120}
];

const fruit = {name:"レモン", price:140};

// 特定のプロパティの値だけ取得する

console.log(fruit.name);

// 配列の中にオブジェクトを入れることもできる

const fruits [

{name: lemon, price:140},

{name: apple, price: 120}

];

関数

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

// const 定数名 = function() {
//   <まとめたい処理>
// };

const hello = function() {
  console.log("こんにちは！");
};

hello();

// const 定数名 = function() {

// <まとめたい処理>

// };

const hello = function() {

console.log("こんにちは！");

};

hello();

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

// const 変数名 = ()=> {
//    <処理>
// }

const hello = () => {
  console.log("こんにちは！");
};

// const 変数名 = ()=> {

// <処理>

// }

const hello = () => {

console.log("こんにちは！");

};

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

const hello = (name) => {
  console.log(`こんにちは、${name}さん`);
};

hello("ヨウスケ");

const hello = (name) => {

console.log(`こんにちは、${name}さん`);

};

hello("ヨウスケ");

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

Let's share this article!

Do not live to eat!

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

JavaScriptⅠ (学習コース)

JavaScriptⅡ (学習コース)

JavavScriptⅢ

JavaScriptの基本的な使い方

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

if文

switch文

while文

for文

その他

コメント

変数

定数

テンプレートリテラル

配列

オブジェクト

関数

Related Articles

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

新しい WordPress テーマを考える

新しいWordPressテーマのイメージを書いてみる

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

HTML/CSSの勉強をProgateで勉強したことのまとめ

いざWordPressテーマ作成！の前の勉強や必要なスキルについて考えてみた