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

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

ただいまの
回答率

90.50%

  • JavaScript

    16444questions

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

javascriptのwindowsオブジェクトについて

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 293

gomengo

score 35

mouseflowというサービスを利用して、javascriptでサイトのトラッキングをしようとしています。

javasriptを使用してsubmitを行っているページはうまくトラッキング出来ない為、下記のページを参考にして、ソースの修正を行いました。

https://mouseflow-jp.com/forms-with-no-successful-submits/

しかし、うまくトラッキングを行うことができません。
上記サービスの英語のページは、下記となります。

http://help.mouseflow.com/knowledge_base/topics/troubleshooting-forms-with-no-successful-submits

日本語のサイトであると、_mfq のオブジェクトを作成は、下記のようになっています。

var _mfq = _mfq || [];


英語のサイトを見ると、下記のようになります。

window._mfq = window._mfq || [];


windowsオブジェクトは、省略できるということなのですが、上記の挙動というのは全く同じということになるのでしょうか?

よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+2

 変数宣言文

window._mfq = window._mfq || [];

こちらのコードは、このコードが実行されるタイミングで window._mfq のtruthy判定し、値を代入します。

var _mfq = _mfq || [];

こちらのコードも、このコードが実行されるタイミングで _mfq のtruthy判定して値を代入しますが、var による変数の実体化処理が別途走ります。
var の初期化処理は特殊で前方に遡って、undefined で初期化するのです。
var が記述された場所がグローバルコードならグローバルコードの先頭で変数を undefined で初期化し、関数コードなら関数の先頭で変数をundefined で初期化します。

詳しい使い方は下記スレッドの私の回答を読んでみて下さい。

 window キーワード

window キーワードでグローバルオブジェクトを参照できる機能は、HTML Standard によって規定されています。

しかし、全てのJavaScript実装が HTML Standard を実装しているわけではない為、JavaScript 実装によっては window キーワードによってグローバルオブジェクトを参照できません。
そこで、ECMAScript という基本仕様に則り、キーワードを使わずにグローバルオブジェクトを参照する事で、実装依存性を無くすことが出来ます。

<script>
/**
 * このコードは ES6 の module ではないグローバルコードです
 */

'use strict'; // Strict Mode を指定します

/**
 * (1) グローバルコード
 */
var global = this; // グローバルコードにおける this はグローバルオブジェクトを参照します

/**
 * (2) 関数コード1
 */
(function () {
 var global = this; // Function#call で束縛された為、グローバルコードと同じようにグローバルオブジェクトを参照出来ます
}.call(this)); // グローバルコードからグローバルオブジェクトを引き渡します

/**
 * (3) 関数コード2
 */
(function () {
 var global = Function('return this')(); // Function() 内の関数コードはグローバルスコープで実行されます
}());
</script>

 Strict Mode

JavaScript には「Strict Mode」と「非Strict Mode」の二種類の実行形式が存在します。
Strict Mode を指定するには、コード中に "use strict"; を記述します。

<script>  // module ではない
'use strict';
console.log(this);  // Window (グローバルコードでは、this 値はグローバルオブジェクトを参照する)

(function () {
  console.log(this);  // undefined (関数コードでは undefined を参照する)
}());
</script>

非Strict Modeを指定するには、"use strict"; を記述しません。

<script>  // module ではない
'use strict';
console.log(this);  // Window (グローバルコードでは、this 値はグローバルオブジェクトを参照する)

(function () {
  console.log(this);  // Window (関数コードでもグローバルオブジェクトを参照する)
}());
</script>

なお、JavaScript では this 値は関数が実行されたタイミングで決定されるものであり、関数の呼び出し方によっては例外があります。

  • Function#callFunction#applyFunction#bind
  • アロー関数
  • addEventListener の第二引数
  • Array#forEach の第二引数

 module (ECMAScript 6 規定)

ES6 の module を使った場合には、事情が大きく異なります。
module を使う事は質問されているコードを推奨せず、module を使ったコードを推奨する回答となります。
これは前述の私のスタンスと矛盾する為、本スレッドの別の記事で新しく回答しました。

 更新履歴

  • 2017/09/23 23:50 「Strict Mode」「module (ECMAScript 6 規定)」節を追加。「window キーワード」節の文面変更。

