  |
ここで言う「プログラミング初級者」とはプログラミングの記述が上から下へ向かって順番に処理されること、条件分岐やループという概念があることを理解しており、RPGゲームが作れる「RPGツクール(現RPG Maker)」や学童向けプログラミング環境「Scratch」、「ナビつき! つくってわかる はじめてゲームプログラミング(ナビつく)」、ADVゲームが作れる「吉里吉里(もしくは吉里吉里2)」、過去にBASICやC、HSP、Javascriptあたりでプログラミングへ挑戦し挫折したなどなど、ある程度の「プログラマブルなロジック」構築の経験がある者を指します。
ある時、筆者はふと思いました。「生成AIはなんだかんだで膨大なテキスト情報を処理している事がキモだよなぁ」とありきたりなことを。
そして、同時にプログラミング初級者の弱点として「現在記述されているコードの管理においてテキストと実際の処理フローが脳内で一致しない」「プログラミング言語ごとに定められているルールや関数予約語の把握が困難」なのが問題とも考えました。
前述したプログラミング初級者の弱点の考え自体は車輪の再発明であり、「Scratch」や、より高度な「UML」が既に存在しており、特筆すべきことは何もありません。
しかし、「Scratch」や「UML」、なんなら「RPGツクール」や「吉里吉里」などに無い点として、現代では自然言語処理が大幅に向上した生成AIが実用の域にまで到達しつつあるのが従来とは異なる点でした。
つまり、自然言語を混ぜ込みやすいテキストベースの言語、かつ、処理を記述するとフローが視覚的に理解しやすい言語、可能であれば情報量が多くて一部の界隈で広く使われている言語があればプログラミング初級者も気軽にプログラミングできるのではないか？と発想しました。
コンピュータ(コンパイラやインタプリタなどソフトウェアを含む)が解することができる言語にはプログラミング言語以外にも様々あり、今回取り上げるのは「データ記述言語」と呼ばれるものです。
データ記述言語の中でもグラフ作成へ特化しており、特にフローチャート作成で真価を発揮する「DOT言語」というものがあります。
早速ですが、実際に手を動かしてみましょう。ちなみにDOT言語はGraphviz OnlineというWebツールがあるため別途に何かしらをインストールして環境構築する必要はありません。便利な世の中ですね。
上記のGraphviz Onlineを開くと、既に左側のDOT言語で記述された内容が、右側で作図されています。DOT言語はこのような図を作図するためのデータ記述言語です。
一旦、左側の記述をCtrl+Aで全選択をしDeleteなどで全削除し、下記の内容をコピペしてみましょう。
digraph graphname {
A -> B;
}
DOT言語の詳細な使い方は様々なWebサイトやブログ記事、Qiitaなどへ譲るとして、A - > Bの見た目から発想の転換をしてみると処理Aから処理Bという流れに見えませんか？
DOT言語は生成AIを利用する上で有利なテキストベースでありながらグラフを作成できるのがキモであり、例えばこのA -> BがA「Webページを開いたら」 → B「Hello, Worldと表示する」という風にできるのであれば処理のフローが可視化されており本当に素晴らしいことです。
ここでプログラミングの有識者は「DOT言語をUMLなどに見立てて処理を記述するのは良いが、プログラミング初心者は求めた結果を出力するロジックやアルゴリズムを発想する知見や経験値が圧倒的に足りていないのが問題ではないか？」と至極真っ当かつ反論の余地がない問題点の指摘をすると思いますが、そこで活きるのが生成AIです。
生成AIは初級者プログラマ個人のロジックやアルゴリズムの作成能力へ無関係にロジックやアルゴリズムを生成できる(可能性が少なくともある)ので、処理のフローをDOT言語で記述することにより処理フローから初級者プログラマが求めるプログラムを生成AIへ推論させ生成させるというのが狙いです。実際に試してみましょう。
digraph graphname {
A[
label = "Webページを表示する"
];
B[
label = "Webページを表示したらHello, worldとテキストを表示する"
];
A -> B;
}
プログラミングの有識者はこの時点で「なるほど、自然言語の記述をそのままDOT言語に入れ込んでしまうのか」と気付いたのではないかと思います。
このDOT言語をGoogle Gemini 2.5Flashへ「下記のデータ記述言語のDOT言語で記述された処理フローをJavascript言語へ変換をしWebページ上へ「Hello,world」を表示したいので変換をお願いします。」と命令すると以下のコードが生成されました。
<!DOCTYPEhtml>
<html lang="ja">
<head>
<meta charset="UTF-8">
<metaname="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World Page</title>
</head>
<body>
<divid="output"></div>
<script>
//Webページが表示されたら（DOMが完全に読み込まれたら）実行される
document.addEventListener('DOMContentLoaded', function() {
// "Webページを表示する"ステップは、このHTMLファイル自体が表示されることで達成されます。
// "Webページを表示したらHello, worldとテキストを表示する"ステップ
const outputDiv = document.getElementById('output');
outputDiv.textContent = 'Hello, world';
});
</script>
</body>
</html>
フローを記述する利点は、ロジックやアルゴリズムを発想する知見や経験値が足りなくとも、フローのステップが明確に分かれているので生成AIが処理を切り分けて推論してくれることであり、そしてプログラミング初心者自身がフローチャートを視覚で確認できるので「Aを処理したらBを処理する」と切り分けて考えやすいことです。
また、求めている結果ではなく誤った結果が生成されても、A - > B - > Cとフローを細分化していくことで生成AIの推論精度を高めていくことができるのも利点です。
より生成AIへ精度の高い推論をしてもらうために補足情報を付加するのも有用です。
digraph graphname {
A[
label = "Webページを表示する"
];
B[
label = "Webページを表示したらHello, worldとテキストを表示する",
comment = "Webページが完全に読み込まれるまで待機"
];
A -> B;
}
labelの記述内容もcommentの記述内容も生成AIが推論のための情報として利用するので誤った結果が生成されてもA - > B - > Cとフローを細分化しなくとも良い場合があります。
DOT言語を知るプログラミング有識者が「DOT言語の仕様を考えれば確かにそうだが、その発想はなかった」と言っていただけるであろうDOT言語コード例だとこういう記述方法もアリです。
digraph増田コード {
最初の処理[
label = "Webページを表示する"
];
次の処理[
label = "Webページを表示したらHello, worldとテキストを表示する",
comment = "Webページが完全に読み込まれるまで待機"
];
最初の処理 -> 次の処理;
}
ノードの名称へ自然言語を採用することにより、例えばゲームプログラミング時に「キャラクターがジャンプする」という読んだそのままな処理のためのノード、というか一般的に言うオブジェクトを作成することが可能で、後は->で繋げて処理をさせられます。
ちなみに別のノードを作成する際に「"キャラクターがジャンプする"から継承する」の様なことをcommentなどへ記述しておくと生成AIが推論して継承します。なんならcommentなどへ「キャラクター画像にimage.gifを使用」などと記述しておくとファイルの読み込みもします。
更にDOT言語にはカスタム要素という仕様が存在しており、DOT言語の仕様で定められた予約語以外も使用が可能です。
digraph増田コード {
最初の処理[
label = "Webページを表示する"
];
次の処理[
label = "Webページを表示したらHello, worldとテキストを表示する",
comment = "Webページが完全に読み込まれるまで待機",
font_style = "フォントを太字のボールド体、色を赤(#FF0000)とする"
];
最初の処理 -> 次の処理;
}
生成AIはカスタム要素の名称からも推論を発揮し、上記の場合であればフォントスタイルを指定していると推論をするので生成AIの推論精度を高める補足情報として機能します。
つまりこれはカスタム要素の名称として"Action"などの名称を採用すると"動作"として推論をし、"decision"ならば"条件分岐"ですし、"input"ならば"入力"ですし、"loop"ならば"繰り返し"ですし、"Type"ならば"種別"です。
より詳細に process[type="Action"] などのノードを作成してどんどん生成AIの推論精度を高めていくことが可能であり、そろそろ察してきているかと思いますが 処理[種別="動作"] と自然言語で記述しても機能します。
プログラミング有識者は更に「プログラム言語自体の予約語、例えばJavascriptを生成する事を前提にlengthを名称にすると配列を使おうとするのか？」と疑問に感じるでしょうがお察しの通りで生成AIは配列を使おうとするので、敢えて使いたいプログラム言語の機能や外部ライブラリなどがある場合は補足情報として機能する形で記述しておくと生成AIは推論へ利用します(まぁそこまで知識ある方なら該当のプログラム言語使ったほうが手っ取り早いと思いますが)。
以上をもって「生成AIを利用したプログラミング初級者向けの温故知新な提案」を終えたいと思います。
色々とツッコミどころには筆者自身が気付いていて。例えば「結局はDOT言語の仕様を覚えないといけないのでは？」とか「プログラミング初級者に任せると生成前のソースであるDOT言語コードがスパゲッティになりそうだよな」とか「面倒くせぇから普通にプログラミング覚えろや」とか理解してますし至極真っ当かつ反論の余地がないと思ってます。
今回の提案のプログラミング有識者向けの本質は「生成AIへ向いた中間言語の発掘」であり、「DOT言語ならそこそこ普及してるしプログラミング初級者でも扱えるんじゃね？」と業務中に発想したものを書き留め公開いたしました。
何かプログラミング有識者の皆さんからより良い発想があれば参考にしたいと考えていますのでよろしくお願いいたします。以上。
Permalink |記事への反応(36) | 19:36
制限が物凄く緩くて生成AIで使いやすい自由記述を混ぜ込みやすいのか これでプログラミングをマジで始めてみようかな
何気にスゴくないかこれ 完全に文章でAIへお願いしてコードを生成すると曖昧な部分を勝手に補完して想定通りの動作をしないってことが多々あるけど、DOT言語を使うことで記述フォー...
そもそもなんで曖昧なの？
責任を取りたくないから
自然言語の散文がどのようにも取れる事があるから 元増田はフローチャートのステップという点に目をつけて自然言語の散文という曖昧さを許容しつつも処理の流れの固定化を実現しよ...
割と自然言語でそれなりの作ってくれるけどなぁ お題ちょうだい、自然言語で依頼してくるよ
古典的なゲームのPONGはどうだろうか？ 元増田のDOT言語はフローで記述できるのでゲームプログラミングできる可能性は非常に高いが、自然言語の散文だとかなり厳しいと思われる
○○(AI名)は雑談でIntune設計してくれたり、考えをコードに落としてくれるので、自然言語の依頼でも古典的なPONGゲーム作ってくれそうって思ってるけど、無茶振りですか？ Claudeの回...
今どきのAIって凄いんだな、でも意味を取り違えてると思う これはユーザが設計を考えてゲームプログラミングしたんじゃなくてAIが持つ情報からゲームプログラミングしたになるんじ...
まぁUnityでやってくれと言っても無理だろうしな
AIは質問に対して予め学習で得た最善の結果を変釈するだけだろ？ ユーザがコード見て理解できるかはユーザ次第 但し、そういう時は 「私は初心者で⚪︎⚪︎は良くわからないからコー...
横からだけど何でAIで上手くプログラミングできる人とできない人が居るんだ？
俺も横だけどプログラミング元々できる人間は頭の中に大体の構造ができてるのでそれが出てきやすいプロンプトの書き方にしてるはず
でもまぁ正直、お前は何を言ってるんだ？ってツッコミになる なんで超初心者やジュニアエンジニアがAIに指示しようとしてんだってのが正直なとこやな anond:20250706053353
よく分からないけどあなたを天才認定します
生成AIに継承を指定できるってことは実質的にはオブジェクト指向型の記述として記述できるのか やろうと思えば関数型としても記述できそうだね かなり面白い試み
なでしこという日本語が使えるプログラミング言語を思い出した しかもなでしこ以上にわかりやすいな普通に凄い
すげー、日本語でプログラミングできてる
フォーマットの見た目がプログラミング言語っぽいってのも良い部分だな A→Bという書き方も処理の流れがテキスト状態であってもかなり読みやすい マジで実用的だと思う
最初の処理 → 次の処理;っていう書き方を許容してるのがマジで面白いｗ 名前は何でも良いんだな
日本語プログラミングの部分が物凄く読みやすいなこれ 何してるか理解できる
おおお！？マジか！！！ AIでプログラミングするの上手くいかなかったけどこんな方法があったのか！
LLM界ではこうやっている 1) 生成AIに普通に仕様を伝え、それをDOT言語で記述してもらう 2) DOT言語が意図している仕様になるまで繰り返す 3) DOT言語からコードを生成する ちなみに本来はDO...
こういうことだ https://anond.hatelabo.jp/20250706055534
俺の場合言葉の状態で整理されてる 整理さえされていれば特殊な言語の必要はない
つまりはそういうことだ。 しかし、問題は、少し複雑になった時（分岐や条件）の書き方だな 自然言語だけで表現した時の曖昧さが顔を出す
だから元増田はフローチャートを取り入れたってこと？
元増田がフローチャートを取り入れたのは、きっとそういうことなのだろう それが理論的に正しいかは認識していなかったとは思うが 感覚的に正しい方向に進んだということだな ちな...
フローチャートを可視化してくれるの非常にありがたい 流れが見えるの本当に良いと思う
その辺論理的に整理されて頭に入ってるかだな 俺の場合は頭の中に視覚的に入ってるしプログラマは何らかの方法で構築できてる場合が多いだろうけど 慣れてない場合まずそこから整理...
それでDOT言語のフォーマットに則って書くと作図されるというのが良いよね しかもそのフォーマットはプログラミング言語のフォーマットっぽいのが更に良い
DOT言語とAIを組み合わせた記事ググってもほとんど出てこないが？ いや例えばDOT言語をLLM界？で使うならこうしてるってことかな？
DOT言語のことが重要なのではなく構造化された文が重要で、DOT言語は使っていない 元増田がDOT言語で議論していたのでDOT言語と書いたまでだ 構造化された文を使うという意味では、DOT言...
なるほど これ見た目で本当に分かりやすいしコレで挑戦してみようかなぁ
生成AIに読み込ませるのが目的なら DOT言語をより正確に書く必要は全くない 適当にDOT言語っぽい記法を使って書くくらいの意識で十分だ
このDOT言語を使うやり方だと外部ライブラリもそうだけど既存の複数のソースを使いたいタイミングで入力できるのが強いと思うわ しかも処理フローのどこのタイミングで入力されてる...
構造化しつつ自然言語を取り込めるのが便利なのか フローチャートを可視化できるの良いね
フローチャート表示を壊さず情報も簡単に付け加えられるDOT言語を使って 人間も理解しやすい+AIにも通じる、で良いとこ取りするのか
HSPとか吉里吉里とか懐かしいなｗ 自分でロジックを書ける部分は自分で書いて、書けないロジックはAIに自然言語で命令して書かせることができ、フローを視覚で確認できるのか これ...
スゴイけど多分「あとでやってみよう」とブクマだけしてあとでやらないブクマカが湧くタイプの学習エントリだ！ｗ あとでやろう！ｗ
面白そうだから試してみたんだけど、c_lang[source = hogehoge];ってノードを作るとC言語を混ぜ込めるようだ 中間言語として便利過ぎる
すごいな プログラミングの習熟度合いに応じて混ぜ込めるロジックや書き方をフォーマットに最低限則っておけば自由度高く取り込めるのか プログラミングできるやつはコード自体を...
これWeb APIから取得したデータも整形できるのか便利だな
日本語でプログラミングできるんだ 昔そういうのあった気がするけど図になるのでこれはもっと分かりやすい気がする
うんがっぐっぐっ
これをベースにした初心者向けプログラミング解説本とか欲しいなぁ そういうのあれば本当に分かりやすい気がする
おもろい。生成AIをコンパイラとして利用するということか。
へえ～ DOT言語を使わずパワポやお絵かきソフトで行けるんじゃねえかとか、ワークフロー言語のそれぞれのコンポーネントに中身空でコメントだけ入れておいたら全部作ってくれるとか...
へぇメチャクチャすごいな わかりやすい
試したらA → B、B → Cと書いてもA → B → Cの形にしてくれるのか便利だな
せめて金曜の夜にこういうエントリは作れよ いろいろ試そうと思っても時間が足らないじゃないか
これほどのエントリにクソトラバしてしてる暇があったら、お前の命は次の金曜を待たず尽きる運命なのかよく考えてみろよ。 ケチつけてるの、お前ひとりだぞ。
AIプログラミングよくわかってなかったけどこうやるのか 確かにこれなら俺でもついていける
プログラミングにとって新しいとか斬新とかそういうんじゃなく、温故知新で車輪の再発明で特筆すべきことは何も無いって自分で言ってるあたりが真摯だな そして書いてあることはか...
フローさえしっかりしとけばこんな抽象的な表現でもイケるんかｗ 生成AIは最近色出来るようになってきて驚きが少なくなってきたが久々に衝撃的な内容だ かなり書きやすいじゃん
DOT言語の懐が深すぎて日本語で書いてもいけてしまうのか
いやそもそもAIに任せろよ
これは人間がレールを敷いて、その上をAIに任せて走ってる感じに近い レールが無かったら脱線するのが今のAIなのでレールを敷く方法としてDOT言語を採択する試みなんだけど、本当に...
何でこんなに伸びてんの？ お前らどうせ有用なTipsあってもプログラミングしないやろ
そもそもなんでプログラムしようとしてるのなんだわ 鉛筆で手書きしたいなら止めないけども
何故はてなは英語とプログラミング学習記事が伸びるのか？ｗ
これ試してみたらマジでPythonとかも出力できるのな AIでコンパイルする時代かぁ
これで今まで苦労していたテトリス作れた！ テトリス作ってみたかったんだよね上手く行ったぁ！！！！！
これって指示の出し方がゆるふわで支離滅裂の人には、この最低限の言語っぽいのを使うことで、順序を強制できるから多少ましな結果になるということかな。 せっかく自然言語を理解...
そりゃ非プログラマの多くにはフローという考え方さえないからな
レシピを読んで料理できればフローは理解できると思うんよね。
できるのとできてるのと違うから レシピ読んでまともに食事作れるようになるにもそれなりに経験いるし
収束する要件を言える奴はバイブコーディングに強い 逆に発言すればするほど発散するようなタイプのアホはAIにまともなコードを書いてもらえない
自然言語が得意なあんたであっても、徹夜明けだと支離滅裂になったりするだろ。途方もなく複雑な対象に向き合う前に分析のメスが欲しくなるだろ。そういう時にDOT言語は多分有効だ...
その場合、AIがエラーとして期待通り動かないコードを返してくるでしょ。 コンパイルエラーみたいなもんだよ。 なんか話がかみ合わないなあと思ったけど、 これってAIをアシスタン...
このDOT言語がスゴイところは指摘の通りに「指示の出し方がゆるふわで支離滅裂の人が順序を意識する様になる」ことと、それに加えて「書けば図示され視覚化される」ことと「日本語...
テキストで十分でしょ。 レシピとか買い物メモみたいなものだよ。 それらすらちゃんと書けない支離滅裂でゆるふわな人には向いているのかもね。
はじめからプログラミング初級者と銘打ってあるがな まぁ自分のプログラミング初級者時代を振り返れば複数のソースコードからなるプログラムをどうやって動かすのか？とか、ライブ...
便利やな
あんまり理解できてないのだが、要はcpuに直接命令するために機械語があるが、それだと人間が理解出来ないのでC言語とか人間用の言語を作ったように生成AIに命令出すようの言語作る...
おそらくそう プログラミング初級者向けって書いてあるけど今はMicrosoft 365にCopilot、GoogleWorkspaceへGeminiが組み込まれてるので、実際とところ表計算ソフトとかでも今回のTipsが動くような...
図になるのは本当に心強いと思う
9