Large Display Size Middle Display Size Small Display Size
印刷用 概要 キーワード 著者

プログラムの基本的なかたち

皆さんはプログラミングをしたいと思ったことはあるでしょうか?

プログラミングと言ったら、難しい単語が並んでいて、読んでもさっぱり理解できない…、でもなんか面白そうなことをやっている。そんな感じではないでしょうか?

ここではプログラミングに対して興味を持ってもらい、プログラミングを始めるために必要な環境とプログラミングのためのリファレンスマニュアル(説明書)を簡単に示して、そのうえでプログラムの基本的なかたちについて話してみたいと思います。

JavaScriptのサンプル・プルプル・プログラム

プログラミングに対して興味を持ってもらいましょう。

たとえば、JavaScriptを使うとこんなことができますよ。



プログラミング環境はコレ

インターネットブラウザがあって、テキストエディタが使えれば、JavaScriptのプログラムを作って動かすことができます。

ではちょっと作ってみましょう。


  1. ▲テキストを新規作成

    Windowsなどでデスクトップを右クリックして、新規作成>テキスト文書 を選びます。



    ▲ファイル名を test.html にする
    ちなみにこのデスクトップの背景はきれいですが、Windows10Aniver..の「メール」アプリの歯車アイコンの設定の個人用設定の背景欄にあるものをキャプチャして背景にしたものです。

    新しいテキスト ドキュメント.txt というテキストファイルができます。

    ファイル名は test.html などにします。



    fig.
    ▲拡張子変更時の注意は「はい」

    「拡張子を変更すると、ファイルが使えなくなる可能性があります」と表示されますが、「はい」ボタンを押します。


  2. fig.
    ▲テキストエディタで開く

    test.html を右クリックして、プログラムから開く>秀丸エディタ などテキストエディタを選びます。メモ帳でも構いません。



  3. 次の内容をコピーして、テキストエディタに貼り付けします。
    (何もしないJavaScriptです)
このファイル: _res/javascript-001.html

<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>untitled script</title>
<script>
function onloadx() {
//↓ここにJavaScriptというプログラム言語でプログラムを書く。

}
</script>
</head>
<body onload="onloadx();">
</body>
</html>

 新しいウィンドウで実行  [小WINで表示] TAB
  1. テキストエディタで、ファイル メニュー 上書き保存 を選びます。
  2. デスクトップの test.html を右クリックして、プログラムから開く でインターネットブラウザを選びます。
  3. fig.
    ▲実行結果

    すると真っ白い画面で何も起こりません。



  4. 次の内容の赤い部分をコピーして、テキストエディタの同じ場所に貼り付けします。赤い部分は2か所あります。2か所とも行います。

    fig.
    ▲正しいテキストをコピーするための独自機能

    ※貼り付けしたとき、余分な空白が気になるときは、このページのプログラムの表示の下部にある「TAB」というボタンをクリックして…



    fig.
    ▲(その代り、変更点のハイライトがなくなる)

    この画面を表示させてテキスト選択し、コピーと貼り付けを行ってみてください。正しいテキストでコピーされるはずです。

    (現在ちょっとバグがあって一部で余計な文字が表示されてしまっています)



比較ファイル: _res/javascript-001.html
このファイル: _res/javascript-002.html

<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>untitled script</title>
<script>
function onloadx() {
//↓ここにJavaScriptというプログラム言語でプログラムを書く。

var tag = document.getElementById( "canvasID" );
var canvas = tag.getContext( "2d" );
with( canvas ) {
beginPath();
arc( tag.width / 2, tag.height / 2, tag.height / 2, 0, 3.14 * 2, false );
closePath();
fillStyle = "red";
	
	
fill();

strokeStyle = "white";
	
stroke();

}
}
</script>
</head>
<body onload="onloadx();">
<canvas id="canvasID" width="640" height="480" style="background-color:black;">
There is no canvas.</canvas>
</body>
</html>

 新しいウィンドウで実行  [小WINで表示] TAB
  1. テキストエディタで、ファイル メニュー 上書き保存 を選びます。
  2. デスクトップの test.html を右クリックして、プログラムから開く で InternetExplorer や Firefox などインターネットブラウザを選びます。
  3. fig.
    ▲実行結果

    すると真っ黒い画面に大きな円が描かれます。

    この、ドンとした赤いビビッド(鮮やか)でソリッドな(のっぺらとした)面が、いかにもプログラミングのテストらしくて、楽しいでしょう?

    ……楽しくありませんか?



