JavaScriptでlengthを使って文字数をカウントする方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScript文字数をカウントする方法について現役エンジニアが解説しています。文字列の文字数をカウントするには、lengthメソッドを使います。文字数だけではなく、配列に使えば要素数を数えることも出来ます。文字列の数や配列の要素数をカウントしてみましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
井上 祐介
JavaScript文字数をカウントする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
文字列の長さ（文字数）や配列の要素数などを調べるとき「length」を使用します。
この「length」は文字列（String）や配列（Array）などのオブジェクトに定義されているプロパティです。
目次
- lengthプロパティとは
- lengthプロパティの使い方
- 文字列の文字数（length）を取得する
- 配列の要素数（length）を取得する
- 関数の引数の数（length）を取得する
- まとめ
- JavaScriptを学習中の方へ
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
※オブジェクトとはデータ（値）とそのデータを処理する機能（関数）を1つにまとめた集合体です。オブジェクトについて、詳しくは公式ドキュメントの「JavaScript オブジェクトの基本」をご覧ください。
JavaScriptで文字数を数えるにはどうしたらいいですか？
JavaScriptで文字数を数えるにはlengthプロパティが使えるよ。
ただ、lengthプロパティで取得できるのは文字数だけじゃないんだ。
配列のlengthプロパティは要素数、関数のlengthプロパティは引数の数も取得できるんだよ。
lengthプロパティって文字数だけじゃないんですね。
そうなんだ。
lengthプロパティを使うオブジェクトによっていろいろ使い方が変わるんだ。
じゃあ、さっそくJavaScriptで文字数をカウントする方法について詳しく説明していくね！
お願いします！
lengthプロパティとは
文字列の長さや配列の要素数を取得するプロパティがlengthです。
他にも関数の引数の数を調べたり、数値の桁数を取得したりできます。
lengthプロパティの使い方
書式
// 文字列
文字列の文字数 = 文字列.length;
// 配列
配列の要素数 = 配列.length;
// 関数
関数の引数の数 = 関数名.length;文字列のlengthプロパティで、文字列の文字数を取得します。
文字列が空ならlengthプロパティは 0 です。
全角と半角文字の区別はなく数えられます。
配列なら要素数、関数なら引数の数がlengthプロパティの戻り値です。
文字列の文字数（length）を取得する
文字列の文字数を取得するサンプルコードです。
ソースコード
const str = 'TechAcademyマガジン';
// HTMLに文字数を出力
document.body.textContent = str.length;表示結果
See the Pen
js_length_string by mentor-inoue-y (@mentor-inoue-y)
on CodePen.
解説
const str = 'TechAcademyマガジン';文字数を調べたい文字列を定数 strに代入します。
document.body.textContent = str.length;Webページに文字数を出力します。
変数 strに入っている文字列「TechAcademyマガジン」は全部で15文字なので、str.lengthの値は「15」です。
※「const」は固定された値である定数を宣言するキーワードです。constキーワードについて詳しくは解説記事「JavaScriptで書く「var,let,const」の違いと使い分け方法」をご覧ください。
【参考】数値の桁数を取得する
文字数を取得するlengthプロパティを応用して、数値の桁数を取得できます。
String( 数値 ).lengthで指定された数値の桁数が求められます。
数値の変数でも同じように求められますが、数値の変数なら 数値の変数.toString().length で求める方法もあります。
See the Pen
js_length_int by mentor-inoue-y (@mentor-inoue-y)
on CodePen.
配列の要素数（length）を取得する
配列の要素数を取得するサンプルコードです。
ソースコード
const fruits = ['りんご', 'バナナ', 'ぶどう'];
//配列の要素数を取得
document.body.textContent = fruits.length;表示結果
See the Pen
js_length_array by mentor-inoue-y (@mentor-inoue-y)
on CodePen.
const fruits = ['いちご', 'りんご', 'バナナ'];配列 fruitsを宣言し、「いちご」・「りんご」・「バナナ」の3つの要素を配列に格納します。
document.body.textContent = fruits.length;配列 fruitsのlengthプロパティにより、要素数「3」を取得します。
【参考】配列のlengthプロパティに代入する
配列のlengthプロパティは取得だけではなく値の代入を行うことができます。
要素数を配列のlengthプロパティに代入して、要素の数を減らしたり増やしたりできます。
要素数を増やしたときは、配列に空の要素が追加されます。
See the Pen
js_length_array_set by mentor-inoue-y (@mentor-inoue-y)
on CodePen.
関数の引数の数（length）を取得する
関数のlengthプロパティを使うと、引数の数を取得できます。
ソースコード
// 関数 addの定義
function add(num1, num2){
return num1 + num2;
}
// 関数 addの引数の数を出力
document.body.textContent = add.length;表示結果
See the Pen
js_length_func by mentor-inoue-y (@mentor-inoue-y)
on CodePen.
解説
function add(num1, num2){
return num1 + num2;
}関数 addを宣言しています。
引数は num1とnum2の2つです。
document.body.textContent = add.length;引数の数をWebページに出力します。
関数 addの引数は num1とnum2の2つなので、add.lengthの値は 2です。
※引数にデフォルト値や可変長引数（残余引数）が設定されている場合、直前の引数の数までしか数えられません。
引数のデフォルト値や可変長引数について、詳しくは公式ドキュメント「関数の引数」をご覧ください。
まとめ
lengthプロパティで文字数や配列の要素数や関数の引数の数を求められます。
文字列のlengthプロパティから文字数を取得します。
配列のlengthプロパティから要素数を取得、設定します。
関数のlengthプロパティで引数の数を取得します。
lengthプロパティって文字数はもちろん、配列の要素数まで数えられるんですね。
関数の引数の数まで分かるなんて驚きです。
そうだね。
lengthプロパティをどのオブジェクトから使うかで役割が変わってくるんだ。
プログラミングっておもしろいですね！
また、いろいろ教えてください！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
