JavaScriptのクラスやオブジェクトリテラルでコーディングしていて、他の言語と同じ感覚でthisキーワードを使用しているとバグが発生する可能性があります。

他の言語だとthisというとクラスやオブジェクト自身を参照するのですが、JavaScriptだと少し違って、通常は同じようにクラスやオブジェクト自身を参照してくれるのですが、コールバック関数で呼び出された場合はwindowを参照するのです。
これを知らないと意図しない動作でバグとなり、エラーが発生しますのでご注意ください。

実際にサンプルコードを踏まえて説明します。
まずはコールバック関数を実行するメソッドを含んだオブジェクトを作成します。

const exam1 = {

    a: function(callback) {
        callback();
    }

}

次に、コールバック関数を引数に与えて、先ほどのオブジェクトのメソッドを実行するためのオブジェクトを作成します。

const exam2 = {

    b: function() {
        console.log("function b!");
    },

    c: function() {
        this.b();
    },

    d: function() {
        exam1.a(exam2.c);
    }

}

実行する順番としては次の通りです。
続きを読む…»

URLパラメーターとしてクエリ文字列を渡す際に、クエリ文字列をスマートに生成することについて考察してみました。

昔ながらのクエリ文字列生成方法

let params = "";
params += "a=b";
params += "&c=d";
console.log(params);

出力結果

a=b&c=d

この方法だと条件式によってパラメーターを追加していくって場合にはアンパサンド（＆）が問題になってくるのでちょっと不便ですね。
それを単純に解消しようと思うと以下のようなやり方でしょうか。

const DATA = [];
DATA.push("a=b");
DATA.push("c=d");

console.log(DATA.join("&"));

URLSearchParamsインターフェイス

URLSearchParamsインターフェイスを使うと、もっとスマートに生成できます。
続きを読む…»

テキストエリアの先頭や末尾に文字を追加するのは簡単ですが、途中（カーソル位置）に挿入するにはひと手間必要です。

例として適当なフォームを作成します。

<form name="myForm">
    <textarea name="myTextarea"></textarea>
    <input type="submit" value="送信">
</form>

次に以下のようなボタンを作ります。

<button onclick="addText();">文字追加</button>

ボタンを押したときに実行されるJavaScriptが以下のようになります。

function addText()
{
    var textarea = document.myForm.myTextarea;
    var pos      = textarea.selectionStart;

    var before   = textarea.value.substr(0, pos);
    var after    = textarea.value.substr(pos);

    textarea.value = before + "追加する文字列" + after;
}

GoogleMapに図形等を描画するのに非常に便利な方法がありました。

//GoogleMapインスタンスを生成(v3)
map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(35.6585809608813, 139.74543258547783) } );

// GeoJsonを読み込む
map.data.loadGeoJson('sample.geojson');

// スタイルを設定
map.data.setStyle(function(feature) {

    var myStyle = {
        fillColor: "#9AD2AE",
        fillOpacity: 0.5,
        strokeColor: "#1EB26A",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        clickable: true,
        visible: true,
        zIndex: 1
    };

    return (myStyle);

});

sample.geojsonの内容

{
"type": "FeatureCollection",
"name": "sample",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "name": "サンプル1" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 139.74472479682004, 35.659171090464596 ], [ 139.74610447883606, 35.659171090464596 ], [ 139.74610447883606, 35.65809388391181 ], [ 139.74472479682004, 35.65809388391181 ], [ 139.74472479682004, 35.659171090464596 ] ] ] } }
]
}

今回はポリゴンのみですが、他にポイントやポリラインもGeoJsonで読み込み可能です。
GeoJsonは統一された規格なので汎用性があり便利です。

targetPoint = new google.maps.LatLng(lat, lng);

markerOptions.map = map;
markerOptions.position = targetPoint;
markerOptions.icon = makeNumIcon(1, 'ff7e73');

var marker = new google.maps.Marker(markerOptions);

//ラベル位置の調整(x, y)
marker.icon.labelOrigin = new google.maps.Point(9, 0);

//ラベルを設定
marker.setOptions({label:{text: '1',color: '#000',fontSize: '20px'}});

marker.setMap(map);


// 数字アイコン作成
//{
    makeNumIcon = function(n, color)
    {
        var icon_color = color || 'ff7e73'; //カラーが指定されなかった場合はデフォルトのカラー

        //文字ありのピン
        //var icon = new google.maps.MarkerImage('//chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+ n + '|' + icon_color + '|000000');

        //文字ありのピン（フォントサイズ等指定）
        //var icon = new google.maps.MarkerImage('//chart.apis.google.com/chart?chst=d_map_spin&chld=0.8|0|' + icon_color + '|16|b|'+ n);

        //文字なしのピン
        var icon = new google.maps.MarkerImage('//chart.apis.google.com/chart?chst=d_map_spin&chld=0.5|0|' + icon_color + '|16|b|');

        return icon;
    }
//}