このような調子でやればいい、と言いたいところですが、そんなふうに言われてもどう作っていけばいいのか見当がつかないと思います。

英語を勉強しても、いざ外国人と話すときは「えっと…」となってしまうのではと思います。はじめはみんな慣れないあいだはうまく動けません。でも慣れればかなり自由に動けます。学校も仕事もそうでしょう? プログラム言語も同じです。要は慣れです。習うより慣れろです。

JavaScriptの説明書はコレ

プログラミングのためのリファレンスマニュアル(説明書)をいつも見られるようにしておいたほうがいいです。困ったときにマニュアルをすぐに見られないと、不便この上ありません。また、パラパラめくると自分のやりたかったことが載っていたりして、なかなか楽しい宝の地図のようなものでもあります。

ウェブにある説明:

インターネットの検索窓から 「 javascript <その命令文> 」 というキーワードで検索すればだいたいその説明が出てきます。たとえば、

「 javascript Math.random 」

といった具合です。

公開されている多くの説明ページの中でも特に信頼できるページは以下の通りです。目当てにしましょう。

http://www.tohoho-web.com/js/

キーワード「 javascript Math.random 」で検索ヒットした例:

http://javascriptist.net/

キーワード「 javascript Math.random 」で検索ヒットした例:

本屋にあるJavaScriptの本:

私が昔から使っている本を紹介します。

最近はウェブで調べて済ませてしまうことも多くなりましたが、たとえば同じ JavaScript でも webGL とか新しい分野をやってみようと思うときは、私も本屋で本を探します。入門書も良いものがありますが、私は入門書よりは辞典のようなもの (リファレンスマニュアル) をおすすめします。入門書は内容に限りがありますが、辞典は100%を目指しているもの (内容を網羅しているもの) が多く、不足がないのが良いんです。また、通販も良いですが、本屋へ行って、自分が日ごろから疑問に思っていることをその本が答えてくれるかどうか数回テストしながら本を選ぶと間違いがなくていいですよ。

「JavaScript ポケットリファレンス」 技術評論社刊


「ホームページ辞典 第5版 HTML・CSS・JavaScript」 アンク著

プログラムの基本的なかたち

私は正直言うと、以下で話しているような3つの形を知らずにプログラミングを始めました。

知らなくてもプログラミングはできる、ということですが、ただ、このプログラムの基本の形を最初から知っていれば、戸惑うことも少なくなるかな…というのと、簡単な基本をきちんと学んでおいたほうが…という思いから、皆さんに説明したいと思います。

プログラムの基本的なかたちは3つあります。

「順次」 「分岐」 「繰り返し」

これはプログラミングを学問としてとらえたときに、最初に覚える事柄であり、一般に広く知られています。(”構造化プログラミングの構成要素”)

これらに語呂を当てて3つまとめて覚える方法があります。


「よいプログラム」


この「よい」はローマ字で Y-O-I です。この3文字はそれぞれ、「分岐」、「繰り返し」、「順次」の動きの形をうまく表しているんです。

「分岐」は枝分かれするので、「 Y 」。

「繰り返し」は回るので、「 O 」。

「順次」はまっすぐ進むので、「 I 」。

これら3つの構造が導入されているプログラムは、規律あるものとなり、好ましい構造となると言われていて、それは「よい(YOI)プログラム」です。

これは私が考えた語呂で、ネット検索で「構造 YOI プログラミング 順次 分岐」というキーワードで検索したところヒットしなかったので、誰も使っていないオリジナルなものと言えそうです。

