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ファイルで、ロジックを書いてみよう。

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

npm package を作成する

npm init -y

Webpackをインストール

npm install -g webpack

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

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

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;};
}

猫を定義する

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

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(); };
}

犬を定義する

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

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(); };
}

犬と猫を操作してみる

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

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());

実行して見ましょう。

node ./src/index.js

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

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

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

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

emacs webpack.config.js

const path = require('path');

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

ビルドしてみる

webpack

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

NPMから叩けるようにする

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

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

emacs package.json

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

として見ましょう

ビルドしてみよう
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 (ゲームプログラム入門)

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