Edited at
ScratchDay 5

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

More than 1 year has passed since last update.

Scratch3.0 の開発では、Webpack が、利用されています。

Scratch 3.0 と同じとように、NPMとWebpackを利用して何か作って見ましょう。

logo-on-white-bg.png

https://webpack.js.org


なぜ 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を組む

https://webpack.js.org/guides/getting-started/#basic-setup


複数の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. ビルドしてみよう



  2. npm run build


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


続く

Github の Scratch プロジェクトの package.json 、 webpack.config.js を読んで

どんな構成なのかが、解るようになって見ましょう。

ではでは


PS


今回のソース

https://github.com/kyorohiro/doc.advent.scratch30/tree/master/webpack01


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

https://firefirestyle.blogspot.com/

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 (ゲームプログラム入門)