著者アーカイブ 杉浦

著者:杉浦

javascriptの論理演算子

 javascriptは暗黙的な型変換を行うことによってboolean(真偽値)でない値が格納されている変数をboolean同然に記述することを許しています。javascriptの論理演算子はこの仕組みを利用することで便利な拡張がなされています。javascriptの論理演算子&&、||についての記述の引用が次です。

Note

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>’)を実行する、というコードになります。

著者:杉浦

javascriptの真偽値

 javascriptは暗黙的な型変換をよくしてくれる言語です。javascriptで真偽値が入りそうな演算を真偽値でない値で実行した場合、真偽値でない値を真偽値に暗黙的に変換します。javascriptである値を引数として真偽値に変換をする関数は次の表に従って変換を行います。

Table 9: ToBoolean Conversions
Argument Type

Result

Undefined

Return false.

Null

Return false.

Boolean

Return argument.

Number

If argument is +0, -0, or NaN, return false; otherwise return true.

String

If argument is the empty String (its length is zero), return false; otherwise return true.

Symbol

Return true.

Object

Return true.

引用:ECMAScript® 2017 Language Specification 7.1.2 ToBoolean
この表の肝要なところは引数が存在している様な値(なにか適当な実体がある感じ)ならtrue、存在していない様な値(未定義、null、NaNなど)ならfalseを返してくれるところです。このためjavascriptは

if(hoge !== '' && hoge !== null){console.log('hogeはtrue';)}

とのようにしなくとも

if(hoge){console.log('hogeはtrue');}

とするだけで存在の判定を大体やってくれます。ただ、int型等の数値を同じ様に書くのは注意です。0ならばfalseという変換にひっかかります。C言語やら01の世界やらで0(int)は大概、偽とされており、おそらくこの考えを引き継いでいるためjavascriptでは0ならばfalseに変換されます。

著者:杉浦

オープンソース配信サービス、Google Hosted Librariesの紹介

 Google Hosted LibrariesはHosted Librariesという名のGoogleのサービスの一つです。Google Hosted LibrariesはオープンソースのJavaScriptライブラリを配信しているサービスです。

<script src="https://jax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

の様に配信されている各アドレスを宣言することで対応するライブラリを使用できます。
 これをブックマークレットに用いることで便利なライブラリを使って楽にブックマークレットを作れます。また、管理者が異なるサイトであってもライブラリ部分のキャッシュを用いることができる場合がある、ライブラリの配置の手間を省ける、といった利点もあります。一方でGoogle Hosted Librariesを使うことはライブラリを用いたものの管理の一部をgoogleに任せるということでもあります。CDN(Content Delivery Network)が使用不能な対策はネット上に多く転がっていますが、Google Hosted Librariesの場合は次の様に

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

引用:jQueryをロードする際のナイス!と思った書き方
存在確認とローカルのライブラリを呼び出すコード追加をorで結べばよいでしょう。

著者:杉浦

ブックマークレットの紹介

 多くのブラウザ(IE、Chrome、Firefoxなど)にはブックマークレットという仕組みが備わっています。ブックレートとは、おおまかにはjavascriptのコードを実行してくれるブックマークです。ウェブページの代わりにスクリプトをブックマークするようなものです。
 ブックマークレットの書き方は次の画像の通り

URL欄にjavascript:と宣言した後にjavascriptのコードを入れて、保存するだけです。画像はページ中の全てのdivタグを含んだNodelistをコンソールに表示するコードです。何かいい感じのコードをググって使ってよし、自分で作ってよしです。
 ブックマークレットは生のjavascriptコードを利用するものです。そのためそのままでは便利なライブラリが使用できません。また、複雑な処理をするには文字数制限が壁になる時があります。その時は

javascript:(function(){var scr=document.createElement("script");scr.src="http://hoge.com/hogehoge.js";document.body.appendChild(scr)})(); 

の様に、外部からjavascriptのコードを呼び出しして書き込む、コードをを入れるとよいです。ライブラリにはjQueryの様なメジャーなライブラリもあります。そのような衝突が起きかねないコードを安全に呼び出すには

