今回の記事の目的
Javaの概念「完全修飾クラス名（FQCN）」を、Processingのキャンバス上に視覚化する。
ワタタクどうも上達の研究家のワタタクです。
前回の記事（【超カンタン】「完全修飾クラス名」ってなに？）では、Javaの「完全修飾クラス名（FQCN）」がなぜ必要なのかを、転校生の例え話を使って解説しました。
今回はLinked Logカテゴリーとして、その知識をさらに深掘りするために、「同じ名前のプログラムが、フルネーム（住所付き）によって衝突せずに美しく共存している世界」をProcessingのコードで表現してみました！
言葉による抽象的な概念を、どうやって具体的なグラフィックのコードに落とし込んだのか。その設計図とコードを共有します。
この記事を書いた人
上達の研究家 / アーティスト
「才能」ではなく「発見」で描く。文系・36歳からの上達ハック。
- ゼロから独学でクリエイティブコーディングに挑戦し、以下の実績を達成
- 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選（勝率50%）
- KITTE大阪の18メートルあるAxCROSS大型スクリーン
- 虎ノ門ヒルズステーションタワーB2F TOKYO NODE エントランスサイネージで展示
- UN:O（東京大手町）にある会員限定のサテライトオフィスにて2作品常設展示
- 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選（勝率50%）
- 開始1年9ヶ月目に、虎ノ門ヒルズ49階、地上250mのインフィニティプールへ作品提供・展示
- 実際の展示作品と動画、音楽やSEOでの実績はポートフォリオに載せております→https://my-portfolio-blue-three-63.vercel.app/works
目次
脳内をビジュアライズするための設計思想
プログラムを作る前に、完全修飾クラス名（FQCN）が解決する「名前の衝突（Naming Conflict）の回避」をどう画面に配置するか整理しました。
1. 2つの異なる部屋（パッケージ）から集まる構造
画面の左側に「com.google.search」という部屋、右側に「com.microsoft.audio」という部屋を用意。そこから中央のメインプログラムへ、同じ名前の「Particle」たちがフルネーム（住所付き）で呼び出されていく導線をデザインしました。
2. ブランドカラーによる直感的な描き分け
同じ「Particle（つぶつぶ）」でも、どっちの部屋のプログラムなのかがパッと見ただけで分かるように色を変えています。
- GoogleのParticle：青色（#3498DB）のつぶつぶ
- MicrosoftのParticle：緑色（#2ECC71）のつぶつぶ
3. メイン画面での「共存」の証明
画面中央の下部では、パソコン（Java）がパニックを起こさず、笑顔で両方のParticleを同時に動かしています。これこそが、完全修飾クラス名（FQCN）がもたらす安心安全な世界の証明です。
Processing実装コード（Javaモード）
実行結果。
// ==========================================
// 知識を視覚化する：Javaの「完全修飾クラス名（FQCN）」
// ==========================================
PFont jpFont;
void setup() {
size(1200, 600);
}
void draw() {
// 文字化け・画面更新対策
jpFont = createFont("Meiryo", 24, true);
textFont(jpFont);
background(245, 247, 250);
// タイトル共通設定
textSize(24);
textAlign(CENTER, TOP);
fill(50);
text("【完全修飾クラス名（FQCN）の世界】\n同じ名前のプログラムがフルネームで美しく共存", width / 2, 30);
// -------------------------------------------------------------
// 上部：2つの異なるパッケージ（お部屋）
// -------------------------------------------------------------
strokeWeight(2);
// Googleの部屋（左）
stroke(52, 152, 219);
noFill();
rect(150, 140, 350, 150, 10);
fill(52, 152, 219);
textSize(14);
textAlign(LEFT, TOP);
text(" パッケージ： com.google.search", 160, 150);
drawParticleGraphic(325, 220, "Particle", color(52, 152, 219));
// Microsoftの部屋（右）
stroke(46, 204, 113);
noFill();
rect(700, 140, 350, 150, 10);
fill(46, 204, 113);
text(" パッケージ： com.microsoft.audio", 710, 150);
drawParticleGraphic(875, 220, "Particle", color(46, 204, 113));
// -------------------------------------------------------------
// 中央：メインプログラムへの呼び出し（FQCNの矢印）
// -------------------------------------------------------------
stroke(180);
strokeWeight(3);
// 左からの呼び出し線
line(325, 290, 450, 380);
drawArrowHead(450, 380, PI/6);
// 右からの呼び出し線
line(875, 290, 750, 380);
drawArrowHead(750, 380, PI * 5/6);
// 呼び出し時のフルネーム（FQCN）テキスト
fill(80);
textSize(12);
textAlign(CENTER, CENTER);
text("com.google.search.Particle", 340, 325);
text("com.microsoft.audio.Particle", 860, 325);
// -------------------------------------------------------------
// 下部：Javaが同時に2つを動かしているメインステージ
// -------------------------------------------------------------
stroke(100);
strokeWeight(2);
fill(255);
rect(400, 380, 400, 160, 10);
// パソコン（Javaシステム）の簡易グラフィック
fill(240);
stroke(80);
rect(560, 410, 80, 60, 5); // モニター
rect(585, 470, 30, 20); // スタンド
rect(550, 490, 100, 10, 3); // キーボードベース
// パソコンの笑顔（共存できて安心している状態）
fill(80);
ellipse(590, 435, 4, 4);
ellipse(610, 435, 4, 4);
noFill();
stroke(80);
arc(600, 445, 12, 10, 0, PI);
// メインステージの中で共存する2つのParticle
drawParticleGraphic(470, 460, "com.google.search.Particle", color(52, 152, 219));
drawParticleGraphic(730, 460, "com.microsoft.audio.Particle", color(46, 204, 113));
fill(46, 204, 113);
textSize(14);
textAlign(CENTER, TOP);
text("✨ パニックを起こさずに、同時に動かせる！", width / 2, 555);
// 操作案内表示
fill(150);
textSize(11);
textAlign(CENTER, BOTTOM);
}
// 粒子（Particle）を描画するカスタム関数
void drawParticleGraphic(float x, float y, String displayName, color c) {
pushMatrix();
translate(x, y);
// コアとなる輝き
noStroke();
for(int i = 5; i > 0; i--) {
fill(red(c), green(c), blue(c), 40);
ellipse(0, -15, i * 12, i * 12);
}
fill(255);
ellipse(0, -15, 15, 15);
// プログラム名ラベル
float labelWidth = textWidth(displayName) + 20;
fill(255, 245);
stroke(150);
strokeWeight(1);
rect(-labelWidth / 2, 15, labelWidth, 22, 5);
fill(50);
textSize(11);
textAlign(CENTER, CENTER);
text(displayName, 0, 24);
popMatrix();
}
// 矢印の先端を描画する補助関数
void drawArrowHead(float x, float y, float angle) {
pushMatrix();
translate(x, y);
rotate(angle);
fill(180);
noStroke();
triangle(0, 0, -15, -6, -15, 6);
popMatrix();
}Processingのコードで見て気づいたこと
単に「かぶったらフルネームで書く」と言葉で覚えるだけでなく、実際にProcessingで「2つの異なる住所（パッケージ）から中央のJavaシステムへ同時にロードする構造」を組み立てることで、FQCNがどれほど大規模開発の平和を維持しているのかが実感できました。
ワタタクそれでは今日もレッツワクワクコーディング。
追記：コードでアートにする
// ==========================================
// 【WSN : L-004】完全修飾クラス名をアート表現にするコード
// ==========================================
void setup() {
size(600, 600);
rectMode(CENTER);
noFill();
}
void draw() {
background(15, 23, 42); // 宇宙の深部のようなダークネイビー
float time = millis() * 0.001;
translate(width / 2, height / 2); // 画面の中心を基準にする
// マトリョーシカ構造を10重の「光の部屋」の波として表現
for (int i = 10; i > 0; i--) {
float size = i * 50 + sin(time + i * 0.5) * 20;
// 外側から内側へいくほど、細かく、シャープになっていく
if (i == 10) {
stroke(99, 102, 241, 100); // 一番外側の大きな部屋「net」（インディゴ）
strokeWeight(1);
} else if (i == 7) {
stroke(168, 85, 247, 150); // 中間のフォルダ「takuya」（パープル）
strokeWeight(2);
} else if (i == 4) {
stroke(236, 72, 153, 200); // さらに中身のフォルダ「art」（ピンク）
strokeWeight(3);
} else if (i == 1) {
stroke(255, 255, 255); // 一番中心にあるコア「Particle」（純白の輝き）
strokeWeight(5);
} else {
stroke(100, 116, 139, 50); // それらを繋ぐ中間のドット（.）の層
strokeWeight(1);
}
// 回転させて、中心に向かって吸い込まれるような立体感を出す
rotate(sin(time * 0.1) * 0.05);
rect(0, 0, size, size, 15);
}
}関連記事
あわせて読みたい
【超カンタン】「完全修飾クラス名」ってなに？
今回の記事の目的 Javaの重要ワード「完全修飾クラス名」を理解する なぜ完全修飾クラス名が必要になったのか、その理由を理解する 英語の「FQCN」がなぜ海外の現場で必…
