Javascript ES2015 で連想配列を検索

連想配列の検索がESですっきり短くできないかと、探してたところ見つけましたので、備忘録しておきます。

ここで教えて頂く : https://qiita.com/Nossa/items/4a425e57ec4b7eedb7cb

< コード例 >


   /**
   * 連想配列存在確認
   * @param {type} ary 連想配列
   * @param {type} cd HS4キーの検索対象値
   * @returns {Boolean} 存在 or Not
   */
  let isExistItmInArray = (ary, cd) => {
    
    // ES2015ですっきりさせる //
    const res = ary.some(e => e.HS4 === cd);
    return res;
    
    
    // 昔のやり方 //
    //let res = false;
    //$.each(ary, function (i, itm) {
    /*for (let i = 0; i < ary.length; i++) {
      //console.log(ary[i] + "%" + cd);
      //if (cd.indexOf(ary[i]["HS4"]) === 0) {
      if (ary[i]["HS4"] === cd) {
        res = true;
        break;
      }
    }
    return res;*/
  }

jQuery Chosen でセレクトボックス

セレクトボックスの項目が増えて、選びにくくなって来たので使ってみました。

ここで教えて頂きました : https://qiita.com/mtanabe/items/59dc6c8fea7d9e10093f

本家 : https://harvesthq.github.io/chosen/

プロパティ、イベント、何もいじらなくても、不満な部分解消出来てますが、何か不足発覚したら、ドキュメント見させて頂き、変更しようと思ってます。

< 利用例 >

Javascript ES6 テンプレートリテラル

JavascriptでES6を使い始めて、PHPのようにヒアドキュメントみたいなことが出来るのがわかり、使ってみました。

+ がなくなり、すっきりわかりやすくなったので、HTML tableタグの記述とかに使っていこうと思います。

< コード例 >


  /**
   * 中分類tableタグ
   * @param {type} caption
   * @returns {String}
   */
  getMiddleResultHTML (caption) {
    
    
       
    let html = `<table id='mrestbl' class='table table-striped table-bordered table-hover table-sm'>
    <caption style='caption-side: top;'>${caption}</caption>
    <thead>
    <tr style='text-align:center;' class='bg-dark text-white'>
    <th>No</th><th>CD</th><th>説明</th>
    </tr>
    </thead>
    <tbody>`;
    
    // tr走査してtd生成 //
    let curno;
    let curfunctitle = "";
    $.each(this.records, function (i, itm) {
      
      curno = Number(i + 1);
      
      let curhtml = `<tr class='curpo mtr'>
      <td class='text-right nocell' style='color:navy; border-right-color: #555555'>
      ${curno}
      </td>
      <td class='text-right' >${itm["itemCode2"]}</td>
      <td>${itm["itemName2"]}</td>
      </tr>`;
      
      html += curhtml;
      
    });
    html += "</tbody></table>" ;
    //console.log(html);
    
    return html;
    
  }

< JSONデータソース >

[
    {
        "itemCode1": 1,
        "itemName1": "動物(生きているものに限る。)及び動物性生産品",
        "itemCode2": 1,
        "itemName2": "動物(生きているものに限る。)"
    },
    {
        "itemCode1": 1,
        "itemName1": "動物(生きているものに限る。)及び動物性生産品",
        "itemCode2": 2,
        "itemName2": "肉及び食用のくず肉"
    },
    {
        "itemCode1": 1,
        "itemName1": "動物(生きているものに限る。)及び動物性生産品",
        "itemCode2": 3,
        "itemName2": "魚並びに甲殻類、軟体動物及びその他の水棲無脊椎動物"
    },
    {
        "itemCode1": 1,
        "itemName1": "動物(生きているものに限る。)及び動物性生産品",
        "itemCode2": 4,
        "itemName2": "酪農品、鳥卵、天然はちみつ及び他の類に該当しない食用の動物性生産品"
    },
    {
        "itemCode1": 1,
        "itemName1": "動物(生きているものに限る。)及び動物性生産品",
        "itemCode2": 5,
        "itemName2": "動物性生産品(他の類に該当するものを除く。)"
    }
]

Javascriptで曜日

たいていの場合、曜日の出力はサーバー側でMySQLのUDFとか、Javaのメソッドで行ってましたが、最初は曜日が必要なかったのですが、後から必要になり、サーバー側入れ替えが面倒とか、権限がないとかの場合もあるので、調べてたら出来ました。

ここで教えて頂く: https://www.nishishi.com/javascript-tips/get-day-of-the-week.html

コード例

今更ながらアローを使い始める。


    // 日本語曜日関数 //
    let getDofWJ = (dt) => {
      let dtobj = new Date(dt);
      let wv = dtobj.getDay();
      return ["日", "月", "火", "水", "木", "金", "土"][wv];
    };

Javascript ES6 のクラスを使ってみる

IE11を使ってる人も多く、まだ変化が多いので、ECMA Scriptは使ってませんでしたが、Win7のサポート終了でIE11からEdgeへの移行もすすむと思いますので、最近、使い始めてみました。

まだ、Javaのクラスと同等な使い方出来なくて、とまどう部分も多いですが、コード量減らすことができて、重宝しております。

< 作ったコード例 >

あちこちに書いたAJaxの処理をクラスに入れてみました。


class MyAjax {
  
  /**
   * コンストラクタ
   * @param {type} url URL
   * @param {type} mapdata リクエストパラメータ
   * @param {type} datatype 応答データタイプ (デフォルトはjson)
   * @param {type} type リクエストメソッド (デフォルトはPOST)
   * @param {type} cache キャッシュ (デフォルトはなし)
   * @param {type} async 非同期 (デフォルトは同期)
   * @returns {MyAjax}
   */
  constructor(url, mapdata, datatype = "json", type = "POST", cache = false, async = false) {
    
    this.url = url;
    this.mapdata = mapdata;
    this.datatype = datatype;
    this.type = type;
    this.cache = cache;
    this.async = async;
  }
  
  // 実行 //
  exec() {
    
    let rtn;
    $.ajax({
      url: this.url,
      type: this.type,
      cache: this.cache,
      dataType: this.datatype,
      async: false,
      data: this.mapdata,
      success: function (jsnortxt) {
        rtn = jsnortxt;
      },
      error: function (xhr, ts, err) {
        rtn = "ERROR";
      }
    });
    return rtn;
  }

}

呼び出し側


// -C 検索
let aJax = new MyAjax("GetJPFromID", {tblid: tblid, mvtp: mvtp});
let katakata = [];
katakata = aJax.exec();

Javascript クラスの static がブラウザによってはエラーとなる

JavascriptのES6クラスについては、IE11で動作しない、ブラウザによっては動かないのがあるなどの理由で、利用をためらってましたが、

Windows10の普及でIE11もなくなると思うので使い始めました。

同じような重複したコードが排除出来て、うれしいですが、まだ仕様が確定してないのか、動かない部分ありましたので、備忘録しておきます。

Vilaldy, Brave, Firefox で動かなかったコード (Edge, Chromeでは動く)


static STATICTEXT = "スタティック";

 

動いたコード


static STATICTEXT () {
return "スタティック";
}