モーダルを閉じる工作HardwareHub ロゴ画像

工作HardwareHubは、ロボット工作や電子工作に関する情報やモノが行き交うコミュニティサイトです。さらに詳しく

利用規約プライバシーポリシー に同意したうえでログインしてください。

工作HardwareHub ロゴ画像 (Laptop端末利用時)
工作HardwareHub ロゴ画像 (Mobile端末利用時)

JavaScript の落穂拾い

モーダルを閉じる

ステッカーを選択してください

モーダルを閉じる

お支払い内容をご確認ください

購入商品
」ステッカーの表示権
メッセージ
料金
(税込)
決済方法
GooglePayマーク
決済プラットフォーム
確認事項

利用規約をご確認のうえお支払いください

※カード情報はGoogleアカウント内に保存されます。本サイトやStripeには保存されません

※記事の執筆者は購入者のユーザー名を知ることができます

※購入後のキャンセルはできません

作成日作成日
2015/02/11
最終更新最終更新
2021/10/07
記事区分記事区分
一般公開

目次

    PythonとJavaScriptがメイン。サーバーレスとマイクロサービスが好き。

    0
    ステッカーを贈るとは?

    基本は理解しており大抵の処理は書ける人でも使用頻度が低いためか忘れてしまいがちな 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); 
    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() を使用しないほうがシンプルになる場面

    クラスをインスタンス化する過程でイベントリスナ関数を登録する場面では jQuery.proxy() を使用せずに self というクロージャを利用したほうがシンプルになります。

    sample.js

    var MyClass = function(element){
      this.prop = 'MyClass';
    
      // element.click(function(){
      //   console.log(this.prop); //=> undefined
      // });                       //  (DOM 要素 div#my_id で prop プロパティは未定義)
    
      // element.click($.proxy(function(){ // $.proxy() を利用する場合
      //   console.log(this.prop); //=> MyClass
      // }, this));
    
      var self = this; // クロージャを利用する場合
      element.click(function(){
        console.log(self.prop); //=> MyClass
      });
    };
    
    $(function(){
      new MyClass($('#my_id'));
    });
    

    「ページが読み込まれたタイミング」の詳細

    ページが読み込まれたタイミングで発生するイベントには二種類あります。

    • .ready(): DOM ツリーが完成したタイミングで発生するイベント
    • .load(): 画像など DOM 以外の要素を含めて指定要素配下のすべてが読み込まれたタイミングで発生するイベント

    ready は画像などの読み込みを待たなくてよいため load よりも前に発生します。ready は DOM ツリーの頂点 document に対してのみ登録できるイベントリスナですが load は任意の DOM 要素に対して登録できます。また、通常 JavaScript は DOM ツリーが完成していれば問題なく動作するため ready のほうがよく利用されます。そのため ready に関しては document を省略した記法が用意されています。

    $(function(){
      // DOM 操作の処理
    });
    

    上記内容は下記内容の略記法です。

    $(document).ready(function(){
      // DOM 操作の処理
    });
    

    以下の内容を実行すると「"DOM tree is ready." → "Page is fully loaded."」という順番で出力されます。

    $(window).load(function(){
      console.log('Page is fully loaded.');
    });
    
    $(function(){
      console.log('DOM tree is ready.');
    });
    

    load が利用される場面

    画像のサイズ情報に依存した JavaScript を実行する場面では ready では対応できないため load が利用されます。

    $("img.icon").load(function(){
      if( $(this).height() > 100 ) {
        $(this).addClass("bigImg");
      }
    });
    
    0
    詳細設定を開く/閉じる
    アカウント プロフィール画像 (本文下)

    PythonとJavaScriptがメイン。サーバーレスとマイクロサービスが好き。

    記事の執筆者にステッカーを贈る

    有益な情報に対するお礼として、またはコメント欄における質問への返答に対するお礼として、 記事の読者は、執筆者に有料のステッカーを贈ることができます。

    さらに詳しく →
    ステッカーを贈る コンセプト画像

    Feedbacks

    Feedbacks コンセプト画像

      ログインするとコメントを投稿できます。

      関連記事