2日目:条件分岐 (if) を使ってみよう。 – 1週間でプログラマーになろう。(30分のプログラミング学習、入門講座)

プログラミング講座
cattle
cattle

いよいよ本格的にプログラミングが始まります。本日は、プログラムが自動で切り替わる仕組みを学んでいきましょう。電車がレールに沿って進んでいく時、線路の切り替えによって進む道が変化するイメージです。

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

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

後半 (15分) -条件分岐 (if) を使ってみよう。- プログラミング学習、入門講座2日目

準備体操(2分)

昨日の続きから始めましょう。

・Googleアカウントにログインした状態で、スプレッドシートにアクセスします。

スプレッドシート前回の続きの画像

前回保存したスプレッドシートを探して、クリックしましょう。

※ 私は「一週間でプログラマー」という名前で保存してあったので、これを開きます。

・前回と同様に、スクリプトエディタを開きます。

スクリプトエディタの開き方の画像

画面左上のメニューから「ツール」をクリックし、「スクリプトエディタ」を選択しましょう。

スクリプトエディタの確認画像

この画面になったら準備完了です。

if文を使ってみよう。(10分)

さっそく、if文を書いてみて、どうなるか実行してみましょう。
以下はこれまでのコードです。

function myFunction() {
  console.log('hello world');
}

以下の様に、修正してみましょう。
(これまでのコードを全て削除して、コピーペーストしても大丈夫です。)

function myFunction() {
  console.log('hello world');
  if(true){
    console.log('牛乳');
  }
}
スクリプトエディタの確認画像

この状態になったらOKです。

前回の復習
「コード.gs」の左側に、赤い*マークが付いている時は、そのコードがまだ未保存状態である事を示しています。「Ctrl + S」または、画面左上メニューの ファイル → 保存 でスクリプトを保存しましょう。

前回と同じように、このコードを実行します。

・左上のメニューから、実行 → 関数を実行 → myFunction とクリックします。

スクリプトエディタの実行画像
スクリプトエディタのログの出し方の画像

左上のメニューから、表示 → ログ とクリックして、ログを表示します。

ログの画像

ログに、牛乳が追加されました。

※ ログを待機しています。しばらくお待ち下さい。と出ている場合は、そのままの画面で待っていれば、その内にメッセージが出力されます。

条件を少し弄ってみよう。(3分)

以下は、さきほど実行したコードです。

function myFunction() {
  console.log('hello world');
  if(true){
    console.log('牛乳');
  }
}

この中の一部を、以下の様に修正してみましょう。

function myFunction() {
  console.log('hello world');
  // trueからfalseに変えました。
  if(false){
    console.log('牛乳');
  }
}

// って何?
//以降に書いた行の文字は、人間が読むためのメモとして扱われ、プログラムコードを読んでいる機械に無視されます。一般的に、「コメント」と呼ばれます。英語がズラっと並んでいるだけの状態よりも、人間にとってはコードが読み易くなります。

修正したコードを、「前回と同様の方法で実行」し、「ログを確認」してみましょう。

ログの画像

今度は、牛乳が消えました!

前半はここまでです。かなり本格的になって来ましたので、適度に休憩を挟みつつ、ご自分の丁度良いペースでじっくりと進めて下さい。

cattle
cattle

ここまで全てが順調です。プログラマーへの道のりを着実に歩んでいます。if文がどんな物なのか、後半を進めると徐々により具体的なイメージが湧いてきます。

後半 (15分) – 条件分岐 (if) を理解しよう。- プログラミング学習、入門講座2日目

if文の正体 (10分) – 理解を深める読み物

if文を使えば、プログラマーが機械にどんな処理をして欲しいのか、簡単にお願い出来ます。

よりイメージが湧きやすい様に、あえて日本語に置き換えてみましょう。

もしも(正しければ){
  実行してください。
}

if文は、( )の中身がtrueの時のみ、実行されます。

if(true){
  console.log('実行される');
}

if(false){
  console.log('実行されない!');
}

true (トゥルー) とfalse (フォールス) とは?
正しい (true) か、正しくない (false) か、を表す魔法の言葉です。時に、ON (true)とOFF (false) として表現される事もあります。専門的な用語だと真偽値、boolian (ブーリアン) などと呼ばれます。抽象的な概念なので、あまり深く考え過ぎないようにご注意下さい。

cattle
cattle

私は牛が好きなので…
牛好きか?という質問に対しては、trueです。
牛が嫌いか?という質問に対しては、falseです。

