jQueryで「昨日買ったPCが今日壊れたクマ」と叫ぶクマ

こんにちは、たかはらです。最近休日が多いので新しい事を試す機会が増えています。最近ちょっとだけ始めたのはJavaScriptのライブラリjQueryです。今日はこのネタを投稿します。

jquery-kuma2.png

ディノでは、毎週30分×2コマの社内勉強会を開催しています。このなかで、souさんが毎週連載で開催しているJavascript講習会が社内外で思いのほか好評です。

全編動画にてフォト蔵で公開していますので是非ご覧になってみて下さい。

今souさんの行っているJavaScript講習会では、基礎を固めるためあえてライブラリを使っていませんが、ライブラリを使うと宿題のコードがどれくらい簡単になるか興味を持ったので、覚えたてのjQueryを使って宿題のJavaScriptを書き直してみました。

宿題のコード

下のコードを例にjQueryで書き換えてみます。

/**
 * 課題:
 * JavaScript off だと「クマー!」になっている台詞が、on だと違う台詞になるスクリプトを組む
 *
 * ルール:
 * innerHTML 禁止
 * 制限時間目安 30 分
 * スライドを見てもいい
 * 本、資料を参考にしてもいい
 *
 */
 
 
/**
 * window.onload に関数 func をスタックする
 */
function addOnLoad(func) {
    // window.onload に関数が登録済みか
    if (typeof window.onload == "function") {
        // t: window.onload で登録済み関数を呼び、次に func を呼ぶ
        predefined_onloadfunc = window.onload;
        window.onload = function() {
            predefined_onloadfunc();
            func();
        };
    } else {
        // f: window.onload で func を呼ぶ
        window.onload = func;
    }
 
};
 
/**
 * クマーに定義した台詞を言わせる
 */
function prepareOverwrite() {
    // テキストノードを生成
    var serifu_array = new Array(
        "あばばばばばばー",
        "常に裏目に出るクマ",
        "明日できることは今日やらないクマ",
        "富樫が連載再開したら本気出すクマ",
        "これからが本当の地獄だクマ",
        "昨日買ったPCが今日壊れたクマ"
        );
    var serifu_index = Math.floor(Math.random()*serifu_array.length);
    var serifu = serifu_array[serifu_index];
    var new_serifu_textnode = document.createTextNode(serifu);
    // #shout を取得
    var shout = document.getElementById("shout");
    shout.removeChild(shout.firstChild);
    // #shout の子要素を入れ替える
    shout.appendChild(new_serifu_textnode);
};
 
addOnLoad(prepareOverwrite);

上の宿題コードは一番回答が面白かったhnwさんのを借りてきました。手が込んでいてリロードする度にクマのセリフがランダムに変わるんです!

セリフの部分は、#shoutというidがついています。
jquery-kuma3.png

これをJavascriptでランダムに置き換えているのが上のスクリプトです。

書き直す為のjQueryの知識

それではいよいよ、jQueryの登場です。

jquery.png

上のスクリプトをjQueryで書き換える為に必要な知識は3点です。さらっと流します。

addOnLoadの書き方

addOnLoadのような典型的な処理はもちろんjQueryに用意されています。

jQuery(document).ready(function(){
  // ここに DOMを操作する処理を書く
});

単純にこの中に書くだけです。

#shout を取得

jQueryで要素を取得するには、単にjQuery("ID")のようにします。これだけ見るとただのgetElementById()ですが、ID以外にXPATHやCSSセレクタも書けます。つまり以下のように書けば#shoutが取得できます。

jQuery("#shout")

テキストノードを生成し子要素を入れ替える

取得した要素についてテキストを設定するには単に以下のようにするだけです。

jQuery("#shout").text("テキスト")

なんだ、結局一行で書けちゃうんですね。

jQueryで宿題のコードを書き直す

それでは早速宿題のコードを書き換えてみます。

jQuery(document).ready(function(){
    // セリフをランダムで決定する
    var serifu_array = new Array(
        "あばばばばばばー",
        "常に裏目に出るクマ",
        "明日できることは今日やらないクマ",
        "富樫が連載再開したら本気出すクマ",
        "これからが本当の地獄だクマ",
        "昨日買ったPCが今日壊れたクマ"
        );
    var serifu_index = Math.floor(Math.random()*serifu_array.length);
    var serifu = serifu_array[serifu_index];
 
    // セリフを置き換える
    jQuery("#shout").text(serifu);
});

さすがに簡単ですね!


jQueryなどのライブラリを使うといろいろ知らなくてもそれっぽいJavascriptが書けちゃうんですが、souさんのJavascript講座を聴いていると できるできない以前に基礎は重要 と思い知らされます。動画には有りませんが、毎回講義の内容について宿題がでます。最近は回答内容もみんなウケ狙いに入っているようで、それぞれの回答を楽しませてもらっています。そして、確実に参加者のレベルが上がっているのがわかるのが本当に嬉しかったりします。

今後も楽しみにしていますよ →souさん

コメント / トラックバックはありません

コメントする