プログラミング基礎演習へようこそ！

神戸大学国際人間科学部のように必ずしも情報分野を専門としているわけではなく、プログラミングの授業が必修でもないみなさんが、 今この時代にプログラミングを学ぶ意義と、このテキストで学ぶ内容や学び方などについて説明します。

なぜ今プログラミングを学ぶのか ― 2025年10月現在版

2025年1月の大学入学共通テストからは「情報」が出題されるようになりましたので、高校までで基本的なプログラミングを学んだ世代が大学に入学してきています。 高校まででプログラミングに目覚めた（？）人はきっともっと違う学部に進学している場合が多いでしょうから、 ここに集まっているみなさんは一度はプログラミングにピンとこなかった人が多そうです。 また最近では AI がプログラムをかなり書いてくれるようになってきたこともあって、 何も今からプログラミングを学ぶ必要はないのでは？と思う人もいるかもしれません。

今こそ、みなさんだからこそプログラミングを活用できるから

AIがプログラムをかなり書いてくれるようになった今だからこそ、みなさんが学びたい分野、取り組みたい研究テーマにプログラミングを活用できるチャンスが広がっています。 AIにプログラムを書かせるにしても、どんなプログラムを書かせたいのかを考えたり、AIが書いたプログラムを理解して修正したりするためには、プログラミングの基礎的な知識が必要です。

これからはプログラミングができることに加えて、やりたいことや異なる専門性があることが重要になります。 情報分野を専門としているわけではないみなさんだからこそ新しい価値を生み出せる可能性があります。

指示を正確に言語化する訓練になるから

コンピュータに指示をすることに特化した概念が「プログラミング」であり、そのための言語が「プログラミング言語」です。 それらを学ぶことは、コンピュータに指示を出すための考え方を学ぶことです。コンピュータに限らず、他人に何かを指示したり、物事を整理したりする際にも役立つ考え方です。 AIの発展によって、細かい文法まで完全に覚える必要は今後なくなっていきますが、日本語などでコンピュータあるいは人に指示する場合にもより的確に指示できるようになるため、プログラミングを学ぶことは有益だと思います。

やっぱり楽しいから

思い描いたものを自分で作ることができるのは楽しいものです。思い描くアプリをストアから探している間に作った方が早いし気持ちもいい。これからはそんなAI時代になります。 単純な指示を組み立てて複雑な動作を実現する思考過程にはパズルのような楽しさもあります。 20年以上プログラミングをしてきた私もすっかりAIを使いながらプログラミングするようになりましたが、今のところは前にも増して楽しくプログラミングしています。

高校までにみなさんにプログラミングを教えてきた人たちはプログラミングを楽しんでいたでしょうか？ プログラミングを最高に楽しんでいる私と一緒なら今度こそ「プログラミング楽しい！」と思えるかも？と思ってついてきてください。

プログラミング基礎演習およびこのテキストについて

この授業では、プログラミング言語 JavaScript とそのライブラリ p5.js を使って、プログラミングの基礎を学びます。

なぜ JavaScript? なぜ p5.js?

JavaScript はウェブブラウザ上で動作するプログラミング言語で、ウェブサイトやウェブアプリケーションの開発に広く用いられています。 パソコンにもともと備わっているものだけで動作するので手軽に始められ、学習リソースも豊富です。

p5.js は JavaScript を用いて創造的なコンテンツを作成するための便利なツールで、たとえば以下のようなものを作るのに適しています。

たとえば、国文ITコースのSNSアカウントのアイコンは p5.js で描かれています（西田作）。

let cs;


function setup() {
  createCanvas(200, 200);
  const c = color(32, 32, 48, 64);
  cs = [color(118, 209, 141, 128), color(255, 162, 208, 128),
        color(48, 179, 221, 128), color(255, 164, 42, 128)];


  background(16, 16, 32);
  ellipse(100, 100, 200);


  fillHexagon(26);
  for (let i = 0; i < 12; i++) {
    const cx = 100 + (noise(i) - 0.5) * 20, cy = 100 + (noise(i) - 0.5) * 20;
    cultureWheel(65, 10, 10, random(TWO_PI), random(100) > 30, c, cx, cy);
  }
}


