Ginpen.com

Powered by JavaScript and JapaneseSushi

‌
‌

※スマホ察応はしおたせん。

Vue.jsで文字列が空のずき “Mismatching childNodes vs. VNodes” になった。

投皿日時:
カテゎリヌ: JavaScript
タグ:

Vue.jsで、こんな゚ラヌずいうか譊告が出た。

console.error()で &quot:[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content."

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

再珟コヌド

はこんな感じ。

<template>
  <section>
    <p><img />{{text}}</p>
  </section>
</template>

<script>
export default {
  data () {
    return {
      text: '',
    }
  },
}
</script>

たぶん、 <p> の盎䞋には「 <img> 」ず「 {{text}} から成るテキストノヌド」の二぀があるはずなんだけど、文字列が空だずそこにテキストノヌドが甚意されないので、なんか予定ず違うぞヌず怒っおる感じだろうか。

解決策

ずにかくテキストノヌドが存圚しおいれば良いので、空癜文字ずか眮いおおこう。

text: '' を text: ' ' にするずか、同様に <template> の方にスペヌス远加するずか。

䜙癜が嫌なら幅なしのや぀ &zwnj; にしよう。

<template>
  <section>
    <p><img />&zwnj;{{text}}</p>
  </section>
</template>

ずっぎんぱらりのぷう。

GitHub PagesをCloudflareでHTTPS化した埌にサブドメむンを远加する。

投皿日時:
カテゎリヌ: サヌバヌ
タグ: , , ,

ただのメモ。

今回䜜ったもの未完成:

前提

もうこれやっおる状態。

  • https://ginpei.info/ を、GitHub Pagesで䜜成、管理、ホスト
  • CloudflareでHTTPS化、キャッシュ

GitHub偎

  • 普通のGitHub Pagesの甚意
  • CNAME ファむルに clock.ginpei.info ずだけ曞いお gh-pages ブランチに远加

Cloudflare偎

  • 䞊の方の䞀芧から “DNS” を開く
  • DNS Recordsに以䞋の内容で远加
    • CNAME / clock / ginpei.github.io / “Automatic TTL” / ON

おしたい

あずは開くずもう動いた。うっひょう簡単

あんたり詳しくなくお勘でやったら動いたや぀なんでアレだったら教えおください。

ヘッダヌ、フッタヌの固定にposition:sticky䜿うずCSSだけで完結するし良いかも。

投皿日時:
カテゎリヌ: CSS
タグ: ,

ずいうわけで、いたさら初めお䜿いたした。

デモ

フッタヌも远加したよ。

䜿い方

.sticky-header {
  background-color: #fff;
  position: sticky;
  top: 0;
}

position: sticky にしお、䜍眮ず背景色の指定も䜵せお行う。背景色がないず芋えちゃうから。

position: fixed ず違っおサむズ分の䜙癜を自前で甚意する必芁がないのがらくちん。

利甚可胜状況

IE以倖で䜿える。倧䞈倫そうだ。

䞀通りのりェブブラりザで利甚可胜。(Can I useより。)

table 関係が珟行版だずちょっずただアレっぜいけど、今回の目的には関係ない。

ず思いたした

思い぀きなので现かいずこ調べおないや蚱しお。スタック文脈ずか絡んでくるずきっず面倒くさそうな予感がする。

本来は長いコンテンツにたくさんの芋出しがあっお、みたいな堎合に䜿うものだず思うんだけど、単玔に䞊䞋端に固定する目的で䜿うのも悪くないんではないだろうか。だめです

参考

ES6ずES2015に違いはないです。珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 24日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , , ,

珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 24日目

昔はES5ずかES6ずか蚀っおたはずなのに気付いたらES2015ずか呌ばれるようになっおお、なんかマリオが64になっお急に数字が増えたなあみたいなのに近い感芚だったんですが、そんなこずありたせんでしたかそうですか。

抂芁

  • ES6ずES2015は同じもの
  • わかりやすいからES2015ず呌がうぜ
  • ES2015以降は毎幎曎新
  • 正匏名称は “ECMA-262 edition 6” ずかそういうの

ES vs JS

JavaScript (JS) はプログラミング蚀語ですが、その倧本の仕様ずなるのがECMAScript (ES) です。JSはESの䞀皮であり、ESの仕様で定められたものはJSで動きたす。あるいは、動くこずが期埅される。

JSは各ブラりザが環境を甚意しおいたすが、ESの方はEcma Internationalずいう団䜓の䞭のTC39ずいう委員䌚が仕様策定を行っおいたす。

ベンダヌはESの仕様通りにJSの動䜜を実装するこずになりたす。ES偎は、逆にベンダヌの提案ず先行実装から仕様をたずめおる感じです。たぶん。ここらぞん怪しい。　二぀以䞊の実装が存圚するたで正匏な仕様にはなりたせん。

ECMAScriptの仕様

ESも、具䜓的には “ECMA-262” ずいう名前の仕様です。

Ecma International

色々ず仕様策定を行っおる団䜓みたいです。ES以倖にもC#ずか。

E-C-M-A

前はECMA = European Computer Manufacturers Association欧州電子蚈算機工業䌚ずいう団䜓でしたが、なんか囜際化した珟状に合わせお1994幎に名前を倉えたそうです。Windows 95より前だ。

なので “ecma” ずいう英単語が存圚するわけではないですが、かずいっお珟圚は略語ずいうわけでもありたせん。

ES6 vs ES2015

この二者は同じものを指したす。䞀般には埌者の呌び方が掚奚されたす。

ES6

本来はESの第6版のこずです。仕様の正匏名称ずしおは “ECMA-262” で、その “Edition 6” ず。 class やアロヌ関数 => 等、「いたどき」の機胜が倚数远加されたした。

前身のES5が2009幎の発衚で、2011幎のES5.1を挟んで久しぶりに、か぀倧きく曎新されたした。その発衚幎が、2015幎です。

ES2015

ずいうわけで、ES6こず “ECMA-262 Edition 6” のこずです。

りェブ界隈の進みが早いのでもっず现かく、毎幎仕様を策定しおいこうずいう話になりたした。それなら連番はわかりづらいよね、ず。ES7, ES8, ES9, ES10, …)　そこで連番よりも発行幎で、ES6ならES2015ず呌ぶこずが掚奚されるようになりたした。

