JavaScript is not available.

プログラミング入門

　プログラムの作成に必要な基本的なところを紹介します。

概要

　いろいろなプログラミング言語がありますが、ここですぐに試してみることができる JavaScript を念頭に説明をします。
プログラミングに必要な基本部分は、いろいろなプログラム言語で共通している部分もあり、基本を押さえれば他のプログラム言語でも応用できます。

1. プログラムとは？
2. プログラムの書き方
3. テキスト出力
4. プログラムの流れ
5. 変数・定数
6. 条件処理
7. 繰り返し処理
8. 関数
9. プログラムの基本
10. グラフィック出力

プログラムとは？

　プログラムとは、処理する手順をプログラミング言語で書いたものです。
プログラムを作ることをプログラミングといいます。

　プログラムの最も基本的な動作は、何か入力を受け取って、処理をして、その結果を出力することです。

      入力　→　処理　→　出力

　必要ならそれらの動作を繰り返したり、手順を分岐したり、また、それらを組み合わせて実現します。

　入力としては、キーボード、マウス、ファイル、データベース、通信、センサなどがあります。
　出力としては、ディスプレイ（グラフィックス）、ファイル、データベース、通信、アクチュエータなどがあります。
　この様に、プログラムする対象によって、入力や出力にはいろいろなものが存在します。

　プログラムを記述する言語（プログラミング言語）も、C、JAVA、JavaScript、Python、PHPなどいろいろあります。

　プログラミング言語が基本的に備えている機能だけで全てを作成することは少なく、他に作成されたプログラムをライブラリやモジュールという形で利用することがあります。
　これらにもいろいろなものがあります。

　この様に、プログラミングに必要なことは多くあり、プログラミングに必要な全てのことを理解してからプログラムを作成するのは困難です。

　プログラムの作成は、プログラミングに必要な基本的な考え方を駆使して、その都度必要なものを取り入れながら行います。

　ここでは、プログラミングに必要な基本的な考え方に重点をあてていきます。

　プログラミングを学ぶには、解説書などを読むだけでなく、実際に、プログラムを実行してみることが大切です。

　ここでは、ブラウザ上で手軽にプログラムを実行する環境を用意したので、すぐに、プログラムの動作を試すことができます。

プログラムの書き方

　JavaScript のようなプログラム言語では、プログラムをテキストで記述します。
( Scratch のようなプログラミングでは、必ずしもテキストで記述する必要はありません。)

　JavaScript で、プログラムを書く場合、以下のようになります。

• 大文字と小文字は区別されます
• 単語や文字列でない、空白、タブ、改行は無視されます
• １つの命令文は、セミコロン ; で区切られます
• { から } で括られた部分は、１つの複合命令文となります
• // から行末まではコメントになります
• /* から */ で括られた部分はコメントになります

　BASIC などの古い言語では、大文字と小文字は区別されないものがあります。
　Python などの言語では、命令の前にあるスペースがブロックを表現しており、重要な意味があります。

　1つの命令文はセミコロンで区切られますが、 { から } で括られた部分は、命令文の１つの塊として扱われます。
これを、複合命令、または、ブロックと呼びます。

条件分岐の if 文やループ処理の for 文の処理には、1つの命令文、もしくは、１つのブロックを置くことができます。

　コメントとして記述された部分は、プログラムとして実行されません。
コメントは、プログラムの説明とか、試しにプログラムを変更して実行するときに、変更前のプログラムを取っておく場合などに利用します。

　Java 言語などでは、適切にコメントを記述すれば、それを自動でドキュメント化する機能があります。

テキスト出力

　プログラムを実行しても結果が何も表示されなければ、どう動作しているのかわかりません。
プログラムの動作を知るために、何か決められたテキスト文字や変数の内容を出力する方法が一般的に用いられます。

　ここでは、テキストを出力するのにログ出力を利用します。
　ログ出力は、実行結果表示領域にテキスト文字として出力されます。

　ログ出力は、以下の書式でプログラムとして記述します。
下記で、"出力文字" の代わりに、変数名を記述すれば、変数の内容が出力されます。

ログ出力

console.log( 出力文字 );
console.log( "出力書式" [ , 変数 ... ]);

　変数名が大文字と小文字を区別すること、コメント、テキスト出力のプログラム例を以下に示します。

▶ Run

var xx = 3;
var Xx = 9;  // This is a comment.
/*
  console.log("This is a comment.");
*/
console.log("This is not a comment.");
console.log(xx); console.log(Xx);

　実際に、プログラムを見るといろいろと疑問が沸いてくると思います。

