プログラミング初心者でもBMI計算機がつくれちゃう　やさしいオンライン講座の様子をお届け

BMI計算機を作ってみよう！

鈴木顕照氏（以下、鈴木）：さあここからは後半です。ここから1時間、頑張っていきましょう。あら、ちょっと見慣れない方が。

新井利佳氏（以下、新井）：ミドリーヌ、です。

鈴木：嘘つけ（笑）。ミドリーヌじゃないですね、どなたですか？

新井：こんばんは！　皆さんの部員の代表で登場させていただく、新井利佳と申します。皆からはりかっちって呼ばれているので。りかっちでよろしくお願いします。

鈴木：みどちゃんが前半担当してくれましたけれども、後半は皆さんりかっちと一緒に実習していきましょう。

新井：お願いします。

鈴木：じゃあ1回ここでタイムスケジュール振り返りましょうかね。

鈴木：こんな感じです。今はここです。後2回、実習があります。水色のやつですね。間にちょいかじりというミニコーナーがあります。

ちょっとね、小休止しましょう。そしてエンディングにはですね、プレゼントキーワード発表します。お楽しみにということで。りかっちはプログラミング大丈夫？

新井：ちょっと待って下さい。私今すごい緊張してるんですけど。

鈴木：何で緊張してるの（笑）。

新井：皆さん想像してください。だってコーチと部長さんが呼び出してるんですよ？

鈴木：ちょっと来いって。

新井：すごい恐いですよね。

鈴木：でも、タイムラインすごいよ。りかっちりかっちって来てるよ。

新井：大丈夫ですか？　部員代表で来ちゃったんですけど、他の部員の方から助けてもらわないと。私ミドリーヌほど上手くいかないですよ。さっき、『まって』ボタンが全然押されなかったんですけど（笑）。大丈夫ですか？

鈴木：皆さん、待って欲しいときは『まって』ボタン押してくださいね。わからないことは『誰か教えて』タブで投稿してください。

新井：お願いします。

鈴木：さあ後半戦。りかっちが来たところで、さっそく始めていきたいと思います。今回ね、全部で4つのテーマでやってきてます。前半が1と2、終わりました。そして後半戦、3つ目いきますよ。3つ目のテーマは！　こちら！

鈴木：いよいよ、BMI計算機に挑戦！

新井：いえーい！

鈴木：BMI計算機に挑戦。

新井：あ、りかっち頑張ってって来てますね。やった！

鈴木：応援してくれてる。りかっちファンがね。

新井：BMIってあれですよね、太ってるか痩せてるか。ちらっ、とか言って。

中島俊治氏（以下、中島）：見られたいま。

新井：わかるやつですよね？

中島：ドキッ。

鈴木：BMI。

中島：やっぱりね、健康第一。健康が良ければ何でもできる。

鈴木：どっかで聞いたことあります。

中島：若いときに無理しちゃうと、やっぱり年とるとね。身体がガタきちゃうんですよね。だから若くて何でもできるっていうそのとき、大事だよね。

健康に留意しましょうねっていう意味を込めてのものなので、決して特定の方に対する危険なアプリケーションではないので。健康に注意しましょうねということのアプリケーションです。フォローしてしまった。

新井：（笑）。

鈴木：わかりました。それじゃあね、この3つ目のテーマも中島コーチの実演を、皆さんでメモをとりながらね、しっかり見ていきましょう。その後に、今度はりかっちと皆さんが一緒に実習する時間があります。まずは中島コーチの実演、お願いします。

中島：はい、わかりました。ちょっと最初からやったほうが良いかなと思うので、1回全部消しました。よいしょ。

まずは、JSくんにアクセスしましょうねっていうことをお願いします。JSくんのURL大丈夫ですよね、皆さん。後半から参加している人がいるかもしれないですからね。

鈴木：そうですね。もう1回ここでね、JSくんというツール今回使ってますので、こちらを別タブで開いておきましょう。かじり部の公式アカウントからも投稿してくれるはずです。JSくんね、皆さんしっかり開いておきましょうね。

中島：ザクッと見てもらって、一番下の利用規約もサクッと見てもらって。まあ悪さしないでねってことです。それで、規約に同意していただければOKです。プチ！　プチじゃなかった、何だっけ。よいしょだっけ？　よいしょ！　自分のを何か忘れちゃって、ごめんなさい。

