Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

JSDOMからピンクを探せ!!

More than 1 year has passed since last update.

本記事はOPENLOGI AdventCalendar 15日目の記事です。

問題提起

JSDOMの中で ピンク という色はどういう扱いを受けているか知っていますか?


colorのピンクはjsdomの中だとレンダーされなく、存在が消されています!
と思っていたのですが実装が変わったみたいです。
ピンクはちゃんとレンダーされます。
答えだけ知りたいって方はこちらをクリックで :pray:

Vue.jsのコード例ですが触ったことないひともなんとなくわかるかと思う簡単な例にしてます。。
それでは実際にコードを追ってみましょう。!!!

実コードみせる

ブラウザ編

こちらのコードを実際にWeb上でレンダーするとどうなるか見ていきたいと思います。

Greeting.vue

<template>
  <div>
    color: <span :style="{ color: color }">{{ color }}</span>
  </div>
</template>

<script>
export default {
  name: "Greeting",
  props: {
    color: {
      type: String,
      default: "blue"
    }
  }
};
</script>

吐き出されるHTML

<div>color: <span style="color: blue;">blue</span></div>

画面で見るとこんな感じ

スクリーンショット 2018-12-18 23.36.40.png

CodeSandboxで実際に触ってみる場合はこちら。
Edit Vue Template

node.js編

((今年の八月くらいまでは))例えばVue-test-utilsとかブラウザに依存しない環境で

<Greeting :color="pink">
をレンダーすると
<div>color: <span style>pink</span></div>
ってなりました。

要するにピンクがスタイルとして認識されてなかったです。

仮想DOMのなかでどういう実装になっているか

JSDOMのなかでのカラーレンダリングとかはchad3814/CSSStyleDeclarationというライブラリに依存していました。

そのなかの ここらへん

    case 'maroon':
    case 'red':
    case 'orange':
    case 'yellow':
    case 'olive':
    case 'purple':
    case 'fuchsia':
    case 'white':
    case 'lime':
    case 'green':
    case 'navy':
    case 'blue':
    case 'aqua':
    case 'teal':
    case 'black':
    case 'silver':
    case 'gray':

この色しか使えなかったのです。ピンクはありませんね。もしピンクをどうしてもVue-test-utilsのテストで使いたいならこのライブラリをフォークして cace pink を追加すると大丈夫な仕様になっていました。

このあたりにとても詳しくかかれていますが、「JSDOMはpinkプロパティをセットできねーぜ」ってイシューが建てられていました。

  • JSDOM doesn't retrieve the "*style.backgroundColor = 'pink'" property set on a table row #1965

書き換えてみる

node_modules/からCSSStyleDeclarationの部分を書き換えるとレンダリングされました。

jsdomのイシュー読んでみた

このあたりのイシューを読んでみた

We don't support getting the style property as JS properties on style for now. You would have to use tr.style.getPropertyValue(). I believe @Zirro is working on a rewrite of the entire CSSOM support in jsdom, though, which should bring support for this feature.

ZirroさんのJSDOMのCSS部分の書き換えが終わり無事にピンクが使えるようになりました。

終わりに

今回「JSDOMだとピンクが使えないよ!」って話を書こうとしたらまさかのすでに対応済みでかなり焦りました。内容の薄い感じになりましたが、ライブラリの実装とかイシューとか少しおってみたので楽しかったです。

ykhirao
Web Developer For 4 years. PHP/Laravel && (React OR Vue.js)
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away