function cultureWheel(r0, step, dr, aoffset, direction, c, cx, cy) {
  push();
  translate(cx, cy);
  noStroke();


  let rs = [];
  for (let i = 0; i < step; i++) rs.push(r0 * random(0.9, 1.05));


  const da = TWO_PI / step;
  for (let i = 0; i < step; i++) {
    const r = rs[(i + 1) % step], r1 = r - dr, r2 = r + dr;
    const pr = rs[i], pr1 = pr - dr, pr2 = pr + dr;
    const theta = da * i + aoffset;
    const theta2 = direction ? theta - da * 0.5 : theta + da * 0.5;
    const theta3 = direction ? theta - da * 1.5 : theta + da * 1.5;
    const theta4 = direction ? theta - da : theta + da;
    fill(i % 2 == 0 ? c : color(255, 64));


    beginShape();
    vertex(r * cos(theta), r * sin(theta));
    vertex(r1 * cos(theta2), r1 * sin(theta2));
    vertex(pr1 * cos(theta3), pr1 * sin(theta3));
    vertex(pr * cos(theta4), pr * sin(theta4));
    vertex(pr2 * cos(theta3), pr2 * sin(theta3));
    vertex(r2 * cos(theta2), r2 * sin(theta2));
    endShape();
  }
  pop();
}


function fillTile(size, n) {
  push();
  noFill();
  noStroke();
  strokeWeight(2);
  const m = (width - size * n) / (n + 1);
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      const x = (size + m) * i + m;
      const y = (size + m) * j + m;
      if (squareDist(200, 200, x, y, size) < 180) {
        const randomColor = cs[floor(random(cs.length))];
        fill(randomColor);
        if (random(100) < 10) {} else {
          rect(x, y, size, size);
        }
      }
    }
  }
  pop();
}


function squareDist(x, y, sx, sy, size) {
  return dist(x, y, sx + size / 2, sy + size / 2);
}


function fillHexagon(r) {
  const d = r * sqrt(3);
  for (let x = 0; x < width; x += d) {
    for (let y = 0, count = 0; y < height; y += r * 1.5, count++) {
      const hx = count % 2 == 0 ? x : x + d / 2;
      hexagonIT(hx, y, r);
    }
  }
}


function hexagonIT(cx, cy, r) {
  push();
  noFill();
  for (let i = 0; i < 6; i++) {
    const theta = TWO_PI * i / 6 + HALF_PI;
    const theta2 = TWO_PI * (i + 1) / 6 + HALF_PI
    const x = cx + r * cos(theta);
    const y = cy + r * sin(theta);
    const x2 = cx + r * cos(theta2);
    const y2 = cy + r * sin(theta2);
    stroke(cs[floor(random(cs.length))]);
    strokeWeight(random(2, 20));
    line(x, y, x2, y2);
  }
  fill(cs[floor(random(cs.length))]);
  noStroke();
  pop();
}
実行結果

西田ゼミOBのみなさんにも愛好家がいて、いまだに p5.js で作品を作り続けている人もいます。

国際文化学研究科のウェブサイト のトップページ背景のアニメーションは藤井さんと西田の合作です。

初学者にとって自分が書いたプログラムによってコンピュータの中でどのようなことが起きているのか把握することはなかなか難しいものですが、 p5.js で作るものは視覚的に動作を確認することができるので、プログラミングの基礎概念を学ぶのに適していますし、学んだことをすぐに形にして楽しむことができます。

AI は p5.js がちょっと苦手

p5.js を扱うもう一つの理由は、人間にはそこまで難しくないけどAIにはちょっと難しいような課題が比較的作りやすいことです。 プログラミングの演習問題を出しても、問題文をコピペして答えがすぐ出てきてしまうようではモチベーションが上がりづらいでしょう。 たとえば、国文ITのアイコンや国文HPの背景アニメーションを見て、どんな指示をAIに与えれば同じようなものが作れるか考えてみてください。 いずれも国際文化とITの融合をコンセプトとしたデザインですが、そのような抽象的な指示では難しいでしょう。

