Q&A
sii_side様
ご回答ありがとうございます。
改修例1.2共に試してみました。
共にちゃんと変数を読み込むことができましたが、こういったやり方(変数だけを纏めたjsファイル)は余り見かけないのでしょうか？
いつもお世話になっております。
現在、jsをwebpackで勉強中です。
今回の質問はwebpackは余り関係ないのですが
webpackでうまくまとめれたら便利だなと思い質問致しました。
##問題点
parameterName.jsに変数だけをまとめて、他のjsで変数を利用する、といった形にしたいです。
webpackをgulpの方で管理し、webpackでjsを一つにまとめた後、指定したフォルダに書き出しする設定になっています。
webpack.config.js
module.exports = { entry: "./src/js/main.js", output: { filename: "main.js" }, devtool: 'source-map' }
main.js
import {parameterName} from "./parameterName"; import {a} from "./a"; parameterName(); a();
parameterName.js
export function parameterName(){ var hoge; hoge = 'xyz'; }
a.js
export function a(){ console.log(hoge); }
index.html
~省略~ <body> <main> <article> <section> <h1>hello</h1> </section> </article> </main> <script src="/js/lib/jquery-1.11.3.min.js"></script> <script src="/js/main.js"></script> </body>
この様にparameterName.jsで定義した変数hogeを、a.jsで変数を呼び出した場合、
Uncaught ReferenceError: parameterName is not defined
とエラーになり、変数の利用が出来ないです。
##知りたいこと
どの様にして、別ファイルjsの変数を別ファイルjsで呼び出せますでしょうか？
a.jsにしか使わない変数であればa.jsに記載すればよいのですが、別のjsでも同じ変数を使う場合等があると想定した場合に、一つに
まとめておいた方が便利かなと思います。
自作関数も同じように、別のjsファイルで呼び出せ無いのも単純な勉強不足だとは思いますが、皆様はどの様に書いていますでしょうか？
変数を全て一つのjsにまとめると可読性も良いかな？
と単純な思いで「まとめたい」と書きましたが、ここらへんも何かアドバイスがあればご教授をお願いいたします。
回答2件
0
import/export文の仕組みを使ってJavaScriptのファイルを複数に分割する形式をモジュールというのですが、モジュールを使う最大の目的は各ファイルで定義されている変数や関数の見える範囲を限定するためです。まず、この目的を見失ってはいけません。webpackはこのモジュールを使った方法をモジュールに対応していない環境でも使えるように一つのファイルにまとめるツールにすぎません。最新のモダンブラウザであれば、<script type="module">を使用して、複数にわかれたままブラウザから読み出すことも出来ます(対応状況)。
二つ以上のファイルで同じ変数や関数を使いたい場合、まずはそれを定義しているファイルでexportを使って、これは公開していますよと明示しなければなりません。そして、それを使用する側はimportを使って公開されているものにたいしてこれを使いますよと明示しなければなりません。それを踏まえて、hogeを見えるようにするには次のように書く必要があるでしょう。
main.js
JavaScript
1import {parameterName} from "./parameterName"; 2import {a} from "./a"; 3a(); // parameterName()による代入前だからundefined 4parameterName(); 5a(); // parameterName()による代入後だからxyz
parameterName.js
JavaScript
1export var hoge; 2export function parameterName(){ 3 hoge = 'xyz'; 4}
a.js
import {hoge} from './parameterName'; export function a(){ console.log(hoge); }
なお、main.jsではhogeをimportしていないため、hogeを見ようとしてもエラーになります。もし、main.js内で新たにhogeを定義しても、それはparameterName.jsにあるhogeとは全く無関係のhogeになります。このように、必要なものだけを明示的にimportすることで、明示されていない変数や関数については全く考慮すること無くファイルを書くことが出来ます。
投稿2018/01/13 18:05
編集2018/01/13 18:11
総合スコア21735
0
ベストアンサー
問題点
大前提として、hoge変数は関数のローカル変数ですから、どうやっても関数の外からアクセスすることはできません。例えば、returnで値を返すなどして、関数から外に値を出すようにする必要があります。
あるいは、exportの対象が関数でなくてもよいのであれば、parameterName.jsでは関数ではなく、バラの変数、あるいは1つにまとめたオブジェクトをexportするという方法も考えられます。
改修例1
- parameterName.js
JavaScript
1export function parameterName () { 2 return { 3 hoge: 'xyz', 4 fuga: 'abc' 5 } 6}
- a.js
JavaScript
1export function a (obj) { 2 console.log(obj.hoge) // xyz 3 console.log(obj.fuga) // abc 4}
- main.js
JavaScript
1import {parameterName} from './parameterName' 2import {a} from './a' 3const obj = parameterName() 4a(obj)
改修例2
- parameterName.js
JavaScript
1const obj = { 2 hoge: 'xyz', 3 fuga: 'abc' 4} 5 6export { obj }
- a.js
JavaScript
1import {obj} from './parameterName' 2// 依存しているファイル側でimportすることもできます 3 4export function a () { 5 console.log(obj.hoge) // xyz 6 console.log(obj.fuga) // abc 7}
- main.js
JavaScript
1import {a} from './a' 2a()
投稿2018/01/13 07:45
総合スコア849
普通に使います。例えばゲームの基本設定一覧だと、各所でバラバラになっているよりも1箇所にまとまっていたほうが、難易度はどこだっけ…とかスピードはどこで定義したっけ…とならずに済むので、見通しが良く、修正等々の負担も軽くなると思います。
ただ、規模次第では、1つのファイルに一切合切と決め打ちしてしまうと、今度はそのファイルが肥大化して見通しが悪くなることもあるかもしれません。
モジュール化の1つの利点は小分けにできることですから、処理本体も使うデータも、意味のあるグループ化をしてファイルを分ける、と考えていくのが良いかと思います。
sii_side様
ご回答ありがとうございます。
普通に使うのですね。今まで、common.jsには、常に使う関数だけ書いていたのですが、あれもこれも常に必要だな・・・という処理が後々多くなり、結果的に見づらくなってしまい、毎回うまくかけないかなと思っていました。
単純に設計の仕方が下手なだけだと思いますが。。。
おっしゃる通り、「処理本体も使うデータも、意味のあるグループ化をしてファイルを分ける、と考えていくのが良いかと思います。」こちらを意識して作りたいと思います。
勉強になりました。
ありがとうございました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/14 09:29