カテゴリー
JavaScript

JavaScriptのモジュール export default

JavaScriptのスクリプトファイル(.js)の読み込み方法

<script src="script.js">

モジュール

上記の方法は、あらかじめ読み込むファイルがわかっている必要がある。

わからない場合、動的に読み込む必要がある。

モジュールで読み込むことができる

export モジュール名;

「モジュール名」は、関数だったりオブジェクトだったりする。

exportに指定したものが、「モジュール」として外部から利用できるようになる。

例)

script.jsにモジュール MyObjを定義

export function MyObj() {
    return {
        red:255, green:125, blue:0,
        total:function(){
            return this.red + this.green + this.blue;
        }
    };
};

HTMLファイルで、モジュール MyObjを読み込む

<html><body>
<script type="module">
import {MyObj} from './script.js';

var ob = new MyObj();
document.getElementById("ob").textContent = ob.total();

</script>
<div id="ob"></div>
</body></html>

export default

上記の方法だと、script.jsにMyObjという名前で関数やオブジェクトが定義されていることがわかっている必要がある。

この問題を解決するのが、export default

名前は読み込んだ側で適当につけるという利用方法

exportする際に、関数やオブジェクト名を指定せず、「default」を指定する。

例)

上記をexport defaultに書き直し

script.jsにexport defaultを定義

export deault function () {
    return {
        red:255, green:125, blue:0,
        total:function(){
            return this.red + this.green + this.blue;
        }
    };
};

HTMLファイルで、モジュール myobjと名前をつけてを読み込む

<html><body>
<script type="module">
import myobj from './script.js';

document.getElementById("ob").textContent = ob.total();

</script>
<div id="ob"></div>
</body></html>

参考文献:

Vue.js&Nuxt.js 超入門 Kindle版

Vue.js&Nuxt.js 超入門

カテゴリー
JavaScript

JavaScriptのオブジェクトとクラス

オブジェクト

HTMLのscriptタグにJavaScriptを記述する

obがオブジェクト

オブジェクトはプロパティを持つことができる

<html>
  <body>
	<script>
	let ob = {red:255, green:125, blue:0};
	document.write(ob.red + ob.green + ob.blue);
	</script>
  </body>
</html>

オブジェクトはメソッド(関数)を持つこともできる

let ob = {
    red:255, green:125, blue:0,
    total: function(){
        return this.red + this.green + this.blue;
    }
};
document.write(ob.total());

オブジェクトのメソッド(関数)の省略形の記述

let ob = {
    red:255, green:125, blue:0,
    total(){
        return this.red + this.green + this.blue;
    }
};
document.write(ob.total());

コンストラクタ関数

function MyObj(r, g, b) {
    this.red = r;
    this.green = g;
    this.blue = b;

    this.total = function(){
        return this.red + this.green + this.blue;
    }
}

let ob = new MyObj(255,200,200);
document.write(ob.total());

function MyObj(r, g, b) {
    this.red = r;
    this.green = g;
    this.blue = b;

    this.total = function(){
        return this.red + this.green + this.blue;
    }

    this.getHex = function(){
        return '#' + ('00' + this.red.toString(16)).substr(-2)
            + ('00' + this.blue.toString(16)).substr(-2)
            + ('00' + this.green.toString(16)).substr(-2);
    }

    this.getStartP = function(){
        return '<p style="background-color:' 
            + this.getHex() + '">';
    }

    this.getEndP = function(){
        return '</p>';
    }

    this.writeP = function(){
        document.write(this.getStartP());
        document.write(this.total());
        document.write(this.getEndP());
    }
};

let ob = new MyObj(255,200,200);
ob.writeP();

let ob2 = new MyObj(0, 100, 170);
ob2.writeP();

クラス

class MyObj {
    constructor(r, g, b){
        this.red = r;
        this.green = g;
        this.blue = b;
    }

    get total(){
        return this.red + this.green + this.blue;
    }

    get hex(){
        return '#' + ('00' + this.red.toString(16)).substr(-2)
            + ('00' + this.blue.toString(16)).substr(-2)
            + ('00' + this.green.toString(16)).substr(-2);
    }

    get startP(){
        return '<p style="background-color:' 
            + this.hex + '">';
    }

    get endP(){
        return '</p>';
    }

    writeP(){
        document.write(this.startP);
        document.write(this.total);
        document.write(this.endP);
    }
};

let ob = new MyObj(255,200,200);
ob.writeP();

