JavaScriptで空文字（空白の文字列）を判定する方法を現役エンジニアが解説【初心者向け】

JavaScriptで空文字（空白の文字列）を判定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

• はじめに
• 空文字とは
• 空文字を判定する方法
• 空文字とnullの違い
• まとめ
• JavaScriptを学習中の方へ

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

今回は、JavaScriptに関する内容だね！

どういう内容でしょうか？

空文字（空白の文字列）を判定する方法について詳しく説明していくね！

お願いします！

はじめに

今回は空文字について学んでいきます。

HTMLの未入力フォームの値をJavaScriptで取得した場合、今回説明する空文字が取得できます。

空文字判定はJavaScriptの実装でよく使いますので、この機会に覚えておきましょう。

また、混在しやすいnullとの違いも説明します。

JavaScriptのコーディングをする際には、ぜひ活用してくださいね。

空文字とは

そのままの説明になってしまいますが、空っぽの文字のことです。

文字列を書く際に”（ダブルクォート）または’（シングルクォート）で囲います。

文字列を書く例

"テックアカデミー　ジュニア"

これを文字を書かずに「”」または「’」の同じ記号を2つ並べると、0文字の文字列である空文字になります。

さっそく、空文字などいくつかのパターンをconsole.logで出力してみましょう。

let moji1      ='テック';      /*[1]*/
let moji2      ="アカデミー";  /*[2]*/
let karamoji1 = '';            /*[3]*/
let karamoji2 = "";            /*[4]*/
let nonobject;                 /*[5]*/
//コンソール出力
console.log(moji1);         //console =>テック
console.log(moji2);         //console =>アカデミー
console.log(karamoji1);     //console =>
console.log(karamoji2);     //console =>
console.log(nonobject);     //console =>undefined

ポイントは”（ダブルクォート）でも’（シングルクォート）でも、同じ記号を2つ並べることで空文字を設定できます。

また、[5]で何も定義しないものとコンソール出力の結果が異なりますね。

何も定義しない場合はundefinedと出力されますが、空文字は「空欄の文字」という立派なString型のデータですので、出力では何も表示されませんが、undefinedとはならず空文字になることを覚えておきましょう。

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

空文字を判定する方法

登録画面などで未入力を判定するような際に、空文字の判定が必要になります。

JavaScriptでは、空文字をfalseと判定します。

そのため、そのままif文の条件にすることで判定できます。

const checkKaraMoji = (checkStr) =>{
    if(!checkStr){
        console.log('空文字です');
    }else{
        console.log('1文字以上の文字列です');
    }
}
const kara = "";
const moji = "tech academy";
const mojiSpace = " ";
checkKaraMoji(kara);       //console => 空文字です 
checkKaraMoji(moji);       //console => 1文字以上の文字列です
checkKaraMoji(mojiSpace);  //console => 1文字以上の文字列です

コラム

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

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

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

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

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

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

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

空文字とnullの違い

どちらも空という意味では似ています。

空文字は0文字の文字列ですが、nullは存在がない状態を表します。

そのため、空文字は.lengthメソッドを使うことで文字数0が返却されます。

しかし、nullに.lengthメソッドを使うとエラーになります。

let karamoji   ='';
let nullObject =null;
/*コンソール出力*/
console.log(karamoji.length);  //console =>0
console.log(nullObject.length);//Uncaught TypeError: Cannot read property 'length' of null

また、nullの判定方法も空文字と同様にfalseと判定されるので、そのままif文の条件にすることで判定できます。

const checkKaraMoji = (checkStr) =>{
    if(!checkStr){
        console.log('空文字またはnullです');
    }else{
        console.log('1文字以上の文字列です');
    }
}
const kara = "";
let nullObject =null;
checkKaraMoji(kara);       //console => 空文字またはnullです
checkKaraMoji(kara);       //console => 空文字またはnullです 

nullは「何もない」、空文字は「空欄」です。

また空文字はStringオブジェクトで用意されている関数やプロパティを呼出・参照できますが、nullの場合はエラーとなりますので、実装の際にはnullでないかチェックを行ったり、nullを許容しない設計を行うこともあります。

nullと空文字の使い分けはアプリやWebサイトの仕様によりますが、一般的にサーバサイドでデータベースに値を保持する際に定義を決めます。

あくまで一例ですが、リストボックスで未選択だった場合やinputタグなどで未入力の場合には、空文字ではなくnullを設定することが一般的です。
空文字は基本的に使わず、必須項目（氏名など）の未入力時などに設定する際に利用することがあります。

一方JavaScriptではinputタグなどが未入力だった場合にvalueプロパティを参照するとnullではなく空文字が取得されるため、空文字を扱う頻度はサーバサイドよりも多くなります。

まとめ

空文字の宣言の仕方や判定方法について学びました。

先ほども説明した通り、空文字とnullを同じように扱うか分けて扱うかどうかは、アプリやWebサイトの仕様などによって変わります。

どちらも適切に判定できるように、ぜひ参考にしてくださいね。

内容が分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

JavaScriptを学習中の方へ

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

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

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

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

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

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

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

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

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

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

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

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

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

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