js で文字列が色かどうかを見分ける方法

こんにちはー。

js から css の backgroundColor や、color など、色を指定することがよくあります。
しかし、その時、色でない文字列が backgroundColor などに指定されると、
正しい結果になりません。

今回は、色である文字列が指定されているかを判別する方法を紹介します。

やりたいこと

次のサンプルを見てください。

See the Pen Jsで文字列が色かどうかを判別する by shundroid (@shundroid) on CodePen.0

textbox に、bluergb(255,0,0)を指定して、「判別」ボタンを押すと、「色です」と結果が返ってきます。
しかし、hoge や、1 を指定すると、「色ではありません」となります。

では、この仕組みを説明します。

isColor 関数を実装する

サンプルでは、次のような関数が定義されています。

function isColor(color) {
  var testElement = document.createElement("span");
  testElement.style.backgroundColor = color;
  return testElement.style.backgroundColor !== "";
}

この関数に引数として文字列を指定すると、その文字列が色に変換できるかを返します。

仕組み

testElement.style.backgroundColor のデフォルトの値は "" です。
これに、色に変換できる文字列を指定すると、backgroundColor の値が変化します。
しかし、不正な値が指定されると、backgroundColor の値は変化しません。
これを利用して、testElement.style.backgroundColor !== "" で、
backgroundColorがデフォルトの値でないかで判別しています。

【Canvas】mousemoveのタイミングで円を描くときに円が離れてしまう問題

こんにちはー。

前回、arc を使って描いた時、円が散らばらないようにする方法を紹介すると書いたので書きます。

【JS】Canvasで丸や四角で「消す」方法
こんにちはー。題名のとおり、Canvas の「消す」機能で、丸などに形を変える方法を紹介します。「消す」機能についてまずはじめに、消す方法としてのルールを書いておき...

まず、下の例を見てください。

うまくいかない例

See the Pen Canvas Mousemove 円で描いてうまくいかない例 by shundroid (@shundroid) on CodePen.dark

よくありがちなコンテンツです。
mousemove のイベントが発生した時に円を描いているわけですが、
めっちゃ速く動かして書くと、円と円の間が空いてしまいます。

今回は意外と初歩的なことかもしれませんが、
この、間が空かないようにする方法を描きます。

moveToとlineToを使う

実際に moveTo と lineTo でやった例は、こちらです。

See the Pen Canvas mousemove lineToとmoveTo by shundroid (@shundroid) on CodePen.dark

この方法は、円で描くのではなく、線で描いています。
そのため、円と円の間が描けるわけです。

では、使っている関数を紹介したいと思います。

moveTo 関数

線の始点を指定します。
ここでは、ひとつ前の mousemove での座標、もしくは mousedown での座標を指定しています。

lineTo 関数

lineTo で指定した始点から、
線を引くときの終点を指定します。
ここでは、現在の座標を指定しています。

色を変えるには

CanvasRenderingContext2D.strokeStyle で取得・変更できます。

var ctx = canvas.getContext("2d");
ctx.strokeStyle = "red"; // 赤
ctx.strokeStyle = "green"; // 緑

参考: https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/strokeStyle

太さを変えるには

CanvasRenderingContext2D.lineWidth で取得・変更できます。
円で描いた時は、arc メソッドの第3引数で指定していたので、それの代わりです。

var ctx = canvas.getContext("2d");
ctx.lineWidth = 100;

詳しいサイト

Canvasで使える関数が紹介されています。
「こんな機能あったんだ~」という新発見もあるので、一度見てみてください!

【JS】Canvasで丸や四角で「消す」方法

こんにちはー。
題名のとおり、Canvas の「消す」機能で、丸などに形を変える方法を紹介します。

「消す」機能について

まずはじめに、消す方法としてのルールを書いておきます。

  • 白く塗る はダメ!(背景が白でない場合があるため)
  • 消した部分は透明になるようにする。

実装のポイント

context の globalCompositeOperation を、destination-out に変更すると、
fill や stroke で指定した領域を 切り取る ことができます。

また、このプロパティは、その他いろいろな値に変更できます。

サンプル:円形で消す

globalCompositeOperationを変更した状態で、arc メソッドを呼ぶことでできます。

var ctx = document.getElementById("xxx").getContext("2d");
function eraseArc() {
  ctx.globalCompositeOperation = "destination-out";
  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, Math.PI*2, false);
  ctx.fill();
}

arc() の引数

arc(中心x, 中心y, 半径, 開始角度(ラジアン), 終了角度(ラジアン), どっち回りか(true→反時計回り))

応用例

See the Pen Canvas Erase By Arc by shundroid (@shundroid) on CodePen.dark

  • チェックボックス ON:描く、OFF:消す(globalCompositeOperation で切り替えています)
  • 背景色を変更で、消した部分が透明になっていることを確認できます

掲載したサンプルコードでは、ctx.arc で描画していますが、
このサンプルは mousemove で動いた時に描いているので、arc で描くと円が散らばってしまい、うまく描けません。
そのため、moveTo と、lineTo を使って描いています。

この方法については、次回ブログで書きたいと思います。

「消す」モードを戻したい

