著者:杉浦
javascriptの比較演算子==、!=と===、!===
==、!=と===、!===は曖昧な比較と厳密な比較です。==、!=と===、!===を使い分ける事で以前書いた暗黙の型変換に悩まされない比較を行うことができます。
javascriptは暗黙の型変換を行う言語です。暗黙の型変換とは、黙って値の型（文字列、整数、真偽値等）を変える、という動作です。この暗黙の型変換は便利な一方で予期せぬ挙動を引き起こすことがあります。例えば、次の関数を考えます。この関数が行いたいことは、引数の値を+1して返す、ということです。
(inc = function(v){
return v+1;
})();
この関数は次の結果を引き起こします。
a=inc(2);
//aは3
a=inc("2");
//aは"21"
javascriptは親切にも文字列型である引数に合わせて、数値として扱いたい1を文字列型に変換してくれました。この様に暗黙的な型変換をして欲しくない時があります。if文では次の様なコードが例に挙げられます。
(hoge = function(msg){
if(msg == ""){
//msgが空なら返す
return;
}
//msgを使ったして欲しい処理
})();
javascriptは数値0を文字列””に暗黙的に変換します。そのためmsgに格納されている値が数値0の場合、動作はifの中に入り込み、msgを使ったして欲しい処理を行わずにhoge(msg)を抜け出すものになります。==、!=は比較の際に暗黙的な型変換を行う比較演算子なのに対し===、!==は比較の際に型変換をさせない比較演算子です。これを用いて次の様に記述した場合、msgに格納されている値が数値0であってもif文の中に入り込まずに、msgを使ったして欲しい処理を行います。
(hoge = function(msg){
if(msg === ""){
//msgが空なら返す
return;
}
//msgを使ったして欲しい処理
})();
著者:杉浦
呼び出し側を気にしない引数、デフォルト引数
関数には引数がつきものです。ソースコード中のある関数を変更する際、関数中の引数を増やしたくなる時があります。しかしながら、単純な関数の引数部分の変更は関数の呼び出し側の変更も引き起こします。関数がどこで呼び出されているのか探すのは手間です。良い命名がされているならば複数ファイル中の文字列検索でどうにかなりますが、その様でないコードは少なくないです。目的が機能の追加であり、既存部分の機能が変わらないとなればなおさらやりたくないものです。そのような時に、この呼び出し側を気にしない引数であるデフォルト引数が役に立ちます。
デフォルト引数の書き方は次です。
void makecoffee(type = 'black'){/*処理*/}大体の言語は同じように引数欄に”引数名=引数のデフォルト値”と設定できます。デフォルト引数の動作は、呼び出された時に引数が足りない場合は引数に設定されたデフォルト値が代入されて動く、引数が足りている場合は呼び出し側の値が代入されて動く、といった具合です。これで引数が足りないという構文エラーを回避して、僅かな書き換えで引数を追加できます。余談ですがjavaはこのデフォルト引数機能がありません。私の触れた周りでは関数の追加で解決していることが多かったです。次の様に引数の数が異なる呼び出し用関数を追加するわけですね。
void makecoffee(){makecoffee('black')}//0個の引数で呼び出される関数makecoffee()。固定された値を引数にしてmakecoffee(type)を呼び出す。
void makecoffee(type){/*処理*/}//1個の引数で呼び出される関数makecoffee(type)。
javaの様な同じ関数名を許容する言語の場合、この引数の異なる関数の追加は特に自然な感じで作れます。
著者:杉浦
javascriptの一時的な関数、即時関数
javascriptには即時関数という機能があります。
即時関数 (IIFE; Immediately Invoked Function Expressions) は、関数がブラウザーのコンパイラーに読み込まれた直後に呼び出される関数です。IIFE は、関数宣言の末尾に追加の括弧 “()” があるかどうかで識別できます。
Function (関数) – 用語集 | MDNより引用。
書き方は
(function(){/*処理本文*/}(引数));
(function(){/*処理本文*/})(引数);
です。どちらでも問題ありません。即時関数と名付けられていますが、動作からは一時的な関数とも言えます。即時関数は
関数のインスタンスを作る その関数を実行する その関数を捨てる（ステートメントの実行を終了したあとはもう参照しないので）
Bear Bibeault; John Resig. JavaScript Ninjaの極意 (Kindle の位置No.2730-2732). . Kindle 版. より引用。
ということを行います。
即時関数が用いられる主な目的はスコープの制御です。スコープは変数名の参照範囲のことです。変数名ごとにスコープが定められており、スコープの範囲内ならば変数を呼び出し、書き換えることができ、範囲外ならば呼び出せず、書き換えられないといった具合です。
即時関数内で宣言された変数は宣言された即時関数内のみがスコープになります。このため、あるコードを即時変数として記述したならば既存のコードの変数名を考慮することなくそのコードを既存のコードに継ぎ足せます。特に即時関数に出番があるのは、任意のページに好き勝手スクリプトを追加する目的であるブックマークレットや変数名の衝突が容易に予想できる圧縮される予定のコードなんかです。
著者:杉浦
調和のとれた色のセットを出力してくれるAdobe Color CC
カラーホイール | カラースキーム – Adobe Color CC
“Adobe Kuler の使用方法”
Adobe Color CCは調和のとれた色のセットを出力してくれるwebアプリです。画面上のカラーホイール中のルーペをぐりぐり動かせば、他のルーペも連動して動いて、調和を維持したまま様々な色のセットを出力してくれます。Colorハーモニーが調和の種類の変更です。モノクロからきれいな多色まで様々です。
画像の読み込みでは画像からは、その画像に沿った色のセットを読み込んでくれます。
探索からは多数のユーザが作成した色のセットを探せます。
著者:杉浦
CSSの適用優先度
CSSはHTMLに装飾を付ける仕組みで、主にその詳細度から適用の優先順位が決まります。要素名、クラス、ID、HTML中の直書きと適用される範囲が狭く詳細になるほど優先されます。定義はSelectors Level 3でされていますが、ご存知、ないのですか？CSSの優先順位の説明が大変分かりやすかったです。
次の図は”ご存知、ないのですか？CSSの優先順位”からの引用です。
図の様に指定方法の種類別総和が優先度になっています。この優先度の特徴として、IDの様なより詳細な種類の指定方法が用いられていた場合、どれだけクラスの様なより詳細でない種類の指定方法を重ね掛けても優先度で上回れないという点があります。優先度が同値の場合、後から読み込まれた方が優先されます。
生のCSSではこの優先度を表記してくれません。人間がこの優先度を理解しながらCSSを読み解くのは難しいです。Specificity Calculatorは優先度計算ページです。下図の様に、CSSコードを書きこめば優先度を出力してくれます。計算機を増やしたいならば、Duplicateボタンで複製しましょう。
著者:杉浦
計算に強い質問応答システムwolfram alphaの紹介
wolfram alphaは計算に強い質問応答システムです。質問応答システムとは既に用意してある解答を返すのではなく、質問に応じて解答を作成して返すシステムのことです。wolfram alphaは複雑な計算問題でも解答を教えてくれます。wolfram alphaはまるで検索エンジンの様にふるまいます。下図の様に、調べたいものの文字列を入れれば、調べたいものの様々なデータ（実画面の下の方にはアクセス数とかも）が、数式を入れれば、数式に関する解答が、返ってきます。
大変、便利なのですが、これはどうやって質問すればよいのだろう、と悩むことが往々にしてあります。
※What is the fifty-second smallest country by GDP per capita?の様なシンプルな質問なら自然言語で対応してくれます。
次の文は線形計画問題に関する質問文です。
Minimize[{x + 2 y, -5 x + y == 7 && x + y >= 26 && x >= 3 && y >= 4}, {x, y}] 予備知識なしにこの構文で質問を行える人はまずいないでしょう。これはwolframalphaがMathematicaという製品の上に成り立っているからです。Mathematicaの簡単なリファレンスは次です。
Wolfram言語 ＆ システム ドキュメントセンター
MathematicaはWolfram言語という言語で動作する製品です。ここに載っている変数に値を格納する必要がない数式系のコードは大体そのままの構文で動きます。
著者:杉浦
プログラミングに関する知識を記録・共有するサイト、Qiitaの紹介
Qiitaはを知っている人がプロアマ問わずに様々な記事を投稿しているサイトです。
Qiitaより引用。
この様に書いてありますが、Qiitaに投稿されている記事はプログラミングに関する記事が主流というだけで、職業技術者向けのマネジメントだったり、技術で遊びたい人向けアプリケーションの使い方の記事だったり、プログラミング以外の記事も少なくないです。ぱっと見のこのサイト自体はいささか質素ですが用意されている検索機能やAPI、Qiitaに投稿されているQiitaをローカル側のみでより便利に使うプログラム、などを用いることで特に便利に使えます。
著者:杉浦
色の表現、RGBとRGBA
コンピュータが色を表す方式の中にはRGB、RGBAというものがあります。RGB表現はR(赤）、G（緑）、B（青）の三色の要素の強さで色を表しています。RGB全て取りうる範囲は[0,255]で、要は8bitで整数になる範囲です。RGBA表現はRGB表現にAlphaという要素を加えた色の表し方です。ほぼ全ての場合でAlphaは透明度として扱われます。A=[0,1]であり、非透明度の割合を示します。A=1(非透明度=100%)の場合、RGBA表現のRGB要素の値はRGB表現のRGB要素の値と全く同じになります。bitmapフォーマットは各ピクセルのRGBA値が延々と並んでいて、古い画像は8bit*4=32bit/pixelなデータが多いです。ハードの強化、高画質化に伴って64bit/pixelなデータも増えてます。
RGBAによって表現される色は、自身の持つA要素である透明度、自身の持つRGB要素である描画色、重ねて塗られる対象のRGB要素である背景色、の計算から導かれます。計算はいたって単純な重みづけ平均で、次式の通りです。
(1 - A) * rgb_of_background + A * rgb_of_drawing = rgb_of_output
A:透明度。RGBA表現のAlpha要素。スカラー。
rgb_of_background:背景色。RGB表現。3x1行列。
rgb_of_drawing :描画色。RGBA表現のRGB要素。3x1行列。
rgb_of_output :出力される色。RGB表現。3x1行列。
先ほど”A=1(非透明度=100%)の場合，RGBA表現のRGB要素の値はRGB表現のRGB要素の値と全く同じになります。”と述べました。A = 1ならば
rgb_of_drawing = rgb_of_output
あり出力される色は描画色と等しくなり、描画色のRGBの三要素のみで色を表しているわけです。
透明度を使用することで背景色を考慮した色を出力することができます。これは例えばデザインに用いるような汎用的なライブラリで使われます。
例えば、googleの公開しているマテリアルデザイン用ライブラリ、Material Design Liteでは
rgba(0,0,0,0.12)、rgba(158,158,158, 0.20)の様な、色の濃淡のみを変更するような使い方にrgbaを活用しています。
著者:杉浦
画面切り抜きツールSnippingToolの紹介
Snipping Tool を使ってスクリーン ショットをキャプチャする – Windows Help
SnippingToolはPCのスクリーンショットを行う便利なツールで、Windowsで標準提供されています。詳しい機能は上のリンクにあるWindows Helpを見ればよいかと思います。
SnippingToolの利点は画面の一部を保存するという作業を容易に行えることです。PrtScrで画面をクリップボードに保存、ペイントを開いて貼り付け、ペイント内で操作して画像を加工、保存、という手間な作業はほとんどSnippingTool上で行えます。（あんまり複雑な画像の加工はできません。ペイントの部分がもっと多機能な画像処理ソフトだったりするとクリップボード→画像処理ソフトの方が楽だったり）
SnippingToolを開く。Ctrl+Nで新規作成、範囲選択、Ctrl+Sで保存画面へ移動、名前変更、Enterかクリックで保存、がショートカットキーを使った基本動作になります。
以下覚えておくと便利な機能
| 操作 | 機能 | 使用状況の例 |
| 切り抜き画面でShift + 方向キー | カーソルを移動して、四角形の領域切り取りの領域を選択する | 絶妙な範囲を切り抜きたい時に使用 |
| Alt + D | キャプチャを 1 ～ 5 秒遅延する | クリック中のみポップアップの様な何かしらのSnipping Toolの動作と競合する状態の画面を撮りたい時に使用 |
著者:杉浦
javascriptの論理演算子
javascriptは暗黙的な型変換を行うことによってboolean(真偽値)でない値が格納されている変数をboolean同然に記述することを許しています。javascriptの論理演算子はこの仕組みを利用することで便利な拡張がなされています。javascriptの論理演算子&&、||についての記述の引用が次です。
The value produced by a && or || operator is not necessarily of type Boolean. The value produced will always be the value of one of the two operand expressions.
引用：ECMAScript 2017 Language Specification 12.13 Binary Logical Operators
意訳すると、”&&や||によって返される値が真偽値である必要はありません。返り値は常に2つの被演算子のうちの片方の値になります。”、となります。
具体的に&&や||はMDNの論理演算子のページにある次の表の通りに動作します。
| 演算子 | 使用法 | 説明 |
|---|---|---|
論理 AND(&&) |
expr1 && expr2 |
expr1 を false と見ることができる場合は、expr1 を返します。そうでない場合は、expr2 を返します。したがって、真偽値と共に使われた場合、 演算対象の両方が true ならば、&& は、true を返し、そうでなければ、false を返します。 |
論理 OR (||) |
expr1 || expr2 |
expr1 を true と見ることができる場合は、expr1 を返します。そうでない場合は、expr2 を返します。したがって、真偽値と共に使われた場合、 演算対象のどちらかが true ならば、|| は、true を返し、両方とも false の場合は、false を返します。 |
論理 NOT (!) |
!expr |
単一の演算対象が true と見ることができる場合は、false を返します。そうでない場合は、true を返します。 |
引用：論理演算子 – JavaScript | MDN
論理値の真偽が確定した時点の被演算子が返されるわけですね。この論理演算子を用いて真偽値以外の値を得ようとする際に注意するべきなのが論理 NOT (!)です。この論理演算子は被演算子を真偽値として見たときの値（true or false）を返すため、論理式に!が含まれていた場合、被演算子のいずれかが返ってくる保障が薄くなります。
論理演算子を真偽値以外の目的で使用している例：
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>このコードは、window.jQueryが実行可能ならばwindow.jQueryを、window.jQueryが実行できないならばdocument.write(‘<script src=”js/libs/jquery-1.7.2.min.js”><\/script>’)を実行する、というコードになります。