let ob2 = new MyObj(0, 100, 170);
ob2.writeP();

参考文献:

Vue.js&Nuxt.js 超入門 Kindle版

Vue.js&Nuxt.js 超入門

カテゴリー
JavaScript

var、let、constの違い(JavaScript)

参考サイト:

JavaScriptで書く「var,let,const」の違いと使い分け方法

カテゴリー
JavaScript

JavaScriptの実行確認

入門書のサンプルコードのような、ちょっとしたJavaScriptのソースコードの実行結果はブラウザの開発者ツールで確認するのが手っ取り早いです。

  1. Google Chromeで適当なページを表示する

2. F12キーを押して、開発者ツールを表示する

3. コンソールにJavaScript ソースコードを記入し、Enterを押す

※ Console.log()、Alert()で結果を出力を確認する

カテゴリー
JavaScript

アロー関数

関数名を持たず、使い捨てにするもの

(引数)=>{ 実行する処理}

のように記載する

例)

function hello(getname) {
	 alert('こんんちわ、' + getname() + 'さん!');
}

hello(()=>{ return "太郎"; });
hello(()=> "花子" );

関数の書き方 その1 一般的な宣言

function hello(name){
    alert('こんにちは、' + name + 'さん!');
}

hello('たろう');

例)

function a(){
    return "A";
}
function b(){
    return "B";
}

let x = a() + b();
console.log(x);	//ABと出力される

関数の書き方 その2 変数に代入

var hello = function () {
  alert("hello");
}

例)

function a(){
    return "hello";
}

var b = a;
console.log(b);	//関数a()の内容が出力される
let c = a();
console.log(c);	//関数ア()の戻り値 hello が出力される

参考文献:

Vue.js&Nuxt.js 超入門 Kindle版

Vue.js&Nuxt.js 超入門

カテゴリー
JavaScript

クッキーの登録

// クッキーとして名前/値のペアを保存する。
// encodeURIComponet()を使って、値をエンコードし、セミコロンやカンマや空白をエスケープする。
// daysToLiveが数値の場合は、max-age属性を設定し、
// 指定した日数が経過した後に無効となるようにする。
// 0を渡した場合はクッキーを削除する
	
function setCookie(name, value, daysToLive) {
	var cookie = name + "" + encodeURIComponet(value);
	if (typeof daysToLive === "number") {
		cookie += "; max-age=" + (daysToLive*60*60*24);
	}
	document.cookie = cookie;

参考書籍:

オライリー JavaScript 第6版

カテゴリー
JavaScript

クッキーの読み出し

// ドキュメントのクッキーを名前/値のペアで表すオブジェクト形式で返す
// クッキーの値はencodeURIComponent()でエンコードされていると仮定する
function getCookies() {
	var cookies = {};
	var all = document.cookie;
	if (all === "") 
		return cookies;
	
	var list = all.split("; ");
	for (var i = 0; i < list.length; i++) {
			var cookie = list[i];
			var p = cookie.indexOf("=");
			var name = cookie.substring(0, p);
			var value = cookie.substring(p+1);
			value = decodeURIComponent(value);
			cookies[name] = value;
	}
	return cookies;
}

参考書籍:

オライリー JavaScript 第6版

カテゴリー
JavaScript

クッキー

Webブラウザ上に格納され、特定のWebページやWebサイトに関連付けられる、名前の付いた少量のデータ

Documentオブジェクトのcookieプロパティを使用する。

参考書籍:

オライリー JavaScript 第6版

カテゴリー
JavaScript

localStorageとsessionStrage

Web Storage ドラフト仕様を実装しているブラウザ
Windowオブジェクトに2つのプロパティ
Storageオブジェクト
localStorageプロパティ
sessionStorageプロパティ
有効期間、スコープ

参考書籍:

オライリー JavaScript 第6版

カテゴリー
JavaScript

クライアントサイドストレージ

Webアプリケーションは、ブラウザのAPIを使って、ユーザーのコンピュータ上にデータを保存できる。

Webブラウザに対して記憶装置を提供する。

例えば、

Webアプリケーションは、ユーザーの設定を保存できる。

Webアプリケーションのすべての状態も保存できる。

このように状態を保存しておけば、ユーザが再度訪問したときに、前の状態を正確に復元できる。

Web Storage
クッキー
IE User Data
Offline Web Application
Webデータベース
ファイルシステムAPI

参考書籍:

オライリー JavaScript 第6版