日曜プログラマー大歓迎 JavaScriptの部屋 第8回

“動的”なウェブページをプログラムする

入力に応じリアルタイムで変わる円グラフと棒グラフを作る

●登場人物

尾地定数（おじ･さだかず） 自称「日曜プログラマー」。芽衣のおじ。

開発芽衣（かいほつ･めい） 尾地のめいで、近所に住む中学生。

おじ　3月14日発売の週刊アスキーNo.1118の『JavaScriptの部屋』では、入力した値によってリアルタイムに変化するグラフを作ったね。
めい　私は“動的”っていう言葉を覚えたかな。
おじ　ほう。どんな意味だった？
めい　ようするに動きのあるウェブページのことなんでしょ？
おじ　うーん、まぁそうなんだけど、たとえばGIFアニメのアイコンがピョコピョコ動いているだけで、変化のないようなのは動的とは言えないかな。
めい　じゃあ、ユーザーの入力や状況に応じてリアルタイムに変化のあるウェブページ、とかそういう感じ？
おじ　まぁ、そんな感じ。その入力を読み取って計算して結果を表示するのがJavaScriptの役目というわけだね。
めい　スライダーを動かしたら、それに合わせて円グラフの割合が変わるっていうのはちょっと面白かった。

おじ　その入力するためのスライダーや、テキストボックスなんかも、分割する数に応じてあとから作り出していたね。オレはそっちにびっくりしたよ。入力するデータの数を、あらかじめ5個とか何個って制限つけなくていいんだってことだよね。
めい　キャンバスの四角を描くメソッドを使って、棒グラフも作れたんだった。

おじ　そう。これでキャンバスのメソッドは、線を描く、円弧を描く、四角（矩形）を描くの3つを覚えたね。座標の概念さえ理解すれば、基本的にはどんな絵でも図でも描くことができるよ。
めい　ふっふっふ……キャンバスは見切ったな。
おじ　まぁ、やっと入口に立ったところだと思うけどね。
めい　でも今回は、円グラフも棒グラフも描けるようにしたおかげでプログラムが長くなっちゃったって、松下師匠も言ってたね。
おじ　長いっつったって、たかだか208行だけど。

おじ　やってることはそれほど難しくないので、丁寧に追っていけば、めいちゃんでも理解できると思うよ。
めい　そろそろ私もなんかプログラムが作りたくなってきたよ。
おじ　読者のみなさんも、何かプログラムができたらぜひ投稿してください。投稿はこちらから。

アスキーJavaScriptプログラム募集要項

★アスキーの有料会員サービス「ASCII倶楽部」会員の方は、下記リンクをクリックすると直接ページが開きます。

日曜プログラマー大歓迎
JavaScriptの部屋

週刊アスキーNo.1118はBOOK☆WALKER、Kindle、kobo等電子書店で発売中!

週刊アスキー No.1118 （2017年3月14日発行）[Amazon]

電子版週刊アスキーの購入はこちらから