(function(func) {
    var scr = document.createElement("script");
    scr.src = "//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js";
    scr.onload = function() {
        func(jQuery.noConflict(true));
    };
    document.body.appendChild(scr);
})(function($) {
    console.log($().jquery);
});
(引用ブックマークレットで jQuery を使う魔法の 210 文字 - Qiita

といったコードがよいです。

著者:杉浦

マテリアルデザインのさわり

Design – Material Design
マテリアル・デザインって何? Androidデザイン責任者にインタヴュー | ギズモード・ジャパン
 マテリアルデザインの思想が理想とするデザインは脳にスッと入ってくるデザインです。
マテリアルデザインは一貫性のある法則を持つ世界の上でデザインを行うことで、脳にスッと入ってくるデザインを実現しようとします。一貫性のある法則には実世界の一部を再現するような法則が用いられています。ここで一部、とあるのはマテリアルデザインの目的がユーザの理解の促進にあるからです。理解を妨げて、処理を重くするだけの余分な法則を再現する理由はありません。主な法則は、実世界において紙を重ねた時に起きる現象を再現する直感的な法則です。例えば、ページはhogehogeとかかれたカードの集まり(並べてもいいし、重ねてもいい)で構成される。これは実世界の紙を重ねた時の状態を再現する法則です。他には、カード内から画像や文字ははみ出さない、下の要素には上の要素の影が落ちる。これはそれぞれ、紙面からはみ出して宙に浮く画像や文字はない、下の物体には上のカードの影が落ちる、という実世界上の法則の再現です。
 マテリアルデザインの効果の一例が次です。
ヘッダに影がない

ヘッダに影がある

 影がついた場合ヘッダが下の記事欄から独立していることがわかるため、スクロールをしてもヘッダが固定されると連想しやすくなります。

著者:杉浦

セレクタによる複数選択から個々の要素を操作する

 ここで扱うセレクタは複数の要素を選択できるjQueryの$()とjavascript備え付けのquerySelectorAllの二つです。$([“属性名=’value'”]),querySelectorAll([“属性名^=’value'”])で条件式に合った要素が返ってきます。このvalueの中で正規表現が使えます。比較演算子は次の表です。

|= valueか、-valueが属性名な要素を選択
*= 部分一致。valueを含む文字列が属性名な要素を選択
~= スペースで区切られた複数の属性名を持つ要素が主な対象。valueな属性名を含む要素を選択。
$= 後方一致。末尾にvalueを含む文字列が属性名な要素を選択
= 完全一致。valueが属性名な要素を選択
!= 否定。valueでない文字列が属性名な要素を選択。属性名がない要素も選択。
^= 前方一致。先頭にvalueを含む文字列が属性名な要素を選択

querySelectorAllの返り値はNodelist型のため配列に変換しないと煩雑です。変換には次のコードが使えます。

Array.prototype.slice.call(document.querySelectorAll("属性名=value"))

次のようなArray.from()ならさらに楽です。

Array.from(document.querySelectorAll("属性名=value"))

Array.from()はこれを書いている時点でブラウザによる対応が怪しいです。対応表は次になります。Can I useも次の対応表へ案内してくれます。
ECMAScript 6 compatibility table
well-known symbolsの行が完全対応なら大丈夫なはずです。Array.fromが使えないなら上のArray.prototype.slice.callです。
 配列を

arr.forEach(funcion(a){/*処理*/});

なコードの様に扱うと処理が短く色々書けます。jQueryのイベント付与処理なら$(“#”+a.id).click(function(){/*click時処理*/})の様な具合です。
次のコードな正規表現で各文字列の差分を取る(最初の属性選択時の共通部分以外を抜き出す)ことでさらに使う幅が広がります。

a.属性名.replace(/^value/g,”) 前方一致したvalue部分を空にする
a.属性名.replace(/value$/g,”) 後方一致したvalue部分を空にする
a.属性名.replace(/value/g,”) 部分一致したvalue部分を空にする

属性名の命名規則をかっちりしていれば正規表現で楽にコーディングできます。

著者:杉浦

ブラウザ対応状況参照サイトCan I useの紹介

 Can I use… Support tables for HTML5, CSS3, etc
 このサイトはIE、Chrome、Firefox等の各ブラウザがCSS、HTML5、JavaScript等の各技術をサポートしているかどうかを容易に調べることのできるサイトです。
 使い方はCan I use ____?とある検索ボックスに調べたい要素を打ち込むだけ。画面に出てきたブラウザとバージョンが示された箱の色が緑なら対応、赤なら非対応を示します。Settingでは表示されるブラウザの最小シェアや地域におけるシェア、特定のブラウザ、技術のカテゴリ、などの表示非表示などを設定することができます。

 一度に一文字列しか検索できない、大きな検索結果を一つずつ表示する、といった形のためあるページ中に使用されている技術を網羅する、の様な使い方には手間がかかるのが玉に瑕ですが、それを除いても便利です。また、検索結果の各技術にはresourcesの名で仕様、リファレンスなどのリンクがあり詳しく調べたい際に有用です。

著者:杉浦

モンティホール問題

 モンティホール問題は直感と実際の確率が違うと感じやすい問題として知られている問題です。wikipediaから問題文引用

「プレーヤーの前に閉まった3つのドアがあって、1つのドアの後ろには景品の新車が、2つのドアの後ろには、はずれを意味するヤギがいる。プレーヤーは新車のドアを当てると新車がもらえる。プレーヤーが1つのドアを選択した後、司会のモンティが残りのドアのうちヤギがいるドアを開けてヤギを見せる。
ここでプレーヤーは、最初に選んだドアを、残っている開けられていないドアに変更してもよいと言われる。プレーヤーはドアを変更すべきだろうか?」

 正答は「変更した方がよい」です。しかし、私含め多くの人は直感的に変更してもしなくても変わらないと思います。
 この問題を納得しやすく説明する方法は、起きうるパターンを全て書きだしたり、はずれの数とはずれを開ける数を極端に増やして考えてみる、といったものをはじめとしていくつもあります。私は、「ヤギがいるドアを開けてヤギを見せる。」というくだりを「あなたが決めたドアでも正解の宝箱でもないドアを開けて~」と言い換える説明がしっくりきました。

著者:杉浦

デメテルの法則

wikipediaから引用

基本的な考え方は、任意のオブジェクトが自分以外(サブコンポーネント含む)の構造やプロパティに対して持っている仮定を最小限にすべきであるという点にある。

 この法則の考え方の目的はコーディング上のケアレスミスによるバグの発生予防にあります。この考えは特にグローバル関数を用いずゲッター、セッター、ローカル関数を用いることで実現されます。
 各種プログラミング言語にはグローバル変数という便利な仕組みがあります。グローバル変数はクラス、メソッドをまたいでどこからでも参照できる変数です。グローバル変数を用いた場合、様々な制約を無視してコーディングができます。一方でグローバル変数を多用して巨大なり長大なりなコーディングを行った場合、思わぬところでグローバル変数が使用されていて思わぬ動作を起こすという事故を引き起こします。
 getter、setterはあるオブジェクトの保持する変数をget(呼び出し、受取)、set(代入)する目的の関数のことです。例:オブジェクトAの持つ変数nameをgetする関数nameGetter、オブジェクトBの持つ変数telに任意の値をsetする関数telSetter
 デメテルの法則にしたがった場合、グローバル変数を多用することはなく、getter、setterを用いてコーディングを行います。これを行った場合、不意にある値を呼び出すことそのものが少なくなるため、ある値に想定外の動作をさせるということが減ります。つまりグローバル変数と大して変わらぬ便利さで安全にコーディングを行えます。
 一方でデメテルの法則を守った場合、コーディングの際の手間が増えます。ある変数を作るたびにgetter、setterを作るべきか考える必要があったり、そもそも打ち込む文字数が増えたりします。最も打ち込む文字数の方に関してはIDE(統合開発環境)がgetter、setterをショートカットキーでパパっと作ってくれたり、打ち込みたい関数名を予測してくれたりで楽ができます。また、IDEを使う前提を考えた場合、IDEが色なりなんなりで今扱っている変数がグローバルなのかローカルなのか等々色々示してくれます。結局安全性と生産性のトレードオフになりがちなので、こういう考え方があるということを頭に入れておくぐらいがいいのかもしれません。
 getter、setterを用意しているからと言っていたるところでいたるところをガンガン書き換えるプログラミングはやめましょう。手間もかかるしバグも起きるしでただ辛いです。

著者:杉浦

chrome開発者ツールのコンソールでDOM操作を行う

 これはjavascriptを用いた開発で特に役に立つと思います。”javascriptのソースコードでやりたいDOM操作のコーディングを行う→目的のページをリロード→チェック→コーディング再開”なんてことがめんどくさい時に使えます。 GoogleChromeなどの多くのブラウザにはショートカットキーF12で開ける開発者ツールが備わっています。この開発者ツールのコンソールからjQuery付javascriptとほぼ同じ言語でDOMの操作ができます。
 要素を対象にとる

$(selecter),$$(selecter)

 document.querySelector(),document.queryAllSelector()と同じです。jQueryのセレクタと同じ記法です。どちらも対象が一つのみでも配列扱いをするので操作に注意がいります。要素の展開から属性なりイベントなりの色々が読み取れます。

*.children,*.firstChild,*.parentNode,...

 ちゃんと説明書を読んだわけでないので断言できませんがjavascriptに入っている要素参照操作が備わっているようです。

*.innerHTML,*.outerHTML

 連鎖して何かを呼び出せませんが一括操作に有用です。
DOMを操作する

*.append(),*.removeChild(),insertBefore(),…

 ちゃんと説明書を読んだわけでないので断言できませんがjavascriptに入っているDOM操作が備わっているようです。
便利

* = *,if,while,for

 変数を持つことも分岐、繰り返しを行うこともできます。ほぼ対話的なjavascriptです。

clear()

 画面をきれいにします。

コンソール上のDOMの階層要素を右クリック→Expand recursivelyを実行

 DOMの要素を再帰的に展開、要は全部展開します。コンソール上の参照されたDOM要素はElementPanelのDOM要素に近い機能を備えています。

コンソール上の適当な隙間で右クリック→Save as...

 コンソール上の操作のログを保存します。直接Command Historyを開く命令がみあたらないのでこれで代用です。正直手間な感じはします。