JavaScriptのプロパティ名を変数で指定したい場合

説明よりもコードで。

var box = {
  apple = {
    'size':"15cm",
    'color':'red'
  },
  lemon = {
    'size':"8cm",
    'color':'yellow'
  }
}
var propatyname = 'apple';

みたいな形があったとして、アップルを 変数propatyname で指定して、色を取得する場合は

console.log( box[propatyname]['color'] );

で問題ない。
問題ないんだけど、JSHintを通すと

[‘color’] is better written in dot notation.

と注意されてしまう。

ドットシンタックスの場合、キーをクォートで囲まないから当然こうじゃない。

console.log( box.propatyname.color );

じゃあ変数を指定したい場合はどうするんじゃい!と憤慨したものの、良く考えてみたら

console.log( box[propatyname].color );

これでいいじゃん、ということに気付く。
JSHintも通ったので多分合ってるんじゃなかろうか。

基本はドットシンタックス(.で区切る)で、変数の部分だけブラケット([]で囲む)と覚えておきます。

p5.jsさわってみた

三角関数を勉強中なのですが、数学としてだけ勉強しても上達しないので何かコードが書けるツールないかな~と思ってたところでp5.jsに出会いました。

p5jslogo

使い方は

 1. p5.js(p5.min.js)をサイトに読み込む。
 2. setup()とdraw()という関数を用意して中に処理を書く。

でOK。

ちなみに setup() は最初に1回、drawは指定したフレーム数/秒で実行されます。
(何も指定しないと30フレーム/秒?)

こちらのコードをちょっといじって貼り付けてみました。

サンプル

リファレンスはこちら

今までcanvasを使った描画はやったことなかったのですが、こういう解り易いプラグインがあると一気に敷居が下がりますね(きっと他にもいっぱいある)

jQueryの$(this)で指定した要素(HTML)をそのまま取得したい

ハマったのでメモ。

例えば二つのリストがあって、クリックしたらもう一方に対象の要素を複製したいとする。

<ul id="list1">
  <li><span>要素1</span></li>
</ul>

<ul id="list2">
  <!--ここに<li>要素を移動したい-->
</ul>
$(function(){
  $("#list1 li").on("click",function(){
    $("#list2").append($(this).html());
  });
});

何の疑いもなくこれでイケると思ってたのに実際は、

<ul id="list1">
  <li><span>要素1</span></li>
</ul>

<ul id="list2">
  <span>要素1</span>
  <!--ここに<li>要素を移動したい-->
</ul>

・・・外側の<li>がない;;

$(this).html() がthis(上の例の場合は<li>)の中身を取得するものだとは知らなかった><

対象の範囲としては

$(this).remove();//this自体が対象
$(this).empty()//thisの中身が対象
$(this).text()//thisの中身が対象

empty()やtext()の仲間なんですね(jQuery使い慣れてる人には当然の事?)

で、解決策。

$(function(){
  $("#list1 li").on("click",function(){
    $("#list2").append($(this).get(0).outerHTML);
  });
});

$(this).html() を $(this).get(0).outerHTMLに変えればOK。

get([index])
outerHTML

場当たりでコード書いてるからこういう基本的なことでハマってしまう。ドキュメント読んでからコード書く癖付けないとだめだなぁ;;

単独varパターン、関数の巻き上げのメモ

JavaScriptのvarについて大事な事2つ。
忘れそうなのでメモ。

「単独varパターン」のススメ
知らないと怖い「変数の巻き上げ」とは?

どちらも素晴らしい解説でした。

ついでにコードチェックツール。
jslint.com
単独Varパターンに対応してないとエラーが出るらしい。

AngularJSの$$hashkeyって何?

探し方がヘタなのかリファレンスが見当たらない…

What is the $$hashKey added to my JSON.stringify result
It comes with the ng-repeat directive usually. To do dom manipulation AngularJS flags objects with special id.

「これは通常ng-repeatが付属」とあるけど、自分の場合はJSONPでJSONを読み込むだけで付与されてしまうような・・・何故だろう?

理解してないので恰好悪いけどとりあえずさくっと消す方法。

If you use angular.toJson(obj) instead of JSON.stringify(obj) then Angular will strip out these internal-use values for you.

//$scope.jsonobj に$$hashkeyが入ってるとして
var jsonstr = JSON.stringify($scope.jsonobj);//$$hashkeyが取り除かれた文字列に変換
var clean_jsonobj = JSON.parse(jsonstr)//objectに戻す

もしくは

//$scope.jsonobj に$$hashkeyが入ってるとして
delete $scope.jsonobj["$$hashkey"];

で一応消せた。

これを消すとデータバインディングが効かなくなるので、AngularJSがmodel⇔view間のやり取りに使っているものなんだな程度には理解してるのですが・・・誰か詳しく(日本語で)教えてください><

[2014/08/13追記]
angular.toJson()でも取り除けました。どっちを使うべき?

ちなみに何故取り除くかというと、そのままモデルを保存するとJSONファイルにゴミ($$hashkey)がつく&そのファイルをAngularJSに再度読み込ませるとエラーになるからデス。