3日目:繰り返し処理 (for) で遊ぼう。 – 1週間でプログラマーになろう。(30分のプログラミング学習、入門講座)

プログラミング講座
cattle
cattle

これまでは、自分が書いたコードがそのまま動いているだけでした。本日のテーマであるfor文を使うと、もっとロジカルでわくわくするプログラムが書ける様になります。

マナーとして、googleのサーバー負担に配慮致しましょう。
繰り返し処理を学ぶ上での注意点です。スプレッドシートは、googleさんのご厚意により無料で使わせて頂いている代物ですので、負担の大きい無茶な繰り返し処理は書かない様にご注意下さい。

プログラミングは書く人次第で、闇の力になる。
昨今、世界中でダークサイドに落ちてしまった悪のハッカーが暗躍しています。その一方で、悪に立ち向かう正義のホワイトハッカーも存在します。皆さんが身に着けた力は、きっと誰かの役に立てるはずであると、私は固く信じています。

途中からご覧になった方は、全体のロードマップをご確認頂けます。

わからない所があれば、ページ下部のコメント欄、又はtwitterからご相談頂けます。

前半 (15分) – 繰り返し処理 (for) で遊ぼう。 – プログラミング学習、入門講座3日目

準備体操(3分)

これまで通り、保存してあるスプレッドシートから、スクリプトエディタを開きましょう。やり方を忘れてしまった方は、復習がてらにさらっと前回の記事に目を通してみましょう。

– ツールの使い方や、プログラミングを暗記する必要はありません。
まずは大まかな流れを掴む事が重要です。「なんとなく覚えているけど、実際どうやるんだっけ」と、プロでさえも度々思います。私は記憶力が抜群に悪いので、いちいち覚えようとしない事に決めました。その代わりに、ブラウザのお気に入りフォルダや、メモツール等で情報管理を徹底しています。

繰り返し処理 (for) を使ってみよう。(12分)

まずは、以下のコードを書いて、実行してみましょう。

function myFunction() {
  for(var i=0; i<3; i++) {
    console.log('モゥモゥ');
  }
}
ログの画像

一回のconsole.logで、3回分のログ出力が行われました。

これは極端な例ですが、console.log(“モゥモゥ”);を10回出力する必要があるとしましょう。繰り返し処理 (for) をあえて使わずに、手書きで全て書く事も出来ます。

function myFunction() {
  console.log('モゥモゥ');
  console.log('モゥモゥ');
  console.log('モゥモゥ');
  console.log('モゥモゥ');
  console.log('モゥモゥ');
  console.log('モゥモゥ');
  console.log('モゥモゥ');
  console.log('モゥモゥ');
  console.log('モゥモゥ');
  console.log('モゥモゥ');
}

for文を使った場合は以下になります。

function myFunction() {
  for(var i=0; i<10; i++) {
    console.log('モゥモゥ');
  }
}

この状況で、モゥモゥという文言を、メェメェに修正する必要が生じてしまったとします。for文を使わずに書いていた場合では、10箇所修正しなければなりません。しかし、for文を使っていればたった1箇所の修正で済みます。

繰り返し処理 (for) で書ける処理は、積極的に使っていこう。
プログラムコードは、読み易さだけでなく、メンテナンスのしやすさも大切です。

for文の文法は、3つの構成で成り立つ

forの後に続く( )の中身の文法は、3つの構成で成り立っています。まずは大まかな流れを掴みましょう。(forの文法の中では新しい言葉がどっと登場しますが、順を追ってじっくりと理解を進めて行きましょう。)

for(var i=0; i<3; i++) {
  console.log('モゥモゥ');
}
var i=0;

繰り返しを始める準備として、数の0をセット。

※ 「変数」と呼ばれる物を準備しています。

i<3;

繰り返しを行う条件として、数値の3未満を設定。

※ 条件が正しい (true) 時は、for( … ) 以降に続く { } ブロック内処理が実行されます。条件が正しくない (false) 時、繰り返しを終了します。

i++

繰り返す度に、数値を1ずつ増やしていく。

※ ++は「インクリメント」と呼ばれる物です。インクリメントの仕組みは、変数と密接な関係があります。

分かり易い具体例として、for文の文法を日本語に当てはめると以下となります。

繰り返してね(スタートは 0 からだよ; 3未満だったらまだ繰り返してね; 繰り返す前に1増やしてね) {
  console.log('モゥモゥ');
}
for文のフローチャート画像

上の図の流れ(フローチャート)を頭の中でイメージする事が、大切です。

– 行の最後や、プログラム文中に出てくる ; (セミコロン)は何?
プログラムを読む機械が、区切りとして認識する為に書いてあげます。人間同士の会話に例えると、難しい話をしている時に、ここまで大丈夫ですか?と確認しながら話す感じのイメージです。for文の( ) の中には2つのセミコロンがありました。構成要素は全部で3つありますので、1つ目のパーツはここまでです、2つ目のパーツはここまでです、と明確に教えてあげています。3つ目のパーツは終わりを教えてあげなくても( )の終わりでわかりますので、不要となっています。

for文のチューニング

プログラマーは、for文の3つの構成をいい具合に弄り、繰り返しの動きを思い通りにコントロールします。

より理解が深まる例として、以下のコードを見てみて下さい。

for(var i=3; i<3; i++) {
  console.log('モゥモゥ');
}
繰り返してね(スタートは 3 からだよ; 3未満だったらまだ繰り返してね; 繰り返す前に1増やしてね) {
  console.log('モゥモゥ');
}
for文のフローチャート画像

