著者アーカイブ 杉浦

著者:杉浦

オープンソース配信サービス、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）

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

著者:杉浦

ブラウザ対応状況参照サイト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を用意しているからと言っていたるところでいたるところをガンガン書き換えるプログラミングはやめましょう。手間もかかるしバグも起きるしでただ辛いです。