このセクションでは、HTML、CSS、JavaScript という Web を構成する主要な技術について説明し、最後にそれらと p5.js の関係や役割について解説します。

Web ページを構成する３つの技術

Web ページを作成するためには、主に HTML、CSS、JavaScript の 3 つの技術を使います。まずは、それぞれの役割について説明しましょう。

HTML（Hyper Text Markup Language）

HTML は、Web ページの基本構造を定義するマークアップ言語です。見出し、段落、リンク、画像など、ページに表示される内容を記述します。HTML は、ウェブページに「何を表示するか」を指定するものです。

CSS（Cascading Style Sheets）

CSS は、Web ページの見た目を定義するスタイルシート言語です。HTML で記述された内容に対して、色、フォント、レイアウトなどのスタイルを適用します。CSS を使うことで、ページのデザインや配置を自由に変更できます。

JavaScript

JavaScript は、Web ページに動的な操作を追加するためのプログラミング言語です。クリックイベントやアニメーション、データの動的な更新など、インタラクティブな機能を実現するために使われます。

3 つをまとめると、以下のようなイメージです。

_HTML, CSS, JavaScript を利用した Web ページ構成_

p5.js とは

それでは、p5.js とは何でしょうか？p5.js は、JavaScript のライブラリです。主にビジュアルプログラミングを簡単に行うために設計されました。「ライブラリ」とは、特定の機能を簡単に使えるようにまとめたプログラムの集まりです。プログラムを書くときに便利な道具箱のようなものだと思ってください。

p5.js の役割

p5.js を使うことで、Web ページ上に図形を描いたり、アニメーションを作成したりすることができます。これにより、難しいコードを書かなくても、用意された関数を使うだけで様々なビジュアル表現を簡単に実現できます。

p5.js は、アートやデザイン、教育の分野で広く使われており、プログラミングの学習を楽しくするためのツールです。例えば、JavaScript で円を描く場合、通常は複雑なコードを書く必要がありますが、p5.js を使うと以下のように簡単に描画できます。

function setup() {
    createCanvas(400, 400); // キャンバスを作成
    circle(200, 200, 50); // 円を作成
}

この章では、HTML、CSS、JavaScript という Web の主要な技術と、それらを補完する p5.js について学びました。HTML は Web ページの構造を定義し、CSS はその見た目を整え、JavaScript は動的な動作を追加します。そして、p5.js を使うことで、グラフィックやアニメーションを簡単に作成することができました。

次の章では、具体的に p5.js プロジェクトのファイル構成について見ていきます。