※スマホ対応はしてません。

タグ: JavaScript おれおれ Advent Calendar 2011

Twitterで変な文字が出て来たら .charCodeAt()で文字コードを調べてみれ(JavaScript おれおれ Advent Calendar 2011 – 19日目)

カテゴリー: JavaScript, Web

JavaScript おれおれ Advent Calendar 2011 – 19日目

Twitterってちょくちょく見た事無いような文字、記号が流れてきますよね! なにそれ気になる!てな時にささっと覚えておくと幸せの予感がするのが、 .charCodeAt()と String.fromCharCode()です。

こんなつぶやきがあったとします。

あれ、なんか絵文字みたいなの☺がありますね。なにこれ気になる!

そんな時は文字コードを調べてみましょう。文字のコードはだいたい連続しているので、付近にも同じような感じの、面白い文字が隠れているに違いありません。

var code = "☺".charCodeAt(0);  // コード取得
var c = String.fromCharCode(code + 1);  // 隣のコードの文字を取得
console.log(c);  // => "☻"

あ、黒いのがいた! ☻ またcode + 1でなくcode - 2も近い感じの文字が出てきました。

というわけでforでざーっと探してみましょう。

var code = '☺'.charCodeAt(0) - 2;
var str = '';
for (var i = 0; i < 140; i++) {
  str += String.fromCharCode(code+i);
}
console.log(str);

わーいっぱい出て来たー。 ヽ(´∀`)ノ

ただ文字に対応していない環境ではゲタとか□とか?とかで表示されてしまったり、表示されても雰囲気がえらい違ったりする場合があります。使用する場合は相手の環境(OS、ブラウザー/クライアント)に十分留意しましょう。自分で印刷するのに使うなら気軽に使えそうですね。

というわけでえらく気を抜いた世俗的な感じの記事でした。またね。

関連?

コードAとBを一瞬で切り替える複数行コメントの書き方(JavaScript おれおれ Advent Calendar 2011 – 18日目)

カテゴリー: JavaScript, Web

JavaScript おれおれ Advent Calendar 2011 – 18日目

これ超簡単便利です。

//*
コードA  // ←こっちが動く
/*/
コードB
//*/
/*
コードA
/*/
コードB  // ←こっちが動く
//*/

1行目を書き換えて、スラッシュ/をひとつ消したり加えたりするだけです。

  • ひとつ目のコードでは1行目と3行目から5行目がコメントになります。
  • ふたつ目のコードでは1行目から3行目と5行目がコメントになります。

コード整形のSyntaxHighlighterがうまく解釈してくれなくて、コメント色になってませんが……。

必殺の .apply()フックを打つべし! 打つべし!(JavaScript おれおれ Advent Calendar 2011 – 17日目)

カテゴリー: JavaScript, Web

JavaScript おれおれ Advent Calendar 2011 – 17日目

.apply()で成り済ましができたり仕事をスルーして丸投げしたりする事ができますが、さらにもうひとつ、フックを行う事ができます。

フック(hook)というのはフック船長のフック、鉤爪の事で、処理を「ひっかける」ような事です。ある関数が実行される際に、独自のコードを実行させる事ができます。

フック(Hook)は、プログラム中の特定の箇所に、利用者が独自の処理を追加できるようにする仕組みである。また、フックを利用して独自の処理を追加することを「フックする」という。

あの処理がどこで呼ばれてるかわからないときに

具体例をひとつ。例えばjQueryで「どこかのタイミングで勝手にクラス名が追加されてしまって困っている」という場合を考えます。その場合は .addClass()を「フック」して、ログ出力の処理を追加します。

(さらに…)

.apply()を駆使してスルー力を極めろ(JavaScript おれおれ Advent Calendar 2011 – 16日目)

カテゴリー: JavaScript, Web

JavaScript おれおれ Advent Calendar 2011 – 16日目

(※「スルー力」は「するーか」じゃなくて「するーりょく」です。)

.apply()を使って他の関数を実行できる事は昨日示しました。

これを応用して、メソッドが呼ばれた際にそのままスルーして、別のメソッドが呼ばれたかのように振る舞う事ができます。

スルー

例によって配列風のオブジェクトを考えます。これに .join()を実装しましょう。

var obj = {
  "0": "a",
  "1": "b",
  "2": "c",
  length: 3,
  join: function() { /* ??? */ }
};

console.log(obj.join());  // "a,b,c"にしたい
console.log(obj.join("/"));  // "a/b/c"にしたい

はてさて、どういう設計で実装しましょうか。仕様は? 試験は?

いえ、自分で書かずに丸ごと放り投げてしまいましょう。ここで .apply()の出番です。

(さらに…)

他人の能力を自分のものにできる .apply()で高度な成り済ましを(JavaScript おれおれ Advent Calendar 2011 – 15日目)

カテゴリー: JavaScript, Web

JavaScript おれおれ Advent Calendar 2011 – 15日目

JavaScriptの関数は関数オブジェクト(Functionのインスタンス)なので、メソッドを使う事ができます。中でも最も使用頻度が高いのが .apply()だと思います。

.apply()を使うとその関数を実行する事ができます。……というと「はてな?」ですが、着目すべきは実行する際のコンテキストと引数を自由に設定できるという点です。

例えば配列風のオブジェクトを考えます。このオブジェクトは配列じゃないので、Arrayインスタンスなら使えるはずのメソッドが使えません。

var arr = ["a", "b", "c"];
console.log(arr.length);  // => 3
console.log(arr[1]);  // => "b"
console.log(arr.join("/"));  // => "a/b/c"

var obj = {
  "0": "a",
  "1": "b",
  "2": "c",
  length: 3
};
console.log(obj.length);  // => 3
console.log(obj[1]);  // => "b"
console.log(obj.join("/"));  // TypeError: 'join'というメソッドはない

配列じゃない、でも配列のメソッドを使いたい……という時に便利なのが .apply()です。

(さらに…)