JavaScriptを基礎から学び直して2日目。

とうとう、クラスやインスタンス生成まで進んできて、訳がわからなくなってきたので、メモ書きでポイントを残していきたいと思います。

ちなみに、なぜ、事務職ワーママにJavaScriptが必要なのか、どうやって勉強しているのかについては、こちらの記事でまとめています。

javaScript(ES6)のまとめ

1. コメント
2. 文字列
3. 変数・定数
4. テンプレートリテラル
5. 比較演算子
6. swich文
7. 関数
8. クラスとインスタンス
9. クラスの継承
10. pushメソッド
11. findメソッド
12. mapメソッド

コメント

コメントの書き方は、「//」

// console.log("Hello World");

文字列

文字列を囲むのは、シングルクォーテーションでもダブルクォーテーションでも、どちらでもOK。

変数・定数

変数の宣言は「let」、定数の宣言は「const」。

//変数nameを宣言して、初期値「Kimoba」を代入
let name = "Kimoba";

//定数ageを35歳で宣言（永遠に35でいたい）
const age = 35;

テンプレートリテラル

変数や定数も使って文字列を連結するには、テンプレートリテラルが便利。
テンプレートリテラルは、バッククォート「‘」で囲み、変数や定数は「${}」で囲む。

let name = "Kimoba";
const age = 35;

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

比較演算子

JavaScriptの比較演算子は3つ続ける。

//aとbが等しいなら
if(a === b){}

//aとbが異なるなら
if(a !== b){}

switch文

switch(name){
case "きむおば":
    console.log(`${name}さん、おかえりなさい`);
    break;
case "山田裕貴":
    console.log(`${name}様、大ファンです！`);
    break;
default:
    console.log(`${name}さん、いらっしゃいませ`);
    break;
}

関数

関数の書き方は2種類ある。

const Staff = function(){

    return true;
}

省略した書き方（アロー関数）。

const Staff = ()=> {

    return true;
}

クラスとインスタンス

class Blogger{
    //コンストラクタはインスタンスが生成された直後に実行される
    constructor(name, age){
        //「this.プロパティ名=値」で、インスタンスにプロパティと値を追加できる
        this.name = name;
        this.age = age;
    }

　　write(){
        console.log(`${this.name}、ブログ書け！`);

    }
}
export default Blogger;

//Bloggerインスタンスを生成
const blogger = new Blogger("きむおば", 35);

//メソッドの呼び出し
blogger.write();

クラスの継承

//Bloggerクラスのインポート
import Blogger from "./blogger";

//Blogger親クラスから子クラスAffiliatorを生成
class Affiliator extends Blogger{
    constructor(name, age, category){
      super(name, age);
      //子クラス独自のプロパティを追加
      this.category = category;
    }
}
//Affiliatorクラスをエクスポート
export default Affiliator;

pushメソッド

const bloggers = ["ヒトデ", "ひつじ", "イケハヤ"];
//配列の要素を追加
bloggers.push("クロネ");

//配列の中身を１つずつ取り出し
bloggers.forEach(blogger => {
    console.log(blogger);
});

findメソッド

const bloggers =[
 {id:1, name:"ヒトデ"},
 {id:2, name:"ひつじ"},
 {id:3, name:"イケハヤ"},
 {id:4, name:"クロネ"},
];

const foundBlogger = bloggers.find((id) => {
    return id === 2;
}); 

console.log(foundBlogger);

mapメソッド

mapメソッドとは、配列内のすべての要素に処理をし、配列を返すメソッド。

const bloggers =[
 {id:1, name:"ヒトデ", },
 {id:2, name:"ひつじ", },
 {id:3, name:"イケハヤ", },
 {id:4, name:"クロネ", },
];

const bloggerName = bloggers.map((bologger) => {
    return bologger.id + bologger.name;
});

console.log(bloggerName);

これからも、学習メモとして書き足していきます。