プログラミングの基礎の基礎　四則演算の方法を初心者向けに解説

プログラムは数学が得意

鈴木顕照氏（以下、鈴木）：はい。続いてはこちらのコーナー行きます。ちょっとだけ！　かじり部！

鈴木：こちらはですね、メインの4つのテーマとはちょっと違う、小休止ですね。中島コーチにプログラミングの裏ワザとかですね、ちょっとした知識を教えてもらうコーナーでございます。それでは、今回は何をかじるんでしょうか。中島コーチ、おねがいします。

中島俊治氏（以下、中島）：今日は、数学をかじります。

鈴木：うわあ……数学はキツイなあ。

中島：大丈夫、大丈夫。数学。プログラムですので、やっぱり数学得意なんですね。だから、サイン、コサイン、タンジェント？　頭痛くなってきますけれどね。そんなのが得意なんです。それをちょっとかじりましょう。皆ともかじりますよ、よろしいですか。ということで、JSくんでやりますので、今JSくん見ててください。

江川みどり氏（以下、江川）：先生の画面見ていきましょう。

中島：さっきのお昼の話。冷やしラーメンとか。消すのもったいないんですけれどね、一旦私は消しちゃいます。これ一旦全部選択してしまって、ポイッとすると消えるんですね。それで下側も消せるんですが、ちょっと消すのもったいないな。いっか、ちょっと何とかしよう。ちょっと戻りますよ。占いの状態にしとこう。

中島：それで、数学ですね。大事なとこだけやりましょうか。それじゃあ、占いのところを数学にしました。下のところなんですが、数学って英語で何て言いますかね？　横文字言っちゃいけないんですけどね。仕方ない、これはもうプログラムだから。

鈴木：仕方ない。

中島：マスマティックス。

江川：マスマティックス。マスマティックス。

中島：ちょっと発音すいません。私より部長のほうが得意かもしれません。

鈴木：いやちょっと（笑）。

中島：リピートアフターヒム。

鈴木：Mathematics。Mathematics。

中島：なるほど。Mathematics。

江川：Mathematics。

鈴木：英語めちゃくちゃ苦手なんですけどね（笑）。

江川：（笑）。

中島：皆さんもお願いしますよ。それでその中にですね、ここにMathってありますよね。

中島：数学のrandomとかfloor、床とか書いてあるんですが。こういうのが数学なんですけど、この中でちょっと違うものをお見せしたいと思います。ちょっとここ、改造しますよ。薄ーく見てくださいね。薄く。n=Math.、大文字のPIと書きます。そしてこちらをnにさせてもらいます。

鈴木：ほお。

中島：n=Math.PI。数学のPI。数学のパイ。数学のパイ。数学のパイと言えば！

鈴木：（笑）。

江川：円周率ですね！

中島：エンシュウイッツ。

鈴木：円周率は日本語です（笑）。

中島：あ、そっか。

江川：（笑）。

中島：大事なとこここだけね。ここだけ覚えてね。他はとりあえず後で良いから。

中島：とにかく数学得意だよ。円周率、中にはね3と覚えてる人もいるし3.14、3.1415……はい、やろ。

江川：（笑）。

中島：このプレビュ反映いきますよ。せーの、ポイ。ほら！

鈴木：おお！

中島：小数点以下、多分16桁くらいかな。3.1415926、後はすいません、よく覚えてませんけれども。これ、いちいち覚えなくて良い、打ち込まなくて良いんですよ。

鈴木：プログラミングをやれば、教えてくれるってことですか？　勝手に。

中島：そうそうそう。ある程度指数とか乗数とか定数とか、そういったものは入ってるんですね。それから当然、サイン、コサイン、タンジェントもできます。Math.sin、Mas.cosなんてこともできます。Mathって書いてあったら、これ数学のやつだなって思ってもらえると、多分興味わくと思うんですよ。

鈴木：へえー。

中島：さっきのMath.randomとありましたが、乱数といいます。

鈴木：乱数。

江川：乱数。

中島：またいつかお話しますけれどね。0か1か2か、さっきやりましたね。それを出すことができるというものです。ということでね、数学というものがあるねっていうことを覚えてもらえると良いかなと思っております。

