よく使うものを用意すると記述が楽になる

原森サイトでは、自分専用の関数ライブラリをいろいろ作っています。
目的は javascript プログラミング時に楽するためと、ショートコード記述でファイル容量を少なくするためです。
後は記述ミスを減らすという目的のための関数もあったりします。

このサイトはデザインを変えたり、思いついた関数をいろいろ作って実験していますのでバージョンアップのたびに機能が増えたり別の名前に変更したりしてますが、機能として使用頻度の高いもので、用意しておくと便利ではないかと思うものを、今回の記事ではいくつか紹介してみようと思います。
※ 原森サイトのライブラリ関数は、 [_] (アンダーバー) + [英文字]（1～4個）の関数名にしています。

『なぜ関数ライブラリなのか？』

原森が javascript でプログラミングする時は、なるべく楽に簡単に (シンプルに) 、CSSと組み合わせてなんかうまいこと作る、をテーマにしています。
なので、ゲームを作ったり、ものすごい算術計算を駆使して何かを画面上で派手に動かすような演出をする…ようなこともしていません。
（トップページや記事のカテゴリトップなどでなんだか意味不明に動いているものなどもデモンストレーションしていますが、それらは SVG で画面に描画したものを css アニメで動かしているだけです）
実際、お仕事で作る企業サイトの場合、アニメ・ゲーム会社や、サイト自体で特別なサービスをしているwebサービス企業サイトの演出で「Ajax」っぽいものなどは、特殊な事例だと思いますので、昨今流行りっぽく感じる「javascriptをオブジェクト指向系で作る」というこだわり哲学はありませんので、昔からやっている手続き関数型のシンプルプログラム手法でプログラミングしています。

ということで、手続き関数型でのプログラミングの場合、自作の関数ライブラリを活用すると楽ができる、などと思ったりします。（一人や二・三人で作る場合）

今回ご紹介するのは、すごく簡単だけど、作っておくと楽ができるもの、となっています。

【 _s(s) 】文字等の値存在チェック

関数に引数で文字列を渡した時、「'' (空文字)」「undifined 又は void(0)」であるかどうかをチェックする関数

引数 s : 判定する文字列等

戻り値：「'' (空文字)」「undifined 又は void(0)」の時は 0 を返し、それ以外は 1 を返します。

function _s(s){
if(s===' ')return 1; //半角スペースは存在すると判定
if(s==="")return 0; // (空文字) は値がないと判定
if(s===void(0))return 0; // undifined は値がないと判定
return 1; // (空文字) と undifined 以外は値があると判定
}

※ 他にも追加したい判定を if 文で追加してみると良いかと思います。

※ 主に変数の値チェックに使います。

【 _e(i) 】指定 id のエレメントを返す関数

HTML + javascript ならば『document.getElementById(id名) 』を何度も記述することがあるかと思います。

引数 i : id名の文字列

戻り値：document.getElementById(id名)を返します。
※ HTML 中に指定の id がない時は undifined が返ります。

function _e(i){
return document.getElementById(i);
}

※ 原森サイトの専用関数とは記述が違いますが、基本はこういう動作をするものです。

【 _l(a) 】length取得関数

javascript で使う頻度が高い『s.length 』(sは文字列) や『a.length』(aは配列) を PHP の count 関数っぽく短い名前で返す関数です。

引数 a : 文字列又は配列

戻り値：length を返します。

function _l(a){
return a.length;
}

【 _z(s[,v]) 】引数デフォルト値チェック及び入力関数(文字)

関数で引数を省略した時などに自動で初期値（文字列）を入れる関数です。

引数 s : 調べたい変数を渡します
引数 v : 引数 s が空文字や undifined だった時に入れたい値を指定します。（省略すると空文字を入れて返します）

戻り値：sがあればそのままsを返し、ない場合で v 指定があれば、v を返します。v が指定されていなければ、空文字を返します。

function _z(s,v){
_s(v)||(v='');
return _s(s)?s:v;
}

※ 最新の javascript ではPHPと同様に関数の引数値に 初期値を代入するという記述ができるようになっていますが、古いIEで未対応なので原森はこの関数を使ってまさにこの関数内でやっているような [_s(v)||(v='');] という引数値チェックを楽にするようにしています。

※ _s 関数を使っています。

【 _y(s[,v]) 】引数デフォルト値チェック及び入力関数(数値)

関数で引数を省略した時などに自動で初期値（数値）を入れる関数です。

引数 s : 調べたい変数を渡します
引数 v : 引数 s が空文字や undifined だった時に入れたい値を指定します。（省略すると 0 を入れて返します）

戻り値：sがあればそのままsを返し、ない場合で v 指定があれば、v を返します。v が指定されていなければ、 0 を返します。

function _y(s,v){
_s(v)||(v=0);
return _s(s)?s:v;
}

※ _s 関数を使っています。

【 _pr(n,r) 】parseInt(n,基数)の値を返す

この関数は parseInt(n,基数) を返す関数です。これを使って『parseInt(n) , parseFloat(n) の値を返す』関数も用意してそっちを使っています。

function _pr(n,r){
return parseInt(n,r);
}

※ parseInt( 3.14 , undifined ) の場合は、戻り値は 3 となります。(rを省略した時等)

