新年だしJavaScript始めてみませんか？

※この記事は旧ブログから移動してきたものです。

明けましておめでとうございます。

先日はPHPの紹介記事に則る形でJavaScriptの紹介をしたのですが、こちらは最初からJavaScript視点です。これから始めたい方が「とりあえず触ってみる」のを目的に紹介をしてみたいと思います。

JavaScriptって何さ？

言語の歴史だとか特徴だとかはwikipediaの記事あたりをご覧頂くとして。

一言で言えば、現在最も敷居の低いプログラミング言語です。

準備が簡単
- 一般的なパソコンを買ってくればすぐ作れる
- 何かを特別にインストールしなくていい
- お金もかからない
- WindowsでもMacintoshでもLinuxでも構わない
先駆者が多い
- リファレンスやサンプルなどの情報が多い
- 情報はそれなりに洗練されている
簡単に書ける
- CやJavaにある程度似た、よくある文法
- Cの#include <stdio.h>やJavaのpublic static void main(String[] args)といった「おまじない」がいらない

このように手軽な一方で素晴らしい機能性（プロトタイプベースの本格的なオブジェクト指向言語）や将来性（Webの台頭に伴う需要の増加）も見逃せません。

なお用途は主にWeb（のクライアント側）なのですが、サーバー側でも動いたり、WindowsではWSHでバッチ(.bat)の代わりに使えたり、ツールを使ってネイティブアプリケーション(.exe)にしたりする事ができます。

そんな感じで、素晴らしい言語なわけです。

Hello, world!

では、とりあえずやってみましょうか。ブラウザーのURL欄に、次の一行をコピーしてEnterキーを押してみてください。

javascript:alert('Hello, world!');

どうでしょう、ダイアログが表示されましたか？　JavaScriptの世界へようこそ！　ちなみに “Hello, world!” というのはプログラミング最初の一歩で表示する常套句です。

もうちょっと難しいものを書いてみましょうか。

javascript:window.open('http://b.hatena.ne.jp/add?mode=confirm&title='+escape(document.title)+'&url='+escape(location.href));

同じくURL欄に貼付けてください。はてなブックマークの登録画面（か、ログイン画面）が表示されるはずです。（まあせっかくなので、そのままブクマしていってくださいな。）

この一行をブックマーク（お気に入り）に登録しておくと、気になったページでそのブックマークを開くだけで登録画面を表示する事ができます。これをブックマークレットといいます。とても便利ですよ。

「ブックマークレット」が気になった方はこちら → かなり使えるブックマークレットいろいろ – IDEA*IDEA ～百式管理人のライフハックブログ

（作り方とか使い方とかの解説記事はちょろっと探したんですが、見つかりませんでした。）

もうちょっと本格的に始めてみる

これでとりあえずJavaScriptデビューは果たしたわけですが、まあまだ本格的な感じではないですよね。次はHTMLと一緒に書いてみましょう。

Windowsなら「メモ帳」、Macintoshなら「テキストエディット」があれば、ひとまずは十分です。次の内容を入力してください。

<html>
  <head>
    <title>JavaScript</title>
  </head>
  <body>
    <script>
document.write('<p>' + (new Date()) + '</p>');
    </script>
  </body>
</html>

ファイル名は “js.html” 、エンコードはUTF-8とします。Windowsメモ帳の場合は、テキストファイルではなくHTMLファイルとして保存するため二重引用符「”」で括ってください。

ファイルに保存したら、ブラウザーで見てみてください。

現在日時が表示されたら、成功です。この調子でちょろっとアプリを作ってみましょう。

おみくじアプリを作ってみよう

次のコードをさっきのファイルに貼付けて、表示してください。（※もし文字化けしたらエンコードがUTF-8になってるか確認（上書き保存とか）してみてください。）

→実行サンプル

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>おみくじ</title>
    <style>
/* ---- CSS ---- */
body {
  font-family: cursive;
}
#fate {
  color: red;
  text-align: center;
}
#haiku {
  filter: alpha(opacity=0);
  opacity: 0;
  text-align: center;
}
#detail-list {
  filter: alpha(opacity=0);
  margin: 0 10%;
  opacity: 0;
}
    </style>
  </head>
  <body>
    <p><button id="exec">おみくじをひく</button></p>
    <p id="fate"></p>
    <p id="haiku"></p>
    <dl id="detail-list">
      <dt class="detail-title">願望</dt>
      <dd id="wish" class="detail-body"></dd>
      <dt class="detail-title">恋愛</dt>
      <dd id="love" class="detail-body"></dd>
      <dt class="detail-title">商売</dt>
      <dd id="work" class="detail-body"></dd>
    </dl>
    <script>
