40代事務職主婦のJavaScript備忘録～Google Apps Scriptで仕事効率化を目指す～

2019/7/12(金) 2019/7/17(水) きむおば

このブログではアフィリエイト・アドセンス広告を利用しています

当ブログでは、アドセンス・アフィリエイト広告を掲載しています。
消費者庁が発表しているルールに沿って記事を作成していますが、問題のある表現を見つけた際にはご連絡ください。

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

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

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

目次（読みたいところへジャンプ！）

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

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

クラスとインスタンス

クラス名は大文字から始める
クラスから生成したオブジェクトをインスタンスと呼ぶ
コンストラクタはインスタンスが生成された直後に実行される処理
インスタンスにプロパティと値を追加するには「this.」
インスタンスに処理をまとめてさせたいならメソッドを使う
メソッド内でインスタンスの値を使うには「this.プロパティ名」
クラス内の別メソッドを呼び出すには「this.メソッド名()」

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();

クラスの継承

継承とは、すでにあるクラスを元に新しくクラスを生成すること
子クラスのメソッドが親クラスのメソッドより優先される（オーバーライド）
コンストラクタをオーバーライドするには、1行目に「super();」が必要
別ファイルで使用するにはエクスポート「export default クラス名など;」
別ファイルを参照するにはインポート「import クラス名など from “./ファイル名（拡張子省略可）”」

//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メソッド

pushメソッドとは、配列の最後に新しい要素を追加するメソッド
配列名.forEach()で要素を1つずつ取り出し

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

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

findメソッド

findメソッドをコールバック関数で使うと条件に合う最初の要素がリターンされる
filterメソッドをコールバック関数で使うと条件に合う全ての要素がリターンされる

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);

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

主婦の働き方