SPDとSPDエディタ

1. SPDの発祥と再生

1980年代、NECは自社のメインフレームやミニコン向けの開発支援環境を展開していましたが、その設計フェーズを支える中核図法として使われていたのがSPD（Structured Programming Diagram、構造化プログラム設計図）です。

SPDは、当初から罫線文字（├ └ ─ │ ）や記号（◇ ↻）を使って、テキストとして書ける図法でしたが、それを生かすにはNEC製の専用ツールが必要でした。そのため、SPDの知識があってもツールが使えない場合は、手書きするしかありませんでした（P.〇参照）。

SPDは社内向けの技術だったので、やがて業界のトレンドがオブジェクト指向とUML（Unified Modeling Language）へと移っていく中で、あまり知られないままフェードアウトしていきました。

著者はプログラミング教育のために長い間SPDを利用しています。アルゴリズムを考えるツールとしてとても有効なので、（もっぱら紙に手書きする方法で）教えてきました。SPDを使うと大枠から徐々に詳細化していく段階的詳細化の手法が自然に身に付くからです。

しかし、ユニコード文字の普及とAIエージェントの急速な発達により、事情は一変しました。SPDを書くと、AIエージェントに依頼して、そのままソースコードに変換できるようになったからです。

2. SPDとは

SPDは、プログラムの処理をわかりやすいことばで系統的に表記したものです。処理の構造を示すために分岐や反復の記号を使って、ツリー状にまとめます。

最初に処理の骨格を考え、内容を徐々に詳細化していく、段階的詳細化の考え方を、図の中に自然に表現できます。アルゴリズムを考える力を養成する目的にも、とても効果的な図法です。

SPDの特徴

  • ・プログラムの構造を視覚的に表現できる
  • ・段階的詳細化によるプログラム設計が自然にできる
  • ・アルゴリズムを考える力が身に付く
  • ・わかりやすい日本語で記述するので理解が容易である
  • ・プログラムとほぼ一対一に対応する
  • ・普通のテキストとして作成できる
  • ・AIエージェントを使ってソースコードに変換できる
  • ・AIと協働するリテラシーの育成に適している
  • ・いろいろなプログラミング言語（Python、Java、Cなど）で利用できる

簡単なSPDの例

電卓プログラム │ ├─合計を入れる変数total に0 を入れておく ├─合計の計算─↻─while: True │ │ │ ├─変数numberにキーボードから整数を入力する │ ├─◇─number は0 である │ │ └─ループを脱出する │ │ │ ├─number をコンソールに表示する │ └─totalにnumberを加算する │ └─"合計= 〇〇" の形式でtotal を表示する

3. SPDエディタについて

SPDは、罫線、記号、文字の組み合わせなので、エディタやワープロでも作成できますが、SPDエディタを使うと、もっと軽快に作成できます。また、修正や再利用も簡単です。

SPDエディタの画面

SPDエディタ　（https://k-webs.jp/spd/spd-editor.html）

SPDエディタは、HTML + CSS + JavaScriptによる単一のHTMLファイルです。上記のURLを開くだけで使えます。著者のGitHub（https://github.com/kawaba/spd-editor）からソースをダウンロードするとローカルでも起動できます。誰でも無償で使用できます。

使い方は、「5. SPDエディタの使い方」を見てください。

フォントのインストールについて

SPDエディタは、等幅フォントで、全角スペースを□で表示しないPlemolJP HSフォントを優先フォントとしています。OS固有のフォントでも使用できますが、このフォントをインストールするとより快適に使えます。次のURLからダウンロードできます。

https://github.com/yuru7/PlemolJP/releases/tag/v3.0.0

URLを開いて、PlemolJP_HS_v3.〇.〇.zipをダウンロードし展開します。いくつかのフォントセットが含まれていますが、"35"や"console"などの接尾辞が付かないフォルダを開き、PlemolJPHS-Regular.ttfとPlemolJPHS-Bold.ttfの2つをインストールしてください。

4. SPDの書き方

(1) 基本構造

タイトルを書いて、具体的な処理を上から下へ順に、罫線でつないだものが基本のSPDです。プログラムの知識が無い人でもわかるような、平易なことばで書きます。

代入と計算（順次構造） │ ├─変数numberに10を代入する ├─numberを１増やす └─mumberを表示する

(2) 選択構造

◇ は条件判断の記号です。if文やmatch文で使います。"◇─条件" のように書き、条件から└─ の罫線を引いて実行する内容を書きます。また、"それ以外"は、"└─else"です。

