9cubed
ブログ | PHP | JavaScript | TypeScript | Vue.js | Laravel | Tailwind | Vite | Python | MariaDB | SQLite | Node.js | Linux | PowerShell | Docker | Git | Web | その他
< 前の記事

JavaScript - ループの中止(break)

次の記事 >

JavaScript - 配列

JavaScript

JavaScript - switch による処理の分岐

公開日:2018-11-29
更新日:2019-05-13

1. 概要

switch を使うと、処理を複数に分岐できます。

2.1 switch

no の値に応じて処理を分岐します。
また、各case の 終わりは、break をつける必要があります。
break をつけないと、次の case の処理も実行されるため、要注意です。

var no = 1;
switch (no) {
	case 1:
		console.log("1です");
		break;
	
	case 2:
		console.log("2です");
		break;
	
	case 3:
		console.log("3です");
		break;
	
	default:
		console.log("該当するケースがない場合");
}
1です

2.2 break を使わない例

no が 0~4の場合、各 case に break がないため、case 4 の処理が実行されます。

var no = 2;
switch (no) {
	case 0:
	case 1:
	case 2:
	case 3:
	case 4:
		console.log("4以下です");
	break;
}
4以下です

2.3 文字列で分岐

数値だけでなく文字列で分岐することもできます。

var word = 'りんご';
switch (word) {
	case 'りんご':
		console.log('apple');
		break;

	case 'みかん':
		console.log('orange');
		break;

	default:
		console.log('該当するケースがない場合');
		break;
}
apple

2.4 条件式で分岐

swich で指定した値と case の値が一致すれば良いので、条件式を使って書くこともできます。

var no = 3;
switch ( true ) {
	case no <= 4:
		console.log('4以下です。');
		break;

	case no >= 5:
		console.log('5以上です。');
		break;
}
4以下です。


< 前の記事

JavaScript - ループの中止(break)

次の記事 >

JavaScript - 配列

YouTube X

新着一覧

  • async、awaitJavaScript
  • Promise についてJavaScript
  • パッケージの管理Node.js
  • v-model(双方向バインディング)Vue.js
  • VS Code で GitHub を使ったソース管理Git
  • computed(再計算)Vue.js
  • watchDebounced(値の監視)Vue.js
  • watch(値の監視)Vue.js
  • change イベントVue.js
  • v-memoVue.js

アーカイブ

  • 2026/03
  • 2026/02
  • 2026/01
  • 2025/12
  • 2025/11
  • 2025/10
  • 2025/09
  • 2025/08
  • /00

以前のカテゴリー一覧

  • CakePHP3
  • CentOS7
  • HTML・CSS・JavaScript
  • Haskell
  • JavaScript
  • Kotlin
  • Laravel5
  • PHP
  • Python
  • Ruby
  • RubyOnRails5
  • TypeScript
  • Vue.js
  • Webサーバ講座
  • Webプログラミング講座
  • jQuery
  • linux
  • パソコン講座
  • ブログ
  • プログラミング講座
  • メモ帳作成講座
  • 数学

Copyright © 9cubed. All Rights Reserved.

プライバシーポリシー 利用規約
▲