他に、「いよっ!日本一」で覚えるのも良いかもしれません。IYOで順次、分岐、繰り返しと順番もすんなりしています。私は最初はこれで覚えていました。

構造化プログラミングの3つの構造を挙げなさい、と突然言われて答えられない人も意外と多いのではないでしょうか? ここで覚えてしまえば基礎部分の補強となるのでレベルアップすると思います。

分岐

プログラムの基本的なかたちのひとつ「分岐」について見てみましょう。

「分岐」は、ある条件が成立するなら処理1を、そうでなければ処理2を行ないます。


「分岐」のサンプルプログラム



▲この画像リンクをクリックすると実行します。

このサンプルでは、IF文による分岐処理により、24時間制で12時(昼)前なら、左の画像を明るく大きく表示し、12時(昼)以降なら右の画像を明るく大きく表示します。


プログラム:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>「分岐」サンプル</title>
<script>

var now = new Date();

function sampleY() {
//プログラムの始まり

var minutes = ( "0" + now.getMinutes() ).replace( /0(..)/, "$1" );
//※replace()の引数は正規表現という特殊な記号です。

//現在時刻表示
with( document.getElementById( "timedisp" ) ) {
innerHTML = "現在時刻 ";
innerHTML += now.getHours() + ":";
innerHTML += minutes;
}

//↓ここから下が「分岐」の例です。

if( now.getHours() < 12 ) {
	
//分岐処理
//処理1
//画面の左側画像を、枠づけ、画像サイズ大、かすみ除去
document.getElementById( "image1" ).style.border = "solid 3px black";
document.getElementById( "image1" ).style.backgroundSize = "100%";
document.getElementById( "shade1" ).src = "clear.png";
} else {
//処理2
//画面の右側画像を、枠づけ、画像サイズ大、かすみ除去
document.getElementById( "image2" ).style.border = "solid 3px black";
document.getElementById( "image2" ).style.backgroundSize = "100%";
document.getElementById( "shade2" ).src = "clear.png";
}

//↑ここまでが「分岐」の例です。

//プログラムの終わり
}

</script>

<style>
TD {
background-size
		
:
	
60%;

background-repeat
	
:
	
no-repeat;

background-position
	
:
	
center;

border-radius
		
:
	
2em;

}
</style>

</head>
<body onload="sampleY();">

<div id="timedisp" style="text-align:center; font-size:2em;"></div>
<table width="100%">
<tr>
<td id="image1" width="50%" style="background-image:url( am.png );">
<img id="shade1" src="shade.png" width="100%" height="80%">
</td>
<td id="image2" width="50%" style="background-image:url( pm.png );">
<img id="shade2" src="shade.png" width="100%" height="80%">
</td>
</tr>
</table>

</body>
</html>
TAB

繰り返し

次にプログラムの基本的なかたちのひとつ、「繰り返し」について見てみましょう。

「繰り返し」は、一定の条件が満たされている間、処理を繰り返します。


「繰り返し」のサンプルプログラム



▲この画像リンクをクリックすると実行します。

このサンプルでは、for文による繰り返しの処理により、小さな四角形がカラフルに1000個描かれます。

黄色い丸枠はスタイルシートによるものです。



<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>「繰り返し」サンプル1</title>
<script>

function sampleO() {
//プログラムの始まり
var canvas = document.getElementById( "canvasID" ).getContext( "2d" );
var colors = [ "blue", "red", "magenta", "lightgreen", "cyan", "yellow" ];

//↓ここから下が「繰り返し」の例です。

for( var i = 0; i < 1000; i++ ) {
	
//反復判断
//処理1 小さな四角を描く
var c = Math.floor( Math.random() * colors.length );
var x = Math.random() * 320 - 6;
var y = Math.random() * 320 - 6;

canvas.fillStyle = colors[ c ] ;
canvas.fillRect( x, y, 12, 12 );
}

//↑ここまでが「繰り返し」の例です。

//プログラムの終わり
}