ES2016, ES2017

それぞれ公開されおいたす。

ES2015に比べお圱が薄いけど、郜床新機胜なりが远加されたす。

幎で呌ぶこずを掚奚

ESの5、5.1、6版の仕様策定を匕っ匵ったAllen Wirfs-Brock氏のブログから。

So, why the year-based designation? The 6th edition of ECMA-262 took a long time to develop, arguably 15 years. As ES6 was approaching publication, TC39 (the Technical Committee within Ecma International that develops the ECMAScript specifications) already knew that it wanted to change its process in a way that enabled yearly maintenance updates. That meant a new edition of ECMA-262 every year with a new edition number. After a few years we would be talking about ES6, ES7, ES8, ES9, ES10, ES11, etc. Those numbers quickly loose any context for people who aren’t deeply involved in the standards development process. Who would know if the current standard ES7, or ES8, or ES9? Was some feature introduced in ES6 or ES7? TC39 couldn’t eliminate the actual edition numbers (standards organizations love their document numbers) but it could change the document title. We decide that TC39 would incorporate the year of release into the documents title and to encourage people to use the year when referring to a specific edition. So, the “newest version of JavaScript” is ECMA-262, Edition 8 and its title is ECMAScript 2017 Language Specification. Some people still refer to it as ES8, but the preferred shorthand name is ECMAScript 2017 or just ES2017.

では、䜕故幎ごずの呌称になるのでしょうか。 ECMA-262の第6版は長い時間がかかりたした。 15幎ですよ。 ES6の公開が近づいおいたすが、その䜜業工皋を倉曎し毎幎曎新するこずが望たれおいるず、TC39 Ecma International内のECMAScript仕様策定の専門委員䌚はわかっおいたした。 そう、毎幎新しいECMA-262、そしお新しい版番号です。 数幎埌、私たちは ES6, ES7, ES8, ES9, ES10, ES11, etc. に぀いお䌚話するこずになりたす。 暙準化䜜業に明るくない方々にずっお、これらの番号はすぐわけがわからないものになっおしたうでしょう。 珟圚の暙準がES7なのかES8なのか、それずもES9なのか、誰が知っおいるずいうのでしょうか。 ある機胜が远加されたのはES6　それずもES7　 TC39は実際の版番号を消し去るこずはできたせんでしたが暙準化組織は文曞番号が奜きなのです、文曞のタむトルを倉えるこずはできたした。 TC39は発行幎を文曞タむトルぞ組み蟌み、たた特定の版ぞ蚀及する堎合はこの幎を䜿うこずを掚奚するこずにしたした。 ですので、「JavaScript最新版」はECMA-262の第8版であり、そのタむトルはECMAScript 2017 Language Specificationずなりたす。 蚳泚: 2017/08/31圓時　 これをES8ず呌ぶ人もいたすが、簡略化する堎合はECMAScript 2017、あるいはただES2017ずするのが良いでしょう。

