Diff of okoze/03.Episode/03.Setting Up the Development Environment

The added line is THIS COLOR.
The deleted line is THIS COLOR.
Go to okoze/03.Episode/03.Setting Up the Development Environment.
Deleting diff of okoze/03.Episode/03.Setting Up the Development Environment
#author("2026-08-25T16:07:44+09:00","","")
#author("2026-08-25T16:09:12+09:00","","")
*Setting Up the Development Environment [#nf6ca958]

Now that the development environment has been decided, let's actually set it up.

The goal of this episode is not to build okoze.

The goal is simply to create a minimal web application and make sure that we can edit it, run it in a browser, and debug it.

**1. Create the Project Directory [#kc2f31d8]

First, create a directory for the project.

```text
okoze-pre/
````
 ```text
 okoze-pre/
 ````

Open this directory with Visual Studio Code.

At this point, there is no framework, build system, or other complicated setup.

**2. Create an HTML File [#q8ac7680]

Create a file named `index.html`.

The initial HTML is deliberately minimal.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>okoze</title>
</head>
<body>
  <h1>okoze</h1>
</body>
</html>
```
 ```html
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>okoze</title>
 </head>
 <body>
   <h1>okoze</h1>
 </body>
 </html>
 ```

**3. Run the Application [#jef2c2ee]

Install the '''Live Server''' extension for Visual Studio Code.

Open `index.html` and start Live Server.

The page should open in the browser.

At this point, we have a working web application.

It does not do anything useful yet, but that is enough for now.

**4. Check the Developer Tools [#nbf2db11]

Open the browser's Developer Tools.

The Console is particularly useful during development.

For example, add the following JavaScript:

```javascript
console.log("Hello, okoze!");
```
 ```javascript
 console.log("Hello, okoze!");
 ```

Reload the page and check that the message appears in the Console.

This confirms that we can use the browser's Developer Tools to inspect what is happening in the application.

**5. Add a Canvas [#t9d2b8b5]

Next, add a Canvas element to the page.

```html
<canvas id="canvas" width="800" height="600"></canvas>
```
 ```html
 <canvas id="canvas" width="800" height="600"></canvas>
 ```

We can then obtain the Canvas context with JavaScript.

```javascript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
```
 ```javascript
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 ```

At this point, the application has a Canvas that we can draw on.

**6. Draw Something [#v9825379]

Let's draw a simple rectangle.

```javascript
ctx.strokeRect(10, 10, 100, 100);
```
 ```javascript
 ctx.strokeRect(10, 10, 100, 100);
 ```

If the rectangle appears in the browser, the basic graphics environment is working.

**What We Have Done [#n9dc8e84]

We now have a minimal development environment consisting of:

- Visual Studio Code
- Live Server
- a web browser
- HTML
- JavaScript
- Canvas API
- browser Developer Tools

There is still very little code.

That is intentional.

Before adding frameworks or libraries, I want to make sure that the smallest possible application works.

The next step is to start implementing okoze.