JavaScript~文字列カウント~

はじめに

あけましておめでとうございます前回記事から日が空いてしまいました。
ここやTwitterでの活動のやる気が認められて案件をもらいそれに取り組んでいました。
今まで全然たいした内容は投稿出来ていなかったですがそれを評価していただいて嬉しかったです。
ただ案件に時間がかかってしまいなかなか記事を書けず仕事をしながら投稿を続ける難しさを実感しました。
自分のように今勉強中で転職活動している人は今回のような例もあるので投稿してみるのをオススメします。

今回の投稿内容は文字列の長さをカウントするというコードです。
これは入力フォームの文字カウントに使えるのでぜひ参考にしてもらえたらと思います。

文字数カウント

文字をカウントする構文は次のようになります。

構文

文字列.length

これを実際に使うと

例

'テスト'.length //3
'test'.length //4

このように文字の後ろに「.length」をつけるだけでカウントしてくれます。

入力フォームカウント

これを元に入力フォームの文字数をカウントするスクリプトを紹介します。

入力フォームHTML

<textarea class="textarea"></textarea>
<p>現在<span class="string_num">0</span>文字入力中です。</p>

<!-- classに関しては好きな名前で大丈夫です。分かりやすいものを使用してください -- >

続いてJavaScriptです

入力フォームjs

const textarea = document.querySelector('.textarea');
//「document.querySelector()」を使うことによって任意のHTML要素を簡単に取得できる。
//今回は「document.querySelector('.textarea')」なのでテキストエリアの要素を取得しています

const string_num = document.querySelector('.string_num');
//上と同様にspanの要素を取得しています

textarea.addEventListener('keyup',onKeyUp);
//「addEventListener()」使ってイベント処理を実現しています。
//「オブジェクト.addEventListener(イベントのタイプ, 関数, オプション);」のように記載します。
//今回の場合はオブジェクトに「textarea」,イベントのタイプが「keyup」でこれは「キーボードのキーを離した際に発生するイベント」で
//文字を入力したり、消したりした後キーボードから指を離すと発生します。
//この関数の名前が「onKeyUp」になります。

function onKeyUp(){
const inputText = textarea.value;
//「textarea.value」によってテキストエリアに入力されたテキストを取得しています。

string_num.innerText = inputText.length;
//「innerText」は要素の中身を変更するもので他には「innerHTML」,「textContent」があります。今回は「string_num」の中身を変更します。
//先ほど取得したテキストを「.length」でカウントしてその結果に変更します。

終わりに

今回は新しい要素がいっぱい出てきてなかなか消化しにくい投稿になってしまいました。
その分今までに比べてポートフォリオ等でも使えるような内容だと思います。
自分としては改めてまとめることで知識の整理にもなってよかったです。
今後も案件があるので毎日投稿は難しいですが自分の知識や技術の向上に繋がるので頑張って投稿しようと思ってます。
最後まで読んでいただきありがとうございました。