蚳泚: “edition number” を日本語で「版次」ずいうらしいんだけど、あんたり䞀般的じゃなさそうなので「版番号」ずしたした。いやたあおれが知らないだけかもしらんけど。

そもそもESではなくJSず呌んだ方が

JSはESではありたすが、本圓にES自䜓に぀いおの文脈でなければJSの名前で呌んだ方が良いだろう、ずの提蚀もしおおいでです。前項匕甚箇所の次の段萜。　同感です。

「珟代的なJavaScript」ずいう呌び方

版番号が関係する堎合でも、単玔に新旧で分けるなら、ES2015以前を「叀いJS (legacy JavaScript) 」、以埌を「珟代的JS (modern JavaScript) 」ず呌びたしょう、ず。

ES2015は倧きな倉曎でしたから、そこで分けるのは劥圓だず思いたす。

ただIE 112013幎リリヌスずか察応しなきゃずかっおのはあるず思うんだけど、そこはBabelを䜿う等しお、できるだけ珟代的な曞き方でやっおいきたいっすねヌ。䟿利だもの。

その他

他のもさヌ

぀いでにIE 9ずかIE 11ずかじゃなくお、IE2009ずかIE2013ずか呌びたくない

あずAndroid 4.4じゃなくおAndroid 2013ずか。iOSは  たあいいか。いいか

おしたい

ずいうわけで「珟代的JavaScriptおれおれAdvent Calendar」党24回でした。ここたでお付き合い頂きありがずうございたした。

良いお幎を

でもいく぀か觊れ損ねた話題もあるので、もうちょっずだけ続くんじゃ。既存蚘事も少し曞き足したりしたす。

参考

ゞェネレヌタず自䜜むテレヌタで各皮オブゞェクトもぐヌるぐる。珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 23日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , , , ,

珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 23日目

抂芁

function* で、むテレヌタを返すゞェネレヌタ関数を䜜成できたす。䞭で yield が䜿えたす。

function* createIdGenerator() {
  let currentId = 100;
  while (true) {
    yield currentId++;
  }
}

const iterator = createIdGenerator();
console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().value);

これはオブゞェクトを反埩可胜(むテラブル)にするのに䟿利です。

const obj = {
  *[Symbol.iterator]() {
    const max = 3;
    for (let i = 0; i < max; i++) {
      yield i;
    }
  }
};

for (let item of obj) {
  console.log(item);
}

むテレヌタ

著名なデザむンパタヌンのひず぀です。配列でないオブゞェクトでも、共通のむンタヌフェむスで反埩凊理を行えるようにしたす。

JavaScript (ES2015+) ではたぶん䞀般的な定矩ずは異なりむテレヌタは next() メ゜ッドを持぀オブゞェクトです。具䜓的なむンタヌフェむスは埌述したす。

JavaScriptでのむテレヌタ

むテラブルなオブゞェクトで [Symbol.iterator]() ずいうすごい名前のメ゜ッドを実行するず、むテレヌタを埗られたす。

const iterable = new Set([100, 200, 300]);

// むテレヌタ生成
const it = iterable[Symbol.iterator]();

while (true) {
  // 反埩凊理を進め、珟段階の状態を埗る
  const result = it.next();

  // 繰り返し条件を確認
  if (result.done) {
    break;
  }
  
  // 項目取埗
  const item = result.value;

  console.log(item);
}

Set オブゞェクトはむテラブルなオブゞェクトなので、 [Symbol.iterator]() を実行するずむテレヌタ it を生成しお返しおくれたす。

そのむテレヌタ it は next() メ゜ッドを持ちたす。このメ゜ッド呌び出しを繰り返しお反埩 (iterate) しおいきたす。

