ファイル構成

第 2 章の「p5.js プロジェクトの作成」では、VScode のプラグインを使って、新規にプロジェクトを作成しました。この作成された p5.js プロジェクト「01_first_sketch」には、標準で以下 2 つの重要なファイルが含まれています。

`index.html`

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
        <script src="sketch.js"></script>
        <title>P5.js Project</title>
    </head>
    <body>
        <main></main>
    </body>
</html>

`sketch.js`

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

function draw() {
    background(220);
}

p5.js のプロジェクトは、これらの HTML・JavaScript ファイルの２つで構成されます。それぞれの役割と関係を見ていきましょう。

HTML ファイル (`index.html`)

前節で説明した通り、HTML（HyperText Markup Language）は、ウェブページの基本構造を定義するのでした。簡単にいうと「ウェブページに何を表示するのか」の記述です。HTML ファイルは、.htmlという拡張子を持ちます。

index.htmlファイルでは、p5.js ライブラリとスケッチファイル（sketch.js）を読み込むための<script>タグや、ウェブページのタイトルを設定する<title>タグが含まれています。

`index.html`

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
        <script src="sketch.js"></script>
        <title>P5.js Project</title>
    </head>
    <body>
        <main></main>
    </body>
</html>

index.htmlファイルのbodyタグに空のmainタグがあることに気づきましたか？このmainタグは、p5.js の処理結果が描画されるキャンバスを追加するスペースとして用意されたタグです。

JavaScript ファイル (`sketch.js`)

JavaScript は、ウェブページに動的な動作を追加できるプログラミング言語で、p5.js は、この JavaScript のライブラリの一つでした。ビジュアルプログラミングを簡単に行うための道具箱のようなものです。JavaScript ファイルは、.jsという拡張子を持ちます。

sketch.jsファイルには、p5.js を使って描画やアニメーションを行うためのコードが書かれています。 `sketch.js`

function setup() {
    createCanvas(400, 400); // キャンバスを追加
}

function draw() {
    background(220); // キャンバスの背景色を設定
}

キャンバスが描画されるまでの流れ

プラウザでこのプロジェクトを表示すると、以下のような流れでキャンバスが描画されます。

より詳細に、コードを見ていきましょう。

ブラウザが`index.html`ファイルを読み込む
index.htmlファイルには、次のように p5.js ライブラリとsketch.jsファイルを読み込む<script>タグがあります。
`html
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
<script src="sketch.js"></script>
`
p5.js ライブラリの読み込み
`html
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
`
1 行目のscriptタグは、インターネット上にある CDN（コンテンツデリバリーネットワーク）から p5.js ライブラリを読み込んでいます。p5.js ライブラリには、キャンバスの作成や図形の描画、アニメーションなどを行うためのたくさんの便利な関数が含まれています。このライブラリを読み込むことで、p5.js の機能を使うことができるようになります。
スケッチファイルの読み込み
`html
<script src="sketch.js"></script>
`
2 行目のscriptタグは、sketch.jsファイルが読み込まれます。このファイルには、あらかじめ読み込んでおいた p5.js ライブラリを使って、実際に何を描画するかの指示を書きます。
描画の実行
`js
function setup() {
createCanvas(400, 400); // キャンバスを追加
}

function draw() {
background(220); // キャンバスの背景色を設定
}
`
- sketch.jsのコードは、setup()関数が最初に実行され、createCanvas()関数でmainタグの中にキャンバスが追加されます。
- その後、draw()関数が繰り返し実行され、キャンバスに描画される内容が更新されます。

このように、HTML ファイル（index.html）がウェブページの基本構造を提供し、JavaScript ファイル(sketch.js）が具体的なキャンバスの動作を定義することで、p5.js を使ったプログラムが実行されます。

以上がこの章の内容でした。

次章では、基本的な図形の描画について学びます。実際にsketch.jsの内容を書き換えて、図形を描画してみましょう。コードの変更内容と、それに対応する結果がどのように紐づいているかを観察し、プログラミングの楽しさを体験できます！

←

§1.2 - HTML, CSS, JavaScript, そしてp5.js

→

§1.4 - カード・テストの使い方

ファイル構成

JavaScript ファイル (sketch.js)

キャンバスが描画されるまでの流れ

JavaScript ファイル (`sketch.js`)