はじめてのプログラミング
中学生の子供がプログラミングの本が欲しいというので、さっそく以下の書籍を購入しました。
この書籍を選択したのは偶然でしたが、内容は希望した内容でよかったです。
はじめてのプログラミング
最初になんの言語を勉強するかは色々な意見があるところですが、個人的にはなんでもよいと思っています。最初の選択がJavaScriptになったのは、たまたまです。
とはいえ、JavaScriptは悪くない選択と思います。ブラウザがあれば開発に特別な環境がいらないし「この言語はTwitterとかでも使われてるんだー。」なんて言いながらプログラムに親近感をもって進めることができます。
書籍ではVS Codeのイントールからですが、そこは飛ばして最初に使ったのはエディタ。付属のメモ帳でもOK！
プログラム最初の一歩！
index.htmlというテキストファイルを作成します。内容は
こんにちはこれだけ。
index.htmlをクリックすると、「こんにちは」が表示されることを確認します。
やった！「Hello World!」的なものです。
次は、ちょっとだけちゃんとしたhtmlに変更します。
<>
↓
<head>
上記手順で書くことで、閉じカッコなどの記入忘れを防ぐことができます。
まずは以下。
<head>
<title>
タイトル
</title>
</head>
<body>
こんにちは
</body>
</html>タグという記述方法を説明しました。
今度は、headのtitleに「タイトル」と表示。それと、見た目は変わりませんがbodyタグをちゃんとつかって「こんにちは」が表示されました。
JavaScript
さてつぎはいよいよというか、さっそくJavaScriptです。細かいところはおいといて面白い所からやりましょう！
script.js というテキストファイルを作成します。内容は
document.write('おは');表示はなんでもよいといったら、おはようの「おは」になりました。
このJavaScriptを呼び出す書き方を書籍を参考に入力します。
<html>
<head>
<title>
タイトル
</title>
</head>
<body>
こんにちは
<script src="script.js"></script>
</body>
</html>JavaScriptでの表示を確認
「こんにちは」は静的、「おは」は動的に表示されてるというような説明をしました。まあピンとはこないようでした。
ピンとくるのはこれから。いまからやるよー
繰り返し処理
書籍のfor文を参考に繰り返し処理の説明をして、script.jsを以下に変更します。
for (var i = 0; i < 100; i++) {
document.write('おは');
}
ここで「おおっ！」となる。（うれしい）
「おは」をhtmlに100回書くのもありだけど、こっちの方が楽だよねー。
数字も表示できることを説明。
for (var i = 0; i < 100; i++) {
document.write(i + ' ');
}
グラフのxやyみたいに、実はiの中には数字が入っていて、0から100になるまで1ずつ足して、その中身を表示していることを説明。感覚的に理解してもらいました。
すると「1000回ならどうなるの？」
いい質問ですねー！
for (var i = 0; i < 1000; i++) {
document.write(i + ' ');
}
プログラムの３大要素は、「順次」と「分岐」と「繰り返し」。構造化プログラミングといわれています。
個人的な意見ですが、「順次」のつぎ、「分岐」と「繰り返し」どちらを先に習得した方がよいかといえば、「繰り返し」ではないかと思います。
【理由】
1.プログラムの凄さを実感しやすい
2.自分で工夫をみつけやすい
1.については、「おおっ！」となったことで説明不要だと思います。
2.については、1000回の場合の疑問を自分で解決できたことですね。
分岐処理
「じゃあ500回より小さい場合と、そうでない場合をわかるように表示するには？」
と、「分岐」の話をもちだします。
書籍の if文を参考に、以下のようにコーディング。
for (var i = 0; i < 1000; i++) {
document.write(' ' + i + ' ');
if (i < 500) {
document.write('small');
} else {
document.write('big');
}
}結果は。。
「おおおっ！」（うれしい）
「じゃ３パターンあったらどうなるの？」
いい質問ですねー！！
for (var i = 0; i < 1000; i++) {
document.write(' ' + i + ' ');
if (i < 333) {
document.write('small');
} else if (i < 666) {
document.write('middle');
} else {
document.write('big');
}
}さて結果は。。。
「おおおおおおっ！」（うれしい）
あとは、
「iに数字が入ってるように、計算もできるよ」
と、変数、代入、演算子などの説明をしました。
var a = 1;
var b = 2;
var c;
document.write(a);
document.write(b);
c = a + b;
document.write(c);1 + 2 = 3 表示はこんな感じ
掛け算もやってみました。
var a = 1;
var b = 2;
var c;
document.write(a);
document.write(b);
c = a * b;
document.write(c);1 × 2 = 2 表示は122になるはず。
割り算。
var a = 1;
var b = 2;
var c;
document.write(a);
document.write(b);
c = a / b;
document.write(c);0.5になるはず。
プログラムの世界では、「×」は「*」（アスタリスク）、「÷」は「/」（スラッシュ）になるというのも初耳だったみたいです。
ゼロで除算もやってみました。
var a = 1;
var b = 0;
var c;
document.write(a);
document.write(b);
c = a / b;
document.write(c);割れないハズなんだけど。。。
へー。「Infinity」ってでるんだ。
こんな感じで、ゆるっと小一時間やっただけですが、ひととおりプログラムというものを実感できて子供は満足そうでした。私も楽しかったよ。
高校「情報１」の予習にもちょっとはなったかな。
サンプルソース
note記事では見やすさ優先でインデントしてますが、実際インデントについて説明したのは最後の最後です。後、コメントアウトについても説明しました。
最後にサンプルソース掲載します。かなり簡略化しているので、環境によっては文字化けほかうまく動かないかもしれませんが、雛形にはなるかと思います。
index.html
<html>
<head>
<title>
タイトル
</title>
</head>
<body>
こんにちは
<script src="script.js"></script>
</body>
</html>script.js
// document.write('おは');
var a = 1;
var b = 2;
var c;
document.write(a);
document.write(b);
c = a + b;
document.write(c);
// 1000回繰り返し
/*
for (var i = 0; i < 1000; i++) {
document.write(' ' + i + ' ');
if (i < 333) {
document.write('small');
} else if (i < 666) {
document.write('middle');
} else {
document.write('big');
}
}
*/本note記事は用語的に厳密には違う説明とかもしてるかもしれませんが、まあわかればよいということで大目にみてください。^^;
この記事が気に入ったらサポートをしてみませんか？