MENU
言葉×コード×手書き。三位一体の表現が成長する過程の記録
  1. ホーム
  2. DOCUMENTARY
  3. Linked Log
  4. Javaの難解ワード「名前空間」をProcessingで図解コードにするとどうなる？【WSN : L-003】

Javaの難解ワード「名前空間」をProcessingで図解コードにするとどうなる？【WSN : L-003】

広告
Linked Log
WSN : Linked クリエイティブコーディング ソースコード公開
Javaの名前空間をProcessingで視覚化した実行結果画面（左側に名前の衝突でエラーが起きる大混乱の世界、右側にクラスごとに部屋が分かれて整理された世界を対比したグラフィック）
  • URLをコピーしました！
ワタタク

どうも、上達の研究家のワタタクです。

先日公開した記事では、Javaの「名前空間（ネームスペース）」を学校のクラスに例えて、未経験の方に向けてめちゃくちゃ分かりやすく解説しました。

あわせて読みたい
【超カンタン】未経験でも分かるプログラミングの「名前空間（なまえくうかん）」ってなに？【学校のク… 今回の記事の目的 Javaの名前空間を理解する なぜパソコンには名前空間が必要なのか理解する どうも上達の研究家のワタタクです。 Javaを学んでいて、名前空間という言…

今回はその知識をさらに1歩深掘り！

言葉だけじゃなく、視覚的に「名前空間がある世界とない世界の大混乱」を体感できるよう、Processingのコードでそっくりそのまま表現してみました！

抽象的なプログラミングの概念を、どうやって具体的なグラフィックのコードに落とし込んだのか。その設計図とコピペで動くコードを共有します。

目次

脳内をビジュアライズするための設計思想

プログラムを作る前に、まずは「名前空間の性質」をどう画面に配置するかを整理しました。

1. 左右の「対比」で直感的に伝える

画面を中央で真っ二つに割り、左側に「エラーが起きる世界」、右側に「平和な世界」を配置。人間がパッと見たときに一番納得しやすいシンメトリーな構造にしました。

2. 「色」による心理的アプローチ

  • 名前空間がない世界： 枠線を赤色（#E74C3C）にし、エラーとパニック感を強調。
  • 名前空間がある世界： 枠線を緑色（#2ECC71）にし、整理整頓された安心感を表現。

3. 関数（引数）を使って「状態」を描き分ける

一人の「たくやくん」を描くコードを何度も書くのはスマートじゃありません。
そこで、drawStudent() というカスタム関数を作り、「名前」と「今返事（はーい！）をしているかどうかのフラグ」を引数で渡せるように設計しました。これによって、同じコードで「慌てて返事をするたくや」と「静かにしているたくや」を描き分けています。

Processing実装コード（Javaモード）

実行結果。

Javaの名前空間をProcessingで視覚化した実行結果画面（左側に名前の衝突でエラーが起きる大混乱の世界、右側にクラスごとに部屋が分かれて整理された世界を対比したグラフィック）
// ==========================================
// 記事の「名前空間」の例えを視覚化するコード
// ==========================================

PFont jpFont; // 日本語フォント用の変数

void setup() {
  size(1200, 600);
  noLoop(); // 1回だけ描画
  
  // 文字化け対策（環境に合わせてフォントを読み込み）
  jpFont = createFont("Meiryo", 24, true);
  textFont(jpFont); 
}

