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

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

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

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

Q&A

2回答

1508閲覧

js IE "" `` 連結

alpacak

総合スコア12

JavaScript

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

0グッド

0クリップ

投稿2019/07/17 19:46

前提・実現したいこと

お世話になります、js初心者です。
jsで簡単なゲームを作成しているのですが、
IEのみゲーム画面が表示されません。

該当のソースコード

// マップデータ var maze = [ [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [3, 0, 0, 0, 0, 0, 0], ] // testlog var test = { position: { player: 0, player: 0 }, }; console.log(test.position.player) // playerはオブジェクト配列にする var player = [0, 0] var bag = 0 var ROWS = 7 var COLS = 7 var EMPTY = 0 var WALL = 1 var PLAYER = 2 var EXIT = 3 var EXIT_READY = 6 var FRAG = 4 var FRAG_COUNT = 1 // ロード window.onload = () => { generateFrag() createBoard() createMap() } var generateFrag = () => { var count = 0 do { var row = Math.floor(Math.random() * ROWS) var col = Math.floor(Math.random() * COLS) if (maze[row][col] === EMPTY && row !== 0 && col !== 0 && row !== ROWS - 1 && col !== COLS - 1) { maze[row][col] = FRAG count++ } } while (count !== FRAG_COUNT) } // ゲームパネル var createBoard = () => { for (var row = 0; row < ROWS; row++) { for (var col = 0; col < COLS; col++) { var block = document.createElement("div") block.id = `id-${col}-${row}` document.querySelector(".board").appendChild(block); } } } var createMap = () => { for (var row = 0; row < ROWS; row++) { for (var col = 0; col < COLS; col++) { var itemClass = '' switch (maze[row][col]) { case PLAYER: itemClass = "player"; break case WALL: itemClass = "wall"; break case PLAYER: itemClass = "human"; break case EXIT: itemClass = "exit"; break case EXIT_READY: itemClass = "exit show"; break default: itemClass = "empty" } var id = `#id-${col}-${row}` document.querySelector(id).className = `block ${itemClass}` } } var id = `#id-${player[1]}-${player[0]}` if (!(bag === FRAG_COUNT && player[1] === COLS - 1 && player[0] === ROWS - 1)) { document.querySelector(id).className = "block player" } }

試したこと

var id = #id-${col}-${row} var id = #id-${player[1]}-${player[0]}`
ここら辺の連結部分の書き方の問題でしょうか。
ご教示頂けますと幸いです。

補足情報(FW/ツールのバージョンなど)

js javascript

ここにより詳細な情報を記載してください。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ご認識の通り,その連結部分が原因です.

``で囲った部分はテンプレート文字列といいIEでは非対応です.
MDN テンプレート文字列
のページ下部から対応状況を確認できます.

テンプレート文字列は便利なのですが,IEにも対応させる場合は通常の文字列結合を利用する必要があります.

JS

1block.id = "id-" + col + "-" + row

投稿2019/07/17 21:05

rcftdbeu

総合スコア167

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

IEだとアロー関数(ES6)も非対応ですよね
対応方法としてはいくつか・・・

  • IEの対応を諦める
  • 古い書き方で書き直す
  • jQueryなど標準化ライブラリでごまかす

ヒアドキュメントについてはIEではバッククォートでは無理です
姑息な手段を使えばそれっぽい処理はできないことはないですが
あまり一般的ではありません。

投稿2019/07/18 00:57

yambejp

総合スコア114829

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問