　・　// は、3つ以上書いたらどうなるのか？
　・　*/ がなかったらどうなるのか？
　・　値の入ってない変数を出力したら何が表示されるのか？
　・　同じ変数名を二重に宣言したらどうなるのか？
　・　「 " 」を出力するには、どうするのか？
　・　「 if 」という変数名は使えるのか？
　・　「 ; 」がないとどうなるのか？
　・　window.console.log としたらどうなるのか？

　そういう疑問が沸いたら、「📝 Edit」ボタンを押して、好きなようにプログラムを編集して実行「▶ Run」してみてください。
予想と異なる結果も出てくると思います。

プログラムの流れ

　プログラムはどこから開始されるのでしょうか？
　C や Java (Applet でない)の場合、main 関数から実行されます。
関数の場合、基本的には、処理する内容はその関数で閉じています。

　Python や PHP などでは、プログラムファイルはその先頭から順に実行されます。
実行途中には、関数の定義や、他のプログラムファイルを取り込んで実行することもありますが、基本的には順に実行されます。

　JavaScript の場合、基本的には、プログラムの先頭から順に実行されます。
しかしながら、実際の JavaScript プログラムの場合、HTML に複数の JavaScript ファイルが指定され、これらが同時にまたは順不同で実行されます。
ネットワークに接続された環境で実行する場合、全てのプログラムを取り込んだ後に、指定した関数を呼び出すこともできます。

　この様に、JavaScript の場合、プログラムがどこからどうスタートするかは、少しややこしいです。
本環境では、入門用ということで、１つのプログラムを書いて上から順に実行します。

　下記のプログラムを実行すると、どのように出力されるのでしょうか？

▶ Run

console.log("1");

function f1() {
  console.log("5");
}

console.log("2");

function f2() {
  console.log("3");
}

f2();

f3();

console.log("6");

function f3() {
  console.log("4");
  f1();
}

console.log("7");

変数・定数

　変数にはプログラムの実行中に利用する情報（数値や文字列など）を記録します。
　JavaScript では、変数につける名前は、以下のルールがあります。

• 変数名は、英字 ( [A-Za-z] )、アンダースコア( _ )、ドル記号( $ )で始めます
• 変数名の２文字目以降は、英数字 ( [A-Za-z0-9] )、アンダースコア( _ )、ドル記号( $ )を使用します
• 予約語は、変数名に使用できません
• 変数名の長さに制限はありません

　変数にどう情報を記録し、それをどう取り出すかプログラミングの肝となる部分です。

　記録する情報には、数値や文字列、論理値などの型が存在します。
C や Java などのように、変数にあらかじめ型を定める言語と、JavaScript や Python などのように変数に型がない言語が存在します。

　一般的には、変数に型がある言語は利用する前に、変数の型と変数名を宣言しなければなりません。
　JavaScript の場合、変数に型がないので、変数名の宣言のみを行います。
変数の宣言時に、初期値を代入することができます。
また、変数の宣言がなくても、変数は利用できてしまいます。

変数宣言

var 変数名;

var 変数名 = 初期値;

　定数は、変数に似ていますが、初期値を設定したら、その値を変更することはできません。

定数宣言

const 変数名 = 初期値;

　変数に型はありませんが、変数に代入されているものには、数値や文字列などの型があります。
変数に代入されているものの型は、typeof演算子で調べることができます。

　typeof演算子では、以下の型を調べることができます。

　以下に、typeof のテストプログラムを示します。

▶ Run

const c = 100;
var x;
console.log(typeof x);
x = 3;
console.log(typeof x);
x = "3";
console.log(typeof x);
x = true;
console.log(typeof x);
x = new Array();
console.log(typeof x);
x = function() {};
console.log(typeof x);
x = Symbol();
console.log(typeof x);

　変数は、代入により、数値や文字等を記憶します。

　変数に記憶した数値や文字等は、参照により取り出すことができます。

　以下のような、プログラムを作成してみます。

これを、JavaScript のプログラムで記述すると以下のようになります。

▶ Run

var x = 3;
x = x * x;
console.log(x);

　変数「 x 」の初期値が３なので、プログラムの実行結果として、９が表示されます。

条件処理

　プログラムを制御するのに、「条件式」というのを利用します。
条件式は、条件式を評価（計算）したときに、結果が真か、偽のどちらかになります。
JavaScript の場合、具体的には、0, false, 空文字, null, NaN, unddefined が偽で、それ以外なら真です。

　この条件式が、真の時に実行する処理、偽の時に実行する処理を記述して、プログラムを制御します。
この条件処理を代表する命令が、if 文です。

条件処理

if( 条件式 ) 命令文1 else 命令文2