【 _p(n[,t]) 】parseInt(n) , parseFloat(n) の値を返す

引数 n : 数値
引数 t : タイプ指定
t = 0 や省略時は parseInt(n) 、t=1 の場合は parseFloat(n)

function _p(n,t){
return _y(t)?parseFloat(n):_pr(n,10);
}

※ _pr 関数 , _y 関数を使っています。
※ t は 1 でなくても真になる値ならOKです

【 _cl(s) 】console.log のショートコード用関数

引数 s : console.log でチェックする文字列や数値、エレメントなどいろいろ

function _cl(s){
console.log(s);
}

※ 特に複雑な使い方をしないので引数は1個にしています。

※ 20181220 追記 : 先日 ie11 で動作チェックをしている時に調査して知ったのですが、ie9 の時は動作していた気がしますが、ie11 では console.log は動作しないようでした。
なので、ie11 で console.log で表示したい値などは昔からやっていたように alert を使うと楽かと思います。
（console.log 関数とは別にブラウザチェック関数を作っておいて、それで判定して、ie11 の時は alert にするとか…）

※ 原森のライブラリにもブラウザチェック関数があるのですが、opera が webkit 系に変わった時には ユーザエージェントの文字から [opera] が消えて [opr] と変更されたりしていて、後からその情報を知って、判定部分を修正したりしました。
そして先日、ie11 も うまく判定されていないことに気づき、調べてみると、ie なのに [msie] という文字が消えた、との情報から、ie11用の [trident] (ってなんやねん) を追加してまた修正したりしました。（なのでブラウザ判定は専用の関数を作っておいて、ブラウザがアップデートされるごとにユーザーエージェントチェックをする必要がある、などと思いました。console.log ネタとは関係ない話題ですが…）

【 _n(p) 】数値チェック関数

引数 p : 数値かどうかをチェックする値

戻り値：数値（数字文字）なら1 を 数値以外は 0 を返します。

function _n(p,q){
q=(_s(p))?0:1;
return (q)?0:(p==null)?0:
(p===' ')?0:
(_l(''+p)>_l(''+_p(p,1)))?0:
(q=new Number(p),isNaN(q))?0:1;
}

数値チェックはいろいろな記事を参照して判定条件を追加したりしています。
[''](空文字) [undifined] [null] [' '](半角スペース) [10,000のようなカンマ付きの文字] [小数点が二つ以上ある異常な小数文字] [isNaNがtrue] の場合は 数値でないとして 0 を返し、数値の場合は 1 を返します。
※ [10e5](指数表記) ['10'](数字文字) は数値として 1 を返すようにしています。

数字文字を数値とするのかどうかは使う時の仕様によるかと思います。
原森サイトでは、javascript で素直にチェックさせてみて、new Number(p) で p に数字文字を入れた時に、isNaN させて素直に判定した結果をそのまま使うことにしていますので、数字文字も自動変換されて数値になっています。

数字文字の isNaN チェック実験
数値（isNaNが偽）なら 1 、数値でない(isNaNが真)なら 0 
function hm_j6_test_a(){
var a=['10',50,'abc'],
t=['\'10\'(数字文字)は','50(数値)は','\'abc\'(文字列)は'],
k,s='';
for(i=0;i<3;i++){
k=isNaN(new Number(a[i]))?0:1;
s+='【'+t[i]+k+'】'
}
_cih('hm_j6_test_a_op',s);//原森サイト用ライブラリ関数です。指定idにinnerHTMLしているだけです。
}

数字文字判定テスト↓
テスト結果表示

※ 関数に引数 q がありますが、これはショートコード用なので使う時には _n(p) の形で引数 p だけ指定します。ちなみに変数名は顔文字っぽく p,q にしています

※ 関数内でこのページで紹介している、_s 関数 , _l 関数 を使っています。

【 _ar(a) 】配列チェック関数

引数 a : 配列かどうかをチェックする値

戻り値：配列なら1 を 配列ではない場合は 0 を返します。

function _ar(a){return (a instanceof Array)?1:0;}

※ この関数を作った時はバージョンが古い IE 対応のために、Array.isArray() は使っていませんでした。 IE9以降対応ならば isArray() で問題ない様子です。

function _ar(a){return (Array.isArray(a))?1:0;}
※ IE9以降

まとめ

今回紹介したライブラリ関数はプログラム記述を短くするなどで楽をするために使うものとなっています。
※ 関数の中でオリジナルのライブラリ関数を呼んでいる部分がある場合、元の関数を修正したり削除する時には他で使用していないかどうかをチェックする必要があります。

ということで、javascript でいろいろ作っているうちに、何度も同じ記述をしているようなもの（コピペ用に文言を検索したりするような、document.getElementById とか）を発見した場合、短い名前の関数を用意しておいてすぐ使えるようにしておくと、便利ではないかと思い、プログラミングで楽をする方法として紹介してみました。
ここで紹介したものだけでも、用意しておくと、javascript プログラミングがかなり楽になると思います。

以上、微妙に意味不明な記事を最後まで読まれたみなさん、お疲れさまでした。

追記 (2018.12.14) : 他の記事で使ったので [_n] [_ar] の紹介を追加
追記 (2018.12.21) : [_n] の項目で 数字文字の inNaN 実験テストを追加

ページトップへ