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

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

ただいまの
回答率

89.98%

Hyperapp V1(1.x)をIE8でも動くようにしたい

受付中

回答 0

投稿

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

_._

score 9

実現したいこと

Hyperapp V1(1.x)
https://github.com/jorgebucaran/hyperapp
をIE8でも動くようにしたいです。

マイナーなライブラリ、終わったブラウザですがよろしくおねがいします。

調べたこと・試したこと

addEventListenerremoveEventListenerが使われているので、
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
に載っているポリフィルを読み込みました。

[].mapが使われているので
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
に載っているポリフィルを読み込みました。
(実環境ではmap以外も使うのでes5-shim、es5-shamを読み込む予定です。)

https://github.com/jorgebucaran/hyperapp/issues/466
を参考に、insertBeforeで出るエラーは
二箇所あるinsertBefore(foo,bar)insertBefore(foo,bar||null)と書き換えてエラーを出なくしました。
また、removeChildで出るエラーは
app関数を呼ぶ前にbody要素の子要素を削除してエラーを出なくしました。

発生している問題

h関数やapp関数は動くようになったのでbutton要素は表示されるようになりました。
が、view関数に渡されるstateactionsが空のオブジェクト「{}」になっているようで
クリックするとactions.downactions.up関数がなく「Object doesn't support property or method」とエラーが出ます。

hyperapp.jsファイルを大規模に書き換えることなくIE8に対応するにはどうすればいいですか?
ポリフィル等、何らかのコードを読み込むだけで対応できるのならそのほうがうれしいです。

テストコード
https://glitch.com/edit/#!/juniper-turnover

テスト結果
https://juniper-turnover.glitch.me/

コードの一部(ポリフィルや書き換え後のhyperapp.jsの中身は省略しています。)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <noscript></noscript>
    <!-- https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener -->
    <script src="Event.js"></script>

    <!-- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map -->
    <script src="Array.prototype.map.js"></script>

    <!-- insertBefore(foo,bar) => insertBefore(foo,bar||null) -->
    <script src="hyperapp_mod.js"></script>

    <script src="app.js"></script>
  </body>
</html>
(function() {
  'use strict'

  //window.console || (window.console = { log: function() {} })

  var keys = function(obj) {
    var hasOwnProperty = Object.prototype.hasOwnProperty, result = [], prop
    for (prop in obj) {
      if (hasOwnProperty.call(obj, prop)) {
        result.push(prop)
      }
    }
    return result
  }

  var h = hyperapp.h
  var app = hyperapp.app

  var state = {
    count: 0
  }

  var actions = {
    down: function(value) {
      return function(state) {
        return { count: state.count - value }
      }
    },
    up: function(value) {
      return function(state) {
        return { count: state.count + value }
      }
    }
  }

  var view = function(state, actions) {
    console.log('VIEW', keys(state).join(','), keys(actions).join(','))
    return h('div', {}, [
      h('h1', {}, state.count),
      h('button', { onclick: function() { actions.down(1) } }, '-'),
      h('button', { onclick: function() { actions.up(1) } }, '+')
    ])
  }

  //https://github.com/jorgebucaran/hyperapp/issues/466
  while (document.body.childNodes.length) {
    document.body.removeChild(document.body.childNodes[ document.body.childNodes.length - 1 ])
  }

  app(state, actions, view, document.body)
})()


 

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

まだ回答がついていません

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

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