このままでは、常に stroke や fill した部分が切り取られてしまうため、
元の値に戻しておきましょう。
デフォルトの値は、source-over です。

var ctx = document.getElementById("xxx").getContext("2d");
ctx.globalCompositeOperation = "source-over";

js の正規表現で、「完全一致」でマッチする

こんにちはー。

機会があって、
正規表現で「完全一致」のテストの方法が知りたくなりました。
今日はその方法を紹介します。

どういうことがしたいのか

/abcde/.test("abcde"); // true
/abcde/.test("abcdef"); // これも true

このような場合だと、
1行目のようなテストする文字列がパターンと同じ場合、 true になりますが、
含んでいる場合(2行目)も true になってしまいます。
これを、2行目が false になって、1行目だけ true になるようにしたいんです。

完全一致したいとき

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

次のようにすればできました!

/^パターン$/

^が先頭を表し、$が末尾を表します。
だから、それにパターンを挟む形でやれば「完全一致」でマッチできます。

例:

/^下$/.test("下"); // true
/^下$/.test("下町"); // false
/^下$/.test("上下"); // false

メリットは・・?

なら、「if ("下" === "下") {}」でよくない?
と思うかもしれません。
たしかに上の例ではそうですが、
正規表現で比較すると、様々なメリットを得ることもできます。

「完全一致」の or 検索

例えば、次のように書いたとしましょう。

var reg = /^(下|上)$/;

こうすれば、or でのテストもできますよ~

使用例:

/^(下|上)$/.test("下"); // true
/^(下|上)$/.test("上"); // true
/^(下|上)$/.test("上下"); // false
/^(下|上)$/.test("上野"); // false

その他、いろいろな「特殊文字」が使える

完全一致と言っていいのかわかりませんが、
? や、. などの特殊文字も使えます。

どれか1文字にマッチする

. を使います。

/^A.C$/.test("ABC"); // true
/^A.C$/.test("AC"); // false

※ 改行文字にはマッチしません。
  改行文字にマッチするには、\n や、\s(スペースなども含む)を使用します。

直前の文字の1回以上の繰り返しにマッチする

+ を使います。

/^AA+B$/.test("AAB"); //true
/^AA+B$/.test("AAAAAAAAAAAAAAAAB"); // true
/^AA+B$/.test("AB"); //false

※繰り返さない場合(0回以上の繰り返し)にもマッチするときは、* を使います。

その他の特殊文字の意味と使い方は、MDN の記事をご覧ください。

感想

学んでいて、
正規表現って、実用性が高いんだな☆と気づきました。

voidを使えば、アロー関数 で{}が省ける。

こんにちはー。

今、void を使えばアロー関数で{}がいらないんじゃないか説が、
ふと頭のなかを通り過ぎて行きましたので紹介いたしますー。

「void 演算子で、アロー関数の {} がいらない気がする」ということです。

普通に {} はずせばいいのでは?

まず、通常のアロー関数の{}なしの使い方です。
普通の関数がどんどん短くなっていく過程をご覧ください。

// function 式
var a = function (a) { return a + 2; };

// アロー関数にそのまましてみた
var a = (a) => { return a + 2; };

// 引数一つだから () いらない。
var a = a => { return a + 2; };

// 中身 1行で return で返されているから {} いらない。
var a = a => a + 2;

こんな感じですかね。
では、次のような例だとどうでしょう。

var num = 0;

// function 式
var b = function () { num++; }

// アロー関数にそのまましてみる
var b = () => { num++; }

// () はずしたいけどはずせない。
// {} はずしたいけど、戻り値ないから・・

そうです。戻り値が void のとき(あ、言っちゃった☆)です。
もし、このまま {} をはずせば、戻り値として num が帰ってきてしまい、
意図した結果にはなりません。
 
 
 
 
 
さあ、どうしても {} が外したい・・(←なんで?)
どうしよう・・・
 
 
 
 
 
そんなときは、void の出番です。
void を使えば、{} を外すことができます。

// void があらわれた!!
var b = () => void num++;

それはなぜだ?

void ってなに?

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/void

void は、式を実行するけれど、undefined を返すという演算子なのです。
知っていたけれど、使い方はあまり良くわかっていませんでした。
今まで知っていた使い方は、こんな感じです。

if (a === void(0)) {} // undefined か判定する
if (a === void 0) {} // こちらでも良い
// でもこれは・・
if (typeof a === "undefined") {} // これで良かった。

// + 下の「ちなみに」(SyntaxErrorだな・・)

また、<a href="javascript:void(0)">hoge</a> として、
リンクは反応するけれどどこにも行かない、みたいな使い方もできるそうです。

まとめ

実用性があるかどうかはわかりませんが、
ちょっとした発見だったので、投稿しました。

まあ、void で 4 文字、{} で 2 文字で、ちょっと負けていますが、
使いたい人がいればどうぞ!!

ちなみに

void を知ったきっかけについて

最初 js 書いていた時、
C# の癖で、function のことずっと void って書いていたからです。

なぜこんなに {} が外したいのか

最近、できるだけ短くコードを書くのにハマっているからです。
「行末に ; つけると、1行で書けるよー」・・・はい。