こんにちは。プロクラスの吉田です。
ヨシダミツヒロ（@milan40920）
Follow @milan40920
Follow @milan40920
この絵、ネコのジャンプです。
いきなりなんのことか分からないと思いますが、今回のブログはプログラミングを体験したことのない方に是非読んでいただきたいと思っています。
昨今子供も大人もプログラミングの論理的思考がブームとなっていますが、実際どんな風にプログラマが頭の中で論理的思考を展開しているのか興味ありませんか？
世の中で活躍しているプログラマたちは、どのような思考過程でプログラミングを行うのでしょうか。
複雑な思考は長くなるので、簡単な一例としてScratchのネコの絵をジャンプさせる思考を時系列に書き出して見ましょう。
少し長くなりますが、どうぞお付き合いください。
※この思考は説明しやすく簡略化している部分があります。
※これはあくまでも思考の一例です。
まずは「考え始めから完成まで」の全体をご覧ください。
これは「Scratch」というMITラボのインターネットで無料で使える教材を使って説明しています。
「Scratchのネコがジャンプ」するプログラムを、プログラマーがどうやって作るかを考えて、プログラムを完成させるまでの
左から右に時間が流れていく過程で、（１）〜（１８）までの工程を、順番にプログラマは考えて進んでいく様子を図解したものです。（図0）
※図をクリックすると大きく表示されます！
（図0）
それでは上の全体思考に到るまでの手順を順に一つ一つ説明していきます。
まずは、左から右に時間の経過を表す線を引いて、思考開始から完了までの思考イメージを図化します。（図1）
（図1）
目次
■フェーズ１：【開始（理解・把握）】
①課題の意味を理解
初めに考えることは、「何をするか」を考えて、目的を理解することです。（図2）
（図2）
■フェーズ２：【検討・要素分解】
②全体的なイメージを把握する
目的がわかれば、次に全体のイメージを捉え構成を考えます。（図3）
（図3）
③問題提起
全体イメージが分かれば、構成されている要素の分解を始めます。
分解する力は想像や思考だけでは難しい場合もあるので、ここは訓練が必要です。
まずは大きく捉えて、思いつくところから徐々に粒度を細かくして考えます。
「ネコをジャンプさせる」が課題なので、そもそもの『「ジャンプ」ってどんな動きなのか』を考えなくてはなりません。（図4）
（図4）
④要素分解（大）
まずは分解する過程で初めに考えるのは「ジャンプ」をどう表現するかです。
「ジャンプする」ということは「浮き上がってから落ちる」という「上に一定時間浮力によってあがり、重力によって下がる」という現象であることに注目します。（図5）
（図5）
⑤要素分解（中）
さらに、ネコの動きを具体的に分解して考えます。
ジャンプの表現としては、「一気に上にワープして、下にまたワープする」ようなことではないので、少しずつ上にあがってから下にさがっていくように移動するアニメーションをここでは表現しなければならないことに気づきます。（図6）
（図6）
⑥コア要素への絞り込み
考えている途中、色々な関連要素が思い、考えが浮かびます。
しかし、今は実現すべき必要な要素に考えを絞り込んでいくことが大切です。誘惑に負けないようにしてください（笑）（図7）
（図7）
■フェーズ３：【デジタル／命令へ置き換え・分解】
⑦デジタルへの置き換えと分解
続いては、「アナログの数値化されていないふんわりした抽象的な内容を、どうやってデジタルの具体的な方法で画面に落とし込んで表現するのか」を考えるわけです。「上に少しずつあがる（アナログ） ＝ Y座標に10ピクセルを10回繰り返す（デジタル）」という具合です。
まだここではアナログの考え方をデジタルへ変換する方法を考える工程です。（図8）
（図8）
⑧命令文への置き換えと分解
次は具体的にどんな風に使う言語でプログラミング（命令文を使う）するかに変換する必要があります。
ここではデジタルにアウトプットするための（ここではScratchの）知識が必要なので、Scratchのどのブロックを使うかを決めます。（図9）
（図9）
⑨操作方法の割り当て
デジタル化できてプログラミング（命令）が考えられれば、操作方法をどうするかを考えます。
「ジャンプする」ためにはトリガー（引き金）となるキッカケが必要か です。
今回は「スペースキーが押されたら」ジャンプするようにしましょう。（図10）
（図10）
■フェーズ４：【チェック・テスト】
（10）実行結果の予測
プログラムが組めたら次は動作がきちんとできているかのチェックです。
チェックするまえに、プログラムを動かした時、どんな風に動くかを予測し想像します。
ここでの動作イメージは
１）スペースキーを押すと、２）ネコが上に１０ピクセルずつ移動していき、アニメーションで１０回分上に上がっていく動きをした後、３）ネコが下に１０ピクセルずつ移動していき、アニメーションで１０回分下に下がっていく動きをしてストップする。です。（図11）
（図11）
（11）課題に沿えているかの確認
頭の中でシミューレーションできれば、それが本来の目的に対してずれていないかを考えます。
目的からずれてしまっていると大変ですからね。。
「こんな簡単なのに目的ずれるわけないでしょ」と思われるかもしれませんが、もう少し複雑なことをしていると、本来やろうとしていることではなくなり、違うことを目的かしてしまう場合があるんですよね。。
なので、ちゃんと確認です。（図12）
（図12）
（12）プロトタイプ
シミューレーションして目的もしっかり沿えているなら、動かしてみましょう。
これを「プロトタイプ」や「ベータ版」なんて言いかたします。
さて、ちゃんと動くかな。。（図13）
（図13）
（13）エラーの分析
あ、想像していた結果と違いますね。
動きがおかしいケースも当然ありますから安心してください。
シミューレーションしていた動きと動かしてみたものとの違いを比べてみましょう。（図14）
（図14）
（14）論理エラーの分析
おかしなところを具体的に探しましょう。
どこの動作がおかしいですか？
「上に想像よりもさらにあがっていて、下にさがらない」ということは、上に10ずつあがるは間違っていないですね。
下に10ずつさがらないで「上にさらにあがっている」というところにポイントがありそうです。（図15）
（図15）
（15）命令文エラーの分析
その観点でプログラムを見てみましょう。
命令文（Scratchのブロック）を見てみると、「下にさがる」の命令ブロックにしている「Y座標を10ずつ変える」になっているので、これでは上にあがってしまいますね。「10」ではなく「-10」にしないと下にさがらないので、ここにエラーの原因（不具合）があることがわかりました。
次はその修正です。（図16）
（図16）
■フェーズ５：【完成】
（16）不具合修正
エラーの原因となっていた、足りない「ー（マイナス）」を入れて「-10」に修正します。（図17）
（図17）
（17）動作確認
修正できたので、もう一度動作を確認します。
動きがおかしければ、図17の「（13）エラーの分析」に戻ってエラーを分析します。（図18）
（図18）
（18）完成確認
動作確認でエラーがなければ、無事完成です！！（図19）
（図19）
【最後に】
いかがでしたか？
プログラマーの思考を具体的に分解してみると、このような順番で思考をめぐらせ、
「設計 ＞ コーディング ＞ テスト ＞ 完成」へと進めていくのです。
この一つ一つの分析・分解の粒度で考える力がエンジニアになるためには必要です。（図20）
（図20）
今一度、この思考全体（図20）を俯瞰して見てください。
初めから完成までにかかる時間が作業工数の見積もりになります。
経験によって短縮できるところもありますし、一度作ったことある部分は考える必要もないとなると、時間はどんどん短縮されていきますね。
こうやって見てみると、どうですか？
抽象的なことを具象（具体）化する方法がなんとなくわかっていただけるのではないかと思います。
一度やって見たい！という方は是非プログラミングにトライしてみてください。
細かく分解するという思考は鍛錬で習得できますし、とても日常の視野が変わると思いますよ。
ヨシダミツヒロ（@milan40920）
Follow @milan40920
Follow @milan40920