| ホームページ | Pirikaで化学 | ブログ | 業務リスト | お問い合わせ |
| Pirikaで化学トップ | 情報化学+教育 | HSP | 化学全般 |
| 情報化学+教育トップ | 情報化学 | MAGICIAN | MOOC | プログラミング |
| MAGICIANトップ | MAGICIAN-Jr. | MAGICIAN-講義 | 過去の資料 |
MAGICIANとは、材料ゲノム(Materials Genome)、材料情報学(Materials Informatics)、情報化学(Chemo-Informatics)とネットワーク(Networks)を結びつけて(Associate)いかれる人材です。
2021.7.22
もう少しすると、高校生でもプログラミングは必須になるような事が言われている。
算数なんて電卓に任せれば良い。
英語なんてGoogle翻訳に任せれば良い。
という意味では、プログラミングなんて、AIにやらせる時代になると僕は思っている。
じゃー、人間は何を学習すればいいのだろう？
第3回でも触れたけど、ニューラルネットワークを効率的に太らせる訓練はした方が良い。
僕が高校生の時に、カシオのプログラム電卓、FX502Pを購入して、プログラミングにのめり込んだ。ブラックジャックのプログラムや月面着陸のプログラムを夢中で打ち込んだ。
|
ブラックジャックなんて、確率の問題さ！
|
表情が読めない！
|
自分が夢中になって遊ぶソフトでは無く、人を夢中にさせるソフトを作りたいというのがプログラマー人生の始まりだ。
そうした夢中になれるものが早く見つかると良いのになーとは思う。
それまでは、Pirikaの例題で学ぼう。
ブラックジャックのプログラムは52枚のカードから2枚のカードをディーラー、2枚のカードを自分にランダムに選ぶ。
このランダムというのが最初の例題だ。
だいたい、ランダムの日本語ってなんだろう？
無作為かな？ (逆に意味不明だな。)
|
まずは、簡単にコイン・トスを考えてみよう。
コイン・トスというのは、コインを投げ上げて、コインの表が出たか、裏が出たかで、先攻、後攻などを決めるやり方だ。 コンピュータは、賢いようで、本物の乱数は取り扱えないで、疑似乱数だとかなんとか、うるさいことをグジャグジャ言う人も多い。 気にすることは無い。そこまでの精度は要求しない。 |
ロボットやカジノのプロでない限り、確率1/2で表か裏が出る。
|
取り敢えず下のボタンを押してみよう。
クリックするたびに、違う0-1の間の数が表示されるだろう。
これが乱数の発生だ。
0-1の間の乱数： ***
このように、これから学ぶJavascriptと言うプログラムはブラウザーの中で実行できてしまうのでとても都合が良い。
多くのプログラム言語やExcelなどで乱数を発生させると0-1の間の実数を返す。
実数というのは、小数点以下に値を持った値のことだ。
そのプログラムは次のようになる。これを全部コピーしてメモ帳(Macの場合にはテキストエディト)に貼り付けよう。
そして、TestRandom1.html
と言う名前で保存する。
<!DOCTYPE html>
<html>
<head>
<title>Random Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<input type="button" value="0-1の間の乱数を発生させる" onclick="GetRandomNumber();">
0-1の間の乱数： <span id="sample">X</span>
<script type="text/javascript">
<!--
function GetRandomNumber() {
var randnum =Math.random() ;
document.getElementById("sample").innerHTML = randnum;
}
// -->
</script>
</body>
</html>
| 残念ながら、iPhone, iPadではうまく行かないが、WindowsやMacを使っているなら、セーブしたファイルをダブルクリックすると標準のブラウザーが立ち上がって、そこでボタンをクリックすると乱数が表示される機能が実現されている事が確認できるだろう。 つまりコンピュータに、自分のやらせたい仕事をやらせるプログラムを作成したと言うことになる。 |
読むだけでなく、実際にやってみるのが大事！
|
ここで、ファイル名.htmlと指定した。
この.htmlと言うのは拡張子と呼ばれるもので、このファイルの中身がhtml(Hyper Text Markup Language)であることを表している。コンピュータは、htmlファイルはブラウザーで開くように設定されている。
でも、ファイルを右クリックすると、他に読み込めるアプリケーションのリストを表示してくれる。 メモ帳などで開いて、構成を見ていこう。
ブラウザー（閲覧する道具）は、ある規則に従って、ファイルの中身を表示する。規則に従っていないと、どう表示して良いかわからない。
人間みたいに、多少間違っていてもOKとは言ってくれない。
そこで、まず、大まかな構成を覚えてしまおう。
最初の２行は呪文みたいなものだ。
<!DOCTYPE html>
<html> 毎回同じなので気にすることはない。
次にヘッダーと呼ばれる部分がくる。これも呪文みたいなものなので使い回すけど、titleの部分だけは内容に合わせて書き換える。
<head>
<title>Random Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head> <XXX> </XXX>
とかのheadとかtitleがある。これはタグと呼ばれるものだ。
<XXX>は開始タグで、ここから、終了タグ</XXX>の間はそのタグに従って処理してくださいとブラウザーにお願いしている。
そして3つ目のパート、body(ボディー)がある。日本語にすれば”中身”になるのだろうか？
ここにブラウザーに表示される実体を書いていく。今書いているようなこの文章もbodyタグの間に書く。
<body>
</body>
今回のは、bodyの中身がさらに2つに分かれる。
ボタンを描いたり、そのラベルを表示する部分。そのボタンが押されたら行う動作の部分。
結果を表示する部分は次のようになる。
<input type="button" value="0-1の間の乱数を発生させる" onclick="GetRandomNumber();">
0-1の間の乱数： <span id="sample">X</span>
<input >タグはブラウザーと何かやり取りしたい時に使うタグになる。ここではbutton(ボタン)を使ってやりとりしましょうと言っている。そしてそのbuttonにはvalue(値）のラベルを付けるように言っている。そしてこのボタンがクリックされたら（onclickされたら）GetRandomNumber()を実行させる。
そして、結果を表示させる部分を<span>タグに準備している。
そして、<body>タグの中には、<script>タグがある。
ここには、人間がブラウザーに行って欲しい独自の動作を記述する。
つまり、プログラムの実体はここに書くことになる。
最初の１行目でプログラム言語はjavascriptを使うことを宣言している。
この４行もいつも同じなので、コピペして使う。
<script type="text/javascript">
<!--
// -->
</script>Javascriptのプログラムの実体は次の4行になる。
function GetRandomNumber() {
var randnum =Math.random() ;
document.getElementById("sample").innerHTML = randnum;
}
Javascriptのプログラムは、関数として記述する。
難しいことははしょると、プログラムはfunction(関数）の形で書く。
function XXX(){
この部分もいつも共通
}
今回は関数の名前はGetRandomNumber()にしてある。
そして、ボタンがクリックされたら(onclick)ここに飛んでくる。
そして、 var randnum =Math.random() ;
Math.random()というのはJavascriptの命令で、0-1の間の乱数を発生させる。
var randnumというのは、randnumと言う名前の変数(var) を用意してくれと頼んでいる。
名前なので、var RANNSUUでもなんでも良い。
そして、randnumと言う名前の入れ物(変数)に、Math.random()の値を入れてくださいと言うのが、
var randnum =Math.random() ;
の意味だ。
そして、次の
document.getElementById("sample").innerHTML = randnum;
もほとんどおまじないで、
<body>で定義した
<span id="sample">X</span>の
sampleのX位置に、randnumの値を書き込めと言っている。
いつも同じ事だけを表示するWebページではなく、中身を入れ替えたい時にこういう書き方をする。
全部をいっぺんに理解できていなくても良い。
実は自分も、ほとんどは使いまわしている。
なんかこんなコマンドがあったよなとネットを調べながらやる。
見た覚えも聞いた覚えもないと、検索すらできない。そこで最低限の勉強が必要になる。
ポイントは
1. ボタンの作成方法
2. クリックされた時の動作の定義
3. 乱数の発生方法
4. 得られた乱数の表示方法
の流れだけは押さえておこう。
最初に作ったプログラムをコイン・トスのプログラムに改良してみよう。
X
裏が出たら僕のね。
|
確率は？
|
乱数に細工すれば全部私のもの！
|
まず、ボタンの名前を変えよう。そして表示のテキストの部分も好きに変えよう。
次に先程のプログラム中で、0-1の乱数を表示する部分を変更する。
var MySideと言う裏か表かを入れる変数を定義する。
そして、htmlの中身を表示する部分を書き換える。
.innerHTML = MySide;
function GetRandomNumber() {
var randnum =Math.random() ;
var MySide;
document.getElementById("sample").innerHTML = MySide;
}
次は、var randumとvar MySideの関係を考える。
var randumには0-1の間の数字が入っているので、これが0.5以下だったら表、0.5以上だったら裏と表示させてあげることにする。
(ピッタリ0.5だったらどうするかは疑問だよね。）
もし、randumが0.5以下だったら、MySideに表を入れなさい、そうでなければMySideに裏を入れなさい。
これをブラウザーが理解できるJavaScriptで書くと次のようになる。
if(randum<=0.5){
MySide="表”;
}
else{
MySide="裏”;
}if文は条件分岐と言って、どんなプログラム言語を使うにしても、コマンドは存在するので使い方を覚えよう。 もし(if)、これこれの条件が正しければ(randum<=0.5)、これこれ({ の中身}）、もしそうでなければ(else), これこれ(次の{ の中身}）を行えという命令だ。
ここでは、表と裏が出る確率は同じなので0.5で区切った。
JavaScriptの関数で、Math.floorというものがある。floorというのは建物の階を意味している。次のフロアーに達していないと落ちてきてしまうイメージだ。
そこで、
Math.floor(0.28) は 0
Math.floor(0.71) は 0
Math.floor(1.56) は １
Math.floor(1.88) は １
というように実数から小数点部分を切り捨てた、自然数を返してくれる。
(注意しなくてはならないのは、四捨五入では無い点だ。）
Math.random()は0-1の実数を返すので、Math.random()*2は0-2の実数を返す。
そこで、
Math.floor(Math.random()*2)とやってあげると、0か1をランダムに返すようになる。
Math.random()*3にすれば0,1,2をランダムに返す。
もう簡単にできるだろう。
ボタンを3つ用意する。
そのボタンが押された時の関数を準備する。これは自分が選んだ手になる。
MyHandという変数を準備して、各関数で"グー”、”チョキ”、”パー”を入れる。
コンピュータの手は、乱数で、0,1,2を発生させる。
var CompHandという変数を準備して0,1,2に対応して"グー”、”チョキ”、”パー”を入れる。
勝ち負け判定を出力すればよい。
注意するのが、変数を定義する位置だ。
関数の中で定義された変数は関数の中でしか使えない。
function XXX(){
var YYY
}
ボタン処理の3つの関数の中で使いたいのであれば、関数の外で定義する。
var MyHand;
function Gu(){
MyHand="グー"
}
function Tyoki(){
MyHand="チョキ"
}
function Pa(){
MyHand="パー"
}
このような変数をグローバル変数と呼ぶ。
読んだだけでわかった気にならないで、必ず自分でやってみよう。
|
う、チョキしか出せない！
|
誰がパーなんて出しますか！
|
ここまでは、化学とは関係ないけど、次回、乱数を使った化学をやろう。
Copyright pirika.com since 1999-
Mail: yamahiroXpirika.com (Xを@に置き換えてください) メールの件名は[pirika]で始めてください。