サイコロゲーム（if-else文） │ ├─tkxlibからdice関数をインポートする ├─サイコロを振って（dice()）出目を変数numberに代入する ※ dice()はtkxlibの関数 └─◇─numberは6である │ └─ "当たり"と表示する └─else └─"はずれ"と表示する

※は、SPDではコメントです。※から行末までがコメントになります。

多重の選択構造は◇─ を縦に並べます。

身長の階級（if-else if 文） │ ├─キーボードから身長（cm）を変数heightに入力する │ └─身長の階級を求める─◇─180cm以上 │ └─"A"と表示する ◇─170cm以上 │ └─"B"と表示する ◇─160cm以上 │ └─"C"と表示する └─else └─"D"と表示する

(3) 反復（繰り返し）構造

↻ は繰り返しの記号です。for文は "↻─for:反復範囲"、while文は"↻─while:条件"のように使います。反復実行する内容は、↻記号の下に└─を引いて書きます。

リストの要素を表示する（for 文、表示処理） │ ├─整数のリストを変数numbers に代入する─ numbers ← [10, 20, 30] │ └─全ての要素を表示する─↻─for:n ← numbers │ └─ nをコンソールに表示する

"n ← numbers"は、「取り出す要素がある間、numbersから毎回1つずつ要素を取り出して変数nに代入する」をコンパクトに表現する書き方です。JavaでもPythonでも同じ書き方ができます。

繰り返し処理の内容が複数ある場合は、├─ を使って複数の枝を作ります。次の例はwhile文の例です。

電卓プログラム（while 文、無限ループのパターン） │ ├─合計を求める┬─ 合計を入れる変数totalに0を代入する │ │ │ └─↻─while:True │ │ │ ├─変数numberにキーボードから整数を入力する │ ├─◇─number は0 である │ │ └─ ループを脱出する │ │ │ ├─number をコンソールに表示する │ └─totalにnumberを加算する │ └─ "合計= 〇〇" の形式でtotal を表示する

(4) 段階的詳細化

まず、処理の骨格（部分的な処理のタイトル）を先に決めて、全体を完成し、詳細は後から考えます。

段階的詳細化の例示（骨格） │ ├─準備 │ ├─集計処理 │ └─結果の表示

次に、詳細を書き足して完成します。このような書き方を段階的詳細化といいます。部分ごとに詳細化すればよいので、手順を考えやすくなります。

★SPDエディタでは、段階的詳細化をしやすいように、後から行を挿入したり削除したりが簡単にできるようになっています。行の挿入、削除に応じて縦罫線が自動補完されます。

段階的詳細化の例示（詳細化後） │ ├─準備─変数total に0 を入れる │ ├─集計処理─↻─while:True │ │ │ ├─変数dataにキーボードから整数を代入する │ ├─◇─dataは0 である │ │ └─ループを脱出する │ └─total にdataを加える │ └─結果の表示─total を"合計＝〇〇"の形式で表示する

SPDが横に広がりすぎた場合は、枝を折り曲げるとコンパクトになります。

段階的詳細化の例示（枝を折り曲げた形） │ ├─準備─変数total に0 を入れる │ ├─集計処理 │ └─↻─while:True │ │ │ ├─変数dataにキーボードから整数を代入する │ ├─◇─dataは0 である │ │ └─ループを脱出する │ └─total にdataを加える │ └─結果の表示─total を"合計＝〇〇"の形式で表示する

(5) 書き方のTips

  • ・積極的に段階的詳細化を使う。

最初に骨格（部分的な処理のタイトル）を作ると、処理の手順を作成しやすくなります。また、処理内容もわかりやすくなります。

  • ・プログラムのコードをそのまま書くのではなく、わかりやすいことばで表現する。
─ 変数totalに0を代入する ─ キーボードから変数numberに整数を入力する ─ 平均値を小数点以下1桁に丸めて、"平均値＝〇〇.〇"の形式で表示する。 ─ pの属性のうち商品名（p.name）と価格（p.price）をコロンとタブで区切って表示する

★具体的な書式文字列などを書くのは避けます。細かな文法要素はAIが生成します。

  • ・SPDにデータを記述する方法。

データ操作をことばで書いておき、└─ を引いて詳細説明として代入操作を書きます。

─ 文字列のリストを作って変数dataに代入する。 └─ data ← ["apple", "banana", "cherry"]

（注）＝の代わりに←を使うと、JavaでもPythonでも同じ表現で済みます。