if 文は、条件式が真の場合に命令１を実行し、偽の場合に命令２を実行します。
以下のプログラムでは、初期設定した変数「 x 」の値が、偶数か奇数かにより、出力するテキストを制御しています。 （下記プログラムの条件式内の「 % 」は、剰余（あまり）を計算します）

▶ Run

var x = 1;
if(x % 2) console.log('Kisuu');
else console.log('Guusuu');

「📝 Edit」ボタンで、変数「 x 」の値を変更後、「▶ Run」ボタンを押してみてください。
奇数か、偶数かによって、出力されるメッセージが変更されます。

繰り返し処理　ループ

　速度 10 m/s で移動するものを、100 m まで、１秒毎に軌跡を計算してみましょう。
この場合、同じような計算が10回必要となります。
この様に、繰り返し処理することをループと呼びます。
ループを記述する代表的な命令に for 文があります。

ループ

for( 初期化 ; 条件式 ; 更新 ) 命令文

for 文は、初期化、条件式、更新を与え、繰り返し実行する命令文を直後に記述します。
動作は、初期化で初期化後、条件式が成り立つ間、直後の命令文と更新を、繰り返し実行します。

これを、JavaScript のプログラムで記述すると以下のようになります。

▶ Run

var x;
for( x = 0; x <= 100; x = x + 10 ) console.log(x);

　0, 10, 20, ... 100 が表示されます。

関数

　関数は、まとまった処理を記述する場合に利用します。 同じ処理がまとまったり、プログラムが見やすくなるなど効果があります。
また、標準で用意されている関数もあり、それらを利用して開発効率を上げます。

関数の定義

function　関数名([引数]) {命令文}

function　関数名([引数]) {命令文; return 戻り値;}

関数の呼び出し

関数名([引数])

変数 = 関数名([引数])

関数の定義は、function を用いて、上述のように記述します。引数は、なくても良いです。
関数から値を返すときは、return 戻り値; で返します。
関数の呼び出しは、関数名(引数) で行います。

▶ Run

console.log("1");

function f1() {
  console.log("2");
}

function f2(n) {
  return n+1;
}

f1();
console.log(f2(2));

プログラムの基本 (入力-処理-出力)

　プログラムの基本は、入力を受け、処理をし、結果を出力することにあります。

プログラムが複雑になれば、こんなに単純ではすまなくなってきますが、どんな入力を受け、どんな処理をし、どんな結果を出力するのかの、”どんな”の部分を押さえておくのは非常に重要です。

　入力-処理-出力 のプログラム簡単な例を以下に示します。
　このプログラムは、日付を入力すると、現在までの日数を計算して、コンソールに出力するプログラムです。

▶ Run

var bd = window.prompt('Input day (yyyy/mm/dd)?');

var dbd = new Date(bd);
var dnw = new Date();
var dif = dnw.getTime() - dbd.getTime();
dif = Math.floor(dif / 24 / 60 / 60 / 1000);

console.log('Input day : ' + dbd);
console.log('Today     : ' + dnw);
console.log('Period    : ' + dif + ' days');

プログラミングに最低限必要なこと

前に、プログラムの基本は、

　　入力　→　処理　→　出力

と述べましたが、「入力」と「出力」を除いた「処理」は、いま述べた、変数宣言、演算と代入、条件処理、ループ でプログラムとして記述することが可能です。
大見得を切れば、どんな処理プログラムでも、今までの知識で書けます。

しかしながら、これらの命令文だけでは、プログラムを記述する効率は悪く、また、他の人が工夫を凝らして書いたプログラムを理解するのも困難です。

もう少し、基礎的な内容を補う必要があります。

グラフィック出力

　繰り返し処理のことろで紹介したプログラムの結果をテキストだけでなく、グラフィックでも出力してみましょう。

　速度 10 m/s で移動するものを、100 m まで、１秒毎に軌跡を黄色の円で描きます。

　プログラムの内容は別途解説したいですが、以下のようになります。
　前述したプログラムが、２行だったのに比べ、５倍の10行になっています。
ちょっとでも凝ったプログラムを書こうと思うと、プログラムの量は増え、内容の理解もしずらくなることが分かってもらえると思います。

▶ Run

var x;
var cx = document.getElementById('jsccanvas').getContext('2d');
cx.strokeStyle = 'rgb(255, 255, 0)';
cx.fillStyle = 'rgb(255, 255, 0)';
for( x = 0; x <= 100; x = x + 10 ) {
  console.log(x);
  cx.beginPath();
  cx.arc(x, 200, 3, 0, 2*Math.PI, true);
  cx.fill();
}

　グラフィック画面を消去するには、表示領域の上にある「◼ Cls」ボタンを押して下さい。

目次へ