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

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

![logo-on-white-bg.png](https://qiita-image-store.s3.amazonaws.com/0/54192/d8ff0c7a-4040-d5ce-7d16-8f0555a26cce.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

2. Webpackをインストール

  npm install -g webpack

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

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

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

4. 猫を定義する

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

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

```

5. 犬を定義する

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

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

```

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

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

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

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

```
node ./src/index.js

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

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

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

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

emacs webpack.config.js

```
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: './dist'
  }
};
```
9. ビルドしてみる

```
webpack
```

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



## NPMから叩けるようにする

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

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

emacs package.json

```
 ...
 ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
 ...
```
として見ましょう

10. ビルドしてみよう
11. 
```
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)](http://blogger.firefirestyle.net/2017/09/scratch30-0.html)
[Scratch3.0 自分専用機 を作ろう!! (1) Scratch3.0をビルドしてみよう](
http://blogger.firefirestyle.net/2017/12/scratch30-1-scratch30.html)
[Scratch3.0 自分専用機 を作ろう!! (2) Scratch3.0 を Androidアプリとして動作させてみよう (1)](http://blogger.firefirestyle.net/2017/12/scratch30-2-scratch30-android-1.html)
[Scratch 3.0 自分専用機 を作ろう!! (3) Scratch3.0 を Androidアプリとして動作させてみよう (2)](http://blogger.firefirestyle.net/2017/12/scratch-30-3-scratch30-android-2.html)
[Scratch 3.0 自分専用機 を作ろう!! (4) Scratch3.0 を Androidアプリとして動作させてみよう (3)](http://blogger.firefirestyle.net/2017/12/scratch-30-3-scratch30-android-3.html)
[Scratch 3.0 自分専用機 を作ろう!! (5) Webpack とは)](http://blogger.firefirestyle.net/2017/12/scratch-30-5-webpack.html)

[火の型 With Scratch 2.0 (プログラム入門) 　第00巻](https://firebook.firefirestyle.net/)
[炎の型 With Scratch 2.0 (ゲームプログラム入門)](https://firefirebook.firefirestyle.net/)