</script>
<style>
</style>
</head>
<body id="test" onload="sampleO();">
<canvas id="canvasID" width="320" height="320" style="
border
			
:
	
ridge 16px yellow;

padding
			
:
	
4px;

border-radius
	
:
	
176px;

box-shadow
		
:
	
4px 4px 8px lightgray;

">
</canvas>
</body>
</html>
TAB

…上のプログラムはちょっと地味かもしれないので、少し面白味のあるサンプルも作ってみました。



▲この画像リンクをクリックすると実行します。

JavaScript Do画 「ウォーキング・ニャンコ」

for文による繰り返し処理により、図1.png~図10.pngをHTML画面に読み込みます。

あとは「実行」ボタンを押すと、200ミリ秒ごとにHTMLを"クリッピング"(画面上の必要なコマのみ切り抜き)し、コマ割りのアニメとなります。



<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>「繰り返し」サンプル2</title>
<script>

function sampleO() {
//プログラムの始まり

//↓ここから下が「繰り返し」の例です。

for( var i = 0; i < 10; i++ ) {
	
//反復判断
//処理1
document.getElementById( "screen" ).innerHTML += "<img src='_img/filmEDGE.png' height='400'>";
document.getElementById( "screen" ).innerHTML += "<img src='_img/図" + ( i + 1 ) + ".png' height='400' border='1'>";
document.getElementById( "screen" ).innerHTML += "<img src='_img/filmEDGE.png' height='400'><BR>";
}

//↑ここまでが「繰り返し」の例です。
	


//プログラムの終わり
}

</script>
<style>
</style>
</head>
<body id="test" onload="sampleO();">
<OL>
<LI>for文でアニメのコマ(図1.png ~ 図10.png)を出力しました。</LI>
<LI>あとは、<input type="button" value="実行" onclick="setInterval( 'screenSpecial()', 200 );"> ボタンを押すとアニメします。</LI>
</OL>
<div id="screen" style="position:absolute; overflow:hidden;"></div>
<script>
//アニメ制御
var komaMax = 10;
var komaHeight = 400 + 2;
var komaNow = 0;

function screenSpecial() {
var screen = document.getElementById( "screen" );
var topIDX = komaNow * komaHeight;
var bottomIDX = topIDX + komaHeight;
screen.style.clip = "rect( " + topIDX + "px, auto, " + bottomIDX + "px, auto )";
screen.style.top = - topIDX;

//next.
komaNow += 1;
//check.
if( komaNow >= komaMax ) {
komaNow = 0;

// ある確率で吹き出しを表示
if( Math.random() < .2 ) {
var num = Math.floor( Math.random() * 5 ) + 1;
console.log( num );
document.getElementById( "huki" ).src = "_img/huki" + num + ".png";
}
}
}
</script>
<img id="huki" src="_img/blank.png" style="position:absolute; left:550px;">
</body>
</html>
TAB

順次

最後に、プログラムの基本的なかたちのひとつ「順次」について見てみましょう。

「順次」は、プログラムに記された順に、次々に処理を行なっていきます。


「順次」のサンプルプログラム (教育プログラム)


▲この画像リンクをクリックすると実行します。

JavaScriptの関数を1つ取り出し、その内容を1行ずつ実行する、というプログラムです。

ページを開いたら、NEXTボタンを繰り返し押してください。

(インタープリタと呼ばれる処理方法と言えます。略して「インプリ」とはあまり言わないようです)



以上、「YOI」プログラムということで、「分岐」、「繰り返し」、「順次」を見てきました。

この3つを意識しながらプログラミングを行うと、基礎的な考え方がしっかり身に付くのではと思います。


ソフトウェアについていろいろ考えたけど、
自分ではあんまりパソコン使わなかったよ。


▲「構造化プログラミング」を提唱した、エドワード・ダイクストラというオランダの人




ページ制作 homepage6047


ページの上端へ (もくじ開く)