鈴木：クリルンとかね。

中島：もう今日はね、環境が全然違う。周り見てくださいよこれ、とっても良い感じでしょ。

新井：そうそう、ここに触れて欲しかったんですよ！

鈴木：誰も触れてくれないんですよ。

中島：私はもうわかってました。木の匂いがもう漂ってますし。

新井：部長がね。

鈴木：おしゃれにしてるんですよ。

中島：だから環境がとても違うので、すごくドキドキしながらやっています。

鈴木：部活というテーマでやっていますからね。

中島：だからここ、ひょっとして体育館の裏なのかな。

新井：ということは、ひょっとして呼び出されてるんですか？（笑）

中島：いやいや、そういう意味じゃなくて。

新井：あんまり怖がらせないでください（笑）。

中島：大丈夫大丈夫。私優しいもんねいつもね。

鈴木：優しいですよ。

体重を身長の二乗で割る

中島：ということでやっていきましょう。JSくん一覧の中の、エディタというやつね。これを押してもらいますよということです。そうすると、これでページが出てきました。

中島：この中でね、1とか2とか3とか数字を書いて、なるべく誘導するようにしました。さっきは見本の1、見本の2と前半でやりました。後半は見本の3と見本の4やっていくようなかたちになっています。

見本の4はちょっと早めにやっていくかもしれませんけれども、見本ソースの3というやつをちょっと押してみましょう。これは何かというと、押しますよ。せーの、よいしょ！

中島：中身めちゃくちゃ簡単、24行しかないんですね。いろいろ書いてますが、全部見なくて良い。今はね。タイトルだけ見てください。

BMI(1)と書いてあります。後半戦はBMI(1)と(2)と、2つアプリケーション作ります。その中で1だよって、それだけの話しです。詳しいところは置いておいて、この下ですね。17行目。

中島：var bmiはwで割っちゃえ。何で割る？　hを100で割ったものと、hを100で割ったもの。hを100で割ったものを二乗して、それでwを割っちゃいましょうというものです。

詳しいことは省きますが、体重を身長の二乗で割っちゃえということになります。ただ身長がですね、センチメートルが普通ですよね。メーターで普通やりませんので、100で割ってあげるっていうことが必要になっています。実はBMIこれだけなんですよ（笑）。

鈴木：計算ですね。さっきの延長ですよね。

中島：だけど、組み合わせてるんですね。そのときに、割り算したときにちょっと困るじゃないですか。そこで、ホワイトボードくん。

鈴木：そんなのがあるんですね。

中島：ホワイトボードないですからね。それがちょっとできるようにと思いまして。例えばBMIですよと。これは何かというと、体重、これを割っちゃうんですね。何で割るかというと、身長の二乗だよと。こんな感じになるわけですね。

中島：これをプログラムにしましょうね、ということです。それだけの話しなんですね。これをやってみましょうということです。よろしいですかね。

覚えておいて欲しいのは、こういった形を覚えておいてください。今からこれを細かく覚えなくても良い。ただこうやったらできるんだねっていうことを考えつつ、皆さんにはぜひ、ちょっと違うものにできないかなって考えてみてください。

例えばさっきやりましたよね。お昼何にするとか、ネクタイ何にするとかありましたよね。同じようにカスタマイズしましょう。私達はこれで体重と身長でもって何か出す。例えば合計金額と人数があったら、何かできそうですね。何ができる？

鈴木：割り勘？

中島：あ！　見ました私のアンチョコ？

鈴木：見てないです見てないです（笑）。

中島：実は割り勘って書いてあるんですよ。見られちゃったかな（笑）。後ね、旅行に行きましたと。外国に行きました。チップとか必要じゃないですか、そういった計算とか。後は為替、やっぱ大事ですよね。そういったものの計算ができそうじゃないですか？

鈴木：できそうですね。

中島：できそうですよね。そういったものをぜひ、皆さんにもやってもらいたい。私はちょっとね、証券会社に勤めておりました。部長をやってました、これ偉かったんですよ。

鈴木：お、部長！

中島：Nの付く会社ですよ。まあそれはこれ以上言わないことにしますが。

鈴木：何となくわかりますね。

新井：（笑）。

中島：ヘトヘトになってました。なので株の計算とか税金とか両替とか。そういったものの計算の元にしていただけたらなと思っています。

