質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.06%

  • JavaScript

    13286questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    5609questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • webpack

    153questions

webpackを使って管理のしやすいjsファイルを作りたい

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 133

SaekoIwaki

score 25

いつもお世話になっております。
現在、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にまとめると可読性も良いかな?
と単純な思いで「まとめたい」と書きましたが、ここらへんも何かアドバイスがあればご教授をお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

 問題点

大前提として、hoge変数は関数のローカル変数ですから、どうやっても関数の外からアクセスすることはできません。例えば、returnで値を返すなどして、関数から外に値を出すようにする必要があります。

あるいは、exportの対象が関数でなくてもよいのであれば、parameterName.jsでは関数ではなく、バラの変数、あるいは1つにまとめたオブジェクトをexportするという方法も考えられます。

 改修例1

  • parameterName.js
export function parameterName () { 
  return {
    hoge: 'xyz',
    fuga: 'abc'
  }
}
  • a.js
export function a (obj) {
  console.log(obj.hoge)  // xyz
  console.log(obj.fuga)  // abc
}
  • main.js
import {parameterName} from './parameterName'
import {a} from './a'
const obj = parameterName()
a(obj)

 改修例2

  • parameterName.js
const obj = {
  hoge: 'xyz',
  fuga: 'abc'
}

export { obj }
  • a.js
import {obj} from './parameterName'
// 依存しているファイル側でimportすることもできます

export function a () {
  console.log(obj.hoge)  // xyz
  console.log(obj.fuga)  // abc
}
  • main.js
import {a} from './a'
a()

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/14 00:13

    sii_side様
    ご回答ありがとうございます。
    改修例1.2共に試してみました。
    共にちゃんと変数を読み込むことができましたが、こういったやり方(変数だけを纏めたjsファイル)は余り見かけないのでしょうか?

    キャンセル

  • 2018/01/14 05:02

    普通に使います。例えばゲームの基本設定一覧だと、各所でバラバラになっているよりも1箇所にまとまっていたほうが、難易度はどこだっけ…とかスピードはどこで定義したっけ…とならずに済むので、見通しが良く、修正等々の負担も軽くなると思います。

    ただ、規模次第では、1つのファイルに一切合切と決め打ちしてしまうと、今度はそのファイルが肥大化して見通しが悪くなることもあるかもしれません。

    モジュール化の1つの利点は小分けにできることですから、処理本体も使うデータも、意味のあるグループ化をしてファイルを分ける、と考えていくのが良いかと思います。

    キャンセル

  • 2018/01/14 15:40

    sii_side様
    ご回答ありがとうございます。
    普通に使うのですね。今まで、common.jsには、常に使う関数だけ書いていたのですが、あれもこれも常に必要だな・・・という処理が後々多くなり、結果的に見づらくなってしまい、毎回うまくかけないかなと思っていました。
    単純に設計の仕方が下手なだけだと思いますが。。。
    おっしゃる通り、「処理本体も使うデータも、意味のあるグループ化をしてファイルを分ける、と考えていくのが良いかと思います。」こちらを意識して作りたいと思います。
    勉強になりました。
    ありがとうございました。

    キャンセル

+1

import/export文の仕組みを使ってJavaScriptのファイルを複数に分割する形式をモジュールというのですが、モジュールを使う最大の目的は各ファイルで定義されている変数や関数の見える範囲を限定するためです。まず、この目的を見失ってはいけません。webpackはこのモジュールを使った方法をモジュールに対応していない環境でも使えるように一つのファイルにまとめるツールにすぎません。最新のモダンブラウザであれば、<script type="module">を使用して、複数にわかれたままブラウザから読み出すことも出来ます(対応状況)。

二つ以上のファイルで同じ変数や関数を使いたい場合、まずはそれを定義しているファイルでexportを使って、これは公開していますよと明示しなければなりません。そして、それを使用する側はimportを使って公開されているものにたいしてこれを使いますよと明示しなければなりません。それを踏まえて、hogeを見えるようにするには次のように書く必要があるでしょう。

main.js

import {parameterName} from "./parameterName";
import {a} from "./a";
a(); // parameterName()による代入前だからundefined
parameterName();
a(); // parameterName()による代入後だからxyz

parameterName.js

export var hoge;
export function parameterName(){
    hoge = 'xyz';
}

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/14 18:29

    ご丁寧に解説していただき、ありがとうございます。

    中途半端な知識で勧めていたため、webpack本来の使い方もご教授していただき、ありがとうございます。
    <script type="module">も全くしらなかった情報です。勉強になります。
    頂いた解答お二人とも、変数を使うjsにimportで呼び出す方法を記載しているのでこちらを検討します。

    ご教授ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 91.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    13286questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    5609questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • webpack

    153questions