document.なんちゃら長すぎもう無理・・・
document.getElementById("idname")、document.getElementsByName("name")
・・・長いよ!!こんなの毎回書くの面倒すぎる。
こんなもの・・・これをこうしてこう!!
const $ = (id) => document.getElementById(id);
はい。今回は最終的にこういうことが出来るというお話です。
タイトル通り、 document.getElement・・・をいくつも書くのが面倒なので関数にすればいいかぁとは思ってたけど何か短く書くかーとなって最終形態が上記通りです。
javascriptの「$」はどんな存在なの?
「$は変数定義出来る数少ない記号なだけでアルファベットと同様にただの識別子に使用可能なただの文字扱い」です。
なので、
const $ = (id) => document.getElementById(id);
const d = (id) => document.getElementById(id);
ただの変数名ですのでこの二つに差はないです。記号なせいで特別に見えますがアルファベットと同じです。一旦$にしたのは変数名が重なる事がないからです。別にdでもconst idgetとかでもなんでも良いです。
シングルクォート囲みの$には干渉しないの?
しません。
「`文字と${aaa}を一緒に記述出来る`」使い方はこんな感じですね。
シングルクォート囲みの「${変数や処理}」は全く干渉しませんletやvarとはまぁちょっと違いますが特定の条件下の決められた記述なので変数定義とは全く関係ないです。
「`文字と${aaa}を一緒に記述出来る`」使い方はこんな感じですね。
シングルクォート囲みの「${変数や処理}」は全く干渉しませんletやvarとはまぁちょっと違いますが特定の条件下の決められた記述なので変数定義とは全く関係ないです。
変数の識別子に使える文字列ってそもそも何?
$以外に変数に使える記号とかってあるの?って話ですよね。
一応あります。折角なのでそもそもの変数の定義可能な文字列について。
一応あります。折角なのでそもそもの変数の定義可能な文字列について。
■JavaScript の変数名
【a-z, A-Z】アルファベット
【0-9】数字(0-9)※ただし、最初の文字には使えない。
【_】アンダースコア
【$】ドル記号
【Unicode 文字】(例: 日本語のひらがな、カタカナ、漢字なども可)。
■ルール:
①数字以外は変数名の1文字目に使える(そのためこの中ではある意味数字は特殊)
②予約語(例: function, let, const など)は変数名に出来ない
③大文字小文字の区別される(例:nekoとneKoは別の変数として定義される)
const _ = (id) => document.getElementById(id);
って記述も可能って事ですね。
さらには日本語も使えるので実は
const 取得 = (id) => document.getElementById(id);
って記述も可能です。なんなら絵文字でも可能。
ただまぁ、可読性がどうかはさておき。
変数に日本語が使える=Unicode 文字が使えるっていうのはjavascriptは最初からそういう仕様だったそうで…、だいぶjavascript使ってるのに先ほど初めて知りました。
逆にそれ以外の記号関係は変数名に使用できない
@, #, %, &, *, +, -, /, !, ?, =, <, > などがありますが
「@」はデコレーター
(デコレーターは、クラスやメソッドなどの宣言の前に @ を付けて、その宣言に機能を追加したり装飾したりするための特別な宣言。クラスやメソッドに、ある機能を付与するような処理を記述し、その処理をデコレーターでアタッチすることで、再利用可能な形で機能を追加できる機能)
(デコレーターは、クラスやメソッドなどの宣言の前に @ を付けて、その宣言に機能を追加したり装飾したりするための特別な宣言。クラスやメソッドに、ある機能を付与するような処理を記述し、その処理をデコレーターでアタッチすることで、再利用可能な形で機能を追加できる機能)
「#」はプライベートなプロパティやメソッドの宣言
「%」は余り「+」は加算「‐」は減算「!」はnotなどなど比較や計算の演算子となっていて他の記号は変数に使えません。
「%」は余り「+」は加算「‐」は減算「!」はnotなどなど比較や計算の演算子となっていて他の記号は変数に使えません。
そうしなければならないという事ではないが記号文字の使い道
つまるところ「$」と「_」の二つですね。
■アンダースコア(_):
■アンダースコア(_):
プライベート変数や一時変数を表す。
例:_private, _temp, _(ループで使わない変数)。
■ドル記号($):
DOM 操作やユーティリティ関数のショートカット。
例:$, $element。
だいたいそんな感じで使われていますが別にそう決められているわけでは無いです。
またアンダーが最初に来るときは意味がある場合が多いですが「best_cat」みたいな変数の単純な単語区切りにも使われてます。こういう時は特別な意味はないです。
jQuery には気を付ける
有名なjqueryは既に$が定義されています。なのでjqueryを使う予定があるなら「$」単品で変数名を定義をするのはやらない方が無難です。特にグローバル変数なので混在するとグローバル範囲が汚染される可能性があります。
まぁ上記で説明した通り「$」自体は別に特別な機能って事は無くただの変数名である以上別の変数名で上書きして書き換える事も出来るにはできると思いますがそれはそれで大変だと思うのでよしなに。
まぁ上記で説明した通り「$」自体は別に特別な機能って事は無くただの変数名である以上別の変数名で上書きして書き換える事も出来るにはできると思いますがそれはそれで大変だと思うのでよしなに。
0 件のコメント:
コメントを投稿