だからそこの計算は皆さんいろんなところで勉強していただいて、使えるようになってくださいねという意味を込めて、今からBMI！　ボディ、何だっけ？　マス、MASS。それのインジケーターですね。それを、今から作っていきましょう。

「ちょっと待ってボタン」を押すとテロップが出る

鈴木：なるほど。りかっちわかってないんじゃないか疑惑がタイムラインで。反応が微妙だぞみたいな。大丈夫？

新井：バレました!?　大丈夫です。

鈴木：理解してた？

中島：大丈夫大丈夫。だってかじり部だから。ちょっと難しい物をかじってるんですね。だからかじって少々歯茎から血が出ても良いんですよ。

新井：少々どころか、血だらけになっちゃう可能性が（笑）。

中島：大丈夫！　あ、消えちゃった。歯ブラシ。

鈴木：皆さんは大丈夫ですかね。

新井：大丈夫ですか？

鈴木：全然『まって』が来ないんでね。

新井：そこを心配してます。

中島：それよりも私達の会話を楽しんでるんじゃないかな。『まって』ボタン忘れてるんじゃないかな。

鈴木：そういうことか。じゃあもう1回やっときますか。いきますよ、せーの！

一同：まって！

中島：すごいね、テロップ出るんですね。

鈴木：出るんですよ。裏で服部が頑張ってるんです。

中島：なるほど。頑張ってください、Jさん。

鈴木：（笑）。

中島：ということでやりますが、かじり部ですからあんまりね、英語とか計算の難しことはやりませんので。じゃあ見ててください、いきますよ。エディタのほうに戻ります。

さっきはソースの3番目を見ていただきました。今は何もない状態にしておきました。部活の最初から参加されている方はここにもう名前入ってるんですね。もう1回入れ直します。nakashimmerにしておきました。

でもってソースの入力のところですが、ここ今空白になっています。上はHTMLのコード、下はJavaScriptのコードです。こういった感じで、いろんなものが作れるように作ってみました。

それでHTMLのところ、JavaScriptのところ、いちいち作るのは大変だと思いました。それはもうかじるどころじゃない。歯茎から何が出る？

新井：（笑）。

鈴木：血ぐらいにしときましょうか。

中島：血ね、嫌ですね。なので、もうかじれるくらいにしましょう。ということで、上に戻ります。反映の3。

鈴木：あ、ちょっと『まって』が来てますね。

中島：何々？

鈴木：『まって』が今上がってますね。

中島：さっきポーズやったから？

鈴木：そうかもしれない（笑）。普通に押しちゃったのかもしれないですね。

新井：今ちょっと私、テンション上がったのに。

鈴木：まだ待ってっていうほどでもないですもんね。

中島：まだ何もしてないし（笑）。ということで、反映の3というやつを押しちゃってください。今は皆、しっかりメモ書きしてるところね。

鈴木：メモとってくださいよ。

中島：反映の3番目押しちゃいます。ポイ。

中島：ほら、もうできちゃった。もうソース入れちゃいました。そしてこの中で大事なところというのは、さっきもう見ました。ver bmi=w/(h/100*h/100)。スラッシュは割り算、さっきやりましたね。

丸括弧というのはわかります？　よく数学でありますよね、優先順位を付けてこっちを先にやりますよと。hを100で割ったのとhを100で割ったやつを掛け算したやつ、それをグループにしたやつで、wを割っちゃえというものになります。難しい話はなしにして、今からここの部分を消しちゃいます。

鈴木：うん。

中島：あ！　消す前にちょっと試してみましょうか。せっかくですからね。

中島：あらかじめここにね、h=154と。hは身長だと思ってください。154センチメートル、よろしいですか。それからw、これはウェイトです。横幅とかいろいろありますけれど。ちなみに私の横幅は。

鈴木：お？

新井：おお？

中島：内緒です。いやだってねえ、誰かに言われちゃいました。ドラえもんですかって。

新井：ひどい（笑）。

中島：多分見てる人かもしれないな。

鈴木：夢を叶えてくれるってことですかね。

新井：うん、何でも出てくるってことですよ。

中島：上手いですね。じゃあドラえもんポケット作らなくちゃいけない。

鈴木：（笑）。

中島：そしたら、ここの身長とかの数字を変えてみましょう。作り変えるよりもそのほうが良い。その前にこの数字でやってみますね。154センチで53キロだとします。これを直接、下のほうでプレビュ反映させてみます。ポイ。

