Scratch 3.0 を Hackしよう。Webpackとは何か?

Scratch3.0 の開発では、Webpack が、利用されています。
Scratch 3.0 と同じとように、NPMとWebpackを利用して何か作って見ましょう。

なぜ Webpackを調べる?

どんどん、Scratchのコード( JavaScript )を触って欲しいのですが。
一旦、Webpackについて見ていきましょう。

どんな構成で動作しているのかを、見れるようなると、Hackしやすくなります。

• 全体の構成を俯瞰してみれるようになる
• 前回までの作業で、何をしていたのかが解る

良いことだらけです。
もちろん、触りたいところから、アタックしてみる。というのが、
私的には、もっともオススメです。

発・即・斬 です。

Webpackとは何か?

複数のJSファイルを一つにまとめるツールです。
機能ごとにJSファイルを分けて書くことで、プログラムを楽しく、効率的に書くことができます。

機能ごとに分割すると便利

シューティングゲームについて考え見ましょう。

• キャラクタがいる。
• 敵キャラクタがいる。
• ザコキャラがいる。
• ボスキャラがいる。
• 主人公キャラがいる
• 描画する機能がある
• レーダー攻撃がある
• 弾丸がある。
  などなど

「画像を描画する機能」は、上の全てで使用しますね。
なので、「画像を描画する」を作っておいて、使いまわすことができます。

ザコキャラや、ボスキャラクターなど、Scratchでは、Spriteとして
利用していましたね。
「Sprite」という機能を作っておいて、使い回すことができます。

このように、様々な部品を作成しておいて、一つにまとめて
ゲームとかを作ります。

Primitiveなほど使いやすい

A という機能は、{x y z} の組み合わせでできているとします。
B という機能は、{w x y} の組み合わせでできているとします。
C という機能は、{z y a} の組み合わせでできているとします。

x と y と z を、個別に作って置くと、それを使い回して、
A B C を、お手軽に作ることができますね。

x y z のような、 Primitive な機能ごとに作るとにとって、
個別の機能の組み合わせで、プログラミングを組むことができます。

つまりWeboackは便利

機能ごとに、JSファイルを作成して、Webpackでまとめて形にする。
そういったことが出来ます。

WebpackでHello Worldを組む

複数のJSファイルで、ロジックを書いてみよう。

猫が「にゃー」と鳴いて。犬が「ワン」と吠える。
プログラムを書いて見ましょう。

1. npm package を作成する

npm init -y

1. Webpackをインストール

npm install -g webpack

1. キャラクターをを定義する。

名前を持っていて、移動が出来て、挨拶ができる。
これを、キャラクターの条件としました。

emacs ./src/character.js

exports.Character = function (name) {
 this.name = name;
 this.x = 0;
 this.y = 0;
 this.getX = function (){ return this.x; };
 this.getY = function (){ return this.y; };
 this.hello = function (){ return "Hello!! I'm " + this.name + "!!"; };
 this.move = function (x,y){ this.x+=x; this.y+=y;};
}

1. 猫を定義する

猫はにゃーと鳴くことにしました。

emacs ./src/neko.js

const _ = require('./character.js');

exports.Neko = function(name) {
 this.parent = new _.Character(name); 
 this.hello = function (){return "Nyaa!! I'm " + this.parent.name + "!!";};
 this.move = function(x,y){return this.parent.move(x,y);}
 this.getX = function (){ return this.parent.getX(); };
 this.getY = function (){ return this.parent.getY(); };
}

1. 犬を定義する

犬はワンと吠えることにしました。

emacs ./src/neko.js

const _ = require('./character.js');

exports.Inu = function(name) {
 this.parent = new _.Character(name); 
 this.hello = function (){return "Wan Wan!! I'm " + this.parent.name + "!!";};
 this.move = function(x,y){return this.parent.move(x,y);}
 this.getX = function (){ return this.parent.getX(); };
 this.getY = function (){ return this.parent.getY(); };
}

1. 犬と猫を操作してみる

犬と猫を操作して見ましょう!!

emacs ./src/index.js

const n = require('./neko.js');
const i = require('./inu.js');


var chara = {};
chara = new n.Neko("Tama");
chara.move(1,2);
console.log(chara.hello());
console.log("x:"+chara.getX() + " ,y:" + chara.getY());

chara = new i.Inu("Tarou");
chara.move(2,3);
console.log(chara.hello());
console.log("x:"+chara.getX() + " ,y:" + chara.getY());

1. 実行して見ましょう。

node ./src/index.js

Nyaa!! I'm Tama!!
x:1 ,y:2
Wan Wan!! I'm Tarou!!
x:2 ,y:3

複数のJSファイルを、ひとつにまとめてみよう。

webpackを使用してみましょう!!

1. どのファイルを、どのファイルにまとめるかを、設定する

emacs webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: './dist'
  }
};

1. ビルドしてみる

webpack

./dist/bundle.js といファイルが出来ます。
node ./dist/bundle.js としてみてください。
先ほどと同じ結果が表示されるはずです。

NPMから叩けるようにする

Scratch3.0 のプロジェクトみたいに、npm run build で、ビルドできるようにして見ましょう!!

1. npm run build でビルドできるようにする

emacs package.json

 ...
 ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
 ...

として見ましょう

1. ビルドしてみよう

npm run build 

無事、ビルドが出来たと思います。

続く

Github の Scratch プロジェクトの package.json 、 webpack.config.js を読んで
どんな構成なのかが、解るようになって見ましょう。

ではでは

PS

今回のソース

以下の場所でも、アレコレ書いていきます。

Scratch3.0 自分専用機 を作ろう!! (0)
Scratch3.0 自分専用機 を作ろう!! (1) Scratch3.0をビルドしてみよう
Scratch3.0 自分専用機 を作ろう!! (2) Scratch3.0 を Androidアプリとして動作させてみよう (1)
Scratch 3.0 自分専用機 を作ろう!! (3) Scratch3.0 を Androidアプリとして動作させてみよう (2)
Scratch 3.0 自分専用機 を作ろう!! (4) Scratch3.0 を Androidアプリとして動作させてみよう (3)
Scratch 3.0 自分専用機 を作ろう!! (5) Webpack とは)

火の型 With Scratch 2.0 (プログラム入門) 　第00巻
炎の型 With Scratch 2.0 (ゲームプログラム入門)