はじめに
この本について
『Rubyで描く、動かす、遊ぶ — rbCanvas/p5ではじめるクリエイティブコーディング』は、プログラミングを初めて試す人が、コードで絵、動き、音、遊べる作品を作るための本です。ブラウザで動くrbCanvas/p5を使うため、最初に難しい開発環境を用意する必要はありません。
最初は、丸を一つ描く短いコードから始めます。数字を一つ変えると丸が大きくなり、もう一つ変えると画面の外へ飛び出します。そこから色、模様、アニメーション、マウスやキーボードへの反応、文字、画像、音、3D、ゲームへ少しずつ広げます。最後には、気に入った仕組みを選び、自分の作品として保存します。
この本が目指すのは、Rubyの文法をたくさん覚えることではありません。プログラミングで遊び、好きになり、次も試したくなることです。講師や学習仲間がいなくても進められるよう、初めて出る言葉や命令は、使う場所で一つずつ説明します。
クリエイティブコーディングとは
クリエイティブコーディングは、プログラムを使って絵や動き、音、遊べる仕組みなどを作る活動です。
たとえば、画面に丸を一つ描きます。その丸を動かすと、生き物のように見えるかもしれません。たくさん並べると模様になり、半透明にして重ねると、思いがけない色が生まれます。マウスの動きへ反応させれば、見るだけだった絵が、触って変えられる作品になります。
ここで使うコードは、コンピューターへの命令であると同時に、絵筆や楽器のような制作道具でもあります。
普通の絵では、紙に引いた線がそのまま残ります。コードで描いた線には、「少しずつ右へ動く」「毎回違う色になる」「クリックされたら増える」といった振る舞いを加えられます。形だけでなく、時間の流れや人の操作も作品の一部にできることが、クリエイティブコーディングの面白さです。
クリエイティブコーディングには、一つの正解や決まった完成形がありません。同じコードから始めても、変える数字や色、残した偶然によって、違う作品になります。きれいな画面だけが成功でもありません。形がはみ出したり、動きが速すぎたりして生まれた不思議な画面も、次のアイデアになります。
この本では、次の小さな繰り返しを大切にします。
- まず動かす
- 一つだけ変える
- 何が起きたか見る
- 面白ければ、もう一度変える
仕組みを全部理解してから作り始める必要はありません。作りながら疑問を見つけ、必要になったところで仕組みを知れば大丈夫です。
今すぐ描いてみたい人へ
歴史や仕組みはあとから戻って読めます。エディタを開く準備へ進み、第1章の最初のコードを動かしてください。最初の円が出るところまで、およそ5分です。
PR｜フィヨルドブートキャンプからのお知らせ
この本でプログラミングに興味を持ち、「もっと本格的に学びたい」「将来はエンジニアとして働きたい」と思った人には、オンラインプログラミングスクールのフィヨルドブートキャンプという選択肢があります。プログラミング未経験から始められ、現役ソフトウェアエンジニアのレビューを受けながら、Web開発、チーム開発、自分で考えたWebサービスの公開まで進みます。この本はフィヨルドブートキャンプの教材ではありませんが、プログラミングをもっと深く続けたくなったときの学びの場として紹介します。
この本で使う rbCanvas/p5
ここからの歴史と仕組みは、少し詳しく知りたいときの読み物です。最初の作品を作ったあとに戻ってもかまいません。
rbCanvas/p5 は、ブラウザで Ruby を実行し、絵やアニメーションを作れる環境です。インストールせずに始められます。画面へ描画する部分には、クリエイティブコーディングのための JavaScript ライブラリである p5.js の機能が使われています。
rbCanvas/p5 には、内部の仕組みが異なる版があります。本書では、安定して動作し、公式の操作説明とAPIリファレンスがそろっている0.5.1のOpal版を使います。2025年4月には0.7.2のruby.wasm版も暫定公開されましたが、本書のコードと画面は0.5.1を基準にします。
Rubyは、人が読み書きするために作られた
Ruby は、まつもとゆきひろさんが作り、1995年に公開したプログラミング言語です。まつもとさんは、いくつもの好きな言語の特徴を組み合わせ、人にとって自然に読み書きできる言語を目指しました。
コンピューターが理解しやすいことだけでなく、コードを書く人が楽しめることも大切にしている点は、この本で Ruby を使う理由の一つです。
p5.jsは、コードを表現の道具にする流れから生まれた
p5.js は、アーティストでプログラマーの Lauren Lee McCarthy（ローレン・リー・マッカーシー）さんが2013年に作り始め、Evelyn Eastmond（エブリン・イーストモンド）さんが立ち上げに加わりました。無料で利用、改良、再配布できるオープンソースの道具で、現在は世界中の人が開発へ参加しています。
その前には、Casey Reas（ケイシー・リース）さんと Ben Fry（ベン・フライ）さんが2001年に始めた Processing があります。Processing は、アーティストやデザイナーもコードを視覚表現に使いやすくする環境です。p5.js はその考え方を受け継ぎ、ウェブブラウザで作品を作れるようにした JavaScript のライブラリとして始まりました。
作者が一人ですべてを完成させ、そのまま残っているわけではありません。使う人が問題を報告し、説明を書き、機能を直すことで育ってきた道具です。プログラムには、作った人の考えと、それを育てたコミュニティの歴史があります。
rbCanvas/p5は、Rubyとp5.jsの間に橋を架けた
p5.js のサンプルは、本来 JavaScript で書きます。rbCanvas/p5 は、その多くの機能を Ruby の書き方で使えるようにしたプログラミングツールです。rbCanvasプロジェクトの作者は、まず自分でも使いたいと思えること、サンプルをすぐ編集して試せること、プログラミングの面白さを伝えることを考えながら開発しています。
公式サイトと開発記事は、どちらも「rbCanvas」という名前で公開されています。開発記事では作者自身が一人称で制作の考えを説明していますが、本書の調査では個人名を確認できる公式資料を見つけられませんでした。そのため、確かめられない名前を推測せず、本書では作者を「rbCanvasプロジェクトの作者」と表します。道具の作者を調べるときも、検索結果だけで決めず、公式サイトや本人の発表まで確かめることが大切です。
本書で使うrbCanvas/p5 0.5.1は、RubyのコードをJavaScriptへ変換するOpal（オパール）という技術を使います。変換後のJavaScriptがp5.jsを呼び、ブラウザへ絵を描きます。一方、2025年4月に暫定公開された0.7.2は、ruby.wasmを使います。ruby.wasmは、Ruby本体の代表的な実装であるCRubyを、WebAssemblyというブラウザでも実行できる形式にしたプロジェクトです。
Opal版が古いから使えない、ということではありません。作者は、0.5.1には動作の軽さなどの利用価値があると説明し、Opal版とruby.wasm版を用途によって使い分けられる形で併存させる可能性に触れています。本書では、初めて試すときの安定性を優先して0.5.1を選びます。道具は、目的と技術の間で試行錯誤しながら変化します。
この本では、次の 3 つが重なって動いています。
あなたが書く Ruby
↓
Opal が JavaScript へ変換
↓
rbCanvas/p5 の橋渡し
↓
p5.js とブラウザのキャンバス
普通の Ruby と同じ構文を多く使えますが、まったく同じ実行環境ではありません。違いが問題になる場所では、その都度説明します。
流れを短く並べると、Rubyの公開（1995年）、Processingの開始（2001年）、p5.jsの開始（2013年）を経て、Rubyでp5.jsを扱うrbCanvas/p5が作られました。rbCanvas/p5では、0.5.1のOpal版に加え、2025年に0.7.2のruby.wasm版が暫定公開されました。新しい版がいつも唯一の正解なのではなく、軽さや安定性など、作りたいものに合う道具を選びます。
作品を見て、問いを持つ
クリエイティブコーディングの歴史は、道具の年表だけでなく、作品を見ると身近になります。
Casey Reasさんの「Process」シリーズでは、形が動くための短い規則を決めると、実行するたびに異なる画面が生まれます。作品を見たら、「どんな形があるか」「どんな規則で動きそうか」「一つだけ自分のコードへ持ち帰るなら何か」を考えてみましょう。
Lauren Lee McCarthyさんの「SOMEONE」では、人がスマートホームの音声アシスタント役になり、離れた家の中を見守って話しかけます。便利さだけでなく、見られること、信頼すること、機械の代わりを人が務めることも作品の題材です。「この仕組みを使う人はどんな気持ちか」「自分なら何を問いかけたいか」を考えると、コードは見た目を作るだけでなく、考えを伝える材料にもなります。
最初から難しい作品をまねる必要はありません。気になった色、反復、動き、問いのどれか一つを、自分の小さな実験へ移せば十分です。
プログラミングが初めてでも大丈夫
この本は、年齢を問わず、コードを一度も書いたことがない人を対象にしています。def、end、丸括弧、カンマといった記号も、最初に出てきた場所で説明します。知らない言葉が出てきても、前もって勉強する必要はありません。
これまでに学んでいない数学が出てくることもあります。公式を覚えたり、計算問題を解いたりする必要はありません。まずコードをそのまま動かし、数字を一つ変え、画面で何が起きるかを見ます。仕組みを詳しく知りたくなったら、説明を読めば先へ進めます。
コードは、最初から自分ですべて入力しなくてもかまいません。まず掲載コードをコピーして実行し、画面が変わることを確認します。そのあと、指定された 1 か所だけを変えます。「どの行を変えたため、画面のどこが変わったか」を見ることが、最初の学習です。
エラーが表示されても、壊してしまったわけではありません。直前に変更した 1 か所を元へ戻せば、動いていた状態へ帰れます。戻し方が分からないときは、付録Aのエディタで困ったときを使えます。
3 通りの読み方
最初から順に読まなくてもかまいません。
まず遊ぶ読み方では、コードをコピーして実行し、「変えてみる」の箇所だけ試します。説明は気になったときに戻って読めます。
順番に作る読み方では、第1章から進みます。前の章で使った考え方が、次の章の動きへつながります。
好きなものから選ぶ読み方では、最初の 3 章を終えたあと、興味に近い章へ移ります。動きなら第4章、マウスなら第8章、文字なら第10章、ゲームなら第18章が入口です。
一人で進められる設計
この本は、講師や学習仲間がいない状態を標準にしています。誰かに作品を見せたり、採点してもらったりしなくても最後まで進めます。
動かなくなったら、付録Aのエディタで困ったときを開いてください。作品を見直すときは、一度保存して閉じ、時間を置いてからもう一度開きます。昨日の自分が作った作品は、今日の自分にとって十分に新しい観察対象になります。
コピーから始めてよい理由
最初から全部を入力しても、プログラミングが上手になるとは限りません。動くものを手元に置き、少し変えて結果を比べるほうが、コードと画面の関係を早く発見できます。
この本のサンプルコードはコピーしてかまいません。変えた場所が一つでもあれば、そこから自分の実験が始まっています。予想外の画面になったら、すぐ元へ戻さず、少し眺めてみてください。バグが新しい模様を教えてくれることもあります。
最初の目的地は、わずか 5 分先です。第1章で、画面の色と丸の形を変えてみましょう。