カテゴリー
TypeScript WebFrontEnd

JavSscript, TypeScript で 型のメソッドを使いたいのに TypeError: Cannot read property ‘xxxxx’ of undefined が出るときの対処方法

たとえば、オブジェクト型なのに、文字列型の substrメソッドを使いたいとき、
そのまま obj_A.substr(0,2) などとした場合、以下のエラーが発生します。


TypeError: Cannot read property 'substr' of undefined

こんなときは、文字列型として、オブジェクトを生成します。


let tmpKekkaStr:any;
tmpKekkaStr = new String(obj_A)

new String(obj_A) で文字列型オブジェクトを生成しています。

こうすることで、tmpKekkaStr は文字列型として定義されますので、

substr()substring()slice() など使うことができます。

カテゴリー
WebFrontEnd

Javascript で簡単にゼロ埋めやスペース埋めする関数

帳票やデータフォーマットの成形を行っていると、やりたくなるのが、数値のゼロ埋めや文字列のスペース埋めです。

簡単にゼロ埋めやスペース埋めをする関数を作成しましたので紹介します。

文字列の末尾にスペースを埋める

function spacePadding(val, len){

    for(var i = 0; i < len; i++){
        val = val + " ";
    }

    return val.substr(0,len);

}
  • 引数に val(スペース埋めしたい値) と len(スペース埋め後の文字数) を設定します。
  • スペース埋めされた文字列を返却します。

数値の先頭にゼロを埋める

function zeroPadding(val, len){
    for(var i = 0; i < len; i++){
        val = "0" + val;
    }

    return val.slice((-1)*len);

}
  • 引数に val(ゼロ埋めしたい値) と len(ゼロ埋め後の文字数) を設定します。
  • slice()を使用し、ゼロ埋めされた文字列を返却します。
カテゴリー
WebFrontEnd

Javascript で現在日付の YYYYMMDD 形式、現在時刻の HHMMSS 形式を取得する

Node.js でバッチジョブを開発しているときなど、YYYYMMDD や HHMMSS 形式で
現在の日付や時刻を取得したくなることが多々ありました。

なので、関数化しましたので紹介します。

現在日付を YYYYMMDD 形式で取得する関数


function getNowYMD(){
    var dt = new Date();
    var y = dt.getFullYear();
    var m = ("00" + (dt.getMonth()+1)).slice(-2);
    var d = ("00" + dt.getDate()).slice(-2);
    var result = y + m + d;
    return result;
  }

var dt = new Date();

現在日付時刻を取得して、変数 dt に格納します。


var y = dt.getFullYear();

現在日付から年を取得し、変数 y に格納します。

Date.prototype.getFullYear()
| developer.mozilla.org


var m = ("00" + (dt.getMonth()+1)).slice(-2);

現在日付から月を取得し、先頭ゼロ埋めしたあと、後ろ2文字を変数 m に格納します。

※ getMonth() 関数は、1月を 0 として返却しますので、1を加算しています。

Date.prototype.getMonth() | developer.mozilla.org

現在時刻を HHMMSS 形式で取得する関数

function getHHMISS(){

    var dt = new Date();
    var hh = dt.getHours();
    var mi = dt.getMinutes();
    var ss = dt.getSeconds();

    hh = ("00" + hh).slice(-2);
    mi = ("00" + mi).slice(-2);
    ss = ("00" + ss).slice(-2);

    return hh + mi + ss;

}

var dt = new Date();

現在日付時刻を取得して、変数 dt に格納します。


var hh = dt.getHours();

現在時刻から時間を抽出し、変数 hh に格納します。

Date.prototype.getHours() | developer.mozilla.org


var mi = dt.getMinutes();

現在時刻から分を抽出し、変数 mm に格納します。

Date.prototype.getMinutes()
| developer.mozilla.org


var ss = dt.getSeconds();

現在時刻から秒を抽出し、変数 ss に格納します。

Date.prototype.getSeconds() | developer.mozilla.org


hh = ("00" + hh).slice(-2);
mi = ("00" + mi).slice(-2);
ss = ("00" + ss).slice(-2);

先頭ゼロ埋めし、後ろ2文字を取得します。


return hh + mi + ss;

最後に文字列連結して、返却します。

カテゴリー
WebFrontEnd

Javascript で 要素の属性を取得する方法

Javascript で要素の属性を取得する方法について紹介します。

属性とは?

属性とは、


<div class="editors" id="ace1" codeLang="javascript" codeurl="/code/html/innerhtml.js"></div>

