javascriptでぐんたかを結婚させる(スマホ対応)

概要

初心者にも一番ハードルが低い言語ってなんだろうと思ったんだけどやっぱり今の時代javascript（という名前のプログラミング言語）が手軽かなーと思ったのでjavascriptの動かし方をなんとなく書こうと思ったけどそれだけじゃ面白くないからjavascriptでぐんたかを結婚させるよ！

javascriptでぐんたかを結婚させるからには式場（実行環境）を用意しないといけないけど、今回は式はjavascriptで上げるわけだから、javascriptが動く式場を用意しよう。
実際のところ、ぐんたかがjavascriptで挙式できればいいわけだからjavascriptさえ動けば場所はどこでもいいはずなんだけど、今回はその場でjavascriptが実行できて「次は何を書けばいいよ」みたいなこともおしえてくれる便利な機能がついたGoogleChromeを式場に使おうと思うよ。

なのでこのページをパソコンで開いてる人はGoogle Choromeをインストールしてこのページでも開こう。
式場にfire foxを使ってもいいけど今このパソコンにはchoromeしかインストールされてないからchoromeで説明するよ！

ちなみにiphoneならjs anywareでもこのプログラムは動かせるよ。インストールしてjsタブをクリックして貼り付けてなんかやると実行できたはず。
androidの開発環境は見つけられなかったごめん。探せばあるかも。

でも、スマホでぐんたかの結婚式（のjavascript）を実行するだけなら、ブックマーク機能でこのページをブックマークして、URLを編集してスクリプトを貼り付けて保存。それからURLを変更したブックマークをタップすれば実行できると思う。
たしかこういうURLでjavascriptを実行する機能はブックマークレットとかいう名前がついてるよ。
いいからスマホ版やりかた教えろよ！　という場合はこちら

実際にやってみる

これは実行すると名前を入力するウィンドウが出てきて、名前を入力すると「あなたの名前は（入力した名前）です！」と言ってくるだけのプログラムだよ。
いきなりぐんたかの結婚式っぽくなくてごめんね！　そのうちぐんたか感あふれるプログラムにするよ！

var name = window.prompt("あなたの名前を入力してください", "");
hello(name);

function hello(name){
	alert('あなたの名前は' + name + 'です！');
}

choromeを開いて右クリックして「検証」をおして、開発環境を開くよ

右下かどこかに「console」っていうタブがあるからそれをクリックしよう

>記号のところにコピーしたコードを貼り付けるよ。

でも貼り付けるボタンはないから[Ctrl]キーと[V]キーを同時に押すと貼り付けられるよ（macだとcmdキーとVキーかな…）

無事貼り付けられたら[Enter]キーを押そう、そうすると名前を入力するウィンドウが出てくる

適当に名前を入力してOKを押すと

そうだよ、たったこれだけがこのプログラムでできる動作だよ！

解説する

さっき書いたjavascriptというやつ、これはもともとンターネットのサイトとかに動きをつけるために使ってる言語だよ。
サイトを見るためには普通はGoogle Choromeとか、safariとかIEとかのブラウザ（サイトを見るためのソフトの名前）を使うんだけど、こういったブラウザにはjavascriptの動きを解釈して「こういう表現ですよ」って見せてくれる機能がついてるんだよ。
だから消えるボタンとかマウスを動かすとついてくるキャラクターとかそういうのはたいていjavascriptがやってるよ。（今回はそこまでやらないよ！）

あとこのブログのゆゆゆ年表に最近検索機能をつけたけど、これもjavascriptでやってるよ。
こうやってブラウザにこういう表現やってくれ！　って頼むために書くのがjavascriptだよ。
だからこのjavascriptに「ぐんたかを結婚させてくれ！」って頼むとぐんたかが結婚できる寸法だよ！

さっきのコードでブラウザにどんな表現をするよう何を頼んでるのか見てみよう。

まず1行目、これは二つにわかれるよ

var name = window.prompt("あなたの名前を入力してください", "");

name っていう箱を用意してください、中身は = の右側のものを入れてください

var name =

入力ウィンドウを表示してください(タイトルは”あなたの名前を入力してください”,初期値は””空にしてください）;

window.prompt("あなたの名前を入力してください", "");

“”は「中に文字が入っていません」という意味で、空文字というよ
この入力されたものがnameの中に入るよ、先程のキャプチャだと「NOARTS_NET」という文字がはいったはずだよ！
ちなみに;（セミコロン）はこの行はここで終わります、という意味だよ！

あとこのnameの箱の中に何が入っているか知りたいときはconsoleにログを出力するよ
consoleに.ログを書いて（内容はnameの中身）;

console.log(name);

この場合のconsoleはGoogle Choromeの開発ツールのconsoleのことだよ！
これを書くとプログラムがこの[console.log(name);]を通ったときにnameの中身がconsoleに書かれるよ！
余裕があったら下記のような形で書き加えて実行してみよう！

var name = window.prompt("あなたの名前を入力してください", "");
console.log(name);

2行目、これはひとつのことを表してるよ

helloという動作の塊を実行してください（halloにはnameの中身を渡します）;

hello(name);

という意味だよ。

3行目から5行目、これはいくつかの内容にわかれるよ

これはhelloという動作の塊と、その動作の塊がなにをするかを表しているよ

function hello(name){
	alert('あなたの名前は' + name + 'です！');
}

まず、3行目の部分

動作の塊を作ってください　helloという名前で（受け取った箱にはnameという名前をつけてこの塊の中で使います）{という文字から、動作の中身が始まります

function hello(name){

という意味だよ

そして4行目の部分

アラートを出してください、表示する文字は（’あなたの名前は’　をくっつけて　nameの箱の中身をくっつくけて　’です’ );

alert('あなたの名前は' + name + 'です！');

そして5行目の部分

}という記号までが、実行する動作の塊です。ここからあとは実行しないでください

という意味になるよ！　たった五行なのにえらい大変だね！！
ざっくりどう動くかわかったところでぐんたかを結婚させるプログラムを貼るよ！