続JavaScriptで行く | 株式会社ヘキサドライブ | HEXADRIVE | ゲーム制作を中心としたコンテンツクリエイト会社

HEXA BLOG

ヘキサブログ

プログラム

HEXA BLOGプログラム2011.11.14

続JavaScriptで行く

MacBook Airを使っていたら無性に欲しくなったのでiPod touchも買ってしまいました。
だんだんとApple製品に染まっていっているgood sunこと山口です。
iPod touchと言えばiPhoneから電話と3G通信やGPS機能を取り除いた程度で、
iOSを搭載して様々なアプリケーションを実行する事が出来る上、
wifi環境があればインターネットも出来てしまうというリッチなデバイスです。
なんとJavaScriptでiPhone等の特徴的な操作方法であるタッチ処理が出来るということで、
今回はそんなお話を…と思ったのですが、
その為の素材の用意が間に合いませんでしたので、
原点とも言えるJavaScript+HTMLのお話をしたいと思います。
HTMLと聞くとホームページを作ったことがある人ならば、
<html>〜</html>といったタグを使ったページ作りを思い浮かべるでしょうか。
今見ているこのブログも内部的にはそのように作られています。
しかし、なんとJavaScriptを使うとほとんどのタグを書かずにHTMLを作成する事が出来てしまいます。
<html><body><script>
のタグだけあれば様々な要素を持ったwebページを作ることが出来ます。
というのもタグを使った要素の記述以外にスクリプトから動的な要素の生成が行えるのです。
例えばテーブルはHTMLを使った場合次のように書けますが、

&lt;html&gt;
&lt;body&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;これはHTMLタグでの&lt;/td&gt;
&lt;td&gt;テーブルの&lt;/td&gt;
&lt;td&gt;サンプルです&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

JavaScriptを利用すると

&lt;html&gt;
&lt;body&gt;&lt;/body&gt;
&lt;script type="text/javascript" charset="UTF-8"&gt;
var td0 = new document.createElement("td");
var td1 = new document.createElement("td");
var td2 = new document.createElement("td");
var tr = new document.createElement("tr");
var table = new document.createElement("table");
td0.innerText = "これはJavaScriptでの";
td1.innerText = "テーブルの";
td2.innerText = "テストです";
tr.appendChild(td0);
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
document.body.appendChild(table);
&lt;/script&gt;
&lt;/html&gt;

こんな感じで書くことが出来ます。
如何でしょう?
各要素を作成してそれぞれを子要素として格納していきます。
プログラマには合理的な作り方だと感じられるのではないでしょうか。
私が初めてこの書き方を知ったときはとてもワクワクしました。
最初から要素を変数として取得しておけるので、
細かい制御がしやすくなってちょっと複雑な仕組みも簡単に作れそうだなぁと。
こうした新しい発見から来るはワクワクは新しい発想に繋がり易いので大切にしていきたいです。
では今回はこの辺で。
タッチ処理も機会があれば是非お披露目したいです。