─ 辞書のリストusersを作成する。※Python └─ users = [{"id": 103, "name": "tanaka", "role": "admin"}, {"id": 105, "name": "sasaki", "role": "user"}, {"id": 100, "name": "maeda", "role": "user"},]
  • ・for文では積極的に←を使う。
─↻─for:fruit ← fruit_list ★リストからの要素の取り出し ─↻─for:key, value ← score.items() ★辞書からの要素の取り出し(Python)

★この他の書き方については、書籍「わかりやすいPython」（2026.9 秀和システム新社）をご覧ください。Javaについても順次書籍化する予定です。また、SPDエディタで💡ボタンを押すと、すべての書き方のパターンと生成されるソースコードを対比して見ることができます。

5. SPDエディタの使い方

（注）SPDエディタは将来のバージョンアップにより仕様が変更される場合があります。

(1) セルポインタ

エディタ上の□をセルポインタといいます。

セルポインタ

文字入力中でなければ、

  • ・矢印キーでエディタ上を移動できます。

(2) 文字と罫線の入力

  • ・セルをダブルクリックすると入力モードになり、文字入力欄で文字を入力できます。
    　Enterキーでセル位置に挿入されます。
セルをダブルクリックして文字を入力する
  • ・SPD記号や罫線ボタンを押すと、セルポインタのある位置に入力されます。
SPD記号や罫線ボタンで入力する
  • ・SPD記号や一部の罫線を入力すると、自動的に文字入力モードになります。
  • ・Escを押すと文字入力モードを解除できます。
  • ・すでに文字が入力されているセルをダブルクリックすると、文字列全体を入力欄で編集できます。
入力済みのセルをダブルクリックして編集する

(3) 文字の削除と消去（文字入力モードでない時）

  • ・Delete、Backspaceキーを押すとセルポインタの位置の文字が削除されます。
  • ・Shiftキーを押しながらDelete、Backspaceキーを押すと文字が消去されます。
    　（消去では文字と空白が置き換わるだけで、左側の文字は詰められません。）

(4) ツールバー

SPDエディタのツールバー

1段目にはSPD記号を入力するボタンがあります。2段目には罫線入力ボタン、代入(←)、型ヒント記号（->）、その他の機能ボタンがあります。右端の保存、開くのボタンは作成したSPDデータの保存と読み込みです。

★言語選択のラジオボタンを押すと各言語用に表示されるボタンが変わります。

機能ボタンの機能

機能ボタン 機　能
↩ 元に戻す
↪ やり直し
行＋ セルポインタがある行の上に、必要な罫線を補完して1行挿入する
行ー セルポインタがある行を削除する
コピー 選択した範囲をコピーする
貼付け コピーした内容をセルポインタのある位置に貼り付ける
削除 文字削除、連続して押すと複数文字を削除できる
挿入 文字挿入、連続して押すと複数の空白文字を挿入できる
全消去 画面全体をクリアする
Export SPD全体をクリップボードにコピーする
Import クリップボードにあるSPDを取り込む
Shift + Export 選択範囲をクリップボードにコピーする
Shift + Import 現在のセル位置にSPDを取り込む
保存 SPDをJSON形式でファイルに保存する
開く SPDをJSON形式のファイルから読み込む

(5) 範囲選択とコピー、移動・消去

  • ・マウスでドラッグすると範囲選択できます。
マウスのドラッグで範囲選択する
  • ・コピーボタンで選択範囲をコピーできます。
  • ・貼付けボタンでコピーした内容を、セルポインタのある位置に貼り付けできます。
  • ・範囲選択直後に、他のセルをクリックするとその位置へ選択した内容が移動します。
  • ・文字入力モードでない時は、選択した範囲をDeleteまたはBackspaceで消去できます。

(6) VS Codeなどのエディタとのやり取り

  • ・Exportボタンを押すと、作成したSPD全体をクリップボードにコピーします。
  • ・範囲を選択し、Shiftキーを押しながらExportボタンを押すと、選択した範囲だけをクリップボードにコピーできます。
  • ・VS Codeではメニューで、「編集」⇒「貼り付け」によりSPDを貼り付けることができます。
  • ・逆に、VS Codeのエディタで、「編集」⇒「コピー」とすると、それをImportボタンで取り込むことができます。
  • ・特定のセルをクリックし、Shiftキーを押しながらImportボタンを押すと、コピーした内容をセルの位置に取り込むことができます。既存のSPDはそのまま残ります。

(7) ファイルに保存・ファイルから読み出す

  • ・保存ボタンで、作成したSPDをファイルへ保存できます。
    　保存形式はJSONです。
  • ・開くボタンで、保存していたSPDを読み込むことができます。