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

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

ただいまの
回答率

90.46%

  • JavaScript

    21082questions

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

javascriptのObject.valuesをie11で使えるようにしたい(対応しているpolyfillが知りたい)

解決済

回答 5

投稿 編集

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

holic

score 106

前提・実現したいこと

javascriptの「Object.values」大変便利で活用させていただいております。
ie11に対応するため普段はwebpack環境でbabelをするのですが、
訳あってトランスパイルなし環境で実装しなくてはならない状況です、

出来ましたら書き上げたコードを変更したくないので
polyfillを付与させるだけで解決したいというのが願いです。

以下にソースを載せます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="aaa">aaa</div>
    <div id="bbb">bbb</div>
    <div id="ccc">ccc</div>

    <script>

      slugs= {
        osaka: { // 大阪
          shop_id: 108,
          content_code: "os",
        },
        yokohama: { // 横浜
          shop_id: 101,
          content_code: "windows",
        },
        sapporo: { // 札幌
          shop_id: 97,
          content_code: "windows",
        },
        nagoya: { // 名古屋
          shop_id: 93,
          content_code: "windows",
        },
        kagawa: { // 香川
          shop_id: 113,
          content_code: "os",
        },
      }

    var valueFirst = Object.values(slugs)[0]
    var keyFirst = Object.keys(slugs)[0]

    //console.log(valueFirst)
    //console.log(keyFirst)

    document.getElementById("aaa").innerText = valueFirst.shop_id
    document.getElementById("bbb").innerText = valueFirst.content_code
    document.getElementById("ccc").innerText = keyFirst
    </script>

</body>
</html>

お手数ではございますが、
ご教示いただけましたら幸いでございます。
よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2019/01/31 10:24

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 5

+5

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/01/31 10:50

    https://github.com/tc39/proposal-object-values-entries
    tc39のそれを参照してもいいかもしれませんね。

    キャンセル

  • 2019/01/31 13:43

    x_x様
    ご返信ありがとうございます。

    キャンセル

checkベストアンサー

+4

IE11の場合、もとからObject.keysは利用可能です。それを使ってObject.valuesを作るのが手っ取り早いです。

if(!Object.values) {
  Object.values = function(obj) {
    // 本来は、「オブジェクトでなかった場合」の処理が入るけど、簡易的なものなので省略
    return Object.keys(obj).map(function(key) { return obj[key]; });
  }
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/01/31 11:45

    なお、(実用上困ることはほぼないかと思いますが)IE11のObject.keys()へオブジェクト以外を渡すとTypeErrorになるという、モダンブラウザとは違う挙動が起きます。

    https://qiita.com/jkr_2255/items/7e501dff48bea16682e8

    キャンセル

  • 2019/01/31 13:41

    maisumakun様
    ご返信ありがとうございます、
    大変に勉強になりました。

    キャンセル

+2

オフラインでないのなら Polyfill.io を使うのが一番手っ取り早いかと思います。

Chrome などの Polyfill が必要ないブラウザでアクセスしたときには空ファイルを、IE11 などの Polyfill が必要なブラウザでアクセスしたときには Polyfill が書かれたファイルが読み込まれる仕組みになっています。

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=Object.keys%2CObject.values"></script>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/01/31 13:41

    yhg様
    ご返信ありがとうございます、
    このような便利なサービスも有るのですね、
    ご参考にさせていただきます。

    キャンセル

+1

Object.keysはIE対応してますよね?
valuesについては無理やり書けばこんな感じでも行けそうです

<script>
if(!Object.prototype.values){
  Object.prototype.values=function(x){
    var ret=[];
    for(var i in x){
      if(i!=="values") ret.push(x[i]);
    }
    return ret;
  };
}
var slugs= {
osaka: { // 大阪
shop_id: 108,
content_code: "os",
},
yokohama: { // 横浜
shop_id: 101,
content_code: "windows",
},
sapporo: { // 札幌
shop_id: 97,
content_code: "windows",
},
nagoya: { // 名古屋
shop_id: 93,
content_code: "windows",
},
kagawa: { // 香川
shop_id: 113,
content_code: "os",
},
}
var valueFirst = Object.values(slugs)[0];
console.log(valueFirst);
var keyFirst = Object.keys(slugs)[0];
console.log(keyFirst);
</script>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/01/31 11:36

    Object.prototype.valuesではなく、Object.values(Object経由でしか使えない)です。

    キャンセル

  • 2019/01/31 12:01

    そういやプロトタイプメソッドじゃないですね。
    プロトタイプ拡張するならこっちの方が良さそうな気もしますが
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

    キャンセル

  • 2019/01/31 12:17

    たしかに・・・(汗)
    ご指摘ありがとうございました

    キャンセル

  • 2019/01/31 12:50

    余談ですが、Array.prototype.values() はあります。
    Array.prototype.values() はイテレータを返し、Object.values() は配列を返します。

    キャンセル

  • 2019/01/31 13:43

    yambejp様
    ご返信ありがとうございます、
    こちらの記述も今後の参考にさせていただきます。

    キャンセル

0

たくさんの方から回答頂きまして大変恐縮です。
わたしもまずはMDN docsにたどり着いたのですが、
そこでのpolyfillの書き方がイマイチわからなかったのでこちらに投稿させていただきました。

maisumakun様やyambejp様の示した頂いたような記述をしたかったのです。
ご意見ありがとうございます。

IE11の場合「Object.keys」は利用可能とのご意見ありがとうございます。
maisumakun様をベストアンサーとさせていただきます。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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

  • JavaScript

    21082questions

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