next() メ゜ッドは実行するたびに、なんだろ、結果オブゞェクト result を生成しお返したす。結果オブゞェクトっお呌び方で良いかな。 IteratorResult ずいう名前のむンタヌフェむス埌述を満たすオブゞェクトです。

この結果オブゞェクトはたた、二぀のプロパティを持ちたす。 value が反埩途䞭の珟段階の倀で、 done がもう反埩し終えたかが栌玍される真停倀です。

これらを䜿っお配列でも䜕でもぐるぐるできたす。

for-of で䜿う

オブゞェクトがむテラブルである、぀たり前述の各芁玠を満たす堎合、 for-of を䜿っお簡単に反埩凊理を実珟できたす。

const iterable = new Set([100, 200, 300]);

for (let item of iterable) {
  console.log(item);
}

わあ短い。

ゞェネレヌタで生成する

[Symbol.iterator]() をちゃんず自䜜すればどんなオブゞェクトでもむテラブルにできたす。

next() メ゜ッドを自前で実装しおも良いんだけど、面倒なので、ゞェネレヌタ関数ずいうのを䜿っお䜜るず簡単です。

ゞェネレヌタ

function* を䜿っおゞェネレヌタ関数を宣蚀できたす。ゞェネレヌタ関数を実行するずゞェネレヌタオブゞェクトを埗られたす。

function* createGenerator() {
  const values = [100, 200, 300];

  for (let i = 0; i < values.length; i++) {
    const item = values[i];
    yield item;
  }
}

const generator = createGenerator();

ゞェネレヌタオブゞェクトは加えおむテラブルでもあるで for-of で䜿えたす。わヌい。

for (let item of generator) {
  console.log(item);
}

generator[Symbol.iterator]() の結果は元のオブゞェクト generator になりたす。

たた同時にむテレヌタでもあるので next() を持ちたす。コヌドは曞かなくおも良いかね。

yield

さらっず䜿ったけど、ゞェネレヌタ関数の䞭では yield ずいう匏を䜿えたす。この匏は右蟺を value 、たた done: false ずいう蚭定で、 next() で返す IteratorResult オブゞェクトを生成したす。

必ずしも for 文で䜿う必芁はないです。

function* oneTwoThree() {
  yield 1;
  yield 2;
  yield 3;
}

const it = oneTwoThree();

let result;
result = it.next();
console.log(result.value);  // => 1
result = it.next();
console.log(result.value);  // => 2
result = it.next();
console.log(result.value);  // => 3

[Symbol.iterator]() を実装する

いよいよ [Symbol.iterator]() です。 * を付けお、ゞェネレヌタ関数ずいうかゞェネレヌタメ゜ッドになりたす。

const obj = {
  *[Symbol.iterator]() {
    const max = 3;
    for (let i = 0; i < max; i++) {
      yield i;
    }
  }
};

for (let item of obj) {
  console.log(item);
}

他のむテレヌタ生成メ゜ッドを䜜る

obj じゃなくお obj.iterator() のようにメ゜ッドを呌んでやる必芁があるけれど、他の名前でも倧䞈倫。

目的別に䜕通りか甚意しおも良いかもね。

const obj = {
  *iterator() {
    const max = 3;
    for (let i = 0; i < max; i++) {
      yield i;
    }
  }
};

for (let item of obj.iterator()) {
  console.log(item);
}

むテレヌタのむンタヌフェむス

いっぱい出おきたのでたずめ。

  • 反埩可胜(むテラブル)なオブゞェクト … [Symbol.iterator]() をも぀オブゞェクト Iterable 
  • [Symbol.iterator]() … むテレヌタを返すメ゜ッド
  • むテレヌタ … next() をも぀オブゞェクト Iterator 
  • next() … value 、 done を持぀オブゞェクト IteratorResult を返し、内郚状態を進めるメ゜ッド
  • value … 反埩凊理各段階における倀
  • done … 反埩凊理が終了しおいるかどうか

[Symbol.iterator]()

Symbol.iterator ずいうシンボルが、名前ずいうか䜕だろ、識別子になっおるメ゜ッドです。 [] は動的にプロパティ名を決めるや぀です。別皿参照。あずシンボル Symbol に぀いおも。

なんならどこかで Symbol.iterator = 'iterate' ずか定矩されおるず考えおください。

Iterable むンタヌフェむス

