きむおばプロフィール画像

きむおばです。関東在住の40代の主婦です。 契約社員・派遣・フリーランスの3足のわらじ中。フリーランスでは、ファイナンシャルプランナーとしてライターやセミナー講師をしたり、サイト制作やプログラムを作ったりしています。
お金・子育て・趣味のこと…何でも気ままに書く雑記ブログです。
目標は、ライター・サイト制作・広告他の収入バランスを整えること。ブログ収入UPに今年も力を入れます。

Menu
主婦の働き方・稼ぎ方 

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

Progate JavaScriptレッスン1画面

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

クラスとインスタンス

  • クラス名は大文字から始める
  • クラスから生成したオブジェクトをインスタンスと呼ぶ
  • コンストラクタはインスタンスが生成された直後に実行される処理
  • インスタンスにプロパティと値を追加するには「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("クロネ");

//配列の中身を1つずつ取り出し
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);

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

Progate JavaScriptレッスン1画面
Twitterで最新情報をお知らせ
記事がお役に立てたらシェアお願いします♪