鈴木：皆さんどうですか？　あ。Cさんがですね、笑うボタンが欲しいと。

江川：（笑）ボタン。

中島：ちょっとまって（笑）。

鈴木：良いですね。あと、先生がアメリカ人になってるとか言ってますよ。

中島：アリガトウ。

江川：ありがとう日本語なんですけどね、はい（笑）。

円周率の小数点をfloor関数で除く

中島：あと、もうちょっとありますよね。これだけだと、ちょっとおもしろくない。やっぱり小数点以下ってやると、さっきのやつ、3.1415と、ちょっと後ろ邪魔じゃないですか。小数点いらないってことありますよね。このMath.PI、これ3.1415なんとかです。これ、小数点除いちゃいましょう。

鈴木：はい。

中島：っていうことでよくあるのは四捨五入ですが、そうじゃなくってこの場合ですね。nというのに3.14159入ってるので、これをちょっと処理しましょう。何をするかというと、Math.floorって書きます。floorって床の意味です。床関数って言ったりする人もいるんですが。

鈴木：初耳ですね。

中島：あんまり言う人いないんですよ。floor関数って普通言いますからね。これって何かっていうと、切り捨てです。バサッ！　バサッ！　反応は？

鈴木：「うわあ！」って、何ですかこれ（笑）。

中島：急に無茶ぶりしてしまいましたけれども。

鈴木：やれってことなんだろうなと思ってましたけど（笑）。

中島：3.14159の切り捨てとなります。小数点なくなっちゃうんですよ。そうすると？

鈴木：3？

江川：3（笑）。

中島：せーの、3！　になるはずです。でもね、このままだとちょっと表示ができないので、nを3にした、それをもう1回nに入れなおした、n=Math.floor(n);と書いてあげると、nの中に3が入り直すんですよ。3.14159だったやつがfloorで落としたやつをもう1回nの中に入れちゃえっていうことをします。上手くいくのかな。全部ちょっとね、ぶっつけ本番ですからね。プレビュ反映します。せーの、ホイ。

江川：おー！　できた！

鈴木：小数点以下が切り捨てられましたね。

中島：バサッ！

鈴木：うわあ！

中島：はい、そういうことです。

江川：（笑）。

中島：切り捨てがあれば、切り上げというのがあります。切り上げです。せーの。

鈴木：切り上げ。

江川：切り上げ。

中島：何か、きつねうどん食べたくなっちゃった。

鈴木：どういうことですか！

江川：どういうこと（笑）。

中島：floorって床なんですよ。天井っていうのは、単語知ってます？　シール。予算の上限ってシーリングとかって言いません？　

鈴木：シーリングライトは聞いたことありますね。

中島：cielやっちゃいます。c,i,e,lであってるかな。ちょっと記憶でやってますからね。天井関数っていいます。だから切り上げなんですね。3.14だったら4になるはず。4になるはず。4になるはずです！　せーの！

鈴木：4！

江川：4！

中島：ほんとかい（笑）。では、やってみますから見ててください。いきますよ。cielです。せーの、ポイ。あ、消えちゃった。ちょっと待ってくださいね。

鈴木：おっと？　おっとっとっと？

中島：ごめんなさい、ceilが正解ですね。私が綴りをつい間違っちゃいました。

江川：もうバッチリ！　4って出てます。

鈴木：ちょっと質問来てまして、MathのMは大文字じゃないといけないんですか、と。

江川：Dさんが仰ってますね。

中島：大文字です。

江川：小文字だと反映されないんですか？

中島：反映されません。

江川：なるほど。

中島：Mだけ大文字です。

鈴木：ちょっと難しい質問が来てますよ。3.14って、途中で区切ることはできるんですかってことですね。表示の桁数を選べるか。

中島：めちゃくちゃ良い質問を頂きました。

鈴木：おお！　良い質問です。

江川：ありがとうございます。

中島：切り捨てってわかりましたよね。floorっていうのを使いますよと。であるならば、3.1415926何ちゃら、切り捨てたら小数点なくなっちゃいますよね。

