webpackでのjsのモジュール化

Question

webpackを使ったjsのモジュール化を勉強中なのですが以下のような内容で躓きました。

//モジュール化前

let positionX;
let positionY;
let color;

const setStyle = () => {
  positionX = generatePositionX();
  positionY = generatePositionY();
  color = color();
}

const generatePositionX = () => {
  ...
}

const generatePositionY = () => {
  ...
}

const color = () => {
  ...
}

setStyle();
.
.
.

以下モジュール化を試みた

// ./app.js

import { setStyle } from './modules/setStyle';

setStyle();

// ./modules/generatePosisiton.js

export const generatePositionX = () => {
  ...
}

export const generatePositionY = () => {
  ...
}

// ./modules/color.js

export const color = () => {
  ...
}

// ./modules/setStyle.js

import { generatePositionX, generatePositionY } from './modules/generatePosition';
import { color } from './modules/color';

export const setStyle = () => {
  positionX = generatePositionX();
  positionY = generatePositionY();
  color = color();
}

この結果、バンドルは成功するのですが実行時に、setStyle()でpositionX...が定義されていないというエラーになります。
こういった、変数を他の関数によって更新するという関数をモジュール化する場合にはどのようなデザインパターンになるのでしょうか。

自分で考えると、setStyle()の引数にそれぞれ入力するという方法しか思いつかず、これが良い方法とは思えません。

また、setStyle.jsのように他のモジュールからモジュールに対してimportする方法は適していると言えますか？

Comments

[maisumakun]

positionXやpositionYはグローバル変数、と考えて間違いないでしょうか？

[asasaas]

現状はそうです。
記述を忘れていましたが、app.jsで宣言しています。

Answer 1

グローバル変数を、setStyleの内部で変更しているために、モジュール分割してしまうと見えなくなります。
こんな感じでsetStyleの戻り値にオブジェクトを返して、

// ./modules/setStyle.js

export const setStyle = () => {
  const positionX = generatePositionX();
  const positionY = generatePositionY();
  const color = color();
  return {
    positionX,
    positionY,
    color,
  }
}

受け取り側では分割代入するとよいのではないでしょうか。

// ./app.js
import { setStyle } from './modules/setStyle';

let positionX;
let positionY;
let color;

({ positionX, positionY color} = setStyle());

Comments

[asasaas]

なるほど、分かりやすいです。ありがとうございます。
ちなみにローカル変数を使えば、綺麗なコードになるのでしょうか？
このようなパターンも実際に頻用されますか？

[standard-soft]

グローバル変数はむしろほとんど使わないです。
きれいなコードのためにはローカル変数を使いましょう。