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

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さんです。
以上です。

ラベル:

コメント

コメントを投稿

このブログの人気の投稿

Let's note CF-SZ6にGoogle Play入りChromeOSを入れて、超軽量Chromebookを手に入れた

Let's note CF-SZ6にGoogle Play入りChromeOSをインストールする 先日、 魔が差して 、 Let's note CF-SZ6の中古 をポチってしまった。なんとなく ChromeOS に触りたくなり、中古のやっすいPCに入れたらええんちゃうんという心の声に逆らえなくなった。 で、一旦ChromeOS Flexを入れて使ってみたんだけれど、やっぱりGoogle Playのアプリが入れられないのはNG。 自分が欲しかったのは、Google Playが使えるChromeOSなんやという事で、 ネットのインストール記事 を探して、入れることにした。 ほぼ、そこの記事通りにインストールしているが、自分なりのアレンジも加えているので、参考にする人は参考にしていただきたい。 手順は下記の通り 軽量Linuxをダウンロードする 対応しているChromeOSのバージョンを調べ、ダウンロードする Brunchをダウンロードする Rufusをダウンロードする USBメモリーに軽量Linuxをインストールし、ChromeOSをコピペする USBメモリーから、実際に軽量Linuxを起動して、インストールコマンドを実行する 軽量Linuxをダウンロードする インストール作業用として、軽量LinuxをUSBメモリーに構築する。 Linux Mint がオススメという事なので、こいつをダウンロードする。 ダウンロードページ にアクセスし、Xfce Editionをダウンロード。 ダウンロードが完了すると、 linuxmint-21.3-xfce-64bit.iso みたいなファイルが出来上がっている。 対応しているChromeOSのバージョンを調べ、ダウンロードする 自分が購入した Let's note CF-SZ6 は、Core i5-7200Uとの事なので、7世代目のCPUとなる。 この7世代目のCPUに対応しているのは、board: rammusのバージョンになる。 https://cros.tech/ にアクセスし、 rammus を検索すると、対応するChrome OSのバージョンが出てくるので、これをダウンロードする。 自分は、 stable バージョンの 126 をダウンロードした。 ダウン...
コメントを投稿
続きを読む

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 つの手法で全部をこなす という考え方だ。ネットを見るのにわざわざブラウザに切り替えるのはもったいないという今となっては情熱に似た何かを当時は多くの人が持っていた。 しかし、自分自身の技術力...
コメントを投稿
続きを読む

翼の騎士正体考察

翼の騎士正体考察 最新刊の宣伝 先日、 最新18巻が発売された 。七ツ星 魔人 ヴァンデル も残るは、ノア、ベルトーゼ、ロディーナと3体まで減り物語も佳境に入ったと言える。今巻は、新生ビィト戦士団の結成と魔人博士ノアとの邂逅までが描かれているのだが、いやあ、そう来たかぁという落ちで、何も情報無しで読むとめっちゃビックリすると思う。 最新刊読んでいない人は今すぐ購入して読もう。 翼の騎士について 翼の騎士の初登場は（恐らく）7巻P94。シルエットのみの登場。本格的な登場は9巻のP31以降。 本格登場から、ゼノン戦士団の才牙を十分以上に使いこなしていて、正体は一体誰なのだろうと考えさせられるキャラだ。 翼の騎士は ゼノン戦士団を良く知っている ゼノン戦士団の才牙を使いこなせる 武器としてミニガンを持っている（9巻P82） 武器として長剣（？）を持っている（12巻P115） 長剣と天力を使って弓矢のように放つことが出来る？（12巻P126） クルスと同時に存在してるページがある（＝クルスではない）（11巻P123） 才牙は持っていない 時間制限がある（12巻P138） 時間になったり、一定上のダメージを受けると光になって消える（12巻P140） ビィトは素顔を知っている（16巻P61） グランシスタ王と顔見知り（18巻P63） といった要素が挙げられているが、決定打は今のところ無い。 とは言え、ここまで出揃った要素について考えると、幾つかの候補が挙げられる 翼の騎士の正体候補 上記の要素から、翼の騎士の正体は基本的に ゼノン戦士団 の誰かである事は確実だろう。 その場合、候補は三人になる。 ゼノン アルサイド ブルーザム 候補1 ゼノン ベルトーゼとの戦いで光となって消えてしまった ゼノン が翼の騎士の正体と考える読者は多いだろう。 王道でひねり無く行くならば、ゼノンで良い気がする。 ゼノンほどの能力があれば、ゼノン戦士団の才牙を使いこなせるというのも納得だし、光となって消えるのも、回想シーンからある程度納得の行く材料として挙げられる。 しかしながら、ゼノン（＝実の兄）との再開なのに、思った以上にビィトが喜んでいないというのが個人的には引っかかっている。三条陸氏は何もひねらずに伏線回収するよりも、 一捻り入れ...
コメントを投稿
続きを読む