JavaScriptで遊ぼう　20分間クッキング♪(初心者向け)

前書き

JavaScript Advent Calendar 2011(オレ標準コース) 8日目担当 Arc Cosineです。
今回は、プログラム未経験な方でも楽しくJavaScriptで遊べるようにという願いを込めて書きます。
※IE6,IE7,IE8では今回のプログラムは動きません。下記に記載されています推奨ブラウザをご利用ください。

JavaScriptの開発環境を整える

プログラム言語を何か始める場合、開発環境を整えなければいけません。
その点、JavaScriptは現在最も開発環境を整えるコストが低い言語と言えます。
なぜならば、用意するのがブラウザとエディタだけで良いからです
まずブラウザを用意しましょう。
これはどのブラウザを用意しても良いのですが、私のお勧めはOperaかGoogle ChromeかSafariかFirefoxです。

どれでもお好きなブラウザをインストールしてください。
ちなみに、上記のブラウザで開発環境を構築する敷居が一番高いのはFirefoxです。
なぜならば、Firefoxをインストールする＋Firebugをインストールするという手順が必要だからです。
とはいえ、Firebugのインストールはワンクリックですので、さほど面倒ではありません。
それ以外のブラウザは標準で開発用ツールがついてきますので、特に何か余計な物をインストールする必要はありません。

次にエディタを用意しましょう。
エディタは何でも良いです。メモ帳でも良いですし、秀丸でも良いです。VimやEmacs、さらにはVisual StudioやEclipseといった有名なエディタを使うのも手でしょう。
Windowsユーザならば初めてのエディタはEmEditorかサクラエディタなんかが良いのではないでしょうか。

以上で、開発環境の構築は完了です。ね、簡単でしょ？

適当にHTMLを作る

<!DOCTYPE HTML>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>初めてのJavaScript</title>
</head>
<body>
 <div id="result"></div>
 <script type="text/javascript">
 //ここにコードを書く
 </script>
</body>
</html>

上のコードをコピーしてエディタに貼りつけて、適当な名前をつけましょう。
first.htmlとかsample.htmlとかmofmof.htmlとかお勧めです。
//ここにコードを書く
とコメントされている所にコードを書いていきます。

小学生でも理解できるコードを書く

まずは、足し算をしてみましょう。折角なので、今日の日付を足してみましょうか。
2011+12+8 = 2031ですね。
さて、そんな暗算はともかく、JavaScriptでコードを書くと以下のようになります

var total = 2011 + 12 + 8;
var result = document.getElementById("result");
result.innerHTML = total;

上記のコードをコピペして、先ほどのコメントされてる箇所に貼り付けて保存しましょう。
その状態で先ほど保存したHTMLファイルをブラウザで開いてみましょう。
どのブラウザも普通にドラッグ＆ドロップすれば、ブラウザで見ることができます。
間違ってもダブルクリックとかしちゃいけません。
2031という数字が見えましたか？
もし、ちゃんと表示されなかったら、Ctrl+Shit+Iを押しましょう。
或いは、右クリック→要素を検証を選択して下さい。
開発ツールが表示されますので、どんなエラーが出てるのかチェックしましょう。
コンソールとかエラーというタブがあると思いますので、それをクリックして、メッセージを読んでみてください。
分からない単語が出てれば、その言葉を検索すれば解説ページが出てくると思いますので、それをよく読んでコード修正しましょう。

正直、この辺はちょろいですね。

少しレベルアップ

では、次にこれを可変出来るようにしましょう。
可変と言っても、大したことはありません。
数字を入れたらひたすら足すという処理をするだけです。
まずHTMLを修正します

<!DOCTYPE HTML>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>初めてのJavaScript</title>
</head>
<body>
 <input id="box" type="text" />
 <input id="send" type="button" value="add" />
 <div id="result"></div>
 <script type="text/javascript">
var total = 2011 + 12 + 8;
var result = document.getElementById("result");
result.innerHTML = total;
 </script> 
</body>
</html>

はい。ボタンと入力ボックスが出てきましたね。
このボタンを押したときに、入力された数字がresultの中に表示されるように修正しましょう。
コードは下記のようになります

var total = 0;
var send = document.getElementById("send");
send.addEventListener("click",function(){
var box = document.getElementById("box");
var n = Number(box.value);
total += n;
var result = document.getElementById("result");
result.innerHTML = total;
},false);

急に長くなったり見たこと無い文字が出てきたりして、めまいを起こしたかもしれませんが、踏ん張ってください。
ここが耐えどころです。ここを耐えて理解できれば、JavaScriptの20%くらいは理解したと言えます。20%は言い過ぎちゃうん……？
さて、何をしてるのか順を追って読んで行きましょう。
1行目はtotal変数に初期値である0を入れています。
2行目はidがsendの要素、つまりボタン要素を取得しています。
そして、3行目から9行目がボタンをクリックした時の処理を書いています。
idがboxである要素、つまりテキストボックス内に入れられた値を数字化して、totalに足すだけの簡単な内容です。

