Scratch 3.0 自分専用機 を作ろう!! (5) Webpack とは

on
By kyorohiro (河村潔広)

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

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


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

npm run build 

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


続く

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

ではでは

PS

今回書いたコードは以下の通り!!


Comments

Post a Comment