変数の値を変更したい！

Question

疑問

index.jsファイルがimportしたsub.jsファイルの変数を、index.jsファイルから値を書き換えることは出来ないのでしょうか？

経緯

今までjsファイルを複数書いた時、html内にスクリプトタグをいくつも書くような、古典的な方法をとっていました。
ES6のモジュール機能について学んだので、実際に使ってみましたが、上手くいかないことがありました。

index.js

import {kazu} from 'sub.js';

kazu = 5;

console.log(kazu);

sub.js

export var kazu =3;

index.jsを実行するとエラーが走ります。以下はエラー文です。

> Uncaught TypeError: Cannot set property kazu of #<Object> which has only a getter

エラー文のgoogle翻訳したところ、解釈に困る文章が返ってきました。
英語が弱い自分なりに読んでみると、「only a getter」と書かれているので、ゲット専用ということが読み取れます。

試してみたこと調べてみたこと

変数の値の変更について調べると、グローバル変数やスコープなどの記事が多く、import先の変数を書き換える方法みたいな記事はなかなかヒットしませんでした。

質問

sub.jsで定義された変数をindex.jsから書き換える方法はないのでしょうか？

「only a getter」と書かれているということは、値の変更は出来ないのでしょうか。

もしindex.jsから変数の値を書き換えることができる方法があれば、そのヒントや検索キーワードを教えて欲しいです。

Comments

[m.ts10806]

>英語が弱いので
Google翻訳を使われては。
私もよくやりますよ。エラーそのまま翻訳に突っ込むのを。
割りとエンジニアよりの訳をしてくれます。

[chiba_kun]

ありがとうございます！
google翻訳はいつも使っています。エラー文を翻訳した所、よく分からない日本語が返って来て。自分で素の英語が読める訳もなく。。
そんなこんなで、英語が読めなかったというのを端的に書く為に、「英語が弱い」と書いた次第です。
質問をする際にこういった曖昧な表現は適切ではないかもしれませんね。今後気をつけます！

[m.ts10806]

質問編集して翻訳利用したことがわかるように記載願います。
見ている側からすると書いてあることが全てですので

[chiba_kun]

編集しました。ありがとうございます！

[maisumakun]

なんのためにそのようなことをしたいのでしょうか？

[chiba_kun]

ことの経緯を説明します。今までHTMLファイル内にスクリプトタグを複数貼るという、古典的なモジュールの書き方をしていました。
この際にはあるファイルからあるファイルで宣言された変数を参照したり、または書き換えたりすることができました。古い方法ではなく新しいものを使ってみようかと思い、ES6のモジュール機能を使ってみるも、今まで出来たことが出来なくなった。という感じです。。。！

「なんのためにそのようなことをしたいのでしょうか？」

今まで別のファイルから別のファイルの変数を書き換えるということをしてきたので、それがES2015のモジュール機能でも出来きたら、便利だなあと思ったからです。

ですが、モジュールのメリットとして変数の汚染を防げる云々といくつかのウェブサイトに書いてありました。ES2015のモジュール機能では、あるファイルからあるファイルにある変数を書き換える、というのは殆どしないことなのでしょうか？

[chiba_kun]

私普通に考えてめちゃくちゃ頓珍漢な質問をしていますね。。

実は小規模のウェブアプリしか作ったことがなく、今まで変数の衝突や変数のスコープなどその辺りについてはあまり考えてきませんでした。なにせあまり複雑なことはやったことがなかったので。。。

ES2015の機能についで学び始めたのも、とりあえず新しくて便利そうだな、というのがきっかけです。何が便利になるのかについてはあまり意識していませんでした。強いていうなら、モジュールバンドラーを使うとファイルの依存関係を調べ一つのjsファイルにまとめてくれる、くらいのことでした。

Answer 1

ES2015のモジュール機能では、あるファイルからあるファイルにある変数を書き換える、というのは殆どしないことなのでしょうか？

はい、そのとおりです。というより、できないことがメリットです。

Comments

[chiba_kun]

回答ありがとうございました。端的な答えで分かりやすく非常に助かりました！

Answer 2

はじめに：他の方へ
ESモジュールについては正直に言うと私も初心者の域です。
間違いのご指摘は歓迎です（というか、お願いします）。

---

エラーを意訳すると「サブモジュールのプロパティ値（exportされたKazu）はゲッターだよ」って意味ですよね。
このことから、「（main.jsで）他のモジュールから import した名称（kazu）は、そのモジュール内ではいわば予約語のように扱われ、変更できない」のだと勘違いしながら使っていますよ。

（別途変数を用意して扱うとか、import時に別名に置き換えるとか）

[main.js]

import {kazu as mKazu} from 'sub.js';
// このモジュール内で kazu の文字を変数として使いたい。
// { as } 構文で予約語を mKazu にしてみる
// ｍKazu == {subModule}.kazu のことで getter

let kazu = mKazu; // このモジュール内では kazu を変数として宣言
// （略）

---

追記）
ググるとJavaScript ES6のモジュール機能のスコープと仕様を調査してみた を見つけました。
「穴」はあるようですが塞がれる可能性もある。
私自身も「サブモジュール内を書き換えることは考えないほうが良い」と勉強になりました。

Comments

[chiba_kun]

回答ありがとうございました！
私は新しいものをとりあえず使ってみよう思いES6の仕様を勉強しはじめました。
なのでモジュールのメリットなどを知らず分からずに、とても頓珍漢な質問を投稿していたのですね。
私のとてもめちゃくちゃな質問に時間を割いていただき、ありがとうございました。なんだか申し訳ない気持ちもありますが、感謝です！