JavaScript の落穂拾い

[最終更新] (2019/06/03 00:41:19)

プログラミング/IoT の関連商品 (Amazonのアソシエイトとして、当メディアは適格販売により収入を得ています。)

ルイージマンション3 -Switch

ゼルダの伝説ブレスオブザワイルド - Switch

回路シミュレータでストンとわかる!最新アナログ電子回路のキホンのキホン

モンスターハンターワールド:アイスボーンマスターエディション - PS4

キットで遊ぼう電子回路NO.4ディジタル回路Vol.2セット [ECB-400T]

tybot

概要

基本は理解しており大抵の処理は書ける人でも使用頻度が低いためか忘れてしまいがちな JavaScript の雑多な知識を書き出してみました。

タイマー

一定間隔毎に繰り返し実行

var intervalId;
var intervalTime = 1000; //msec
var cnt = 0;
var intervalFunc = function(){
  console.log(cnt);
  if(cnt == 5) {
    clearInterval(intervalId);
  }
  ++cnt;
};

// すべての要素がロードされたら実行
// http://api.jquery.com/ready/
$(function(){
  intervalId = setInterval(intervalFunc, intervalTime);
});

一定時間経過したら一度だけ実行

var timeoutId;
var timeoutTime = 2000; //msec
var timeoutFunc = function(){
  console.log('timeoutFunc');
};

// すべての要素がロードされたら実行
// http://api.jquery.com/ready/
$(function(){
  timeoutId = setTimeout(timeoutFunc, timeoutTime);
  // clearTimeout(timeoutId);
});

ページの情報

// http://localhost/help の場合の例:
console.log(location.host); //=> localhost
console.log(location.pathname); //=> /help
console.log(location.protocol); //=> http

ポップアップ

alert('警告');
console.log(confirm('よろしいでしょうか？')); // => true/false
console.log(prompt('入力してください', '既定値'));

var subwin = window.open('http://www.example.com/');
if (subwin && !subwin.closed) {
  subwin.close();
}

クッキーの操作

敢えてライブラリを使用せずにクッキーを扱う場合は以下のようにします。

// クッキーは ';' 区切りの文字列で表現します。
var c = '';

// 最初に名称を設定
c = 'myCookie=' + encodeURIComponent('日本語も大丈夫');

// 有効期限を設定 (省略時はブラウザを閉じたときに削除されます)
var exp = new Date(); // 加減算の項を参照:
exp.setDate(exp.getDate() + 2); // https://www.qoosky.io/techs/50044defab
c += ';expires=' + exp.toGMTString(); // GMT で指定

// SSL 通信でのみ利用可能にするかどうか
c += ';secure';

// ブラウザに保存
document.cookie = c;

// クッキーを読み出す
// - 自分のドメイン配下でないクッキーは利用できません
// - HttpOnly なクッキーは利用できません
// - secure クッキーは SSL でのみ利用できます
var cs = document.cookie.split(';');
for(var i = 0; i < cs.length; ++i) {
  var kv = cs[i].split('=');
  console.log(kv[0] + ': ' + decodeURIComponent(kv[1]));
}

配列 grep

JavaScript は配列の grep を提供していません。jQuery.grep を利用しましょう。

var data = [
  {keyA: 1, keyB: 3},
  {keyA: 2, keyB: 4}
];

var filter = function(e,i){
  return (e.keyA % 2) == 0;
};

var res = $.grep(data, filter);
console.log(res); //=> [Object {keyA=2, keyB=4}]

HTML の構築

要素の追加

index.html

<head>
  <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="sample.js"></script>
</head>
<body>
  <div id="my_id"></div>
</body>

sample.js

$(function(){
  // ここに以下の内容を設置します↓
});

指定要素の内部に e を入れ込みます。.append() は内部の最後に入れ込みます。.prepend() は内部の最初に入れ込みます。

var e = $('<div>Test</div>');
$("#my_id").append(e);
$("#my_id").prepend(e);

指定要素と同階層に e を並べます。.after() は指定要素の後に配置します。.before() は指定要素の前に配置します。

var e = $('<div>Test</div>');
$("#my_id").after(e);
$("#my_id").before(e);

指定要素の内部に e を入れ込みます。.appendTo() は内部の最後に入れ込みます。.prependTo() は内部の最初に入れ込みます。

var e = $('<div>Test</div>');
e.appendTo("#my_id");
e.prependTo("#my_id");

指定要素と同階層に e を並べます。.insertAfter() は指定要素の後に配置します。.insertBefore() は指定要素の前に配置します。

var e = $('<div>Test</div>');
e.insertAfter("#my_id");
e.insertBefore("#my_id");

要素の包含

index.html

<head>
  <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="sample.js"></script>
</head>
<body>
  <div id="my_id" class="my_class"></div>
  <div class="my_class"></div>
</body>

sample.js

$(function(){
  // ここに以下の内容を設置します↓
});

.wrap() は指定要素を個別に外から赤枠 div で包みます。

