プログラミングってこういうこと・・・これから始める方へのアドバイス｜フリーフードファイター兼SE社長活動日記

「プログラミング初心者おすすめ」
1. 実は概念だけで言えばカンタン
2. 初めの一歩はすべて「要件」から

「プログラミング初心者おすすめ」

アクセス解析をしていたら、↑こーんなキーワードでこのブログにたどり着く方がいらっしゃっいました。

多分、前に書いたこの記事がヒットしたんだろうなぁと思うのですが、そもそも初心者におすすめっていう前にプログラミングってどういうことかな・・・っていうのを考えてみたので参考まで・・・。

実は概念だけで言えばカンタン

概念だけで言えばね・・・

私は新人君にこういいます。

「日本語で文章組み立てたらそのまま書き出してみれば自ずとプログラムになっているよ」と

どーゆーこと？？

じゃあ、こういうこと・・・

こういうプログラムが必要だとしますっていう例

おみくじ〜つくろう！
◯カンタンに引いたら結果が表示されるだけ
◯結果はテキトーに出せば良い
◯ただ、一回目だけはヨイショしたいから絶対に「超大吉！」っていうのを出したい

こういう要件があったとしたらまず、プログラム上でこう書いちゃいます。
※今回はブラウザで実現出来るJavaScript で書きました。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>OMIKUJI</title>
<script type="text/javascript">
// おみくじ引く
function omikuji() {
//カンタンに引いたら結果が表示されるだけ
//結果はテキトーに出せば良い
//ただ、一回目だけはヨイショしたいから絶対に「超大吉！」っていうのを出したい
}
</script>
</head>
<body>
おみくじ引く <input type="button" onclick="omikuji()" value="ひいてみます" /><br />
<br />
<div id="kekka"></div>
</body>
</html>

今こんな感じ

おみくじ引く

なにも表示されません。

メソッド omikuji() の中身がコメントだけだからです。
じゃあ、メソッド omikuji() のコメントを具体的にコーディングしていきます。
※あとはJavaScript内だけ表示します。

// おみくじ引く
function omikuji() {
//カンタンに引いたら結果が表示されるだけ
//結果はテキトーに出せば良い
//ただ、一回目だけはヨイショしたいから絶対に「超大吉！」っていうのを出したい
// Javascriptで表示する
document.getElementById('kekka').innerHTML= '超大吉！';
}

↑これで結果として「超大吉！」が出るようになりました。

ただ、本来１回目だけであって次からは普通に他の結果を表示したいです。

// 一回目をわかりたいので変数を用意する
var omikuji_cnt = 0;

// おみくじ引く
function omikuji() {
    // 判定結果のメッセージを出したいのだが、それは後で決めたいので変数を用意
    var kekka_message = '';
    // 一回目だけはヨイショしたいから絶対に「超大吉！」っていうのを出したい
    // ・・・ので、一回目かどうか判定する
    if ( omikuji_cnt > 0 ) {
        //結果はテキトーに出せば良い
        kekka_message = "大吉？";
    } else {
        // １回目（omikuji_cnt が 0のまま）なので「超大吉！」
        kekka_message = "超大吉！（一回目だけバージョン）";
    }
    //カンタンに引いたら結果が表示されるだけ
    document.getElementById('kekka').innerHTML= kekka_message;
	
	// 一回目判定のインクリメント
	omikuji_cnt ++;
}

↑これで一回目ではない場合は「大吉？」が表示されるようになりました。
あと一息・・・

結果は５つ位から選びたい・・・

そういう時にリスト（配列）を使います。
↓

// 一回目をわかりたいので変数を用意する
var omikuji_cnt = 0;

// おみくじ引く
function omikuji() {
    // おみくじの結果の値をリストで持つ
    var kekka_list = [ '大吉', '中吉', '吉', '凶', '超大吉' ];

    // 判定結果のメッセージを格納する変数
    var kekka_message = '';

    // 一回目かどうか判定する
    if ( omikuji_cnt > 0 ) {
        //結果はテキトーに出せば良い
        // テキトーの手段として 乱数を用いた例 （ Math.random() * 数 ）で 0 〜 指定した数 までの値になります。
        // ただ、このままだと少数以下も含まれるので小数点以下を切り捨てる Math.floor というメソッドで処理します。
		hiki = Math.floor( Math.random() * kekka_list.length );
        kekka_message = kekka_list[ hiki ];
    } else {
        // １回目（omikuji_cnt が 0のまま）なので「超大吉！」
        kekka_message = "超大吉！（一回目だけバージョン）";
    }
    //カンタンに引いたら結果が表示されるだけ
    document.getElementById('kekka').innerHTML= kekka_message;
	
	// 一回目判定のインクリメント
	omikuji_cnt ++;
}

そしてそのサンプルがこれ

何度か押してみると結果が変わっているのがわかります。

初めの一歩はすべて「要件」から

最終的にはこうなるんですが、この段階に至る初めの一歩はすべて「要件」です。

要件とは・・・

辞書にはこうあります。
１大切な用事。「―のみ記す」
２必要な条件。「教育者としての―を満たす」

そのものの必要条件ですね・・・ってそのままか。
具体的に言うと「プログラムの要件は　必要な機能を満たしているかどうか」ということだけです。

「要件」が日本語で言える（英語でもいいですｗ）ならば、プログラムは半分組めたようなもの！！

あとはそれを実現するための方法であったり構文を必死こいて探す！ググる！言語のリファレンスを読む！人の文献を読みあさる！

この繰り返しと応用になります。

どんな巨大なものでもこの組み合わせから出来ています。
これがわかればもう経験あるのみ！！！

がんばっていきましょう！

最後に今回のプログラムの全体です。
※これをコピーしテキストエディタに貼り付け sample.html など適当な名前をつけて保存しブラウザで見てください。文字コードはUTF-8です。エンコードをUTF-8に変更出来ないエディタはプログラミングに不向きですのでサクラエディタや mi.app など自分の好みのテキストエディタでやってください。
※テキストエディタの攻略もプログラミングの上達に役立ちます。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>OMIKUJI</title>
<script type="text/javascript">
// 一回目をわかりたいので変数を用意する
var omikuji_cnt = 0;

// おみくじ引く
function omikuji() {
    // おみくじの結果の値をリストで持つ
    var kekka_list = [ '大吉', '中吉', '吉', '凶', '超大吉' ];

    // 判定結果のメッセージを格納する変数
    var kekka_message = '';

    // 一回目かどうか判定する
    if ( omikuji_cnt > 0 ) {
        //結果はテキトーに出せば良い
		hiki = Math.floor( Math.random() * kekka_list.length );
		alert(hiki);
        kekka_message = kekka_list[ hiki ];
    } else {
        // １回目（omikuji_cnt が 0のまま）なので「超大吉！」
        kekka_message = "超大吉！";
    }
    //カンタンに引いたら結果が表示されるだけ
    document.getElementById('kekka').innerHTML= kekka_message;
	
	// 一回目判定のインクリメント
	omikuji_cnt ++;
}
</script>
</head>
<body>
おみくじ引く <input type="button" onclick="omikuji()" value="ひいてみます" /><br />
<br />
<div id="kekka"></div>
</body>
</html>