void draw() {
  background(245, 247, 250);
  
  // 画面を左右に分割する境界線
  stroke(200);
  strokeWeight(2);
  line(width / 2, 0, width / 2, height);
  
  // タイトルフォントの設定
  textSize(24);
  textAlign(CENTER, TOP);
  fill(50);
  
  // -------------------------------------------------------------
  // 左側：名前空間がない世界（1つの大きな部屋で大混乱）
  // -------------------------------------------------------------
  text("【名前空間がない世界】\n全員が同じ部屋にいる状態", width / 4, 30);
  
  // 1つの大きな教室の枠
  noFill();
  stroke(231, 76, 60); 
  strokeWeight(3);
  rect(50, 100, 500, 380, 10);
  
  // 先生
  fill(50);
  textSize(16);
  text("先生「たくやくん！」", 300, 130);
  
  // たくやくんたちが全員返事をしてしまう
  drawStudent(150, 250, "1年生のたくや", true);
  drawStudent(300, 350, "3年生のたくや", true);
  drawStudent(450, 250, "6年生のたくや", true);
  
  // エラーメッセージ
  fill(231, 76, 60);
  textSize(18);
  text("❌ どっちのたくやか分からない！\n（名前の衝突・エラー発生）", width / 4, 520);
  
  // -------------------------------------------------------------
  // 右側：名前空間がある世界（住所で部屋が分かれて安心）
  // -------------------------------------------------------------
  fill(50);
  textSize(24);
  text("【名前空間がある世界】\nクラス（住所）ごとに分かれた状態", width * 3 / 4, 30);
  
  // 3つの分かれた教室
  stroke(46, 204, 113); 
  strokeWeight(3);
  
  // 1年1組の部屋
  rect(650, 100, 220, 170, 10);
  fill(46, 204, 113);
  textSize(14);
  text("「1年1組」の部屋", 760, 110);
  
  // 3年2組の部屋
  noFill();
  rect(930, 100, 220, 170, 10);
  fill(46, 204, 113);
  text("「3年2組」の部屋", 1040, 110);
  
  // 6年1組の部屋
  noFill();
  rect(650, 310, 220, 170, 10);
  fill(46, 204, 113);
  text("「6年1組」の部屋", 760, 320);
  
  // 先生の呼びかけ
  fill(50);
  textSize(16);
  text("先生「1年1組の、たくやくん！」", width * 3 / 4, 520);
  
  // 生徒たちの配置
  drawStudent(760, 200, "たくや", true);   
  drawStudent(1040, 200, "たくや", false); 
  drawStudent(760, 410, "たくや", false);  
}

// 生徒（たくやくん）を描画するカスタム関数
void drawStudent(float x, float y, String name, boolean isAnswering) {
  pushMatrix();
  translate(x, y);
  
  // 頭
  fill(255);
  stroke(50);
  strokeWeight(2);
  ellipse(0, 0, 40, 40);
  
  // 顔の表情
  fill(50);
  if (isAnswering) {
    ellipse(-8, -2, 4, 4);
    ellipse(8, -2, 4, 4);
    noFill();
    arc(0, 5, 10, 10, 0, PI);
    
    // 吹き出し（はーい！）
    fill(255);
    stroke(50);
    rect(25, -40, 70, 25, 5);
    fill(50);
    textSize(12);
    textAlign(CENTER, CENTER);
    text("はーい！", 60, -30);
  } else {
    line(-10, -2, -6, -2);
    line(6, -2, 10, -2);
    line(-4, 5, 4, 5);
  }
  
  // 体
  noFill();
  stroke(50);
  line(0, 20, 0, 50);
  line(0, 30, -15, 40); 
  line(0, 30, 15, 40);
  

  float labelWidth = 100; // 横幅を90から100に拡大
  float labelHeight = 20;
  
  fill(240);
  rect(-labelWidth / 2, 55, labelWidth, labelHeight, 3);
  
  fill(50);
  textFont(jpFont); 
  textSize(9); // 文字サイズを11から9に縮小して、枠内に収める
  textAlign(CENTER, CENTER);
  
  // 文字が中央にきれいに収まるよう、少しだけY座標を調整（55 + 20/2 = 65）
  text(name, 0, 63); 
  
  popMatrix();
}

コード表現に落とし込んでみて気づいたこと

単に「名前空間はグループ分けだよ」と言葉で理解するだけでなく、実際に2次元の座標に落とし込んで部屋の枠を描くことで、「メモリの中に明確な壁を作る」という実感が湧きました。

関数に落とし込む作業自体が、まさにオブジェクト指向の頭の体操になりますね。

もし「名前空間って結局どんな仕組みだっけ？」と基本に立ち返りたくなったら、僕が学校のクラスを例に全力で優しく解説した前回の記事をチェックしてみてください。

あわせて読みたい
【超カンタン】未経験でも分かるプログラミングの「名前空間（なまえくうかん）」ってなに？【学校のク… 今回の記事の目的 Javaの名前空間を理解する なぜパソコンには名前空間が必要なのか理解する どうも上達の研究家のワタタクです。 Javaを学んでいて、名前空間という言…

今回のProcessingコードが、なぜこの部屋割り（レイアウト）になっているのか、その理由がさらにスッキリ繋がって面白くなるはずです！

ワタタク

それでは今日もレッツワクワクコーディング。

ワタタク（Watataku）
上達の研究家 / アーティスト
独学1年9ヶ月で虎ノ門ヒルズ49階、地上250mのインフィニティプールへ作品提供・展示

言葉×コード×手書き。三位一体の表現が成長する過程の記録

【発信】クリエイティブコーディング(2024.3~) / 絵(2025.11~) / モレスキン / 思考法 / 生き方

▼運営者について
プロフィールを見る
Linked Log
WSN : Linked クリエイティブコーディング ソースコード公開
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次