2-4 九九表示プログラムを作る 制御構造
前置きが長くなってしまいましたが、順にコーディングしていきます。
この章については、わかりやすい記事が沢山あるのでざっくりです。わからなければ検索してください。
プログラミングの基本中の基本、制御構造を使用します。
変数
var i = 1; i = i +1; // i + 1を先に計算し、計算した結果をiに設定する textarea1.value = i;
比較演算子
右辺と左辺を比較して、true(真)またはfalse(偽)を返します。
textarea1.value = 1 == 1;
textarea1.value = 1 > 1;
他にも以上、以下(>=,<=)、等しくない(!=)などがあります。条件を変えて試してみてください。
分岐
if( 条件 ){ 式 }
条件がtrueの場合、式が実行されます。
if(true){ textarea1.value = 'true';}
if( 条件 ){ 式1 } else { 式2 }
elseを追加すると、条件がfalseの場合、式2が実行されます。
if(false) { textarea1.value = 'true'; } else { textarea1.value = 'else'; }
通常は比較演算子とあわせて使います。
ループ
while( 条件 ) { 式 }
条件がtrueの間、式を繰り返し実行します。
var i = 0; while( i <= 10) { textarea1.value += ' ' + i; i = i + 1; }
とりあえず作ってみる
九九の表の表示の大枠はこれだけ覚えれば作れるかと思います。
次からは僕が作る場合、こう作るというステップを踏んで説明していきます。
2-4 九九表示プログラムを作る 作る
それでは作っていきます。
一の段を作る
前回のループのところの例と一の段が似ていると気づいてもらえたでしょうか?
// 一の段表示プログラム var kakeru = 1; // 1から while( kakeru <= 9) { // 9までをかける textarea1.value += ' ' + 1 * kakeru; // 1 * 1 〜 1 * 9を表示する kakeru = kakeru + 1; // 次に進める }
一の段が表示できるようになりました。
ここまで細かく入れる必要はありませんが、ソースコードには適宜コメントを入れて下さい。他人が見ることがあるかもしれないということもありますが、自分でも何考えてたか忘れることってけっこうあります。
2〜9の段を表示
段を増やすには、ループを追加します。ループの中にループを入れる「ネスト」にします。
// 九九表示プログラム(見栄え未実装) var dan = 1; // 1の段から while(dan <= 9){ // 9の段まで(ループ1) var kakeru = 1; // かける数。1から while(kakeru <= 9 ){ // 9まで(ループ2) textarea1.value += ' ' + dan * kakeru; // 表示する kakeru += 1 // かける数をひとつ進める } textarea1.value += '\n'; // 改行する dan = dan + 1; // 段をひとつ進める }
整形する
今回の仕様は3桁の固定長とすることとしました。「文字列操作」を行なって、全て3桁に「パディング」するようにします。
文字列操作は人間だと直感的にわかるのですが、プログラムで実現しようと思うとけっこうめんどくさいです。「javascript パディング」などで検索して、やり方を調べます。
調べた結果、以下のやり方が簡単そうでした。
- パディングしたい文字にスペースをつけてしまう(「1」→「 1」、「81」→「 81」)
- 「 81」の場合、4桁になってしまっているので、右から3桁にする
// 九九表示プログラム var dan = 1; // 1の段から while(dan <= 9){ // 9の段まで(ループ1) var kakeru = 1; // かける数。1から while(kakeru <= 9 ){ // 9まで(ループ2) var kotae = ' ' + dan * kakeru; // スペースをつける textarea1.value += kotae.slice(-3); // 表示する。右から3桁を取得する kakeru += 1 // かける数をひとつ進める } textarea1.value += '\n'; // 改行する dan = dan + 1; // 段をひとつ進める }
3-1 とりあえず終わり
ここまでのことで、入門はできてるので、初心者向けの記事を読んで何を言っているかわからないということはなくなっていると思います。この先は覚えなければならないジャンルが多岐にわたるので、各自でやりたいことによって調べてみてください。
覚えなければならないことの例をいくつか挙げます。
とりあえずやっておいたほうがいいこと
九九表示ではループをネストして作りました。目的のために、どういう手順を行うか、ということを「アルゴリズム」と呼びます。
アルゴリズムを考える力をつけるには、練習するしかありません。練習方法としては、誰かが作ったアルゴリズムを読む、読んだ後に再現してみる、という方法がお勧めです。
バブルソート、挿入ソート、線形探索法、二分探索法、シェルソートの順にためしてみるのがお勧めです。分岐、ループに加え「配列」について知っていれば理解できる内容で、基本的な考え方を身につけられます。
ボタンを表示したいなど、よく行う動作についてはちょこちょこっと作れるように、ある程度土台ができていたりします。Windowsのアプリケーション用、Webアプリ用など、用途にあわせて様々なフレームワークがあります。
既にあるプログラムを使って何かをしたい場合(画像等のデータの処理やインターネット等の通信とか)は、そのプログラムとやりとりするための決め事があり、それをAPIといいます。
フレームワークやAPIは、やりたいことにあわせて覚えなければなりません。
- データの入出力
大量のデータがあってこそコンピュータの真価が発揮されます。ファイルの読み込み、データベースなどを使います。
最近のフレームワークはどれもオブジェクト指向について理解していることを求めているように感じます。オブジェクト指向とはなんぞやという記事はいっぱいあるのですが、理解してしまえば単純なことだけど説明するのが難しいもので、苦労するかもしれません。学習するときの言語はJavaがお勧めです。
プログラム作成用のツールです。コーディングから画面のレイアウト作成、テスト支援などプログラミングに必要な機能がひと通り揃っています。Windows用のアプリケーションを作りたいならVisualStudio、それ以外ならEclipseを使うことになります。
文字列操作をするときに、正規表現を覚えておくとかなり楽です。コーディングするときにも役に立ちます。
やりたいこと別
- Windows用のアプリケーションを作りたい
IDEのVisualStudioが至れり尽くせりな作りなので、割りとすぐにそれっぽくなります。言語はC#について、フレームワークに.NET Frameworkについて覚えれば大丈夫です。
- Webアプリを作りたい
サーバ側とクライアント側、両方について覚えることがあります。
クライアント側についてはHTMLのフォームについて、それとJavascriptについてです。
サーバ側はASP.NET、perl、J2EE、Ruby on Railsなどいろいろありますが、とりあえず動かせるようになるまでが楽でテキストが豊富なのでASP.NETから始めるといいような気がします。
- Excelで効率化したい
Excelをよく使う方なら、マクロを覚えておいて損はないです。基本はやりたいことに似た動作をマクロの記録後、直します。文字列操作について理解を深めれば、めんどくさいことは手で行わなくて済むようになります。
新しめ技術でテキストが少ないこともあり、ちょっと難易度高めです。ちょっと後回しにしたほうがいいかもしれません。
- ゲームを作りたい
覚えなければならないことが多いです。
最低限覚えなければならないことは、作ってみたいジャンルのアルゴリズムと、イベントハンドラ、見栄えのする画面表示のやり方です。
Javascriptでテトリスを作ってみる→作りたいプラットフォームに移植する、とやってみると雰囲気がつかめるかと思います。
3-2 初心者から中級者を目指すためのチュートリアル
オブジェクト指向について理解するには、遠回りしてる気もするけど、このステップが最短な気がする。このへんちゃんと理解してれば他の言語に浮気が楽勝になるし。
1.Javaをかじる
簡単なところだけ。分岐、ループ、配列、パッケージ、メソッドとフィールドくらいだけ。
3.C言語をかじる
Javaで覚えた簡単なところ(文法が似てるから覚えること少ないかも)をやってみる。
ポインタについてかじってみるけど、いまいち理解できないくらいまで。添字の無い配列とポインタがほぼ同じ?ってなったら次へ。
5.C言語でポインタを理解する
ポインタも配列もメモリのアドレスが入ってることとか、メモリを自分で確保してアドレスをポインタにセットしたりとか、+1すると4バイトの型なら4バイト分進むところとか、ポインタの値を取ってint型に入れて4足したアドレスから持ってきてキャストした値と一緒になったりすることがわかるくらいまで。関数ポインタはスルー。
2-1 九九表示プログラムを作る
今回の目的
プログラミングをしたことが無い方にとって、プログラミングは難しい勉強をして、頭の良い人がやるもんだというイメージを持っているかもしれません。僕の経験上、それは誤った認識だと感じています。最先端の技術開発をする研究者を目指すのであればその認識で合っていますが、ホビーで作りたいものを作りたい、職業プログラマを目指している、といったまだ何もできないレベルであれば感覚的なものが大きいです。
感覚的なものであるなら、習うより慣れろです。とりあえず簡単なものから作っていきます。
今回の目的は「九九の表を表示する」ことです。
とりあえず作ってみる
この先を読まずにとりあえず作ってみてください。
全く思い浮かばないようなら、次の節で解説します。
※複数行を表示したいときは「改行コード」を使います。
2-2 九九表示プログラムを作る 解答例その1
さっそく解答例
textarea1.value = ''; textarea1.value += '1 2 3 4 5 6 7 8 9\n'; textarea1.value += '2 4 6 8 10 12 14 16 18\n'; textarea1.value += '3 6 9 12 15 18 21 24 27\n'; textarea1.value += '4 8 12 16 20 24 28 32 36\n'; textarea1.value += '5 10 15 20 25 30 35 40 45\n'; textarea1.value += '6 12 18 24 30 36 42 48 54\n'; textarea1.value += '7 14 21 28 35 42 49 56 63\n'; textarea1.value += '8 16 24 32 40 48 56 64 72\n'; textarea1.value += '9 18 27 36 45 54 63 72 81\n';
何か間違えていますか?ちゃんと九九の表が表示されたでしょう?
間違えてはいないですが、あってもいないです。
間違い探し
上記の例では何がだめなのでしょうか?
1.手間がかかりすぎている
プログラマたるもの、怠慢でなければなりません。
#1 プログラマーの三大美徳その1「怠慢」 | 日経 xTECH(クロステック)
コンピュータのほうが早く正確に計算できることを人間が計算しています。それと、同じことがやりたいならプログラムを書くより、直接メモ帳に書いたほうが早いです。無駄なことはしない。
2.拡張性がない
実は九九っていってもインド式の99*99までだったんだけど・・・となった時に、一から書きなおすことになります。
3.見づらい
縦に揃ってなくて、見づらいです。表として使うなら、極力見やすくするべきです。
2-3 九九表示プログラムを作る 設計
前回挙げた間違いの原因は、「九九の表を表示する」という「要件」に対して、「コーディング」してしまったことにあります。「九九の表を表示する」というのはどういうことなのか、作ってみてからやっぱり変だから作りなおそうということが減らせるくらいに、決めておいたほうが楽です。ホビーであれば、この程度の規模であれば脳内に収まってしまうので、いらないかもしれませんが、規模が大きくなったり、誰かのために作ったりするのであれば設計しておいたほうが無難です。
今回は以下の仕様とします。
- 9*9の普通の九九の表を表示する。
- 1項目は3桁の「固定長」とする。