JavaScript の付箋紙プログラム

JavaScriptでなにかオブジェクト指向的なプログラムを作ってみたくなって、以前に jQuery を使って作った付箋紙のプログラムを作り直してみた。付箋紙を Card クラスにするのが目的だったが、オブジェクトのドラッグ操作関連で、グローバル変数を使ったちょっと汚いプログラムになってしまった。

最初、マウスのイベントハンドラをすべてハンドルオブジェクトに関連付けていたのだが、それだと、マウスのカーソルの動きにオブジェクトがついてこれなくなっていた。そこで、マウスがハンドル内でマウス・ダウンしたときのイベントのイベントハンドラだけをハンドルオブジェクトに関連付けて、後は、マウスをドラッグしているときや、マウスのボタンが上がった時のイベントのイベントハンドラは body 要素に関連付けるようにしたらうまくいった。現実のプログラムはこんな変なところでのチューニングが必要になる。

マウスのドラッグでオブジェクトを移動させるやり方については、ライブラリーを使わなくても、JavaScript 単体でも簡単にできるようだ。

プログラムのデモ

JavaScript のよいところは、グラフィックがライブラリーを使わなくても簡単に作れるところだ。ウィンドウのレイアウトが、HTML 文書や css で簡単に作れるので、画面設計のための特別のアプリケーションがいらない。自分で使うだけの簡単なプログラムなら、かなり手軽に作ることができる。また、ライブラリーを使わない分ブラックボックスが少なくて安心できる。また、完全にオブジェクト指向ブログラム言語化しているので、プログラムが作りやすい。

プログラムの入門者でオブジェクト指向プログラムを扱ったことがなければ、最初は Ruby で簡単なオブジェクト指向プログラムを作ってみるのがお勧めだ。宣伝だが、今リニューアル中の管理人のホームページ『I love CUI』にも Ruby の記事を再編集してみた。古い記事だが(16年前)Ruby 初心者の時に試行錯誤しながら記事を書いたので、Ruby の特徴を掴むにはわかりやすいと思う。Ruby on Rails のようなプロフェッショナルなものでなくても、Ruby でプログラムを作るのは本当に楽しい。Rubyで簡単なプログラムを作った経験が、JavaScript のオブジェクト指向プログラムを理解するのにずいぶん役立っている。

Ajax やインタラクティブなウェブアプリを作らなくても、日曜ブログラマにとっては JavaScript は魅力的なツールだろう。


[PR]
by tnomura9 | 2015-12-13 18:42 | JavaScript | Comments(0)
<< JSONP JavaScript の電卓プ... >>