の場合、

  • class
  • id
  • codeLang
  • codeurl

が属性になります。

これらの属性を Javascript で取得する方法について、紹介します。

コードサンプル

// document.getElementsByClassName("クラス名")でDOM要素を取得する
// https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
var element = document.getElementsByClassName("editors");

// DOM要素.getAttribute("属性名")で、属性の値を取得する
// https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
var elId = element.getAttribute("id");
var codeLang = element.getAttribute("codeLang");
var codeurl = element.getAttribute("codeurl");

このように、element.getAttribute()メソッドを使用して取得します。

この例では、

  • 属性:id の値 "acee1" を elId にセット
  • 属性:codeLang の値 "javascript" を codeLang にセット
  • 属性:codeurl の値 "Javascript/GetElementAttribute.js" を codeurl にセット

しています。

MDN Web Docs リンク

Element.getAttribute() | MDN Web Docs

カテゴリー
WebFrontEnd

Javascript で 複数の DOM要素を forEach でループ処理する方法

Javascript で複数のDOM要素を取得し、forEach でループ処理する方法を紹介します。

var elms = document.getElementsByClassName("ClassName") などでDOM要素を取得し、

elms.forEach() をやろうとすると、以下のメッセージが表示されます。

Uncaught TypeError: elms.forEach is not a function

これに対応するためには、Array.prototype.forEach.call() を使用します。


var AceEditors = document.getElementsByClassName("aceeditor")

Array.prototype.forEach.call(AceEditors, function(element) {

    /*
    ... 処理 ...
    */

})

これでエラーなく、forEach()でループ処理ができます。

カテゴリー
WebFrontEnd

Ace Editor を表示してテーマや言語モードを変更する方法

Ace Editor は ブラウザで動作するコードエディタです。MITライセンスで使用できます。
このブログでも、コードを表示する際は Ace Editor を使用しています。

この記事では、Ace Editor の使用方法について説明します。

CDNを使用した Ace Editor の表示方法

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Ace Editor sample</title>
</head>
<body>
  <div id="editor" style="height: 600px">console.log("hello world");</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js"></script>
  <script>
    var editor = ace.edit("editor");
    editor.$blockScrolling = Infinity;
    editor.setOptions({
      enableBasicAutocompletion: true,
      enableSnippets: true,
      enableLiveAutocompletion: true
    });
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");
    editor.setFontSize(20)
  </script>
</body>
</html>

ブラウザで表示すると、以下のように Acce Editor が表示されます。

この例では、

  • テーマ:monokai
  • 言語モード:javascript
  • フォントサイズ:20

としています。

div#editorの中のテキストが Ace Editor の中にコードとして表示されます。

Javascript から Ace Editor の中に表示するコードを変更するには

var editor = ace.edit("editor");

editor.setValue(CodeValue);

このように、setValueメソッドを使用します。

テーマを変更するには

editor.setTheme メソッドを使用して変更します。

指定可能なテーマは Ace Kitchen Sink
参照ください。

言語モードを変更するには

editor.getSession().setMode メソッドを使用します。

指定可能なモードは同じく Ace Kitchen Sink
Mode を参照ください。

フォントサイズを変更するには

editor.setFontSize メソッドを使用します。フォントサイズを数値で指定します。

カテゴリー
WebFrontEnd

HTML で超簡単に手っ取り早くツールチップを表示する。

ツールチップとは、マウスを上に置いたときに表示される補足情報です。
今回は、超簡単にツールチップを表示する方法を紹介します。

abbr タグで実装する

abbr タグは、略語を示すときに使用されるHTMLタグです。「abbr」は「abbreviation」の略で、「省略」「短縮」「略語」などの意味があります。

↓にマウスを置くと、ツールチップが表示されます。

UsefulEdgeとは?


<abbr title="Useful Edgeは、システム開発やライフハックな情報を発信します。">UsefulEdgeとは?</abbr>

表の場合は td タグ に title 属性で定義する

WWWHTML

<table border="1">
<tr>
    <td title="World Wide Web">WWW</td>
    <td title="Hyper Text Markup Language">HTML</td>
</tr>
</table>

Bootstrap で実装する

NPM

Bootstrap の場合は、の後ろに以下の Javascript が必要です。


    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })

ツールチップは以下のように書きます。


    <p data-toggle="tooltip" data-placement="top" title="Niggling Pant Monkey" style="width: 50px; padding: 3px 50px;">
        NPM
    </p>