【処理を分岐できます】if文の書き方
プログラミング言語には制御文というものがあります。主な制御文として条件分岐や反復などがあります。
今回はJavaScriptでの条件分岐であるif文の書き方を紹介します。
if文はJavaScriptに限らずどんなプログラミング言語にも登場しますし、どんなプログラミングにも必要となってくる制御文なので、ぜひ使えるようになりましょう。
if文とは
if文とは条件に応じて処理を分岐させたい時に使われる制御文のひとつです。制御文はJavaScriptはもちろん、JavaやPHP、Ruby、Pythonなど大抵のプログラミング言語にあらかじめ備わっていて、決められた文法で書かなければなりません。ですが、書き方はどれも似ているので一つ覚えたらどの言語でも使えるようになるでしょう。
例をみてみましょう。
HTML
<html>
<head>
<style>
#message {
color: red;
}
</style>
<script>
function onBlurName() {
const inputName = document.getElementById('name').value
const message = document.getElementById('message')
if (inputName == '') {
message.innerHTML = '入力してください'
}
else if (inputName == '名前') {
message.innerHTML = 'あなたの名前を入力してください'
}
else {
message.innerHTML = ''
}
}
</script>
</head>
<body>
<input type="text" id="name" placeholder="名前" onblur="onBlurName()">
<p id="message"></p>
</body>
</html>
入力欄を一つ表示してみました。今は見えないですが、その下にメッセージを表示するpタグもあります。
名前の入力欄をクリックして、その後別の場所をクリックしたりしてフォーカスを外すとonblurイベントが発動してJavaScriptの関数「onBlurName()」が動きます。
onBlurName関数の中に
JavaScript
if (inputName == '') {
message.innerHTML = '入力してください'
}
else if (inputName == '名前') {
message.innerHTML = 'あなたの名前を入力してください'
}
else {
message.innerHTML = ''
}
というコードがありますね。これがif文です。
何をしているかというと、inputNameという変数には入力欄に入力された内容が入っています。
これが未入力(空文字)だったらifで囲った部分の処理を、入力値が「名前」だった場合はelse ifで囲った部分の処理を、それ以外の場合はelseで囲った部分の処理を実行するという意味になります。
上の場合、名前が未入力だったら入力欄の下に「入力してください」と表示されます。
入力値が「名前」だった場合は「あなたの名前を入力してください」と表示されます。
それ以外の場合は空文字を設定しています。つまり何も表示しません。
このようにif、else if、elseで処理を分岐させることができます。ifとelseは一つずつしか書けませんが、else ifは複数書くことができます。なので分岐を4つ、5つにすることもできます。（ただし、条件が4つ以上になる場合はswitch文が使えないかも考えてみましょう。switch文も条件分岐の一つですが、詳しくは別の記事で紹介したいと思います。）
これだけじゃない！if文の他の書き方
上で紹介したのは「if (条件) { 処理 }」という構文だったのですが、以下のように書くこともできます。
JavaScript
if (inputName == '')
message.innerHTML = '入力してください'
else if (inputName == '名前')
message.innerHTML = 'あなたの名前を入力してください'
else
message.innerHTML = ''
処理が1行で済む場合に限っては{}を省略することができます。（コメントはカウントされないので何行でも大丈夫です。）
以下のように条件から処理まで1行で書いても大丈夫です。
JavaScript
if (inputName == '') message.innerHTML = '入力してください'
else if (inputName == '名前') message.innerHTML = 'あなたの名前を入力してください'
else message.innerHTML = ''
こちらのほうが英文っぽいですし、僕は書かなくていいものは書きたくない主義なのでこちらのほうが好みです。ただし、実際にどこかのプロジェクトに入ってプログラミングをする場合はコーディング規約が決められている場合があります。その場合はそのルールに則ることになります。
JavaScript
message.innerHTML = ''
if (inputName == '') message.innerHTML = '入力してください'
else if (inputName == '名前') message.innerHTML = 'あなたの名前を入力してください'
このようにelseに該当する処理を先に書いてしまっても上と同じように動きます。基本的には何も表示しない前提で特殊な条件の場合のみ分岐させてメッセージを表示させるという発想です。
条件分岐の使い方で熟練度が見てとれる
上の例を見て、ちょっと考えちゃった人もいらっしゃると思います。
条件分岐はちょっとした頭の体操になりますよね。
自分で書いたコードならなんとなくパッとわかるかもしれませんが、他の人が見ると「これはどういう条件で分岐されるんだ？」ってちょっと考えてしまいます。なのでなるべく他の人が見てもわかりやすくなるように書くことを心がけなければなりません。
これは一人で開発している場合も当てはまります。自分で作ったコードであっても1から10まで全部覚えている人はいないと思います。（覚えているとしたらその方はよっぽど記憶力がいい！）
1か月後に見返して、「これ何がしたいんだっけ？」ってなることは珍しくありません。。
なので、未来の自分のためにも条件分岐は極力シンプルになるように努めなければならないと考えています。
JavaScript
if (条件A) {
if (条件B) {
if (条件C) {
処理A
}
else {
処理B
}
}
else if (条件D) {
if (条件E) {
処理C
}
else if (条件F) {
if (条件G) {
処理D
}
}
}
}
こんな条件分岐が出てきたらどうしましょう。上の場合は条件を便宜上日本語で書いていますが、実際は変数や関数を使って書くことになります。ということはその変数には何が入っているのかなどを把握しておかなければこのコードを読み取ることはできません。
もう考えるだけでうんざりしますね。。何がしたいのかぱっと見よくわかりません。
残念ながら仕事でプログラミングをしていると、仕様的にこれくらい分岐をさせないと実現できないことがあります。
ですが、そのまま書いてしまうととても読めたものにはならないので、意味のある単位で関数化するなどの工夫が必要になります。
JavaScript
if (条件A) {
if (条件B) 関数A()
else if (条件D) 関数B()
}
function 関数A() {
if (条件C) 処理A
else 処理B
}
function 関数B() {
if (条件E) 処理C
else if (条件F) {
if (条件G) 処理D
}
}
関数A、関数Bを作っていくつかの条件分岐を関数に外出ししてみました。
名前が「関数A」だと何が何だかわかりませんが、普通はもっとわかりやすい名前に命名をされると思います。この関数は何をしているんだというのをわかりやすく命名してあげると、関数の中身まで追わなくても「ああ、こういうことがしたいんだね」ということを想像しやすくすることができます。
関数名でやりたいことが想像つけば実質、
JavaScript
if (条件A) {
if (条件B) 関数A()
else if (条件D) 関数B()
}
この部分だけ見ればやりたいことがわかります。この方が見る人は楽ですよね。
このように必要に応じて関数化するテクニックも覚えておきましょう。
まとめ
条件分岐はプログラミングの要といってもいいほど重要な制御文になります。ぶっちゃけ変数と関数とif文が書ければ大概のことはできるような気がします。
これからプログラミングを始めようという方はぜひ覚えてください。自分で書いて動かしてみて思った通りに処理が分岐するのを確認できたら結構楽しいと思います。
したっけ！
- 条件によって処理を分けたい場合はif文を使う
- 書き方は「if (条件) {条件に該当した時の処理}」
- 条件が複数ある場合は「else if」「else」でさらに分岐することができる
- 他のプログラミング言語でもこの構文は使える（微妙に違っている場合もありますが、すぐに慣れます）
- 条件分岐をする時は他の人が見てもわかりやすいように可読性を高める意識を持つとよいです
本格的にプログラミングを学びたいですか？ITのエンジニアになりたいですか？
IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、
物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。
身につけた技術は一生モノです。
もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。
TechAcademy
最短4週間で未経験からプロを育てるオンライン完結のスクールです。 どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。
TechAcademyのサイトへ
Want to learn programming in earnest? Want to be an IT engineer?
The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere,
so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread.
The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.
The skills that you have acquired is something that will last a lifetime.
If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.
DMM WEBCAMP
This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!
move to DMM WEBCAMP
TechAcademy
It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.
move to TechAcademy