スキップしてメイン コンテンツに移動

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が面白く感じるようになります。

おすすめの本

月並みですが、おすすめの本二冊をご紹介します。
※リンク先はアフィリエイトリンクです(ｷﾘｯ
・JavaScript 第5版
入門としては分厚すぎるかもしれませんが、持っていて決して損はしない本です。一押し。

・JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
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) という構成に切り替えることができた。
コメントを投稿
続きを読む

Windows版gVimをアンインストールした日

Windows 版 gVim をアンインストールした話 以前に、 Windows11 on WSL2 + wezterm + Neovim = 最強開発環境 という痛々しい記事を書いたのだが、その続きの記事と言っても過言ではない。 この記事は Vim 駅伝 の 3 月 1 日の記事である。 前回はぺりーさんの netrw を使うために という記事だった。 次回は kuuote さんの Vim 側の組み込みプラグインを無効化するハック という記事である。 gVim との付き合い 思い返してみると、gVim との付き合いは大分長くなった。エディタとしては 自分の人生の中で最も長く付き合ってきたエディタ と言える。Vim のインターフェースとして gVim を何度も使ってきた。自分の手持ちのマシンは Windows なので、必然的に gVim を選択肢として選ぶ必要があった。 gVim の良さは何か。それは、Windows とのシームレスな関係であり、Windows OS の機能をそのまま使いたい場合に有用である。かつての自分にとってこの部分は非常に重要であった。具体的には、印刷機能と画面半透明化機能であり、これが無いとやってられないという認識であった。 しかし、時代が進み、自分の技術力の向上や考え方の変化、さらに Vim 周りのプラグインの更新が進むと gVim で運用していく事がだんだんと億劫になっていったというのが事実である。故に、 WSL2 上で動く Neovim の快適さに心が打ち震えた のである。 技術力の向上に伴う考え方の変化 かつての自分は 何でも gVim で処理したいな と考えていた。メールを見たり天気を見たり、Twitter を見たりするのに、gVim を活用していた。かつての Emacs 使いの guru のような立ち位置を目指していたというのがある。2000 年代初頭にインターネットに多少なりとも触れていた人ならば、「それ Pla」という古の単語を思い浮かべるかもしれない。この概念を持ち出すのはあまりにも古すぎるが、結局言いたいのは、 1 つの手法で全部をこなす という考え方だ。ネットを見るのにわざわざブラウザに切り替えるのはもったいないという今となっては情熱に似た何かを当時は多くの人が持っていた。 しかし、自分自身の技術力
コメントを投稿
続きを読む

javascriptは外部ファイルにした方がいいの？それとも、インラインの方が良いの？

事の発端 os0xさんのブログコメント で、javascriptの書き方について、面白いやり取りがありましたので、それについての私見を書きたいと思います。 結論から言いますと、プログラマ的な立場から言わせて頂くと、外部ファイル管理が望ましく、コーダ的な立場から言わせていただくとインラインが望ましいです。 なぜそのような結論に至ったのか、まずは経緯を御覧ください。 コメント欄でのやり取り os0xさんのブログコメント欄を引用しています
コメントを投稿
続きを読む