江川：うんうん。

中島：100倍する。

鈴木：あー、なるほど！

中島：314.いくらにしてしまう。切り捨てする、314になる。それをまた100で割ってしまう。

鈴木：なるほど。数学ですねこれは。

中島：はい。じゃあ詳しいことは数学の授業を受けていただくということで。

鈴木：そうですね。

中島：でもこれもねえ、結構苦労しながら独学でいろいろやってますから、いろんなやり方あると思います。よろしいですかね。

鈴木：小文字では何でだめなのって、何でっていうのがきましたね。

江川：何でかー。

中島：本当にね、そう思いますよ。小文字でも良いと思うんですけども、ごめんなさい。ルールがそうなってるんですね。

鈴木：はい。ということで、今回のコーナーはこれで終了ということですね。

中島：そうですね、何か楽しかったですね。

計算機を作ってみる

鈴木：はい。ということで、以上ちょっとだけかじり部のコーナーでした！　お疲れ様でした！　そして4つテーマある内の2個目に。本編に戻りますよ皆さん、また実習していきますよ。それでは、2つ目のテーマはこちら！

鈴木：たしざんひきざんかけざんわりざん。これはどういうことでしょうか。

江川：全部平仮名ですね。

鈴木：全部平仮名ですね。これは何か意図があるんでしょうかね。この辺も聞いてみたいと思います。まずはですね、中島コーチの実演の後に、皆さんみどちゃんと一緒に実習をしていただきます。まずは中島コーチの実演をしっかりメモをとりながら見ていきましょう。それでは中島コーチ、ここのテーマについてよろしくお願い致します。

江川：お願いします。

中島：はい。その前に、たしざんひきざんかけざんわりざんが何故平仮名なんだろうね。

鈴木：そこですね。

中島：何ででしょうね？

鈴木：何か理由があるんですか？

中島：ないです。

鈴木：ないんかい！（笑）　わかりました。

中島：でもたしざんひきざんかけざんわりざんはもう本当に、プラスマイナスかけるわるだけですよね。皆さんもそう思いますよね。うんうん、だからそれでもうお終いなんですよ。終わり。それじゃあちょっと話にならないので、実際に足し算引き算やってみましょうねっていうのが今からの話になってきます。よろしいですかね。

鈴木：はい。

中島：さっきは「もし～だったら～する」、次は計算をする。プログラムの中の一番基本的な話かなと思います。なので、やっていきましょう。

鈴木：はい！

中島：やっぱりJSくん使います。皆さんJSくんにアクセスしてください。私もアクセスします。はい、こういったかたちですね。さっきのものが残ってますけれども、気にしなくて結構です。

中島：今から使うのは見本のソースの2、それから反映の2になりますよ。反映は下のコードに全部入れてくれる。上の見本ソースの2、これが今から作るプログラムになります。でもやっぱり同じに作っちゃおもしろくないからね。

ぜひ何か、私だったらこうしたいんだけどっていうことをしてくださいね。見本ソースの2、これを押してみますよ。いきますよ、せーのポイ。

中島：今から作るプログラムはこういったプログラムですよ。ちょっと見えにくいかもしれませんが、1番最後28行目まで。めちゃくちゃ短いんですね。大事なこといろいろありますが、その中でも今日かじり部として覚えて欲しいもの。さっき何でしたかね。タイトルは。

江川：たしざんひきざんかけざんわりざん。

中島：本当かな？（笑）　でも言いたいことわかりますよね。要はこの中でてたしざんひきざんかけざんわりざんってどっかにあるよねって。探して欲しいんです。

鈴木：どこだろう？

中島：あの、ちょっと拡大し過ぎだと思うんだけど（笑）。

江川：ありました！

鈴木：a+bって書いてますね。

江川：c=a+b。

中島：上のほうにもいろいろ書いてあるんですが、数字が入ってるんだなあと思っておいてください。しかも今回、自分たちで数字入れられるようにしてみました。だって計算機ですからね。計算機を今から作ろうと思ってます。本当かな、計算機かな。ちょっと待ってくださいね。