このコードは実行しても、cosole.log(‘モゥモゥ’) が一度も実行されずに終わります。

左のフローチャートを参考にしながら、処理の流れをイメージしてみて下さい。

– 実行時エラーと論理エラー
プログラミング言語の文法を間違えてしまった時に起きるエラーを、実行時エラーと呼びます。エラーメッセージで何を間違えてしまったのか教えて貰えますので、解決の助けにしましょう。文法は正しいがプログラマーの意図した結果になっていない時は、論理エラーとなります。こちらは非常にやっかいで、エラーメッセージは出てきません。自身でconsole.log(値を確認したい変数名); など記述して行きながら、構築したプログラムの流れを一行ずつ確認して問題点を探します。

cattle
cattle

前半はここまでです。お疲れさまでした!for文を使いこなす為には、変数を理解する必要があります。後半は、一旦forから離れて、変数の要点を掴んでいきましょう。ここまで進んだ皆さんは、プログラマーとしての輝かしい未来を既に切り開いています。

後半 (15分) – 変数を使って、for文を楽しもう。- プログラミング学習、入門講座3日目

変数の要点を掴もう。 (10分)

いよいよ、プログラミングの深みに潜っていきます。溺れそうになったら、一旦深呼吸して、ご自分のペースでゆっくりと進めて行きましょう。

変数って何?
各種データ(数字の値や、モゥモゥなどの文字列)の管理を機械にお願い出来る仕組みです。新しい変数を作るには、「var」というJavaScriptの魔法のコマンド(命令語)を使います。新しい変数を用意する行為は、「変数宣言」あるいは「変数を定義する」と表現します。

変数の名前
プログラマーが新しい変数を作る際には、変数の名前を自由に付ける事が出来ます。利用目的に沿った分かり易い名前を付けてあげる事が大切です。それが何の値を示しているのか、後で見返した時に分かり易くなります。他人が組んだプログラムを自分が読む立場になると、名前の重要性がよくわかります。

– 変数の代入
用意した変数に値をセットする行為を、「変数に値を代入する」と表現します。数字の値を代入する時と、文字列の値を代入する時で、文法が違うのでご注意下さい。5日目の講座(今は3日目)で「変数の型」について解説致しますので、今はまだモヤモヤ感が残るかもしれません。しかし、近い将来完全に解決致しますので、ご安心下さい。

『以下の具体例を確認し、変数への理解を更に深めて行きましょう。』

– 変数定義と代入の具体例

var level = 5;
var name = 'うし';

変数levelを定義し、数字の5を代入。
変数nameを定義し、文字列のうしを代入。

※ 文字列を代入する際は、「’」という記号で囲みます。(Shiftキー + 7キー)または、「”」で囲っても同様に文字列を代入出来ます。(Shiftキー + 2キー)

var price;
price = 500;

変数priceを定義。
変数priceに、数字の500を代入。

※ 定義と代入を分けて書く事も出来ます。

変数の値の活用例

var name = 'うし';
name = 'レベルアップしたうし';

変数nameの値に文字列うしを代入。
変数nameの値に文字列レベルアップしたうしを代入。

※ 過去に代入済みの変数へ再び代入を行うと、単純に上書きされます。

var is_cute = true;
var text = '私は可愛い!';
if(is_cute){
  console.log(text);
}

真偽値(true, false)を変数に代入。
if文の判定を、変数の値で行う。
console.log( )の中に変数を入れて、値を確認。

※ 変数の名前には、記号や数字も使えます。

以下はエラーとなるのでご注意!(JavaScriptが認めていない文法)

var name = 'うし';  // 1度目はOK
var name = 'うし';  // 2度目はNG

既に定義済みの変数名で、重複して定義しようとするとエラーとなります。

cattle
cattle

変数を使った計算(足し算や引き算など)については、5日目の講座(今は3日目)で解説致します。まずは、これまでの基礎を固めて着実に進んで行きましょう。

最後に、文字ドラマ『子牛の成長記録』を鑑賞してみよう。 (5分)

このシンプルなドラマ作品には、これまでに覚えた全ての技術が結集されています。
どんなストーリーなのか、是非鑑賞してみて下さい。

function myFunction() {
  var name = '生まれたての子牛';
  
  console.log('『子牛の成長記録』');

  for(var age=0; age<5; age++) {
    if(age == 1){
      name = 'スクスク成長中';
    }
    if(age == 4){
      name = '母牛となり子牛を生みました。';
    }
    console.log('----------');
    console.log(age);
    console.log(name);
  }

  console.log('『~完~』');
}

まだお時間がありましたら、以下に挑戦しましょう!

処理の流れ(フローチャート)を想像してみましょう。

変数の値がどの様に変化しているのか、考えてみましょう。

今度はあなたが監督になって、オリジナルストーリーを付け加えてみましょう。

cattle
cattle

本日はここまでです。お疲れさまでした。繰り返し処理 (for) を学んだ事で、難易度がだいぶ高まってきました。今回学んだ内容は、これまでの講座の中でも、特に大切な内容となっています。

よくわからなかった!
私の解説に不備がございました。ページ下部のコメント欄、又はtwitterから遠慮なくご質問下さい。わからない所があっても、地道に一つずつわかる様になると、必ずプログラミングが組める様になります。

本日のまとめ

・for文を学び、繰り返し処理のメリットと使い方を理解しました。

・フローチャートを見て、プログラムの処理の流れを、より具体的に想像出来ました。

・変数に触れて、プログラミングの深淵に一歩足を踏み入れました。

次回、関数 (function) を作ってみよう。

コメント