多摩美 – サウンド&ネット 2015年度

第3回: Web応用1 – Webブラウザでプログラミング、p5.js入門

October 18, 2015

この講義のここまで前半3回では「Web基礎」と題して、HTMLとCSSの基本、そしてTumblrを使用したオンライン・ポートフォリオの作成について解説してきました。前半のまとめとして、作成したオンライン・ポートフォリオのベースとなる部分を提出してもらいます。提出方法は授業内で指示します。

いよいよ後半は、サウンド&ネットのサウンドのパートとも協力して、Web上で音を使用した作品を公開することを最終目標に、新たな内容に進んでいきます。

JavaScript – Webブラウザでプログラミングする

これまで取り扱ってきた、HTMLやCSSは人工的に仕様が策定された言語ではありますが、プログラミング言語ではありませんでした（HTMLはマークアップ言語、CSSはスタイルシート言語）。

HTMLやCSSとは別に、Webブラウザ上で動作させることのできるプログラミング言語が存在します。その代表的な言語がJavaScriptです。

現在、Webサイトは「文書」を載せるためのメディアから、「アプリケーション」を作動させるためのプラットフォームへとその姿を変えつつあります。そのための技術を総称して（広義の）HTML5と呼ばれ、次世代のWeb技術として注目されています。

JavaScriptはこうしたHTML5の技術を支える根幹となるプログラミング言語といえます。

※ 注意: プログラミング言語のJavaとJavaScriptは、名称が似ているので関連する技術と勘違いされがちですが、全く関係ありません。「ハム」と「ハムスター」くらい違います。

JavaScirptはプログラミング言語や開発環境をダウンロードしたり設定しなくても、Webブラウザさえあえればすぐにプログラミングが可能です。ただし、JavaScript単体でプログラミングするには、ある程度のプログラミングに関する知識と学習が必要となります。

JavaScriptでは、開発を容易にするための拡張機能として、ライブラリ（Library）と呼ばれる、汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたものが数多く開発され、フリーウェアとして配布されています。

代表的なものだけでも数多くのライブラリが存在しています。

こうした数多くのライブラリの中から、今回はp5.jsというライブラリを使用していきたいと考えています。

p5.jsはアーティストでプログラマーのLauren McCarthyさんを中心に、Processing Foundationやニューヨーク大学ITPのサポートで開発されています。

p5.jsを採用した理由はいくつかあります。

様々な利点からp5.jsを活用していくことにしました。