JavaScriptでlengthを使って文字数をカウントする方法を現役エンジニアが解説【初心者向け】

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プロパティの戻り値です。

[PR] フロントエンドで副業する学習方法を動画で公開中

文字列の文字数（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マガジン';

document.body.textContent = str.length;

※「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.

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

• ・困ったときに、質問や相談できる相手がいるため挫折しなかった
• ・プロとして必要なスキルのみを深く学べたので無駄がなかった
• ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

配列の要素数（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 = ['いちご', 'りんご', 'バナナ'];

document.body.textContent = fruits.length;

【参考】配列の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;
}

document.body.textContent = add.length;

※引数にデフォルト値や可変長引数（残余引数）が設定されている場合、直前の引数の数までしか数えられません。

引数のデフォルト値や可変長引数について、詳しくは公式ドキュメント「関数の引数」をご覧ください。

まとめ

lengthプロパティで文字数や配列の要素数や関数の引数の数を求められます。

文字列のlengthプロパティから文字数を取得します。

配列のlengthプロパティから要素数を取得、設定します。

関数のlengthプロパティで引数の数を取得します。

lengthプロパティって文字数はもちろん、配列の要素数まで数えられるんですね。

関数の引数の数まで分かるなんて驚きです。

そうだね。

lengthプロパティをどのオブジェクトから使うかで役割が変わってくるんだ。

プログラミングっておもしろいですね！

また、いろいろ教えてください！

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

• ・調べてもほしい情報が見つからない
• ・独学のスキルが実際の業務で通用するのか不安
• ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する