TL;DR
自作のp5.js学習環境を作ったよ
ここにあるよ 使ってみてね
これからもアップデートしていくから感想や要望があったら教えてね
はじめに
この記事ではProcessingと、そのライブラリであるp5.jsについて扱います。
Processingとは、電子アートとビジュアルデザインのためのプログラミング言語、およびその総合開発環境（IDE）を指します。シンプルなコードを書くだけで、数々の美しい作品を作り出すことができます。
また、p5.jsとはProcessingをJavaScriptへ移植したものであり、Web上で手軽にクリエイティブコーディング（独創的、創造的な表現をプログラミングによって行うこと）を行えるほか、p5.js独自の機能もいくつか追加されています。
p5.jsは素晴らしい
p5.jsは素晴らしいライブラリです。
本家本元のProcessingは（それほど大掛かりではないとはいえ）IDEのインストールが必要になります。しかし、p5.jsはJavaScriptへの移植なので環境構築はほとんど必要ありません。CDNを使えばこんなに簡単に書き始めることが出来ます。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script> <!-- skecth.jsに自分のコードを書く -->
</body>
</html>
これだけ。なんと簡単な。
さらにJavaScriptに移植された利点として、p5.domでDOM要素を変更し、インタラクティブにHTMLオブジェクトをいじることができたり、p5.soundでWeb Audio APIを使用し、作品に音を加えることも出来ます。
そのとっつきやすさから、初心者を対象としたプログラミングの教育にp5.jsを用いることもあるようです。
p5.jsの開発環境
p5.jsには、公式が用意しているWeb Editorがあります。
またOpenProcessingという、p5.jsのコードを書いて実行し、共有することが出来るWebサイトもあります。エディタと実行環境がセットになったSNSのような感じです。
OpenProcessing上では活発に作品の発表が行われており、他の人が作った様々な作品を気軽に閲覧することが出来ます。
自分も学習環境を作りたい！
公式p5.js開発環境の手軽さ、OpenProcessingの規模の大きさに感化され、自分もp5.jsの開発環境を作ってみたいと思うようになりました。
また、どうせ作るのであれば、p5.js（ないしはProcessing）のそのとっつきやすさと面白さを活かし、p5.jsを学習できるような環境を作りたいと思いました。
というわけで、作りました！
かっちりした感じじゃなくて、p5.jsを使ってプログラミングを楽しんでほしいという想いを込めて、
また気軽に書いて試してみてほしいという想いも込めて、
p5.js sandboxという名前をつけました。
ここで公開しています、ぜひご覧ください！
使用したツールなど
| 種類 | 使用したツールなど |
|---|---|
| エディタ | Ace |
| JavaScriptフレームワーク | Vue.js |
| UIコンポーネントライブラリ | Element |
| サイトホスティング | GitHub Pages |
以下、順に説明していきます。
エディタ
使用ツール：Ace
ブラウザ上で使えるJavaScript製のテキストエディタです。特徴として、
- 100言語以上のシンタックスハイライト
- 多数のテーマから自由に配色を選べる
- マルチカーソル
- リアルタイム構文チェック
などに対応しており、非常に高性能です。
JavaScriptフレームワーク
使用フレームワーク：Vue.js
言わずと知れた？JavaScriptのフレームワークです。
UIの構築に長けており、他のJSライブラリを使用するプロジェクトへも容易に導入できるように設計されています。
また、高機能なシングルページアプリケーション（SPA）を構築することも可能です。
（Vue.jsを使ったことがなかったので、自作のWebアプリケーションを作る上で、修行としてこれを使ったという側面もあります）
UIコンポーネントライブラリ
使用ライブラリ：Element
Vue.js製のUIコンポーネントライブラリです。Vue.jsと（当たり前ですが）非常に相性が良く、インストール後は以下の記述を追加するだけですぐに使い始めることが出来ます。
// Element本体
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
// 言語設定
import locale from 'element-ui/lib/locale/lang/ja'
Vue.use(ElementUI, {locale});
コンポーネント自体も非常に充実しており、ラジオボタンや入力フォームなんかはもちろん、カルーセルやカラーピッカー、評価をつけるアレなど色々あります。
サイトホスティング
使用ツール：GitHub Pages
静的サイトを簡単に公開できるサービスです。JavaScriptも動作します。
しかも、なんと、無料 です。
使い方は以下の通り。
ユーザーサイトの場合
(username).github.io という名前のリポジトリを作るだけです。
(username)にはご自身のGitHubユーザー名を入れてください。
このリポジトリに配置したファイルがWeb上に公開されるので、あとはindex.htmlを用意すると、以下のURLでアクセスすることが出来ます。
https://(username).github.io/
めちゃくちゃ簡単。
プロジェクトサイトの場合
自身のレポジトリにgh-pagesというブランチを用意すると、以下のURLでアクセスできるようになります。
https://(username).github.io/(repository)/
あるいは、各リポジトリのsettingsからも設定を行うことが出来ます。
各リポジトリのsettingsにgithub-pagesに関する設定がありますので、sourceを既存のブランチに設定することでプロジェクトサイトが用意されます。
URLは同じです。
処理の流れ
以下にこのエディタの処理の流れを示します。そんなに難しい実装方法ではありません。
以降、画面左側をエディタ部分、画面右側を表示部分と呼ぶことにします。
表示部分にはiframeタグでインラインフレームが作成されており、このインラインフレームの内容が使用者の記述したコード（スケッチ）の内容に更新されていく、というのが大まかな流れです。
- サイトのロード時に、前もってp5.jsライブラリを読み込んでおきます
- 使用者がエディタ部分に自身のスケッチを記述します
-
Executeボタンを押すと、使用者の記述したスケッチが読み込まれます - 読み込んだデータをもとに、表示部分の
iframeを更新します - 使用者の記述したスケッチの内容が表示部分に表示されます
- 楽しい！
サンプルプロジェクト
p5.js sandboxは、プログラミング初心者の方にも気軽にプログラミングを楽しんでほしいという想いから、多数のサンプルプロジェクトを用意しています。
このサンプルプロジェクトは徐々に難易度が上がって行くように作成されており、現在のところは全部で30個あります。
今までにプログラミングをやったことがある方は、全て実行していけば公式サイトを見なくてもp5.jsがどんなものなのかなんとなく分かるでしょうし、プログラミングをやったことがない方でも「プログラミングとは何なのか」、何となく雰囲気をつかめるんじゃないでしょうか。
今後やりたいこと
p5.js sandboxはまだまだ発展途上だと思っています。
これからやっていきたいこととして、
- 全体的な安定性の向上
- サンプルプロジェクトの拡充
- Live Edit機能（ブラウザがオートリロードされ、書いたコードが即座に反映される機能）
などがあります。
頑張ります。
p5.js sandboxをぜひ使ってみてください。
そして意見や要望があればぜひ教えてください！
最後にひとこと
Merry Christmas! 
参考文献
@niishi_8 さんの記事です。
p5.jsを使って子どもやプログラミング初学者向けのプログラミング学習支援システムを作成されています。ビジュアルプログラミングやライブプログラミングの機能が実装されています。すごい…。