jk-meets-js

恋に落ちるコード.js [技術系コメディ/短編/連載中]

This project is maintained by 8novels

恋に落ちる条件 -If I fell in love…-

「|絵子《えこ》、これより|情報処理《JS》部選抜総選挙を開始する」
「二人しかいない部員で何しようってんのよ」

 放課後、情報処理部の部室。
 |瀬尾絵子《せのおえこ》と|篠宮樹里《しのみやじゅり》の二人は今日も部活動の真っ最中だ。

「では、私と絵子で得票数を競い、結果を表示するプログラムを作るとしよう」
「作るとしましょう」
「私が勝った場合。世界がひれ伏さんばかりの神々しさで『樹里様』と表示する」
「……うん」
「で、万が一にも絵子が勝った場合。恥辱と苦渋にまみれ、血を吐くような思いで『絵子』と表示する」
「……あんたが1位でいいよ。もう」

「さて、今の動きを単純に表現すると、こんな感じになるだろうか」

 と言って、樹里はいつものごとくMacBookでエディタを起動し、コードを入力する。

var juri, eko;
if (juri > eko) {
  console.log("樹里様");
} else {
  console.log("絵子");
}

「juri、ekoというのは、それぞれの得票数を格納する変数だと思ってくれ。で、実際には得票数をカウントする処理が必要なのだが、そこは本題ではないのでざっくり割愛する」
「まあ、確かにだいたいこんな感じで書くよね。変数juriの方が大きい場合は…………あれ?」

 コードを読んでいた絵子が、怪訝な表情で顔を上げる。

「これってさ、同点の場合でも私が勝ったことにならない? 樹里にしてはイージーミスやらかしてるね」
「いや、それでいい」

 樹里は静かに頷く。

「矮小な一市民が私と肩を並べたのだ。その健闘は大いなる称賛を受けるべきである」
「すっげえ気に障る物言いだけど、樹里がいいんならそれで」
「では、解説するまでもない単純なコードではあるが、念のため解説しておこう」

 と樹里は、まず2行目から3行目までをトラックパッドでなぞり、反転させる。

「まず、ifの後に続く式を評価する。今回の場合は『juri > eko』だな。juriの方が大きければ|真《true》となり、直後のブロックに書かれた命令が実行される」
「ふむふむ」

 次に4行目から5行目までをなぞる。

「|偽《false》だった場合はそのブロックを飛ばし、次のelseブロックに書かれた命令が実行される、というわけだ。非常に簡単だな」
「はーい、よくわかりました」
「ちなみに、単体で|偽《false》と評価されるオブジェクトとしては、undefined、null、空の文字列、0、NaNが挙げられる。これら以外はすべて|真《true》と評価される」
「なんとなく怪しそうな感じするもんね、どれもこれも」
「では、先ほどの絵子からの申し出を受け、同点だった場合の条件分岐を追加するとこうなる」

var juri, eko;
if (juri > eko) {
  console.log("樹里様");
} else if (juri < eko) {
  console.log("絵子");
} else {
  console.log("同点");
}

「4行目の『else if』文で『juri < eko』という式を評価している。これも|偽《false》だった場合、すなわちjuriとekoの値が同一だった場合のみ、最後のelseブロックに書かれた命令が実行される」
「このパターンもよく使うよねー」
「あとは、もちろん……」

if (juri > eko) {
 console.log("さすがは樹里様");
}

「のように、条件が|真《true》の時のみ実行されるブロックを書く、というパターンもよく使われる」
「あるある」

 絵子は鼻と上唇との間にボールペンを挟みながらMacBookを覗き込む。

「まー、プログラム言語がプログラム言語たる所以が、この条件分岐とループの存在である、とか言うからねー。基礎はきっちり押さえておくべきだよね」
「…………絵子」
「ん?」
「キャラ設定的に、今の台詞は私が言うべき台詞ではないか」
「何よ。私だってこれくらい言うわよ」
「条件分岐とループの存在こそが、プログラム言語たる所以である」
「うわ、自分のセリフにしちゃったよ。臆面もなく」

「さて、長々と話しておいて何なんだが……こんな単純な条件の場合は、実はわざわざif文など書かない」
「あ、そうなの?」
「ああ。私ならこう書く」

var juri, eko;
console.log( juri > eko ? "樹里様" : "絵子" );

「おー、短い」
「ここで使われている構文を条件演算子と言う。3つの被演算子を持つため三項演算子とも呼ばれる。『if文超ウザくない?』と考えた昔の人が作った神秘の構文だ」
「ほんとかな、それ」
「条件演算子は『<条件式> ? <|真《true》の時に実行する式> : <|偽《false》の時に実行する式>』という構文で成り立つ。つまり、条件式の評価の結果により、コロン(:)の前後のいずれかの式を実行するわけだ」 「なるほど」 「誤解なきように言っておくと、条件演算子はその名の通り全体で一つの『演算子』であり、評価をもとに一つの値を返す『式』である。この点、if文とは似ているようで用途が異なる……はずなんだがな」 「何、樹里にしては歯切れが悪いわね」 「いや、他の言語だとな。|真《true》の場合と|偽《false》の場合で同じ型の値を返す必要がある、とか。あくまで式なので文を書いてはいけない、とか。いろいろ制約があるのだが、JavaScriptの条件演算子は結構自由になんでもできてしまう」 「へー」 「例えばこんなのもJavaScriptではアリだ。まあ、実行環境がWebブラウザの場合の話だが」

var juri, eko;
juri > eko ? (
  document.body.textContent = "樹里様おめでとう!",
  document.body.style.backgroundColor = "gold"
) : (
  console.log("絵子")
)

「はあ、意外と節操ないのね。JavaScriptって」
「私と絵子との扱いの違いにはツッコまないのか? 反応がないとそれはそれで寂しいのだが」
「そこはもう受け入れたからいいよ」
「……では、先ほどの例のように、同点だった場合の条件を追加した条件演算子もついでに書いておこう」

var juri, eko;
console.log( juri == eko ? "同点" : juri > eko ? "樹里様" : "絵子" );

「おー、ぱっと見わかりにくい」
「これは、最初の条件式が|偽《false》の時の式にもう一つ条件演算子を入れているわけだが……このように、あまり多用すると読みにくいのが難点だ。複雑になる場合は、素直にif文で書いた方がいいだろう」
「わかった。勉強になった」
「ちなみに、JavaScriptにおける条件分岐の構文として、もう一つメジャーなものにswitch文というものがある。次回は、このswitch文について勉強してみよう」
「3話目にして初の次回予告ね」

 と、絵子は顔を上げ、樹里の方に向き直る。

「ところでさ、投票の結果はどうなったの?」
「ああ、そうだな。今、野鳥の部が計測中だ」
「あ、我が校にそんな部あったんだ。あとやり方が意外とアナログなのね」
「……お、結果が到着したぞ。それでは発表する」
「うん」

「……第3位。瀬尾絵子」
「ささ3位?」

 絵子は手にしたボールペンをぽとりと落とす。

「いやー、まさかの今日一番の衝撃きたわ。3位て。3位?」
「第2位。篠宮樹里」
「いやもう私らの優劣には興味なしだわ。部員、二人、ええ?」
「さて、次回はswitch文についてお話しする」
「ちょちょちょ、何シメようとしてんのよ。1位発表しなさいよ」
「…………」
「え、ちょっとなんか言ってよ。ねえ1位って誰なの? ほらジュースあげるから。なんならパンツ見る? ねえ教えてってば。ちょっと樹里ー!」