オブゞェクトがこのむンタヌフェむスを満たしおいるず、 for-of ずか ... ずかが䜿えたす。

  • [Symbol.iterator]() … むテレヌタオブゞェクトを返す

Iterator むンタヌフェむス

このむンタヌフェむスを満たすオブゞェクトをむテレヌタオブゞェクトず呌びたす。

  • next() … むテレヌタオブゞェクトを返す
  • return() (optional) … むテレヌタオブゞェクトを返す
  • throw() (optional) … むテレヌタオブゞェクトを返す

return() を呌び出すず「もう終了するぞ」ず、 throw() を呌び出すず「なんかおかしいぞ」を、呌び出し先ずなるオブゞェクトに䌝えるこずが、できる、そう、です。単玔に配列みたいな情報を扱う䞊ではいらなさそうだけど、䜕か倖郚から情報を匕っ匵っおくるようなや぀で䜿うずきに䟿利なんだろか。わかんない。

IteratorResult むンタヌフェむス

next() 他のメ゜ッドはこのむンタヌフェむスを満たすオブゞェクトを返す必芁がありたす。

  • done
  • value

分割代入やスプレッド挔算子 ...

これら実はむテラブルオブゞェクトが察象です。配列じゃなくおも自䜜のオブゞェクトでも、 [Symbol.iterator]() を備えおいれば䜿えたす。

function* oneTwoThree() {
  yield 1;
  yield 2;
  yield 3;
}

// 分割代入
const [one, two, three] = oneTwoThree();
console.log(one);
console.log(two);
console.log(three);

// スプレッド挔算子
function say(one, two, three) {
  console.log(one);
  console.log(two);
  console.log(three);
}
say(...oneTwoThree());

ES2018では普通のオブゞェクトも分割代入したりスプレッド挔算子で展開したりできるようになるっぜいんだけど、じゃあ普通のオブゞェクトも党郚むテラブルになるのかな　仕様策定の様子は远っおないので思っただけだけど。

分割代入ず ... の䜿い方は別皿参照。

その他

[Symbol.iterator]() お䜕だよ

なんで普通の名前じゃないんだ Symbol なんだ、 toString() みたいにしなかったんだ。

だいたいむテレヌタはむテラブル

「むテレヌタ」ず「むテラブル」は別むンタヌフェむスなので同時に満たす必芁はないんだけど、内郚で %IteratorPrototype% ずいうむテレヌタ共通のプロトタむプがありたしお、こい぀がむテラブルだったりしたす。

配列ずかのむテレヌタはこのプロトタむプを継承しおいるので、JavaScriptネむティブなむテレヌタはだいたいむテラブルになるっぜい。 TypedArray は専甚のものを持たないが、普通の配列 Array の凊理を利甚しおいる。

ちなみに %IteratorPrototype% の [Symbol.iterator]() は this を返したす。

むテラブルではないむテレヌタ

の䟋。

class MyIterator {
  constructor(values) {
    this.values = values;
    this.index = 0;
  }

  // 自前で実装するぞ
  next() {
    const value = this.values[this.index];
    this.index += 1;
    return {
      value: value,
      done: this.index >= this.values.length,
    };
  }
};

const values = [100, 200, 300];

// むテレヌタずしお利甚
const it = new MyIterator(values);
let result;
result = it.next();
console.log(result.value);

// むテラブルずしお利甚できない
// Exception: TypeError: (new MyIterator(...)) is not iterable
for (let item of new MyIterator(values)) {
  console.log(item);
}

普通のむテレヌタ

Java方面の話で聞いたずきは next() で次に移動し぀぀倀を戻り倀でそのたた埗お、続きがあるかどうかは hasNext() ずいう別のメ゜ッドを䜿うみたいな流れだったず思うんだけど、なんで違うのかしらん。

時代が倉わっおむテレヌタパタヌン自䜓が倉わった

むンタヌフェむス vs プロトコル

ちなみにMDNだずむテレヌタずかで「プロトコル (protocol)」ずいう衚珟が甚いられおいるけれど、仕様曞だず「むンタヌフェむス (interface)」です。たあ同じものでしょ。

たしかSwiftはprotocolずいう衚珟しおたよね。

function ず * の間で改行できる

適圓に空癜文字を眮ける様子。

function
* goo() {
}

async はだめだったのに。

参考

曎新履歎

  • 2017/12/23 TypedArray がむテラブルじゃないみたいな勘違いしおたのを修正