こんばんは！本日はjQueryを使った、年月の取得についての小話をしようかと思います。

ちょうど今日の話なのですが、もし「now」と表示されていたら「now(今の年.今の月)」って感じで変換するというスクリプトが必要になりました。
例えば「now(2015.10)」といった感じです。

<div>
    <p>2013.09 - now</p>
    <p>2010.02 - 2015.01</p>
    <p>2009.06 - now</p>
</div>

こんな感じのHTMLの「now」の部分を書き替えたい訳ですね！

動作的には特に問題なく書けたのですが、より効率よく書ける方法を学べたので記しておこうと思います！

まずは現在の年月を取得する

これは簡単ですよね。

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;

はい。これだけです。最早テンプレといって言いレベルですね。
そして、これを使って「now」と書いてあったら置き換える作業に入ります。

とりあえずreplace

置き換えるということはreplaceを使えば、なんとかなる！

ただ、一つだけ条件があり、月は必ず2桁で書かなきゃいけないってこと。
例えば9月だったら09、1月だったら01といった感じです。
それを踏まえて自分で書いたコードがこちら！

$("p").each(function(){
    var text =  $(this).text();

    if(text.match(/now$/)){
        if(month < 10){
            $(this).text(text.replace(/(now)$/,"$1(" + year + ".0" + month + ")"));
        }
        else{
            $(this).text(text.replace(/(now)$/,"$1(" + year + "." + month + ")"));
        }
    }
});

これで問題なく動きました！冒頭で述べたように、問題なく動作する所までは作れました。

そして、プログラマーの人にこのコードで問題ないか確認してもらった所…

「if文でmatchした要素を分岐してるけど、replaceするのはnowが書いてあった場合だけなのでこれいらなくね？」

・・・

確かに。全く気づかなかった…言われてみれば何故書いたのかすら分からないレベル…

ということはまず、初めのif文は無くても問題ない。

$("p").each(function(){
    var text =  $(this).text();

    if(month < 10){
        $(this).text(text.replace(/(now)$/,"$1(" + year + ".0" + month + ")"));
    }
    else{
        $(this).text(text.replace(/(now)$/,"$1(" + year + "." + month + ")"));
    }
});

当然これでも動きます。そりゃそうだ…そして次。

「10未満かどうかで分岐してるけど、slice使ったらよくね？」

・・・

実はsliceってどういうものかなんとなくは知っているけど、実際使った事とかないのです…

そこで今回を機にお勉強。

引数で指定した数値で文字をスライスするってのが基本のようで、マイナスの値を指定すると文字の後ろから切り取ってくれる。

ふむふむ。完全に説明不足かとは思いますが、詳しくはGoogle先生にお任せしましょう。

ともかく色々教えてもらい、今回は人生初のsliceを使ったコードになりました。最終的にこんな感じ！

var date = new Date();
var year = date.getFullYear();

$("p").each(function(){
    var month = $(this).text().replace(/(now)$/,"$1(" + year + "." + ("0" + (date.getMonth() + 1)).slice(-2) + ")");
    $(this).text(month);
});

なんてこった！始めに書いたコードは12行だったのに、最終的には4行に…
monthの部分もここだけでしか利用しないので、全部の処理をまとめて変数に入れちゃっても大丈夫でした。

今回は本当に勉強になりました。こういう風に効率よく書ける方法とかを学んでいるとすごいプログラムって面白いなぁー！って思います！

そしてまだまだ知識が浅いので、もっと勉強していかなきゃなって感じた1日でした。

プログラムデザイナーへの旅路はまだまだ続く…