鈴木：ほい。

中島：タイトルがちゃんと計算機ってなってますね。計算機を今から作ろうと思っていますが、やっぱり全部作ろうと思うと大変。だからたしざんひきざんかけざんわりざん、これを何とかしましょう。足し算があるということは、後かけざんわりざんひきざんを作ればいいんですね。皆で一緒に実験しましょう。

鈴木：Eさんがですね、最初でつまづいちゃった、次は参加しますということなんですけれども。ここからでもまだ間に合いますよね。

中島：はい！

鈴木：ここはここで、別なんで。

中島：ここはここ、そこはそこ。

鈴木：はい（笑）。ということで、まだまだ大丈夫です。Fさんもいきなりレベルが上ったと。大丈夫ですよ。ゆっくりゆっくり進めていきましょう。

中島：数学の授業があるんですかって質問が今ありましたけれどもね。

鈴木：昔確かあったはずですけどね。

中島：なるほど。誰かやってくれるんでしょうね、いやどうだろうね（笑）。じゃあ、足し算のことを一緒に試してやっていきましょうね。これはソースですから、自分で作るときの参考にしてくだい。ただよくありがちなコピー&ペーストはできなくなってます。

鈴木：これ、画像なんですね。

中島：そう。誰だ画像にしたのは！　すいません、私です。

鈴木：はい（笑）。

中島：やっぱり実際に打ち込んでもらう。それで楽しんでもらいたいのでね。よろしくお願いします。じゃあこれを置いといて、エディタのほうに戻ります。見本のソース2は見ましたね。じゃあ反映のほう押しちゃいます。ポイと押しちゃえば、もうできちゃってます。

中島：そして実は、隠し機能があります。

鈴木：お！

江川：隠し機能。

中島：だってこれ、ちょっと見にくいでしょ。

鈴木：見えない。

中島：これをズイズイズイ。

鈴木：あ、すごい！

江川：すごーい！

中島：ほら、素晴らしいですね。

鈴木：さすが、JSくんすごいですね！

江川：さすがですね。

中島：はい、全部すごいです（笑）。しかも下のほうもですね、下にズリズリと伸ばせるようにしておきましたので、もう好きにやっちゃってください。ただあんましでかすぎるとこちらの授業が見れなくなるので、なるべく縦長に作っときましたので。よろしくお願いします。それでこの中見るとですね、すでにもう見えてます。

鈴木：どこ？

中島：ほらほら、ここここ。

江川：c=a+b。

中島：もう足し算作ってあるんですよ。まずこれを動かしてみようと思います。動かそうというところまでやってみましょうね。まず枠大きすぎるんで小さくします。

他のブラウザでも大丈夫だと思うんですけど、Chromeだったらまあ大丈夫でしょう。今はこれ数学になってますけれどね、ちょっと1回コーンとクリックしておいて、これだよ、これだよってクリックして。プレビュ反映します。

中島：ほらできた。

鈴木：これ計算機ですね。

中島：うん、これ計算機になってる。例えば、aは何にしましょう。これはアンケートとっても仕方ないですから、これは部長。aは何にしましょうか。

鈴木：そうですね、aは50！

中島：50、良いですね。bは何にしましょうか、ミドリーヌ。

江川：：22。

中島：意味はないですよねこれ（笑）。

江川：意味はないです。

鈴木：特に意味はない。

中島：はい、計算します。いくらになりますかね。足し算ですから？

江川：72。

鈴木：すごい、計算してくれる。

中島：そうなんですね、足し算なんですね。プログラムは足し算ができます。じゃあ引き算もできるはずですよね。

鈴木：できるはず。

中島：はずですよね。

鈴木：何かちょっとわかりました、さっきの感じで。

中島：そうそうそう。ここですね。

江川：変えると。

中島：ここを変えちゃいましょう。プラスだったら、マイナスですね。マイナスは、横の棒をポイ。

中島：でも気をつけてください。マイナスは全角じゃないですよ。

江川：半角。

中島：マイナスの記号ですからね、半角で押してください。全角で押しちゃダメですよっていうことを。たまにいらっしゃいますからね、わからないとね。だから半角です。

