6日目:実践ゲーム!問題を解いてみよう。 – 1週間でプログラマーになろう。(30分のプログラミング学習、入門講座)

アイキャッチ画像 プログラミング講座
cattle
cattle

本日から、実際に自分でプログラミングを組んで行きましょう!
文法をわすれてしまった際は、過去の記事を読み返しながら、じっくりと挑戦して行きましょう。

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

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

6日目:実践ゲーム!問題を解いてみよう。 – 1週間でプログラマーになろう。(30分のプログラミング入門、学習講座)

前半(15分)- プログラミング練習問題

練習.1 (3分)

ログに、文字列 ‘モゥモゥ’ を「5回」表示するには、どうしたら良いでしょうか?

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

}

練習.2 (4分)

以下の様なコードがあり、「mainProc関数を実行する」とします。

function result(num) {
  console.log('50未満です。');
}

function mainProc() {
  result(120);  // 引数の値を色々変えて、試してみましょう。
}

引数が50以下の時だけ、ログに 50未満です。と表示する」にはどうしたら良いでしょうか?

console.log('50未満です。');
if(50<50) {

}

練習.3 (3分)

練習.2に続き、「引数が50以上の時は、ログに 50以上です。と表示する」にはどうしたら良いでしょうか? ※ 引数が50未満の時は、引き続きログに 50未満です。と表示します。

if('50以上です。');
if(50>50) {

} else {

}

練習.4 (5分)

練習.3を更に修正します。

「引数が100以上の時はログに 100以上です。と表示する」
「引数が50以上100未満の時は、ログに 50以上100未満です。と表示する」
「引数が50未満の時はログに 50未満です。と表示する」
どうしたら良いでしょうか?

console.log('100以上です。');
console.log('50以上100未満です。');
console.log('50未満です。');
if(100>100) {

}
if(100>num>50) {

}
if(50>50) {

}

cattle
cattle

前半はここまでです。後半からはもう少し難しくなって行きますが、より実用的なプログラミング能力を身に着ける事が出来ます。

後半(15分)- プログラミング応用問題

応用.1 (5分)

「うし、ひつじ、にわとり」を配列で定義し、変数animals に代入します。

for文でanimals配列の要素の個数分繰り返し、うしであれば、モゥモゥ、ひつじであれば、メェメェ、にわとりであれば、コケッコッコーとログに表示しましょう。

var animals = ['うし'];
for(var i=0; i<animals.length; i++) {

}
if(animals[i] == 'うし') {
  console.log('モゥモゥ');
}

応用.2 (10分)

二次元配列を学び、本日最後の応用問題に挑戦しましょう。

– 二次元配列

以下の様に、配列の中に配列を含める事も出来ます。

var animalsArray = [ ['うし', 'ひつじ', 'にわとり'], ['いぬ', 'ねこ'], ['ろば', 'あるぱか'] ]:

以下の様にも記述出来ます。こちらの方が直感的に構造を捉える事が出来ます。

var animalsArray = [
  ['うし', 'ひつじ', 'にわとり'],
  ['いぬ', 'ねこ'],
  ['ろば', 'あるぱか']  // 最後の要素は, (カンマ)不要
];

animalsArrayの中身を実際に見てみましょう。

console.log(animalsArray);
ログの画像

[‘いぬ’, ‘ねこ’]の配列は、変数animalsArrayのインデックス1なので、animalsArray[1]でアクセスできます。

console.log(animalsArray[1]);
ログの画像

いぬにアクセスするには以下の様にアクセスします。いぬは、animalsArrayのインデックス1に存在する配列の、インデックス0です。

console.log(animalsArray[1][0]);
ログの画像

ここから、最後の応用問題です。

モーモー牧場には、「酪農体験小屋」、「ワンニャン広場」、「モフモフレース場」の3つがあるとします。

・酪農体験小屋には、「うし、ひつじ、にわとり」がいます。
・ワンニャン広場には、「いぬ、ねこ」がいます。
・モフモフレース場には、「ろば、あるぱか」がいます。

モーモー牧場管理人cattle
モーモー牧場管理人cattle

「貴方にぜひ、お客さん向けの案内システムを、完成させて欲しいんです。作って頂けませんか?」

要件.1 会いたい動物を引数として渡すと、会える場所を戻り値で返す関数の構築。
いぬ → ワンニャン広場
うし → 酪農体験小屋

要件.2 場所を引数として渡すと、会える動物の配列を戻り値で返す関数の構築。
ワンニャン広場 → [‘いぬ’, ‘ねこ’]
モフモフレース場 → [‘ろば’, ‘あるぱか’]

function mainProc() {  
  // お客さんの要望をここで変更して、動作確認とデバッグを行おう!
  var requestAnimal = 'あるぱか';
  var requestPlace = 'ワンニャン広場';
  
  // 案内を表示
  console.log(getPlace(requestAnimal));
  console.log(getAnimals(requestPlace));
}

var moumouFarm = [
  '酪農体験小屋',
  'ワンニャン広場',
  'モフモフレース場'
];
var animalsArray = [
  ['うし', 'ひつじ', 'にわとり'],
  ['いぬ', 'ねこ'],
  ['ろば', 'あるぱか']
];

// 要件.1 引数で動物を渡すと、会える場所を返す関数
function getPlace(animal) {
  var animalsIndex;
  animalsArray.forEach(function(animals, i) {
    if(animals.indexOf(animal) != -1) animalsIndex = i;
  });
  console.log(animalsIndex);
  return moumouFarm[0]; // ここを修正して、関数を完成させよう!
}

// 要件.2 引数で場所を渡すと、会える動物達を返す関数
function getAnimals(place) {
  var index = moumouFarm.indexOf(place);
  console.log(index);
  return animalsArray[0]; // ここを修正して、関数を完成させよう!
}
cattle
cattle

本日はここまでです。おつかれさまでした。最終問題は、一見するとコードの量が多くて大変そうですが、2か所を修正すれば良いだけでした。実際の開発でも、タイプミスや間違った論理構築をしてしまい、プログラマーの意図しない動作になる事態が頻繁に起こります。そういった時は、その都度変数の中身をログで確認して行き、地道にプログラムコードの処理の流れを追って行きましょう。

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

本日のまとめ

・練習問題を解き、プログラミングを打つ感覚を掴めました。

・連続する問題を解き続け、プログラムを拡張させていく流れを体験しました。

・応用問題を解き、自信が付きました。更に、プログラムに潜むバグの解決を行えました。

次回、実生活に生かしてみよう。(最終回)

コメント