【JavaScript】よく使用する処理をまとめてメソッド化してみる (プチ・モジュール開発)

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、JavaScriptでよく使用する処理をまとめてメソッド化してみる (プチ・モジュール開発)する方法について解説します。

1 よく使用する処理をまとめてメソッド化してみる (プチ・モジュール開発)
- 1.1 作ったModuleを実行してみる
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

よく使用する処理をまとめてメソッド化してみる (プチ・モジュール開発)

今回、JavaScriptでよく使用する処理をまとめてメソッド化してみたのは、次のようなものになります。

CookieのSet・Get・Delete
LocalStorageのSet・Get・Delete
SessionStorageのSet・Get・Delete


const RobotamaModule = {
    log: (...target) => { 
        console.log(...target);
    },

    // < Cookie-Method >
    setCookie: (key, val) => {
        document.cookie = `${key}=${val}`;
    },
    getCookie: (key) => {
        const cookieData = document.cookie;

        // Cookie を綺麗に分割するために「'; '」(セミコロン&半角スペース)で区切る！
        const cookieDataList = cookieData.split('; ');

        for (const cookie of cookieDataList) {
            
            const cookieSplit = cookie.split('=');
        
            // key名を指定して、Cookie-Valueを取り出します。
            if (cookieSplit[0] === key) {
                console.log('getCookie', cookieSplit[1]);
                return cookieSplit[1];
            }
        }
    },
    removeCookie: (key) => {
        // document.cookie = "削除対象のkey名=; max-age=0"; で削除できる。
        document.cookie = `${key}=; max-age=0`;
    },

    // < LocalStorage-Method >
    setLocalStorage: (key, val) => {
        localStorage.setItem(key, val);
    },
    getLocalStorage: (key) => {
        const item =  localStorage.getItem(key);
        console.log('getLocalStorage', item);
    },
    removeLocalStorage: (key) => {
        localStorage.removeItem(key);
    },

    // < SessionStorage-Method >
    setSessionStorage: (key, val) => {
        sessionStorage.setItem(key, val);
    },
    getSessiionStorage: (key) => {
        const item = sessionStorage.getItem(key);
        console.log('getSessiionStorage', item);
    },
    removeSessionStorage: (key) => {
        sessionStorage.removeItem(key);
    },

};

作ったModuleを実行してみる

作ったModuleを実行してみます。

// < JavaScriptでよく使うパターンを搭載した独自Moduleを開発する🔥 >

const RobotamaModule = {
    log: (...target) => { 
        console.log(...target);
    },

    // < Cookie-Method >
    setCookie: (key, val) => {
        document.cookie = `${key}=${val}`;
    },
    getCookie: (key) => {
        const cookieData = document.cookie;

        // Cookie を綺麗に分割するために「'; '」(セミコロン&半角スペース)で区切る！
        const cookieDataList = cookieData.split('; ');

        for (const cookie of cookieDataList) {
            
            const cookieSplit = cookie.split('=');
        
            // key名を指定して、Cookie-Valueを取り出します。
            if (cookieSplit[0] === key) {
                console.log('getCookie', cookieSplit[1]);
                return cookieSplit[1];
            }
        }
    },
    removeCookie: (key) => {
        // document.cookie = "削除対象のkey名=; max-age=0"; で削除できる。
        document.cookie = `${key}=; max-age=0`;
    },

    // < LocalStorage-Method >
    setLocalStorage: (key, val) => {
        localStorage.setItem(key, val);
    },
    getLocalStorage: (key) => {
        const item =  localStorage.getItem(key);
        console.log('getLocalStorage', item);
    },
    removeLocalStorage: (key) => {
        localStorage.removeItem(key);
    },

    // < SessionStorage-Method >
    setSessionStorage: (key, val) => {
        sessionStorage.setItem(key, val);
    },
    getSessiionStorage: (key) => {
        const item = sessionStorage.getItem(key);
        console.log('getSessiionStorage', item);
    },
    removeSessionStorage: (key) => {
        sessionStorage.removeItem(key);
    },

};


RobotamaModule.log('Robotama-Run-Start・・・', 'Nanoda🔥');


// -------------------------------- Cookie --------------------------------
RobotamaModule.setCookie('Robotama', 'Gunmar');

const cookie = RobotamaModule.getCookie('Robotama');

RobotamaModule.setCookie('Cookie-Monster', 'Cookie食べたい🔥');

const cookieMonster = RobotamaModule.getCookie('Cookie-Monster');

RobotamaModule.removeCookie('Cookie-Monster');


// -------------------------------- LocalStorage --------------------------------
RobotamaModule.setLocalStorage('PuruPuruFlag', true);

const puruPuruRobotama = RobotamaModule.getLocalStorage('PuruPuruFlag');


RobotamaModule.setLocalStorage('GunmarFlag', true);

RobotamaModule.removeLocalStorage('GunmarFlag');


// -------------------------------- SessionStorage --------------------------------

RobotamaModule.setSessionStorage('ロボ玉', 'ロボロフスキー・ハムスター');

const Robotama = RobotamaModule.getSessiionStorage('ロボ玉');


RobotamaModule.setSessionStorage('ProtoType-1', 'ロボ玉試作1号機');

const RobotamaProtoType1 = RobotamaModule.getSessiionStorage('ProtoType-1');

RobotamaModule.removeSessionStorage('ProtoType-1');

// [ 実行結果 ]
// Robotama-Run-Start・・・ Nanoda🔥
// getCookie Gunmar
// getCookie Cookie食べたい🔥
// getLocalStorage true
// getSessiionStorage ロボロフスキー・ハムスター
// getSessiionStorage ロボ玉試作1号機