これでもう、保存ってないですからね。1回コーンと押して反映されてますので、プレビュ反映にいっちゃいます。ポイと押しちゃいました。これで50、22でしたっけ。引き算しますよ。いくらになる？

鈴木：28！

中島：ほら。

江川：すごい。

鈴木：これもプログラミングですよね。

中島：これもプログラミングと。そうですよね。ここまでにしましょうか。頑張ってください。

鈴木：ありがとうございます。中島コーチの実演終わりました。さてここからは、みどちゃんと皆さんが今やったことをね、実習していく番でございます。それじゃあ一緒に進めていきましょう。皆さんちゃんとメモとってましたか。大丈夫ですか。

江川：とってます！

鈴木：わからないときは『誰か教えて』タブでちゃんと質問してくださいね。『まって』ボタンを押してください。せーの。

江川：まって！

鈴木：これですね。

江川：ありがとうございます。

鈴木：ということで、実習スタートです。

スラッシュの意味は「ここまでですよ」

【実習タイム】

鈴木：ここまで皆さん大丈夫ですか？　もう『できた』がねえ、どんどん上がってるんですよ。568ということで。目標今回570ですから。あ、越えました。おめでとうございます。

ちなみにわからない方はちゃんとタイムラインで教えてください。もう1回ゆっくりやりますよ。はい、それじゃあ次行きましょうか。今回のテーマはこれで終わり。あ、違うか。掛け算もありますもんね。

中島：そうそう、さっきもうやられちゃってんですけどもね。

鈴木：一応やっておきましょうか。

中島：はい、それじゃあ私のほう見てください。ざっくりやります、今のを使いますからね。c=a-b、これを見といてね。他のところ見るとわからなくなるから。

document.getElementById、こういうのはまたいつかにしましょう。とりあえず改造する。a-bをcに入れるという意味なんですね。ここはよろしいですね。よろしいですねって言っても、普通は知らないですよね。aからbを引いてcに入れましょうって意味です。

aとbには何か数字が入ってるねと。じゃあ割り算いきます。さっきスラッシュって言われましたね。いきます、スラッシュです。もうまんまです。

江川：スラッシュ！

中島：スラッシュ！

鈴木：うわあ！　これでもやるんか（笑）。

中島：良いですねスラッシュ。スラッシュというのはね、「ここまでですよ」っていう意味なんです。タグのお尻もスラッシュになってますよね。それでは、プレビュ反映してみます。ポイ。何を何で割りましょうか。どうぞ。

鈴木：えー、30。

中島：30を？

鈴木：5。

中島：5で割る。ほら。

中島：例えば他にもありますね。1を3で割っちゃえ。

江川：0.333333333。

中島：なりますよね。例えば0を3で割っちゃうと。0になりますよね。

江川：ゼロ。

中島：逆に、これ気をつけてください。3を0で割っちゃうと。

鈴木：どうなるんだろ。

中島：Infinity。なんじゃそりゃってなっちゃいますね。だから0で割るっていうのは避けてくださいね。っていうことで、割り算できちゃいました。

これ、この後やってもらいますよ。良いですね。割り算やった、あと掛け算です。掛け算は、これ。私のフォントちょっとこれ、スターマークになっちゃってるんですが。

億単位の掛け算の答えは指数で出てくる

中島：アスタリスクを押してください。皆さんのキーボードだったら、平仮名のけとか。あとはコロンですかね。シフトキー押しながら押してもらえれば。

鈴木：シフトキー押しながら平仮名のけのところを押してもらうと出ますよということで。

中島：米印ですよね。アスタリスク、星形マークっていうのです。プレビュ反映させてみます。ポイ！　何と何を掛けようか、ミドリーヌ？

江川：3と2（笑）。

中島：6ですよって出てきましたね。

鈴木：みどちゃんってもしかして数学得意じゃない？

江川：すっごい苦手（笑）。

中島：掛け算ですよ。だからさっきの3億とか仰ってましたっけね。だけどあんまりやり過ぎると。

鈴木：あ、これやばいんじゃないかな。

