隅田川沿いを歩きつつ

プログラミング初心者の自分用のTips&Manual

JavaScriptのclassは2種類?

JavaScriptのclassは2種類ある?

初心者には5種類くらいあるように感じて難しいです。

おそらく2種類で新しいのとES2015以前のですよね?

書籍やブログ記事を見ていると古いほうを使っていることが多いので、本当にわかりません。。

最近のclass

最近のclassは最初に「class」と書くもの。

試しに作ってみました。

class Article {
    constructor(title, kiji) {
        this.title = title;
        this.kiji = kiji;
    }

    getArticle() {
        return '【タイトル】' + this.title + '\n' + '【記事内容】' + this.kiji;
    }
}

// 記事内容
let str_title = 'classを使ってみたい';
let str_kiji = 'JavaScriptのclassは2種類(?)あって難しい。';

let article1 = new Article(str_title, str_kiji);
let result = article1.getArticle();

console.log(result);

これを実行します。

JavaScriptでclass

無事にできました。

ES2015以前のclass

ES2015以前のclassも作ってみました。

let Article = function (title, kiji) {
    this.title = title;
    this.kiji = kiji;
    this.getArticle = function () {
        return '【タイトル】' + this.title + '\n' + '【記事内容】' + this.kiji;
    };
};

// 記事内容
let str_title = 'classを使ってみたい';
let str_kiji = 'JavaScriptのclassは2種類(?)あって難しい。';

let article1 = new Article(str_title, str_kiji);
result = article1.getArticle();

console.log(result);

実行します。

JavaScriptでclass

できました。

とりあえず、どちらも使えるようにしようと思います。

yuuuha.hatenablog.com

Node.jsでHTMLを表示する

Node.jsを少しずつ勉強しています。

勉強していく中で「JavaScriptすら、まだちゃんと理解していない」ということに気づいて、JavaScriptの復習をしています。

この前、Node.jsでServerを立ち上げるところまでやりました。

yuuuha.hatenablog.com

今回はHTMLを表示します。

HTMLファイルを表示する

HTMLを表示するためには「fs」を使います。

requireで読み込みます。

let fs = require('fs');

そして、Serverの中に「fs.readFile」を書きます。

let server = http.createServer((req, res) => {
    fs.readFile('./index.html', 'UTF-8', (error, data) => {
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.write(data);
        res.end();
    });
});

これでServerを起動するとHTMLが表示されます。

Node.jsでHTMLを表示する

無事にHTMLを表示できました。

コード全体

Node.js

let http = require('http');
let fs = require('fs');

let server = http.createServer((req, res) => {
    fs.readFile('./index.html', 'UTF-8', (error, data) => {
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.write(data);
        res.end();
    });
});

server.listen(3000);
console.log('Start Server!');

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
       <meta charset="UTF-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Node.js HTML表示</title>
   </head>
    <body>
        <p>Node.jsでHTMLを表示する</p>
    </body>
</html>

p5.jsで画像を書き出す方法

p5.jsを勉強していると偶然いい感じのものができたりします。

その時は「残したいな」と思います。

今回は、p5.jsで画像を書き出す方法です。

savePressedを使う

まず、createCanvasを変数に入れます。

今回は変数を「c」にしています。

c = createCanvas(800, 800, P2D);

「s」キーを押すと「png」を書き出すようにします。

function keyPressed() {
    if (key == 's') {
        saveCanvas(c, 'myCanvas', 'png');
    }
}

コード全体

let c;

function setup() {
    c = createCanvas(800, 800, P2D);
    colorMode(HSB, 360, 100, 100, 100);
    noLoop();
    noStroke();
}

function draw() {
    background(250, 100, 100, 100);
    for (let i = 0; i < width; i++) {
        fill(0, 0, 100, 90);
        circle(i * 100, height / 2, random(3, 150));
    }
}

function keyPressed() {
    if (key == 's') {
        saveCanvas(c, 'myCanvas', 'png');
    }
}

書き出し画像は以下となります。

p5.jsで画像を書き出す

p5js.org

yuuuha.hatenablog.com

Node.jsの「Hello World」

Node.jsは理解しておいたほうがいいですよね。

Node.jsがわかっているとWeb関連のことを理解しやすそう。

まずは、超基本から。

Node.jsの超基本

http、createServerを使って、ブラウザに「Hello Node.js」と表示させます。

const http = require('http');

let server = http.createServer((request, response) => {
    response.end('Hello Node.js');
});

server.listen(3000);
console.log('Server Start!');

ブラウザで表示させるとこんな↓感じ。

Node.jsの「Hello World」

Node.jsでHTMLを表示する

上の超基本の場合、HTMLを使っていないのでページを作るのが大変になってしまう。

HTMLを読み込む場合は、fs.readFile()を使います。

const http = require('http');
const fs = require('fs');

let server = http.createServer((req, res) => {
    fs.readFile('./index.html', 'utf-8', (error, data) => {
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.write(data);
        res.end();
    });
});

server.listen(3000);
console.log('Server Start!');

ブラウザで表示させたのはこちら↓となります。

Node.jsの「Hello World」

これがNode.jsの「Hello World」になりますね。

ちなみに、HTMLはこちら↓です。

<!DOCTYPE html>
<html lang="en">
    <head>
       <meta charset="UTF-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Hello Node.js</title>
   </head>
    <body>
        <h1>Hello Node.js</h1>
        <p>HTMLを表示する</p>
    </body>
</html>

Node.jsはなんかワクワクしますね。

yuuuha.hatenablog.com

yuuuha.hatenablog.com

Canvasのループのための最小テンプレート

Canvasを勉強していますが、環境を作るのが難しい。

その点、p5.jsはすぐに始めれるのでいいですよね。

書籍のテンプレート

Canvasを勉強するために書籍を買いました。

けど、載っているサンプルがかなり難しい。

そのサンプルを理解するために分解してみました。

ベース

まず、ベースとなるJavaScriptから。

マウスクリックやマウスムーブ部分を削除しました。

let canvas, ctx;

onload = function () {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    var timerId = setInterval(loop, 33);
};

メイン部分

setIntervalで以下の「function loop()」をループさせています。

function loop() {
    ctx.fillStyle = 'red';
    ctx.fillRect(100, 100, 100, 100);
}

今回はアニメーションはなく、同じ場所にrectを置いてます。

css

cssで真ん中にしています。

今回はマージンはなくしています。

html,body{
    /* margin: 0 auto; */
    text-align: center;
}

#canvas {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 640px;
    background-color:darkgray;
}

html部分

<!DOCTYPE html>
<html lang="en">
    <head>
       <meta charset="UTF-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>canvas-minimum</title>
       <link rel="stylesheet" href="style.css" />
       <script src="base.js"></script>
   </head>
    <body>
        <canvas id="canvas" width="1280" height="1600"></canvas>
        <script src="main.js"></script>
    </body>
</html>

ブラウザでの表示は以下です。

Canvasの最小テンプレート

yuuuha.hatenablog.com

developer.mozilla.org