@bigakubu アートとプログラミングがあればいい。

【第7話】少し複雑な条件分岐の「練習問題」


少しずつプログラミングに慣れてきたころだと思うので、今回は少し趣向を変えて練習問題形式にしてみたいと思います。まずは例によってサンプルプログラムを用意しました。実行結果がよりわかりやすくなるように今までよりドクロとバラを細かく表示しています。また、本来のスマホ壁紙サイズでなく正方形のキャンバスにしています。その他は基本的に今までと同じコードです。(練習用画面: https://jsfiddle.net/dokubara/oazwLf08/59

javascript



練習問題(1)

次の実行結果になるように練習用画面上でプログラムを修正しなさい
(if命令の条件式の部分を書き換える)

練習問題(1) 【ヒント】iとjをたす。その値が…



練習問題(2)

次の実行結果になるように練習用画面上でプログラムを修正しなさい
(if命令の条件式の部分を書き換える)

練習問題(2)【ヒント】iとjを掛ける。その値が…



練習問題(3)

次の実行結果になるように練習用画面上でプログラムを修正しなさい
(if命令の条件式の部分を書き換える)

練習問題(3)【ヒント】2つの条件式を「&&」記号でつなげることで、「両方の条件を満たしたときに」というプログラムが書ける。例えば (A==1)&&(B==2) と書けば「Aが1かつBが2のとき」という意味になる。



ここから練習問題の答えです。一発でできなくても大丈夫、以下の答えを自分で入力して試してみよう

では練習問題の答えを発表しましょう。プログラムの書き方は必ずしも一つではないので、実行結果が同じであれば別の書き方でも正解です。

【練習問題(1)の答え】 条件式の部分を以下のようにする

if (i > j) { ・・・

【練習問題(2)の答え】 条件式の部分を以下のようにする
if ((i * j) < 100){ ・・・

【練習問題(3)の答え】 条件式の部分を以下のようにする
if ((i < 20) && (j < 20)) { ・・・

※ iが20未満「かつ」jが20未満⇒左上のブロックがドクロになる




どうしてこういう答えを思いつけるかが分からない?

今回の問題は中学数学レベルの「関数」の考え方がベースにあるのでそれが得意な人にとっては答えが理解しやすいと思います。反対に数学が苦手な人、もしくは「まだ習っていない」という読者には分かりづらいかもしれません。
プログラミングでデザインを作る上で、数学が使えることは大きな強みになるが、苦手でも心配することはありません。今回のような様々なプログラムの書き方を実行結果とセットで「パターン」として覚えていくことで、感性でプログラムを思いつけるようになればよいのです。


今回のまとめ

少し難しかったと思いますが、実行結果からプログラムを想像し、実際に試してみて、思っていたのと違ったらまた考えて、直して、というプロセスこそプログラミング上達への近道です。よほどの天才でない限り、プログラマーといわれる人たちはこういう試行錯誤(多くは失敗、バグやエラーとの地道で長い戦い)を繰り返しながら技術を習得しているはずです。

繰り返しになるますが、今回の練習問題の答えも含め、出会ったコード一つひとつを自分の手で書いて、動かしてみて、それを楽しんでみてください。



Google Ad

Google Ad

Recommend

【第2話】最初のサンプルプログラムでドクロを表示、幅と高さを変えてみる

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第2話では用意されたjavascriptのサンプルプログラムを練習画面(jsfiddle)でさっそく実行し、早くも最初の「ドクロ」を表示してみます。続けてサンプルプログラムをほんの少し改良することによりドクロの幅と高さが変化することを体験します。

アート系プログラミング入門講座

【第3話】x座標とy座標を書き換えてドクロの表示位置をコントロールする

アート系プログラミング入門講座「ドクロと薔薇の壁紙」前回に続いてサンプルプログラムを少しずつ改良しながら必要な知識を学びます。第3話のテーマは、デザインをする上で欠かせない「座標」これを理解することでドクロを自分の思い通りの位置に表示できるようになります。ここまでのまとめとしてちょっとした「作品」を作ってみます。

アート系プログラミング入門講座

【第5話】<for命令>による2重ループで縦横に並べ画面をドクロで埋め尽くす

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第5話では、前回学んだfor命令を2重ループにすることでドクロを縦横にずらっと並べてみます。for命令の2重ループはjavascriptに限らずプログラミングで非常によく使う必修パターンでデザイン作業にも欠かせない手法ですので、色々試しながら身につけておきましょう。

アート系プログラミング入門講座

【第8話】「剰余(割り算のあまり)」を活用したデザインパターン

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第8話では、割り算の「あまり」を活用して新しいデザインパターンを作ります。剰余計算は日常あまり使わないかもしれませんがプログラミングでは非常に有用です。javascriptでは%記号で剰余を計算できます。例えば7%2=1となります。さあこれをどうデザインに活かすのでしょうか。

アート系プログラミング入門講座

【第4話】<for命令>でループ!たくさんのドクロを簡単に並べる

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第4話では、javascriptでも重要度の高い「for命令」を使ってループ(反復)処理をする方法を学びます。これにより手作業ではなくプログラミングで思い通りの数だけ作業を繰り返すことができるようになります。前回学んだ「座標」と組み合わせてたくさんのドクロを正確に並べてみます。

アート系プログラミング入門講座