JavaScriptでif文を一行で書く方法を現役エンジニアが解説【初心者向け】

JavaScriptでif文を一行で書く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

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

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• if文を一行で書く方法
• 三項演算子を使って条件分岐する方法
• 実際に書いてみよう
• まとめ

 

if文を一行で書く方法

JavaScript で if 文の書き方は以下のようになります。

if (条件) {
  // 条件が true の場合の処理
} else {
  // 条件が true の場合の処理
}

条件分岐を行う処理は通常 if 文を使用することで問題ありませんが、条件分岐内で行われる処理が1つの場合、if 文を一行で書く方法があります。それが「三項演算子」です。

 

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

三項演算子を使って条件分岐する方法

三項演算子を使って条件分岐するには以下のように記述します。

条件 ? trueの場合の処理 : falseの場合の処理

三項演算子について、詳しくは以下の記事も参考にしてください

MDN – 条件(三項)演算子

 

実際に書いてみよう

今回のサンプルプログラムでは三項演算子を使って if 文を一行で書く方法について確認します。実行はChromeブラウザーのデベロッパーツールで行いましょう。例として、与えられた数値が奇数か偶数かを判定する処理を考えます。

まずは if 文を使った場合は以下のようになります。

// 奇数か偶数かを判定する関数
const func1 = (val) => {
  if (val % 2 == 0) {
    return "偶数";
  } else {
    return "奇数";
  }
}

console.log(func1(7));

次に三項演算子を使った方法を見てみましょう。

const msg = 8 % 2 == 0 ? "偶数" : "奇数";
console.log(msg);

非常に簡潔に表記できることが分かります。ただし三項演算子は処理が簡潔な場合に使用し、条件が複雑だったりネストしている場合には素直に if 文を使用するようにしましょう。

 

まとめ

今回の記事では JavaScript で if 文を一行で書く方法を学習しました。

 

監修してくれたメンター

太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。