中島：これ、指数で出てくるんですね。6かける10の27乗みたいな感じ。だから、0が27個並んでるぜって感じ。

鈴木：そういうことか。

中島：そういうことになってきます。おもしろいでしょう。今スラッシュとアスタリスク、割り算掛け算やりました。後1個だけやります。何かというと。

鈴木：え、何？　だって割り算掛け算やったもんね。

江川：テーマ終わりましたよね。

中島：パーセント。

鈴木：あら、パーセント？

中島：うん。ちょっとやってみますよ。もし失敗したらやめとこ（笑）。6を2でパーセントとすると。

江川：0。

中島：じゃあ3にすると。あ、0。4にします。2が出るかな。

鈴木：出た。

中島：これね、余りです。

鈴木：おー！

江川：1余り2。

中島：さっき誰か言ってましたよね。今Gさんが書いてくれてる。余りはパーセントですかって。パーセントっていうのは余り算になります。整数値のいくらっていう、余り算です。

気を付けて欲しいのは、割られるほうですね。これマイナスだと都合悪くなります。余りっていうのはあくまでも正の数を余りにしないといけなくなるので気を付けてくださいね、っていうことだけお願いします。はい、以上になります。

鈴木：はい、コーチお疲れ様でした！　Hさんがですね、パーセント入れたんだけどあまりが出なかったというふうに仰ってます。これ半角ですもんね、もちろん。

中島：うん、半角です。

鈴木：半角にして、シフト押しながら……パーセントはどこだろう？

中島：数字の5です。

鈴木：5か。半角で入れれば恐らく出ると思います。それでは、皆さんやっていきましょう。皆で実習です、スタート！

江川：私と一緒にやっていきましょう。

鈴木：できた方は『できた』ボタン押してくださいね。今なんと623できた。

中島：素晴らしいなあ。

鈴木：どんどん増えてます！

江川：マイナスになってたところをスラッシュにしまして、プレビュ反映します。これできっと、割り算になったと思います。それでは、私は21を7で（笑）。

鈴木：計算ボタンを押してみましょう。

江川：計算！　3。大丈夫ですね。では次に、アスタリスク。

鈴木：掛け算をするんですね。

江川：掛け算をします。シフト押しながら、け。プレビュ反映を押して掛け算の計算機にします。それじゃあ適当に、32掛ける8。

中島：検証が難しい（笑）。

鈴木：ドイツの、ドイツじゃないやインドの掛け算で。

江川：256！

中島：あ、素晴らしい。今暗算しましたよ。これ出る前に何か。

鈴木：掛け算は得意なの？

江川：ちょっとやめてください（笑）。やっただけです。

鈴木：あとは最後。

江川：余り算ですね。パーセントにします。それでプレビュ反映して。これはあれですよね、aのほうを大きな数字に。マイナスにしちゃいけないんですよね。

中島：プラスにしてね。

江川：例えばじゃあ、8と5。

中島：3が出る？

江川：出ました！　OKです。

中島：ぽくない？

江川：ぽいです。

鈴木：Iさんって読むんですかね、プログラミングおもしろいわと来てますね。

江川：嬉しいですね、ありがとうございます。

鈴木：細かいソースコードの中身の解説とかはちょっと難しいので。一旦今回は超初心者向けということなんで、プログラミングの楽しさだけね、伝われば良いかなと思います。

中島：だってかじり部だから。

鈴木：スクーには、プログラミングの授業たっくさんありますから。

江川：あります。

鈴木：もちろん中島コーチも先生としてたくさん授業やってますからね。後でチェックしてみましょう。ということで、このテーマは以上で大丈夫ですかね。

皆さん、『できた』ボタン押してますか？　695。わからないことはね、誰か教えてタブでどんどん投稿してください。あ、700越えました！　おめでとうございます。

江川：やったー、できた！

鈴木：はい、この後もまだまだ続きます。ということで、これで前半パートは終わりになります。一旦この後ですね、皆さんが投稿してくれた課題投稿を見ていくコーナーがあります。

まだまだ投稿お待ちしておりますのでね、おもしろいカスタマイズを期待しております。