{ }の意味は?
if()の後に続く{ }は、処理のまとまりを表し、ブロックと呼ばれます。if()の中身がtrueであれば、ブロックの中身が全て実行され、falseであれば、ブロックの中身は全て実行されない、という認識を持って頂けたら大丈夫です。「4日目:関数 (function) を作ってみよう。」で、より具体的にブロックを扱っていきます。

if文の中に、更にif文を入れる事も出来ます。

function myFunction() {
    if(true) {
        console.log("1回目の確認")
        if(false) {
            console.log("2回目の確認")
        }
        console.log("3回目の確認")
        if(true) {
            console.log("4回目の確認")
        }
     }
}

myFunctionを実行させると、
ログの出力結果は以下になります。

1回目の確認
3回目の確認
4回目の確認

cattle
cattle

初日に学んだ「インデント」は、このブロック階層の深まりを表現しています。これは人間がコードを読み易くする為の工夫であり、左右どちらかにずれていてもエラーにはなりません。しかし、プログラムがとてつもなく読みづらくなってしまいますので、細心の注意を払いましょう。

             function myFunction() {
        if(true) {
    console.log("1回目の確認")
                 if(false) {
console.log("2回目の確認")
    }
        console.log("3回目の確認")
if(true) {
            console.log("4回目の確認")
    }
             }
         }

このように、インデントが大暴れしているプログラムを理解するのは非常に困難です。

cattle
cattle

例え自分ひとりのプログラムであっても、後日メンテナンスをする自分自身への礼儀が必要です。インデントは必ず合わせる事を徹底し、癖付けましょう。

ちょっぴり冒険 – 比較
これまでtrue, falseと書いていた場所に、5>0、10<8などと書く事も出来ます。色んな数字に置き換えたり、記号を逆にして試してみると、より理解が深まります。trueかfalseかを判定する式になるので、単純に「判定式」とか「条件式」と呼ばれます。

if(5>0){
  console.log('牛乳');
}

5は0より大きいか? → 正しい (true) → 実行される。

– 判定式の中身は、下記の様にスペースを空ける事も出来ます。(ご自分が見やすいと思う方で自由に記述して行きましょう。)

if( 10 < 8 ){
  console.log('牛乳');
}

10は8より小さいか? → 正しくない (false) → 実行されない。

等しいかどうかは、== で表現します。

if(10 == 10){
  console.log('牛乳');
}

10は10と等しいか? → 正しい (true) → 実行される。

等しくないかどうかは、!= で表現します。

if(10 != 10){
  console.log('牛乳');
}

10は10と等しくないか? → 正しくない (false) → 実行されない。

cattle
cattle

牛の可愛さ < 豚の可愛さ
→ 正しくない (false)
→ 実行されない。(更に私は不機嫌になる。)

正しい (true) か、正しくない (false) かは、相手(パソコン)のルールで判定される、という感覚がとても大切です。今の所は、パソコンに感情はありませんのでその点はご安心下さい。※ 失礼しました。

if文のより実践的な使い方 (5分) – else文

先ほどの続きから、最後にもう一つだけ。今度はelse文を使ってみましょう。
以下は、これまでのコードです。

function myFunction() {
  console.log('hello world');
  // trueからfalseに変えました。
  if(false){
    console.log('牛乳');
  }
}

このコードを下記のコードに修正します。

function myFunction() {
  console.log('hello world');
  // trueからfalseに変えました。
  if(false){
    console.log('牛乳');
  // else文を追加しました。
  } else {
    console.log('チーズ');
  }
}

繰り返しになりますが、これを実行して、ログを表示します。

ログの確認

チーズが出現しました!

if文は、( )の中身がfalseの時、実行されません。しかし、else文があると代わりに実行されます。

文法を日本語に置き換えると、以下になります。

もしも(正しければ){
  実行してください。
} 正しくなければ {
  代わりにこちらを実行してください。
}
cattle
cattle

初日に続き、2日目も無事に終える事が出来ました。コンピュータの処理は、今回学んだif文を組み合わせて作られています。これを「コンピュータのアルゴリズム」と言います。条件分岐が複雑になると想像が追い付かなくなりますが、手書きのノートやメモ帳アプリなどで落ち着いて整理すると、理解が深まります。これを「アルゴリズムのフローチャートを書く」と表現します。

本日のまとめ

・if文によって、プログラムが切り替わる仕組みを学びました。

・else文で、プログラムの流れを具体的に想像出来るようになりました。

・処理の流れがよくわからなくなった時は、メモ帳などを使って整理してみましょう。

次回、繰り返し処理 (for) で遊ぼう。

コメント