いやいや、それはお題が難しすぎるだけでは？と思う人もいるかもしれません。 それでは以下のお題ではどうでしょうか？これぐらいならできそうですか？

function setup() {
  createCanvas(128,128);
}


function draw() {
  background(0);
  strokeWeight(4);
  fill(178, 100, 162);
  triangle(12,120,116,120,116,10);
  fill(94, 185, 84);
  triangle(0,108,106,108,106,0);
  fill(255);
  textSize(32);
  textFont("serif");
  text("46", 68, 100);
}
実行結果

使う AI によってはうまくいくかもしれませんが、うまくいかないことも多いと思います。

ちなみに以下のように指示するとうまくいきます。それってほとんどプログラミングじゃないか？という話です。

p5.js を使って 128×128 のキャンバスを作成し、背景を黒にしてください。

太さ4の線を使い、次の3つの要素を描いてください。

薄紫の三角形（RGB: 178,100,162）を、頂点が (12,120), (116,120), (116,10) になるように描く。

緑の三角形（RGB: 94,185,84）を、頂点が (0,108), (106,108), (106,0) になるように描く。

**白い文字「46」**を、フォントを serif、文字サイズ 32 で (68,100) の位置に描く。

身も蓋もないことを言うと、この例の場合にはお絵かきソフトを使って自分で描いてしまう方が早いですし、 この授業でも最初の方の演習問題は同じような気持ちになるものもあります。 正確に指示することの練習だと思って取り組んでいただきつつ、プログラミングならではの面白さを感じられるところまでついてきてください。

プログラミングの基本的な概念を理解していれば、２つ目以降のプログラミング言語を学ぶのは比較的容易です。 AIに指示したプログラムを読んで確認する程度であれば、最初に学んだ言語の知識でかなりを理解できるでしょう。

最終課題＝オリジナル作品制作

プログラミング基礎演習では学びの集大成としてオリジナルの作品を制作していただきます。 その頃には、アート作品、ゲーム、インタラクティブな教育コンテンツなど、p5.js で作れるものの幅広さがわかっているものと思います。 どんなものが作れたら面白いか、どんなものを作ってみたいか、考えておいてください。

ちなみに国文ITのSNSアイコン部門を毎年開催していて、優秀作品は実際に国文ITのSNSアイコンとして期間限定で採用しています。 ものすごくいい作品ができたら期間限定ではなく正式採用にするかもしれません。国文HP部門の開催も検討中です。 どんなアイコン、どんな背景だったら国際文化らしいか、考えてみてください。

ProgTouch で予習して、授業内で実践する

プログラミングを学ぶ意義が大きくは変わらないとしても、プログラミングを学んで使っていく人や環境は変わっていき、学ぶべき内容や学習方法はそれに呼応して変わっていきます。

プログラミングはできるだけ手と頭を動かすことが大事ですが、授業外では質問がしづらかったりするので、授業内で実践的にプログラミングを行う時間を多く取りたいと考えています。 そのために、授業前の予習テキストを充実させています。

その工夫の一つとして、このテキストではプログラムを書く思考過程を辿ることができる仕組みを組み込んでいます。 プログラムが完成していくまでの過程を「次へ」ボタンを押すだけで一歩ずつ前に進めることができるようになっています。 下の例で実際に試してみてください。一回最後までたどって後は右上のボタンで「挑戦モード」に切り替えてもう一度最初から辿ってみてください。

ステップ 1 / 6
いつものテンプレから始めよう
function setup() {
  createCanvas(200, 200);
}
function draw() {
  background(220);
}
実行結果

この仕組みは西田ゼミOB岡大貴さんの研究成果 Prog Touch をテキストに組み込めるように発展させたものです。

各回の授業で取り組むことになる演習問題の最初の一問は確認問題としていて ProgTouch で完成までの工程を辿った後に自分で最初から書き直してみることを課すことにしています。 「テキストは読んだのだけど、いざ自分で書けと言われると何から手を付けていいかわからない」という人は多いです。 ProgTouch で辿って理解できる、ProgTouch で辿った後に自分で書いてみる、というように小さめの段階を踏むことで、実際に自分で書けるようになるといいなあ、と思っています。

Next: はじめての JavaScript と p5.js →