この記事
ほぼ初めてJavaScriptを学習したので、その記録を残します。
コメントアウト
// console.log("hello java");
console.log("hello javascript");
※下だけ実行される
計算
他の言語同様に算術演算子が使用できる
console.log(12/3);
console.log(12%3);
↓
4
0
文字列と数値
文字列はシングルクォーテーション、ダブルクォーテーションで囲んで使用
合わせて中で使うのはダメ
console.log(12+3);
console.log('12+3');
console.log('12' + '3');
↓
15
12+3
123
文字列→数値へ変換など(16進数)
parseInt('aa', 16));
↓
170
変数
// 定義
let name = 'U.S.';
console.log('出身：' + name);
↓
出身：U.S.
letでの定義なら更新できる
name = 'California';
console.log('出身：' + name);
↓
出身：California
数値の更新方法
i = 30;
i = i + 5;
i += 5
console.log(i);
↓
40
定数
※更新はできない
const TIME_ZONE = 'Asia/Tokyo';
console.log(TIME_ZONE);
TIME_ZONE = 'JST';
console.log(TIME_ZONE);
↓
Asia/Tokyo
TIME_ZONE = 'JST';
^
TypeError...(Error文
テンプレートリテラル
ES6(2015)で使えるようになった構文
埋め込みが可能（バッククォートであることに注意）
const job = 'エンジニア';
console.log(`仕事は${job}です`);
↓
仕事はエンジニアです
真偽値
こちらもtrue/falseのBoolean型を使える
if文で判定後の中身はこの値が入っている
// Penguinであれば挨拶
if(LoginName === "Penguin"){
console.log("ペンギンさんこんにちは");
}
if(LoginName !== "Penguin"){
console.log('どなたでしょうか…？');
}
もちろんelseも使える
Switch
const score = 2;
// scoreに値によって文を返す
switch (score) {
case 1:
console.log("残念賞");
break;
case 2:
console.log("参加賞");
break;
case 3:
console.log("優秀賞！");
break;
default:
console.log("No Award");
break;
}
↓
// scoreが2だと
参加賞
繰り返し処理
for文の中の記載方法はいくつかある
// 1から30まで加えて出力もする
for(let number = 1 ; number <= 100 ; number +=){
console.log(number);
}
for(let number = 1 ; number <= 100 ; number ++){
console.log(number);
}
両方とも同じ処理
配列
const food = ["apple", "banana", "grape", "cherry"];
// 配列の要素数を用いて、全て展開
for (let i = 0; i < food.length; i++) {
console.log(animals[i]);
}
↓
apple
banana
grape
cherry
オブジェクトと配列
配列はデータ型によらず様々なデータを格納できる
オブジェクトはプロパティとメソッドを使えるため、２つペアで格納できる
const FruitsBox = [
{name: "Apple", num: 100},
{name: "Banana", num: 15},
{name: "Grape", num: 20},
];
for (let i=0; i<FruitsBox.length ; i++) {
const fruits = FruitsBox[i];
console.log(`${fruits.name}は、残り${fruits.num} 個です`);
}
↓
Appleは、残り100個です
Bananaは、残り15個です
Grapeは、残り20個です
for文を使った配列展開
const profile = {
name: "shinon",
Experience: {
AWS: "３年",
Python: "半年",
},
Services: ["S3", "EC2", "CloudWatch", "Systems Manager"]
};
console.log(`名前: ${profile.name}`);
console.log(`AWS業務は${profile.Experience.AWS}、Pythonは${profile.Experience.Python}`);
console.log("好きなAWSサービス");
for(let i=0;i<profile.Services.length;i++){
console.log(profile.Services[i]);
}
↓
名前: shinon
AWS業務は３年、Pythonは半年
好きなAWSサービス
S3
EC2
CloudWatch
Systems Manager
関数と引数、アロー関数
const fruits = (fav) => {
console.log(`好きな果物は、${fav}です。`);
};
fruits("りんご");
↓
好きな果物は、りんごです。
戻り値
const check = (num) => {
return num%13 === 0;
};
// ※if ( check(117) === true )でなくて良い
if ( check(117) ) {
console.log("13の倍数です");
} else {
console.log("13の倍数ではありません");
}
↓
13の倍数です
スコープ
if,whileなど{}を使った中での定数定義内容は、外では使用できない
クラス
設計書として使用出来る
オブジェクトを使用したテンプレート
class Self {
// constructorは必ず書く
constructor(name, year) {
this.name = name;
this.year = year;
}
// メソッド
hello() {
console.log("はじめまして");
}
// メソッド内でメソッドを呼び出せる
myself() {
this.hello();
console.log(`${this.name}です`);
console.log(`インフラは${this.year}年目です`);
}
}
// コンストラクタに引数を渡す
const intro = new Self("shinon", 4);
intro.myself();
↓
はじめまして
shinonです
インフラは4年目です
継承
親クラスから子クラスにメソッドは継承されるため、
再度定義しなくても使用できる
また、同メソッドを定義すると子クラスが優先される（オーバーライド）
コンストラクタも同様だが、その場合はsuper()が必要
親クラスの引数を使用する場合は、super()内に記載すれば可能
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}
hello() {
console.log("こんにちは");
}
myself() {
this.hello();
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);
}
}
// 継承
class Cat extends Animal {
// オーバーライド
myself(){
this.hello();
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);
const humanAge = this.getHumanAge();
console.log(`人間年齢で${humanAge}歳です`);
}
getHumanAge() {
return this.age * 7;
}
}
const cat = new Cat("銀", 3);
cat.myself();
↓
こんにちは
名前は銀です
3歳です
人間年齢で21歳です
感想
まずは動かしてみて、どんな要素があるのかを少しだけ知れました。
ここからさらに使っていく過程で理解していきたいです。
使用したツール/ドキュメント
・Progate
https://prog-8.com/
・MDN web docs - JavaScriptリファレンス
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference