bigmac-jp blog

web開発関連のメモ

Javascript Prototype 

var Student = function(name, sex, school_year){
    this.name = name;
    this.sex = sex;
    this.school_year = school_year;

}

// メソッドは生成したインスタンスごとでも同じものになる。
// そのため複数のインスタンスで同じメソッドを生成してしまうと、重複したメソッドが生成されてメモリを圧迫する可能性がある。
// Prototypeでメソッドを定義すると、インスタンス生成時にメソッドは参照となり、生成はされない。= メモリも無駄に使われない。
Student.prototype.getName = function(){
    return this.name;
}


// ※アロー関数はthisが固定されるため使えない！！
Student.prototype.getSex = () =>{
    return this.sex;
}

var yamada = new Student('yamada', 'female', '3');

console.log(yamada.getName());　// yamada
console.log(yamada.getSex()); //  undefined



// まとめることもできる
Student.prototype  = {
    getName : function(){

    },

    getSex : function(){

    }
}

Javascript Module export import

別ファイルのJavascript関数を実行する場合
①HTML経由で別ファイルを読み込む方法

②Module化Javascriptファイルを読み込む方法

がある。（おおまかに）

①はHTMLに

<script src='./js/app.js'></script>
<script src='./js/hoge.js'></script>

と記述してhoge.jsからapp.jsの関数を実行する。
デメリットは、scriptタグの記述順番を意識しないといけない。複数ファイルで、同じ名前の関数が存在してしまう場合、意図しない関数が呼ばれる可能性がある。

②のModule化した場合は①のデメリットはなくなる。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="module" src="./js/sample01.js"></script>
    <script type="module" src="./js/sample02.js"></script>
    <title>Document</title>
</head>
<body>
TEST
</body>
</html>

// 変数宣言にexportを付けることが可能
export const hogeCount = 99;
export var hogeMaruCount = 1;
export let hogeBatsuCount = 2;


// export{} で既に宣言されている変数をexportすることが可能
const yakiniku = 'umai';
const yakisoba = 'tanoshii'

export {
    yakiniku,
    // asで名前の変更も可能
    yakisoba as shioyakisaba
}


// 関数もexportするこが可能
export function getHogeData(){
    console.log('hoge');
}


// クラスもexportすることが可能
export class YakinikuClass{
    constructor(){
        console.log('tabehoudai');
    }
}

// import{}の中にexportされている変数、関数を指定してimportする方法
import { getHogeData, hogeCount, yakiniku} from "./sample01.js";

// * as でexportされているものをすべてimportする方法
import * as Hoge from "./sample01.js";

// Hoge.で呼び出し可能
Hoge.getHogeData();

var gogogo = () =>{
    console.log(Hoge.hogeCount);
    console.log(Hoge.yakiniku);
}

JavaScript 名前空間

名前空間を設定することで、グローバル変数を減らして、名前の衝突を防ぐことができる。

// 名前空間を設定
var MYAPP = MYAPP || {};
var SUBAPP = SUBAPP || {};

MYAPP.getData  = () => {
    console.log("MYAPP_getData")
}

SUBAPP.getData  = () => {
    console.log("SUBAPP_getData")
}

// 名前空間で階層構造を設定
var HOGE = {
    OPTIONS:{
        getData : function(){
            console.log("--HOGE_OPTIONS_getData--")
        }
    },
    OTHERS:{
        getData : function(){
            console.log("--HOGE_OTHERS_getData--")
        }
    }
}

HOGE.OPTIONS.getData();
HOGE.OTHERS.getData();

Git　修正中のプログラムを別ブランチでコミットする方法 

git status

git statusで履歴を確認

git stash

git stashで修正中のプログラムを退避する

git checkout -b hoge

git checkout でブランチを作成する

git stash apply

git stash apply で退避したプログラムを戻す。
これでコミットしとけばOK。

JavaScript アロー関数

アロー関数はES6から導入された。
従来の無名化数や匿名関数よりもシンプルなコードを書くことができる。

// 無名関数
let getHoge = function(id){
    console.log(id);
}

// アロー関数
let getHoge = (id) =>{
    console.log(id);
}

// アロー関数　中括弧の省略も可能
let getHoge = (id) => console.log(id);

アロー関数はただのシンタックスシュガーではなくて、thisを束縛する。
アロー関数が宣言された時点でthisは決定して、それ以降に呼び出し元オブジェクトによって変更されない。

JavaScript XMLHttpRequest メモ

XMLHttpRequest
JavaScript標準機能でhttp通信をおこなうことができる。
XMLHttpRequest - Web API | MDN

XMLHttpRequestの代わりとしてFetch APIが実装されているので、XMLHttpRequestを使う必要はない。
jQueryのAjaxはXMLHttpRequestをベースに実装されている。

XMLHttpRequestは非同期と同期モードがある。
openメソッドの第三引数がtrueの場合は非同期モード、falseの場合は同期モードとなる。
非同期モード

var request = new XMLHttpRequest();
var URL = 'http://localhost:3000/api/v1/list';
request.open('GET', URL, true);
request.onload = function(){

    if(request.status == 200){
        var data = this.response;
        console.log(data);
    }

}