中島：BMIは22.347782と、後ろは飛ばしますけれどね。こんな感じでもうできちゃいました。これで反映させても反映させなくても良いと思いますが、ここの数字を変えてみるということね。

さっき私達は入力しましたが、詳しいことは知らなかったです。でも数字入れてみました。154センチと53キロです。皆さんの数字入れてみてください。くれぐれも送信ボタン押さないでくださいね。

提出ボタンは押さないでください。例えば165にして、ウェイトのほうが60くらいにします。あ、私の数字にしよう。私、確か185の65。

新井：おっきい。

鈴木：意外とね、おっきいんですよねえ。

中島：横に？

鈴木：違う違う（笑）。

中島：架空ですよ。皆違う数字にしましょうね。ドラえもんとか、キャラクターの身長とか入れてみても良いです。それがどうなるのか。やっちゃいますね、ポイ。

BMIは18.99。これが何なのかっていうのはわかりませんが、少なくなってるので健康だよねってことがわかりますよね。

じゃあちょっとここまで、やってみましょうか。数字を変えてみる。最初オリジナルにしておいて、その後試してみるということをしてみましょう。

鈴木：はい、ここまでコーチの実演ですね。実は質問が来ていてですね、四則計算の順ですね。Kさんからの質問です。BMIの計算は、どの順に四則計算されるのでしょうかと。

中島：難しいですね。丸括弧というのが一番強いですよね。丸括弧の中を先に計算する。その結果を元にしてwを割っちゃえっていう形になります。

後h/100掛けるh/100っていうところ順番はそうなってますが、よく考えたら二乗して100を割る割るやってるだけなので、順番ってあんまり関係ないんですよ。

鈴木：そうですよね。

中島：ちょっと見えやすくするために、ああいう書き方をしています。数学の授業、多分誰かいつかやると思います（笑）。

鈴木：ということで、ここからはりかっちですね。りかっちと皆さんの実習の時間です。

BMIは肥満度を測定する指標

【実習タイム】

鈴木：大丈夫ですね。皆さん大丈夫ですか、ここまでできてますか？

中島：実はですね、BMIの計算ていうのが大事。もうやりましたよね。数字変えたら変わりましたじゃないですか。このセクションではこれが大事なんですよ。これ覚えてもらったら良いかなということで。実は、テーマ3番目が終了しちゃいましたね。

鈴木：皆さんお疲れ様でした！

新井：良かった、ここまでできて。

鈴木：良かったねえ。

新井：ちょっとドキドキしました。

中島：個人情報が漏れちゃいました。

鈴木：最終的にはね、敵が増えたっていうね（笑）。

中島：いやいや、そんなことないって。

新井：でも、私の友人とかは18とかもっと低いんですよ？　それを目指してます。

中島：うーん。まあ、ノーコメント。

新井：ノーコメント！（笑）

鈴木：Lさんがね、「痩せてるほうがモテるんです」と。

中島：私はノーコメントにしておきます。

新井：でも女子からしたら痩せてるほうがモテますよやっぱり！　必死に痩せますよ。ですよね？

鈴木：頑張ろう。あのね、コーチがずるいですね。自分はこの話題に入りませんと（笑）。

新井：あ、ポチャカワがタイプです、と。それはあるかもしれない。ちょっとつまみたいってのはあるかもしれませんね、男女両方とも。

鈴木：質問大丈夫かな？

新井：質問が来てますね。

鈴木：Mさんがね、BMIって何でしょうかってね。もう1回ちゃんと説明しておきましょう。BMI計算機を今やってるわけですけれども、BMIって何ですか？　コーチ。

中島：実はさっき、ネットでググりました。ボディ・マス・インデックスですね。ごめんなさい、インデックスですね。肥満度を測定する指標になります。

指標なのでね、人種によって違ってたりしますし、本人にとってはどれが一番良いのかっていうのはまた別ですからね。指標のひとつ。それからここではアプリのサンプルとしてのものなので、参考程度にしてくださいね。皆、仲良くしましょう。

鈴木：仲良くね、皆もBMI調べてみるのもおもしろいかもしれないですよ。

新井：聞きたい！　教えてください！

鈴木：ということで、3つ目のテーマはこちらでお終いです。皆さんお疲れ様でした！

中島：お疲れ様。