JavaScript〜テキストボックス文字数カウント機能を擬人化したら超絶わかりやすくなった

   

問い合わせページの本文欄とか、テキストエリアに文字入力した時にリアルタイムで文字数をカウント表示してくれるJavaScriptの処理についてです。

HTML

ブラウザ表示

JavaScript

↑このJavaScriptのコードを、擬人化して処理の流れを見ましょう

1〜2行目

さて、HTMLのDOMぜんぶ読み込んだら(DOMContentLoaded)、イベント始めるよー!その内容(function)はね・・

3行目

まず、#text-ranっていうDOMが欲しいんだよ。querySelectorで取ってきてranNodeっていう変数に入れておこう。

4行目

でね、そのranNodeでkeyupっていうイベントが起きたら、今から言うこと(function(){ )をしたいわけ。
あ、keyupっていうのはユーザーがキーを叩いて離した(up)とき。だから#text-ranに入力がおこなわれたときだよね。

5行目

変数countを作って、thisのvalueのlengthを入れるのよ。
thisって変数ranNodeのことね。ranNodeで起きてるイベントだから、this=これって言えばranNodeなわけ。
で、valueは値、lengthは長さだから、ranNodeの値の長さっていうことね。keyup=入力された値の長さだね。

6行目

次は.moji-suっていうDOMが欲しい。さっきみたいにquerySelectorで取ってきて、変数mojisuNodeに入れよう。

7行目

そしたら最後にね、mojisuNodeの中身を書き換えちゃう(innerText)のよ。どう書き換えるかって?
count変数の内容にだよ。入力された値の長さが入ってるよね。
だからまとめると、keyupが起きるたびに値の長さが取得されてcountに入ってるわけじゃん?それを都度書き換えるわけ。
これで1文字ずつリアルタイムに文字数をカウントしてるれるようになるの。

おしまい!

 - エンジニアへの道