フローチャートを覚えて欲しい！
ゲームを作る他に専門学校のシステム系学科で外部講師もやってます。
担当科目は「システム設計」なので直接プログラムコードを書く勉強ではなく、基本的なアルゴリズムや設計等々を扱っています。
今回は「配列を覚えて欲しい！」の記事中で予告していたフローチャートについて、詳しくお話したいと思います。
ちなみにプログラミング学習の関連記事は以下にまとめてます！
いきなり長いプログラムは難しい
ゲームに限らずプログラムコードといえば、英単語と数式が何行も並んでいて複雑で何をやっているかわからないモノのイメージがあると思います。
もちろん、ある程度の勉強をしていたり、実際にプログラムコードを書いている方にとっては別ですが、触れたことがない人にとっては意味不明なモノでしょう。
近年ではプログラムコード無しでもゲームを作れるエディタもありますし、情報教育においてグラフィカルでポップな学習ツールが登場したとのニュースを見聞きしていると思います。
こういったエディタ･ツール類の進化は、難しくて投げ出す人を減らせるという意味でも学生や初心者の救いになると思います。いきなり意味不明なコードを並べられて頭に叩き込むより、よっぽど解りやすい！
とはいえ、そのエディタ･ツール類の見えない場所にプログラムコードが存在し動いているわけでして、どこかのタイミングでコードを書く必要が出てくるのも確かです。
ではコードを書いてみましょう！ いや、いきなりは書けない！
そうなんです、書けないんです。
じゃぁ、どうやって書けるようになるのか？
ちょっとした考え方、小分けにした考え方を幾つも頭に置いておくんです。
複数あるデータから特定のデータをピックアップする方法
メチャクチャなデータを昇順または降順に並べる方法
合計や平均、最大値や最低値などを求める方法
Excelあたりなら関数を使うと自動でやってくれますね…
でも、このへんの考え方を部品として頭の中にあらかじめ置いておくと長いコードを書く時に便利だったりします。
システムは色々な機能を複合して１つの結果を出しているんです。
例えば、RPGで街の武器屋さんの商品リストを表示するとしましょう。
（1）複数ある「武器」データから特定のデータ、つまり「この店で売っている武器データ」をピックアップしないといけません。
（2）もし、商品リストが長いのであれば何かのルールに則った並びの方が良いでしょう。仲間が大勢いるゲームなら装備不可キャラの場合は「×」マークを付けるとか、工夫があるとプレイヤーも助かりますよね。
（3）商品リストにある武器を装備したら攻撃力は幾つになるのかを画面表示するのもプレイヤーに優しい工夫です。
このへんを処理しているプログラムは１つかもしれませんが、小分けにすると（1）（2）（3）…という様に幾つかの考え方で構成されているんです。
（1）はあの部品を使えばいけそう！
（2）にはあの部品で、（3）はこの部品を使ってみるといいかも！
といった具合に頭の中に部品が増えれば増えるほど、後々楽になっていくハズです。
いきなり長いプログラムコードを書くのは難しい、だけど「小分けにしたらいけそう！」な気がしませんか？
アルゴリズム
何らかの処理をする時に（掃除や料理でもいいいです）
人間というのは無意識に手順を予想したり想像しますよね。
まずナニを準備して（掃除だったらホウキとか雑巾とか）
アレをして（ホウキでゴミを集めて）
次にコレをして（チリトリにゴミを入れて）
条件がこれだったらソレをやって…（汚れだったら雑巾で拭いて）
手順を想像したら、その手順を追って物事に対処しています。
この手順や考え方をアルゴリズムと言います。
このアルゴリズムに基づいてプログラムコードを書くわけですね。
前節の例である「RPGの武器屋さん」の（1）を思い浮かべてみましょう。
（1）複数ある武器データから特定のデータ、つまり「この店で売っている武器データ」をピックアップしないといけません。
※ 前提：武器データのイメージを貼ります。拡大してご覧ください。
武器データから特定のデータ（この店で売ってる武器）をピックアップするために、どういった処理をすればいいのでしょうか？
手順を想像します。
店フラグが用意されていて、その内容で売ってる場所が変わるらしい…
ａ街の武器屋なら、Shpをチェックして「1」のモノをピックアップする。
ｂ村の武器屋なら、Shpをチェックして「2」のモノをピックアップする。
ｃ城の武器屋なら、Shpをチェックして「3」のモノをピックアップする。
これならいけそう！
文章で書いたけど、微妙にわからん！
では、これを解りやすく図で表現しましょう。
フローチャート
処理の流れを図で表現したものをフローチャート（流れ図）と言います。
フローチャートに用いる記号は幾つもありますが、
まずは絶対に使用する記号を貼りますね。
次も、よく出てくるので覚えちゃった方がいいです。
入出力は色々と種類があるので、ぱっと見で判断できる方が後々便利だったりするんですよね。というわけで、以下も覚えて貰えると嬉しい。
では、さっそく「RPGの武器屋さん」の（1）をフローチャートで表現してみましょう。ピックアップした武器を画面表示します！
まず前提はどうだったかな？（再掲）
想像した手順は？（再掲）
店フラグが用意されていて、その内容で売ってる場所が変わるらしい…
ａ街の武器屋なら、Shpをチェックして「1」のモノをピックアップする。
ｂ村の武器屋なら、Shpをチェックして「2」のモノをピックアップする。
ｃ城の武器屋なら、Shpをチェックして「3」のモノをピックアップする。
はい、フローチャート！
フローチャートは上から下へ、左から右へ流れていきます。
但し、処理の関係上（書けるスペースの都合上）流れが遡るような図になったら、矢印で流れる方向を明記してあげます。
また、基本的にフローチャートは同じ処理を何個も書きません。繰り返し処理をする場合は矢印やループ記号で表現します。
ちなみに、何のツールで書いているのかというと「draw.io」を使用しています。これがまた無料で高性能だったりします。
フローチャートを書くコツ
人によっては「先にプログラムコードを書いた方が楽！」という方もいるでしょう。システム設計を教えている学生たちの中にも苦手に感じている学生がいます。
得意なこと、不得意なことってのは、人それぞれ違いますからね！
んで、なかなか書き出せない学生を見ていて思ったのですが、
書き直したくないんですよ。多分、一発で正解に辿り着きたいんだと思うんです。わかります。すごくよくわかります。書き直すの面倒臭いもんね。
慣れてくると全体像が何となく浮かんでくるんですが、この手の勉強をしたことがないと難しい。なので「書いてみる」しかありません。
とはいえ、まったく指針がないと厳しいと思います。
そこで考え方を小分けにしてみましょう。
開始と終了
まず、開始と終了は絶対必要ですから書いちゃって構わないでしょう。
慣れないうちは、わかるところから書いちゃった方が良いですよ！
準備
次に必要なモノを準備しましょう。
先程の例題ですと配列の中にある欲しいデータを探しています。
配列の先頭から最後尾まで、ユーザーの居場所であるinpと、配列shpを１つずつ比較して同じ値のデータを探しています。違う値だったら配列の次を確認しています。
※ これは探索アルゴリズムのひとつで「線形探索」といいます。
リニアサーチとも言います。このへんの考え方はまた後日、記事にまとめたいと思います。線形探索については以下の記事にまとめましたのでご覧ください。
とにかく「配列」を使うので添字（今回はixとします）が必要だと予想できますし、ユーザーの居場所である変数inpが入ってくることがわかります。
終了条件と探索条件
この処理を終わる条件も必要ですね。
終わる条件は「配列の最後まで確認できたら！」が良いでしょう。
問題によっては前提として「配列長を〇〇とする」と書かれていることもあるでしょう。学生さんが試験や課題をやるなら基本ですね。問題文はしっかりと読みましょう。
今回は配列長を変数Lnとしました。
もちろん欲しいデータかチェックするために条件が必要です。
つまり分岐が最低２つあるハズってのが予想できます！
そして準備した添字が１つずつカウントアップするところも必要ですね！
画面表示するものは何だっけ？
武器屋さんの商品リストを表示するんでしたね。
今回は例題用のデータなのでシンプルですが、本当なら価格や装備できるキャラのデータ等々も画面表示したいところです。
線（矢印）を入れてみる！
あとは、ここまでで作った図形を線で結んでいきます。
できれば見やすくなるように綺麗に整列してあげると更に良し！
流れに逆らう場合（流れがわかりにくい場合）は流れを矢印で表現します。
というわけでフローチャートを再掲します。
ただ、線の結び方が難しいという学生もいたので、みなさんには考え方のコツをひとつ伝授しましょう。
難しいのは分岐、または、ひと通り処理を終えた後どこに戻るかといった矢印をつけるところだと思います。
添字ixをカウントアップしたら、つまり添字が変化したらもう１度確認したいことが２つあります。
（ａ）配列の最後尾まで来たのか？
（ｂ）いま確認しているshp[ix]は表示すべきデータか？
（ａ）は終了条件です。なので終了に向かう矢印を書けばいいです。
（ｂ）は表示条件です。異なる値なら表示しないだけでＯＫです。
「さぁ、もう１度確認しましょう！」
ということは？
（ａ）（ｂ）の分岐の前に戻ればいいんですよ！
処理によって何かが変化した。その変化によって確認したいことが増えた。
ならば確認する前に矢印を結んであげる。で、良いのです。
おわりに
今回はフローチャートの基本的な部分をお話しました。
前述通り、いきなり長いプログラムコードを書くのは難しい、だけど「小分けにしたらいけそう！」な気がします。
いくつもの小分けした部品を頭の中に作っていくことで、次第に長いプログラムを作れるようになると思います。
そのために基本的なアルゴリズムを学習しておくと良いでしょう。
そして、そのアルゴリズムを図で表現できる方法がフローチャートです。
フローチャートは基本的なお約束事がありますが、絶対こう書かなければならないという厳しい縛りはありません（少なくともわたしはそう思っています）
プログラムコードを書くといってもプログラム言語はたくさんあります。
Pythonが得意な人もいればC言語が得意な人もいるでしょうし、人によってはCOBOLが得意かもしれません。
コードで書かれていると読めないかもしれませんが、フローチャートなら大体のやりたいことは伝わります。
学校の「情報科」の学習内容にフローチャートも出てきますしね！
基本的なアルゴリズムについては今後も何度かに分けて記事にしていきたいと思います。
教科書や参考書にも書いていますし動画で解説されている方もいるので、そちらで勉強するのも良いでしょう！
こちらの記事としては「なぜそれが必要なのか知りたい」とか「授業中に理解できなかったから復習する」といった方に向けて発信していけたらと思い
ます！
すごく難しそうなことを書いていますが、普段はこんなゲームを作っているサークルの人です。ご興味がございましたらご覧ください（↓）
それでは、また別の記事でお会いできるのを楽しみにしております！
弊サークルの活動を応援してもいいなと感じていただけたら嬉しいです。 いただいたサポートは「地域／若者向けの展示会費用」「ゲーム開発費」として使わせていただきます！ サポートよろしくお願い致します～🐱🐭