$('.my_class').wrap($('<div></div>').css('border', 'solid 1px Red'));

.wrapAll() は指定要素をひとまとまりにして、外から赤枠 div で包みます。

$('.my_class').wrapAll($('<div></div>').css('border', 'solid 1px Red'));

.wrapInner() は指定要素の中身を赤枠 div で包みます。

$('.my_class').wrapInner($('<div></div>').css('border', 'solid 1px Red'));

.unwrap() は指定要素を包んでいる赤枠 div を取り除きます。

$('.my_class').wrap($('<div></div>').css('border', 'solid 1px Red'));
$('.my_class').unwrap();

要素の削除

index.html

<head>
  <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="sample.js"></script>
</head>
<body>
  <div id="my_id">Test</div>
</body>

指定要素の削除

子要素を含めてすべて削除するためには .remove() を利用します。

$(function(){
  $('#my_id').remove();
});

一旦は削除するにせよ後で再度利用する可能性がある場合は .detach() を利用します。返り値を変数に保存しておき、任意のタイミングで DOM に追加します。前述の .remove() と異なり、イベントリスナや子要素などすべての属性が保存されます。

var div;
$(function(){
  $('#my_id').click(function(){
    console.log('my_id');
  });
  div = $('#my_id').detach();
  div.appendTo('body');
});

隠すだけ

削除はせずに隠したいだけという場合は .hide() を利用します。

sample.js

$(function(){
  $('#my_id').hide();
});

子要素を削除

対象要素の子要素を削除して中身を空にするためには .empty() を利用します。対象要素自体は削除しません。

sample.js

$(function(){
  $('#my_id').empty();
});

jQuery オブジェクト化

通常の DOM オブジェクトを $() でラップすると jQuery のメソッドが使用できるようになります。これはとても重要な事実です。例えば this をラップして $(this) とする場面は頻出です。

index.html

<head>
  <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="sample.js"></script>
</head>
<body>
  <div>Test</div>
</body>

sample.js

$(function(){
  $(document.body).css('background-color', '#33ff66');
});

関数内 this にオブジェクトをバインド

オブジェクト this が指すものは文脈 context によって変化します。

通常の関数内: undefined (何も指さない)
オブジェクトのメソッド関数内: オブジェクトを指す
イベントリスナ関数内: イベントの発生源となった DOM 要素を指す

jQuery.proxy() を利用することで、関数内 this が文脈 context オブジェクトを指すように変更できます。

index.html

<head>
  <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="sample.js"></script>
</head>
<body>
  <div id="my_id">Test</div>
</body>

通常の関数にコンテキストオブジェクトをバインド

sample.js

var context = {
  myKey: 1
};

var func = function(){
  console.log(this.myKey);
};

$(function(){
  var funcUnderContext = $.proxy(func, context);
  funcUnderContext(); //=> 1
  func(); //=> undefined
});

オブジェクトのメソッド関数にコンテキストオブジェクトをバインド

コンテキストオブジェクトに自分自身を指定することで、イベントリスナ関数として提供したオブジェクト関数内 this でそのオブジェクトを指すことができます。jQuery.proxy() を利用しない場合は、イベントの発生源となった DOM 要素を指してしまいます。

sample.js

var obj = {
  myKey: 1,
  myFunc: function(){
    console.log(this.myKey);
  }
};

$(function(){
  console.log(obj.myFunc()); //=> 1
  // $('#my_id').click(obj.myFunc); //=> undefined (DOM 要素 div#my_id で myKey プロパティは未定義)
  $('#my_id').click($.proxy(obj.myFunc, obj)); //=> 1
});

ちなみに

$(function(){
  $('#my_id').click($.proxy(obj.myFunc, obj));
});

については以下のような略記法が用意されています。

$(function(){
  $('#my_id').click($.proxy(obj, 'myFunc'));
});

クラスインスタンスのメソッド関数にコンテキストオブジェクトをバインド

JavaScript のオブジェクトのうち、こちらで紹介したクラスインスタンスとしてのオブジェクトに関しても同様に jQuery.proxy() を利用できます。コンテキストオブジェクトに自分自身を指定することで、イベントリスナ関数として提供したオブジェクト関数内 this でそのオブジェクトを指すことができます。

sample.js

var MyClass = function(prop){
  this.prop = prop;
};

MyClass.prototype.method = function(){
  console.log(this.prop);
};

$(function(){
  var obj = new MyClass('MyClass');
  obj.method(); //=> MyClass
  // $('#my_id').click(obj.method); //=> undefined (DOM 要素 div#my_id で prop プロパティは未定義)
  $('#my_id').click($.proxy(obj.method, obj)); //=> MyClass

  // 略記法:
  // $('#my_id').click($.proxy(obj, 'method')); //=> MyClass
});

$.proxy() を使用しないほうがシンプルになる場面

この続きが気になる方は

JavaScript の落穂拾い

残り文字数は全体の約 16 %

tybot

100 円

* プログラミング情報の有料公開およびご購入について

* ご購入済みの方はこちらからログイン