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

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

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

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

Q&A

解決済

1回答

1496閲覧

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

_._

総合スコア32

JavaScript

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

0グッド

0クリップ

投稿2018/10/11 10:35

実現したいこと

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の中身は省略しています。)

lang

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <noscript></noscript> 9 <!-- https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener --> 10 <script src="Event.js"></script> 11 12 <!-- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map --> 13 <script src="Array.prototype.map.js"></script> 14 15 <!-- insertBefore(foo,bar) => insertBefore(foo,bar||null) --> 16 <script src="hyperapp_mod.js"></script> 17 18 <script src="app.js"></script> 19 </body> 20</html>

lang

1(function() { 2 'use strict' 3 4 //window.console || (window.console = { log: function() {} }) 5 6 var keys = function(obj) { 7 var hasOwnProperty = Object.prototype.hasOwnProperty, result = [], prop 8 for (prop in obj) { 9 if (hasOwnProperty.call(obj, prop)) { 10 result.push(prop) 11 } 12 } 13 return result 14 } 15 16 var h = hyperapp.h 17 var app = hyperapp.app 18 19 var state = { 20 count: 0 21 } 22 23 var actions = { 24 down: function(value) { 25 return function(state) { 26 return { count: state.count - value } 27 } 28 }, 29 up: function(value) { 30 return function(state) { 31 return { count: state.count + value } 32 } 33 } 34 } 35 36 var view = function(state, actions) { 37 console.log('VIEW', keys(state).join(','), keys(actions).join(',')) 38 return h('div', {}, [ 39 h('h1', {}, state.count), 40 h('button', { onclick: function() { actions.down(1) } }, '-'), 41 h('button', { onclick: function() { actions.up(1) } }, '+') 42 ]) 43 } 44 45 //https://github.com/jorgebucaran/hyperapp/issues/466 46 while (document.body.childNodes.length) { 47 document.body.removeChild(document.body.childNodes[ document.body.childNodes.length - 1 ]) 48 } 49 50 app(state, actions, view, document.body) 51})()

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

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

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

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

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

guest

回答1

0

自己解決

トランスパイラの力を借りることにしました。

MSを偲び、ここにIE6対応SPAの作り方を記す

投稿2020/10/11 12:35

_._

総合スコア32

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問