小学校の算数で最初に習う、「いちたすいち(1+1)」は、2と習いましたが、これは間違っていません。
電卓をはじめとする、プログラムでの計算で、1+1を実行すると、必ず2が返ってきます。
でも、プログラムを突き詰めていくと、1+1は2ではない場合に遭遇します。
中級エンジニア以上の人はこの意味が理解できると思いますが、初心者エンジニアや、プログラムがわからない人にとっては、
どうして1+1が2じゃないのかわからないと思います。
理由を聞いて、「理不尽」だと思うか「面白い」と思うかで、プログラミングが好きになれるかどうかが決まると言ってもいいかもしれませんが、
その内容をブログに書いてみようと思います。
ちなみに、今回の内容は、Webエンジニア超初心者向けの内容になっているので、上級者の人は、ツッコミがあれば、コメントにてお願いいたします。
Javascriptでありがちな1+1の解
まず最初に、下記の「答えを見る」ボタンを教えてみましょう。
+
=
「11」が表示されたと思います。
1+1を別の数値に変えてみてください。そうすると、答えの法則がわかると思います。
Webシステムで、入力値による計算式を組み立てる時に、おそらく最初に誰もがハマる
足し算トラップです。
ソースコード
ここからは、上記のトラップについての解説を行います。
上記のソースコードは、以下のようになっています。
<input type="text" name="val1" value="1">
+
input type="text" name="val2" value="1">
=
<input type="text" name="result" readonly>
<button id="go_result">答えを見る</button>
<script>
document.getElementById(`go_result`).onclick = ((e)=>{
const result = document.querySelector(`input[name="result"]`)
const val1 = document.querySelector(`input[name="val1"]`).value
const val2 = document.querySelector(`input[name="val2"]`).value
result.value = val1 + val2
})
</script>
<style>
.post-body input{
width:50px;
text-align:center;
}
</style>
カンタン解説
簡単に解説すると、HTMLで入力と計算結果と、集計するためのボタンを表示しています。
styleタグは、簡単なサイズ調整などを行なっています。
javascriptタグ内で、入力されている値を2つ取得して、結果inputに対してそれを+（プラス）した答えを入れるようにしています。
ここで問題となるのは、"result.value = val1 + val2" です。
お気づきの方もいらっしゃるとは思いますが、val1 + val2は、文字列連結になっています。
なので、
"1" + "1"の結果が "11" という答えになっているんですね。
プログラミングで、重要な"型"がJavascriptでは、ユルユルのガバガバ、ほったらかし状態なため、こんな恥ずかしい状態になってしまうんです。
他の言語では、変数に対して、型をセットできるので、文字列型なのか、数値型なのかは明確に定義されるので、実はこんな間違い結果は生まれません。
でも、Webで唯一使うことができるJavascriptでは、これを正確に答えを出したければ、次のように書きます。
result.value = Number(val1 || 0) + Number(val2 || 0)
他にも、次のように書いても正常に答えが出ます。
result.value = eval((val1 || "0") +"+"+ (val2 || "0"))
まだまだ、他にも書き方は無限にあると思いますが、簡潔に書きたければ、自分はこう書きますね。
Number() は、数値として変数を扱うようにする処理で、
"val || 0"の箇所は、valに値が入っていない時に、0の値を入れるという処理です。
eval()は、文字列を、プログラミング実行するという意味で、不正コードを実行される可能性があるので、セキュリティ上あまり使いません。
このブログで言いたいこと
プログラミング初心者から、相談された内容を今階のブログで書いてみたんですが、この内容を見る人は、
「もう知ってる」という人と、「カンタン」と思う、中級以上の人。
「知らなかった」「勉強になった」という、初級者。
「意味がわからない」「難しすぎる」という、プログラミングに興味のない人。
このどれかだと思います。
もちろん、興味がない人は、このブログを見なければいいだけなんですが、プログラミング（web系）を仕事として今後やっていきたいと思う人は、これを理解しなければ、食っていけないでしょう。（他にも覚えることはいっぱいありますが・・・）
この質問をしてきた人は、「誰もこうしたことを、丁寧に教えてくれない」という事で、内容が理解できた時に、「目から鱗が落ちたようだ」と言っていたのが印象的で、この人はきっと将来ちゃんとしたエンジニアになれると確信できました。
あとがき
当たり前を当たり前じゃないと思える
気付きや、自分が知らなかったことを知ることに対する喜びに気がつける人は、将来が明るいと改めて気がついた今回の出来事でした。
小学校の頃に、1+1は、「田んぼの田」という漢字になるという、学校内で流行ったクイズを思い出してしまいました。
あなたの "1+1" は、どんな答えなんでしょう？
0 件のコメント:
コメントを投稿