プログラムに初めて接すると、この辺が一番かったるい上に、微妙にわかりづらい所なのかもしれません。
そこで、覚えて欲しいルールなのですが、基本的に、プログラムは上から順に実行されるという点です。
暗黙の了解と言っても過言ではありません。
(もちろん、関数やGOTO(笑)によって、ジャンプする事もありますが、それは後々覚えれば良いです)
そのルールに則って読んでいけば必ずプログラムがどう動くか理解することができますので、頑張って読んで行きましょう。
これは僕個人の意見ですが、処理する順序で書かれてないコードは読みづらくてしょうがないなと感じます。
ある一定のレベルを超えるとわざとそういう書き方をしていると理解できるようになりますし、そちらの方がスマートなケースも多いです。
とはいえ、読みやすさを重視する場合、僕はなるべく処理順で書くように努力しています。

さらにレベルアップ

では、最後にこの処理をオブジェクト化してみましょう。
コードは下記のようになります

function OREORE(){
 this.init();
}
OREORE.prototype = {
 total : 0,
 init: function(){
  this.send = document.getElementById("send");
  this.box = document.getElementById("box");
  this.result = document.getElementById("result");
  this.addEvent();
 },
 addEvent: function(){
  var _self = this;
  this.send.addEventListener("click", function(){ _self.getTotal() } , false);
 },
 getTotal: function(){
  var n = Number(this.box.value);
  this.total += n;
  this.result.innerHTML = this.total; 
 }
}
new OREORE();

急にわからなくなったかもしれません。
ですが、良く見てみると先ほどのコードと似通った形になってる事が分かります。
ここでは細かな解説はしませんが、この書き方をじっと眺めてみて、なんでこういう書き方をしてるのだろうかと考えてみてください。
そして、例えば

OREORE.prototype = {

の行を

OREORE = {

と書き換えるとどうなるのか
とか

new OREORE();

の部分を

OREORE()；

に書き換えるとどうなるかなどと色々実験してみましょう。
他にも、var _self = thisと書いてある行は何故_self変数へ代入しているのかとか考える事はいっぱいあります。
変化が分からない場合は、console.logを使って、変数の値を書きだしてみると良いでしょう。
最初のうちは理解出来ない事が多いのですが、こういう短いコードから読み解いていくとJavaScriptが面白く感じるようになります。

最後に

実は、このコード、バグが含まれています。
それは、数字以外の文字(例えばoとかpとかeとかrとかa)を入力すると、NaNと表示されてしまいます。
なぜそうなるのか、原因を突き止めてみてください。
また、数字だけでは物足りないので、文字を足して表示していく場合にはどうすれば良いのでしょうか。
これらを解決するだけでも十分楽しめます。

たった20行程度のコードでもここま「遊ぶ」事が出来るJavaScriptって面白いですよね！
ぜひ、これを機にJavaScriptで遊んでみてください。
きっと新しい楽しみを見つけることが出来ると思います。
明日はpush_backさんです。
以上です。

EFIブートローダを移動した話

EFIブートローダを移動した HX90に環境を整え終わってから、アホな事をしたので、その記録を残す。 SSD:　Cドライブ SSD:　Dドライブ(データストレージ用) + ESP※ SSD:　Eドライブ(データストレージ用) ※ESP(EFI System Partition) インストールした時、こんな構成だった。 ESPがDドライブにあるのが気持ち悪かったので、これを削除した。そしたら、BIOS画面が出るだけになり、Windowsが起動しなくなった。移動手順この時の自分はMBRをふっ飛ばした時と同じ現象だと思ったので、MBRというキーワードで検索したが、今はEFIブートローダーと呼んでいるらしい。【Win10】任意のディスクにEFIブートローダをインストールする色々検索した結果この記事が参考になった。 Diskpartを使って、パーティションを新たに分割し、bcdbootを実行して、無事に事なきを得た。パーティションの分割はこんな感じ Diskpart Select volume 0 shrink desired = 200 Select disk 0 Create partition EFI size=200 Format quick fs=fat32 label="ESP" Assign letter=P exit EFIブートローダーのインストールはこんな感じ bcdboot C:\Windows /s P: /f UEFI ちなみに、自分の環境だけの問題なのだが、コマンドラインで、「\」を入力するのができなかった。我が家のキーボードはHHKBだけなので、日本語配列を無理やり適用されると、バックスラッシュが入力できないという不具合が生じる。結局、コマンドプロンプトからマウスで範囲選択してコピーして貼り付けるという荒業でクリアした。普通の人は、何も考えずに、\を入力すれば良い。最終的に SSD:　Cドライブ + ESP※ SSD:　Dドライブ(データストレージ用) SSD:　Eドライブ(データストレージ用) ※ESP(EFI System Partition) という構成に切り替えることができた。

Loox Uと初音ミクで行こう！

このブログを検索