アクティビティ図の読み方・書き方を初心者向けに解説｜Scratchで実際に組んでみた手順付き

プログラムを組み立てる前に、処理の流れを図にして整理する「アクティビティ図」をご存じでしょうか。条件分岐や繰り返しといった処理の道筋を視覚的に示したもので、Scratch（スクラッチ）でプログラミングを進めるときの設計図としても活用できます。本記事では、アクティビティ図の基本的な考え方からフローチャートの読み解き方、そして実際にScratchへ落とし込んでいく手順までを、プログラミング初心者の方にも理解しやすいように順を追って説明していきます。

そもそもアクティビティ図とは何か

アクティビティ図というのは、プログラムが実行される順序や、条件によって枝分かれする処理の流れを図形で表現したものを指します。こうした流れを図式化したものを一般に「フローチャート」と呼びますが、これはプログラミングに限った話ではありません。たとえば「気になる相手に思いを伝えるかどうか」を考える過程さえも、フローチャートとして書き表すことができます。

実務の現場でも、こうしたアクティビティ図を手がかりにしながらコードを組み立てていくのが一般的です。Scratchを使う場合も考え方は変わらず、アクティビティ図がプログラミングを進める際の指針になってくれます。プロジェクト全体の流れを俯瞰できるようになる点が、大きな利点といえるでしょう。Scratchに触れるのが初めてという方は、先にスクラッチの基本要素である「ブロック」を解説した記事に目を通しておくと、この後の説明がぐっと飲み込みやすくなります。

「UML」という表記法でアクティビティ図を描く

UML（Unified Modeling Language＝統一モデリング言語）は、プログラムの内部構造を図によって視覚化するために使われる表記法の一種です。たとえるなら、立体的な模型を組み上げていくのと同じ感覚で、プログラムの設計を組み立てていくイメージに近いものです。

Scratchはオブジェクト同士がやり取りをしながら動作する、オブジェクト指向の考え方を学べる環境であるため、UMLの表記法と非常に相性が良いという特徴があります。Scratchで何かを作ろうとするときに、事前にアクティビティ図を準備しておくと、その後の作業が格段に進めやすくなるでしょう。

ここで示したアクティビティ図をベースにして、実際にScratch上で組み上げたプロジェクトが次のものです。

実際に完成したScratchのプロジェクトはこちらです：恐竜の10秒時計 Dinosaur’s 10-second clock

赤色の恐竜と緑色の恐竜が互いにメッセージをやり取りしながら、交互に少しずつ体を回転させていくという内容のプロジェクトです。ここからは、アクティビティ図と実際のスクリプトを照らし合わせながら、処理の流れを一つずつ追っていきましょう。

図に沿ってScratchへ組み込んでいく流れ

手順001：緑の旗でスクリプトが起動する

画面上部の緑の旗がクリックされたタイミングで、一連のスクリプトが動き出します。

手順002：赤い恐竜が15度向きを変える

はじめに動き出すのは赤い恐竜で、「15度回転する」という処理を実行します。

手順003：赤い恐竜から緑の恐竜へメッセージが渡る

続いて赤い恐竜が「メッセージ1を送って待つ」を実行し、それを緑の恐竜側の「メッセージを受け取ったとき」というブロックがキャッチします。

手順004：緑の恐竜が1秒待機したのち15度回転する

メッセージを受信した緑の恐竜は、「1秒待つ」を挟んでから「15度回転する」処理を行います。

手順005：今度は緑の恐竜から赤い恐竜へ返信する

動作を終えた緑の恐竜から、今度は赤い恐竜へとメッセージが送り返されます。赤い恐竜のほうは、この返信が届くまでの間、処理を停止して待機している状態にあります。

手順006：赤い恐竜も1秒間の待機に入る

返信メッセージを受け取った赤い恐竜は、「1秒待つ」を実行します。これは、2頭の恐竜が動くタイミングの間隔をそろえるための調整処理です。

手順007：これら一連の流れを5回繰り返す

「5回繰り返す」というブロックによって、ここまでの一連の動作が5回くり返し実行されます。すべて合わせるとおよそ10秒間のプロジェクトに仕上がっています。

手順008：処理がすべて終わりスクリプトが終了する

繰り返し処理が完了すると、スクリプト全体が終了します。このように、アクティビティ図の流れに沿って一つずつ組み立てていけば、迷うことなくスクリプトを最後まで完成させることができます。設計図をもとに作品を仕上げていく別の例として、逐次処理と並列処理を組み合わせてScratchで物語を作る方法を紹介した記事もあわせてチェックしてみてください。

図の作成に役立つ無料ツール「draw.io」

本記事で紹介したUML図は、draw.io（diagrams.net）というツールを使って作成しました。無料で利用できるうえに、用意されている図形のフォーマットが豊富で、画像形式やHTML形式での書き出しにも対応しており、Googleドライブとの連携機能も備えているなど、総合的に使い勝手の良いサービスです。一時期はChrome向けのアプリ版も存在していましたが、現在はWebブラウザから直接アクセスして利用する形式になっています。

まとめ｜アクティビティ図はプログラミングの良きガイド役

アクティビティ図によるフローチャートは、いわばプログラミングを進めるうえでの設計図のような存在です。プロジェクトの規模が大きくなるにつれて処理は複雑さを増していくため、コードを書き始める前にアクティビティ図で全体の流れを整理しておくことが、結果的に作業をスムーズに進めるコツになります。Scratchにおいても同じことがいえ、こうした図を描く習慣を身につけることが、プログラミングを学ぶうえでの確かな第一歩になるはずです。

Scratchについてさらに理解を深めたいという方には、入門書を手元に置いて学習を進める方法もおすすめです。価格は変動することがあるため、最新の情報はAmazonのページでご確認ください。