/* ---- JavaScript ---- */

// HTML要素をIDから検索
var $ = function(id) {
  return document.getElementById(id);
};

// 配列の中からランダムにひとつを返す
function getRandomOne(array) {
  return array[parseInt(Math.random() * array.length)];
}

// クリックしたときの動き
$('exec').onclick = function() {
  // 二回押せないようにする
  this.disabled = 'disabled';

  // 更新
  update();
  show();
};

// おみくじを引いた結果を出力
function update() {
  // 吉凶
  var fateList = [
    '大吉',
    '中吉',
    '小吉',
    '吉',
    '凶'
  ];
  $('fate').innerHTML = getRandomOne(fateList);

  // 俳句
  // http://www.manabu-oshieru.com/hyakunin/contents.html
  var haikuList = [
    '秋の田の　かりほの庵の　苫をあらみ　わが衣手は　露にぬれつつ',
    '春すぎて　夏来にけらし　白妙の　衣ほすてふ　天の香具山',
    'あしびきの　山鳥の尾の　しだり尾の　ながながし夜を　ひとりかも寝む',
    '田子の浦に　うち出でてみれば　白妙の　富士の高嶺に　雪は降りつつ',
    '奥山に　紅葉踏みわけ　鳴く鹿の　声きく時ぞ　秋は悲しき',
    'かささぎの　渡せる橋に　おく霜の　白きをみれば　夜ぞふけにける',
    '天の原　ふりさけ見れば　春日なる　三笠の山に　出でし月かも',
    'わが庵は　都のたつみ　しかぞすむ　世をうぢ山と　人はいふなり',
    '花の色は　うつりにけりな　いたづらに　わが身世にふる　ながめせしまに',
    'これやこの　行くも帰るも　別れては　知るも知らぬも　逢坂の関'
  ];
  $('haiku').innerHTML = getRandomOne(haikuList);

  // 願望
  var wishList = [
    '向かうところ敵なし',
    '努力すれば叶う',
    '辛抱強く',
    '神仏に念じよ',
    '頑張れ超頑張れ'
  ];
  $('wish').innerHTML = getRandomOne(wishList);

  // 恋愛
  var loveList = [
    '良し',
    '知人に頼って吉',
    '諦めてはいけない',
    'よくよく機を待て',
    '明日を信じろ'
  ];
  $('love').innerHTML = getRandomOne(loveList);

  // 商売
  var workList = [
    '順風満帆',
    '仲間とよく相談せよ',
    '感謝の心を忘れぬこと',
    '挫けてはいけない',
    'いのちをだいじに'
  ];
  $('work').innerHTML = getRandomOne(workList);
}

// 結果を表示
function show() {
  var MAX_SIZE = 64;
  var $fate = $('fate');
  var size = 1;

  (function() {
    $fate.style.fontSize = size + 'px';
    size += 1;

    if (size < MAX_SIZE) {
      setTimeout(arguments.callee, 1);
    }
    else {
      showDetail();
    }
  })();
}

function showDetail() {
  var MAX_OPACITY = 100;
  $haiku = $('haiku');
  $detail = $('detail-list');
  var opacity = 0;

  (function() {
    $haiku.style.opacity = (opacity / 100);
    $haiku.style.filter = 'alpha(opacity=' + opacity + ')';

    $detail.style.opacity = (opacity / 100);
    $detail.style.filter = 'alpha(opacity=' + opacity + ')';

    opacity += 1;

    if (opacity < MAX_OPACITY) {
      setTimeout(arguments.callee, 1);
    };
  })();
}
      </script>
  </body>
</html>

いかがでしょうか

とまあ、こんな感じでささっと何かを作る事ができます。最初の方にも書きましたが、この「手軽さ」が非常に強力だと思います。その一方であれこれするのにも実は高性能だったりするので侮れません。

この春、あなたもJavaScriptでプログラミングを始めてみませんか。