Re: gomengo さん

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/09/23 14:41

    関数内で、
    var _mfq = _mfq || [];

    と定義した場合、_mfqはグローバルの変数ということになるのでしょうか?

    キャンセル

  • 2017/09/23 15:25

    実装依存しないグローバルオブジェクトのコードですが、moduleモードでは(1)と(2)が動きません。(最新のChromeまたはSafariで試してください。EdgeおよびFirefoxではフラグを有効にしないとmoduleモードは動作しません。)

    (1) https://jsbin.com/mixitobezu/edit?html,console
    (2) https://jsbin.com/yetifisono/edit?html,console

    下はmoduleモードでも正常に動作します。

    (3) https://jsbin.com/docebayuzu/edit?html,console
    window決め打ち https://jsbin.com/butemofaha/edit?html,console
    core-jsのpolyfill https://jsbin.com/cecokofaba/edit?html,console

    しかし、(3)についてはContent-Security-Policyが設定されている環境ではUncaught EvalError(Chromeの場合)が発生し、同じく動作しません。

    全ての環境で動作することを想定するのであれば、中途半端に自分で書くよりも、core-js等のPolyfillを勧めた方がいいのでは無いでしょうか?

    キャンセル

  • 2017/09/24 00:09

    To: gomengo さん
    関数コードにおいての this は Strict Mode では undefined、非Strict Mode ではグローバルオブジェクトが規定値です。
    ただし、addEventListenerの第二引数におけるイベントハンドラ関数等、this 値は呼び出し側で自由に束縛できるものですので、呼び出し方によっては例外があります。
    親記事に追記しておきました。

    To: raccy さん
    私が意図した「全ての実装で動作することを想定」とは全ての実装で HTML Standard 仕様を実装しているわけではない、という事です。
    window キーワードによってグローバルオブジェクトを参照できるのはブラウザが「7.3 The Window object」を実装しているからです。
    しかし、その仕様を実装していない環境も当然あります。
    これを解決する為には、「ECMAScript の範疇で」グローバルオブジェクトを参照する必要があります。
    そうすれば、ECMAScript を実装している全ての環境で同じように動くことが期待できます。

    moduleモードやContent-Security-Policyにおける影響の問題は実装による問題とは思いません。
    ブラウザは <script></script> 内のグローバルコードにおいて、this でグローバルオブジェクトを参照できますが、<script type="module"> はそうではありません。
    ならば、これは「ユーザがどの方法を選択するか」という設計上の問題といえます(Content-Security-Policyに至ってはECMAScript範囲外の問題なので、レイヤーも違います)。
    「window キーワードによってグローバルオブジェクトを参照できるか」という問題は書き方で解決できるものではないので、実装の問題と私は考えました。
    問題の性質は大きく異なっていると思います。

    > 全ての環境で動作することを想定するのであれば、中途半端に自分で書くよりも、core-js等のPolyfillを勧めた方がいいのでは無いでしょうか?
    はい。moduleに言及する事は、そういう事になりますね。
    ただ、この回答は私の当初の意図とは異なっていて、
    https://teratail.com/questions/87024
    で言及した状況に近いと思っています。
    そういう意見もある事は理解していますが、この回答の中で触れる事ではないと考えています。

    キャンセル

  • 2017/09/24 00:44

    私が危惧していたのは、編集前の回答では「どんな場合でも使える方法」という風に読めてしまったことです。この場合は使えません、この場合だけ使えますという注意事項があれば問題ないと思います。

    キャンセル

+1

グローバル変数としての定義としては同じですね。

function内に記述するのであれば、windowをつけた方が安全かと思います。
下記は参考まで

JavaScriptのグローバル変数はwindowオブジェクトのプロパティ

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+1

 module (ECMAScript 6 規定)

var _mfq = _mfq || [];

この書き方はグローバル変数が衝突したなら、そのまま使い、衝突しなければ配列を生成して返すコードです。
しかし、「そもそも衝突させるべきではない」という考え方も出来ます。

ECMAScript 6 では各種ライブラリの依存関係を解決する為に module が定義されました。
ブラウザにおいては、HTML Standard で定義された <script type="module"> と組み合わせる事で機能します。

/**
 * test.js
 */
export const foo = 1;       // 変数 foo をエクスポート
export const bar = 'bar';   // 変数 bar をエクスポート
<script type="module" src="test.js"></script>
<script type="module">
import {foo} from './test.js';  // test.js の変数 foo をインポート
console.log(foo);  // 1
console.log(this); // undefined (module 内の this 値は undefined)
console.log(bar);  // ReferenceError: bar is not defined (test.js 内の変数 bar はインポートしていない為、参照できない)
</script>

 名前を変えてインポート

別々のmoduleから同じ名前の変数をそのままの状態でインポートすることは出来ません。

<script type="module">
import {foo} from './test1.js';
import {foo} from './test2.js';  // SyntaxError: Identifier 'foo' has already been declared
</script>

別々のmoduleから同じ名前の変数をインポートするには、名前を変えてインポートします。

<script type="module">
import {foo as foo1} from './test1.js';
import {foo as foo2} from './test2.js';
console.log(foo1);
console.log(foo2);
</script>

 モジュール間のグローバルオブジェクトは共有される

モジュール間のグローバルオブジェクトは共有される為、グローバルオブジェクトを介して、データを共有する事が可能です。
が、module を使っているにも関わらず、グローバル変数で衝突させているという点で module のメリットを相殺する好ましくない書き方です。

/**
 * test1.js
 */
var global = Function('return this')(),
    fuga = 'fuga!';;

global.fuga = 'fuga' in global ? global.fuga + fuga : fuga;
/**
 * test2.js
 */
var global = Function('return this')(),
    fuga = 'fuga!fuga!';

global.fuga = 'fuga' in global ? global.fuga + fuga : fuga;
<script type="module" src="test1.js"></script>
<script type="module" src="test2.js"></script>
<script type="module">
console.log(fuga);  // fuga!fuga!fuga!
</script>

 所感

raccyさんのmodule管理における問題点の指摘を受け、書きましたが、前の私の回答とはベクトルの違う回答であった為、新しく回答しました。
私としては、まだこの書き方は実装が整っていないという点で時期早々だと思いますが、最新の機能に触れておくのも悪くはないですね。

Re: gomengo さん

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • JavaScript

    16444questions

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