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

タグ: vue

配列の芁玠挿入、眮き換えもsplice()で。Vue.jsでも倧䞈倫。配列ずかおれおれAdvent Calendar2018 – 07日目

カテゎリヌ: JavaScript

LINDORのAdvent Calendar本物の7日目を開けたずころ。
配列ずかおれおれAdvent Calendar2018 – 07日目

削陀を splice() でやれたした。

同じく挿入も splice() を䜿っおやれたす。

const arr = [11, 22, 33];

const index = 1;
const value = 99;
arr.splice(index, 0, value);
console.log(arr); // => [ 11, 99, 22, 33 ]

さらに眮換もできたす。

const arr = [11, 22, 33];

const index = 1;
const value = 99;
arr.splice(index, 1, value);
console.log(arr); // =>[ 11, 99, 33 ]

第2匕数を 0 にするずただ挿入するだけ、 1 だず眮き換えたす。

仕様

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

昚日曞いた通りだけど、 item1, item2, ... を挿入したす。 耇数可胜。

Vue.jsで配列を眮き換え

普通に眮き換えたい堎合は arr[i] = obj すれば十分なんだけど、Vue.jsの data で配列を持っおいる堎合、それは「やっおはいけないこず」です。

splice() でなら、それができたす。

動かない䟋

ボタンを抌すず配列芁玠のひず぀を別のオブゞェクトに眮き換えるようにしたした。

const index = 1;
const item = { text: "REPLACED", done: false };

this.todos[index] = item;

眮換しおも、次の再描画たで反映されない。

動く䟋

続いお splice() を䜿った、動くコヌド。

const index = 1;
const item = { text: "REPLACED", done: false };

this.todos.splice(index, 1, item);

眮換するずすぐ反映される。

詳しくはVue.jsの公匏文曞をご確認くださいたし。

その他の倉曎

配列の芁玠党䜓じゃなくお芁玠のプロパティを倉えるのはセヌフ。

あず配列党䜓を代入しちゃうのもセヌフ。

順序を倉えるなら sort()

splice() で眮き換えおも良いけど、よっぜどの量でなければ sort() しおできあがる配列党䜓をプロパティに蚭定しおやるのが簡単で良いでしょう。

䟋

話をVue.jsからJavaScript党䜓に戻したす。

配列を远加

远加する芁玠は第3匕数だけでなく、第4、第5ずいくらでも䞎えられたす。

配列をたるごず远加する堎合、スプレッド構文 ... で展開しおやりたしょう。

const arr = [11, 22, 33];
const values = [99, 88];

const index = 1;
arr.splice(index, 0, ...values);
console.log(arr); // => [ 11, 99, 88, 22, 33 ]

配列をそのたた眮くず、その配列自䜓が党䜓の配列の芁玠になっちゃいたす。二重配列だ。

怜玢しお眮き換え

findIndex() ず組み合わせたす。

const users = [
  { id: '101', name: 'Alice' },
  { id: '102', name: 'Bob' },
  { id: '103', name: 'Charlie' },
];
const value = { id: '999', name: 'Zack' };

const id = '102';
const index = users.findIndex((v) => v.id === id);

users.splice(index, 1, value);
console.log(users);
// => [ { id: '101', name: 'Alice' },
//      { id: '999', name: 'Zack' },
//      { id: '103', name: 'Charlie' } ]

その他のメ゜ッド

普通に眮き換えるなら [index]

でいいよね。

末尟に远加するなら push()

これはこれでよく䜿う。

末尟に耇数远加するなら concat()

ただし非砎壊で、新しい配列を䜜りたす。

const arr = [11, 22, 33];
const values = [99, 88];

const arr2 = arr.concat(values);
console.log(arr); // => [ 11, 22, 33 ]
console.log(arr2); // => [ 11, 22, 33, 99, 88 ]

values.concat(arr) にすれば先頭に远加したものが出おきたす。

先頭に远加するなら unshift()

各芁玠のプロパティを眮き換えるなら forEach()

うヌん䜕ずいうか、繰り返しながら曎新するだけ。

const users = [
  { id: '101', name: 'Alice', active: true },
  { id: '102', name: 'Bob', active: true },
  { id: '103', name: 'Charlie', active: true },
];

users.forEach((user) => {
  user.active = false;
});

おしたい

関連

参考

CSS transformのmatrix()を䞀瞬で 完 å…š 理 è§£ できるや぀䜜ったよ。

カテゎリヌ: CSS

ずいうわけでお探しの完党理解はこちらです。

スマホでも存分にご理解頂けたす。

芋た目

こんな感じ。

この動画だけでも十分理解できそう。

matrix() ずは

動かしお完党理解しお頂きたしたら、改めおこの関数を玹介したいず思いたす。

(さらに…)

Nuxt 1→2にしたらpug-loaderからpug-plain-loaderに倉わったっぜい。

カテゎリヌ: JavaScript

結論

入れ替えたしょう。

$ yarn remove pug-loader
$ yarn add pug-plain-loader

日蚘

Nuxt.jsのバヌゞョンを1.4.0から2.1.0ぞ䞊げたら、 yarn dev で文句蚀われるようになった。

 Cannot find module './index.vue?vue&type=template&id=2a183b29&scoped=true&lang=pug&' 

゚ラヌ内容が謎すぎる。

諞事情により yarn build を詊したずころ、こっちは分かりやすい゚ラヌが出おきおくれた。

ERROR in ./components/FooBar.vue
Module not found: Error: Can't resolve 'pug-plain-loader' in '/mnt/c/Users/ginpei/projects/sugoi-yatsu'
 @ ./components/FooBar.vue 1:0-105 10:2-8 11:2-17
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/AnalogClock.vue?vue&type=script&lang=js&
...

リリヌスノヌトの移行ガむドには茉っおないけど、プリプロセッサを䜿うにはの最埌の方にこうある。

これらのプリプロセッサを䜿うために Webpack のロヌダヌをむンストヌルする必芁がありたす。

npm install --save-dev pug@2.0.3 pug-plain-loader coffeescript coffee-loader node-sass sass-loader

远っかけおないのでい぀倉わったのか、なんで倉わったのか知らないんだけど、 pug-loader ではないらしい。

詊しおみたら1系最新の1.4.2では pug-loader で動いお、2系最初の2.0.0では pug-plain-loader が必芁だった。ぞヌ。

ずいうわけで冒頭の結論の通り入れ替えお動きたした。めでたし、めでたし。

Nuxt.js他で時蚈アプリ (PWA) を䜜っおみたよ。

カテゎリヌ: JavaScript

ええいや時蚈っお  ずいう感じはあるんだけど、ずにかくNuxt.jsを䜿っおみたかったのです。あず自分では䜿う。

できあがったもの

アナログ時蚈が巊に、デゞタル時蚈が右に。あずポモドヌロタむマヌ付き。

䜿った技術

ラむブラリ、フレヌムワヌク

ツヌル

りェブ暙準API

サヌビス

技術系感想

Nuxt.js

この蚘事の圱響。

なんか久しぶりに「動くものがさくさく䜜れる」ずいう快感を味わうこずができたフレヌムワヌク。Ruby on Railsにこなれおきた頃の快感を思い出したした。

vue-cli䜿っお入れたんだけど、最初からディレクトリずか開発甚サヌバヌずか、各皮ビルドずか即時郚分曎新 (HMR) ずか、远加のあれこれなしに曞くだけですぐ動く。黒魔術的な感じなのもRailsっぜい。いや別にRailsず比べるものじゃないんだけど。

今回は静的HTML (SSR) でやったけど、そのうち動的なや぀もやっおみたい。Firebaseでホストすればできるず聞いたような気がする 未調査。別に # なURLでも構わないけども。

vue-cilで入れるや぀のコマンド公匏ドキュメントより:

$ npx vue-cli init nuxt-community/starter-template my-project

Nuxt + PWA

こい぀を yarn add するだけでわりずすぐ動いた。お手軜䟿利。これを導入するだけで甚が枈んでしたったので、ServiceWorkerも自前では曞いおないです。

ドキュメントはあんたり芪切じゃない感じがする。ただ䜿い方ずかがあんたりわかっおない。

Visual Studio Code

ずっずVimを䜿っおきたんだけど最近はNeoVim、ちょっず人に教えるのにこれはあれだよなヌず思っお「普通の゚ディタヌ」ずしお䜿い始めおみたした。あらでも良いじゃない。

スクリヌンショット。公匏サむトから。

埌発なうえに開発䜓制が盀石なだけあっお、さすがに出来が良い。各皮OSに察応しおいる点、むンストヌルしおすぐ䜿える点、プラグむンが豊富か぀導入や管理も楜な点、日本語察応しおいる点から、今埌は人様にお勧めしおいこうかなず思っおおりたす。

最初に導入しおほしいプラグむン:

  • Code Spell Checker
  • EditorConfig
  • ESLintJS系のひず向け

ただ、スクロヌルがなかなかちょっず。これはCodeじゃなくおたぶんElectron for Windowsの問題で、Slack.exeなんかでも起こる。どうも onscroll で䜕かやっおるずうたくスクロヌルが動かなくなるみたい。詳现未調査だけど、たしか自分が䜜ったアプリだずそんな感じだった。たあだいたいの人はMacだから問題ないね  。

あずVimプラグむンはキヌ操䜜が衝突するんで、案の定アレでした。

CSS Grid

䜕床か䜿ったこずあったかな。気が぀けば䞀通りのブラりザサポヌトが揃っおいたので。

CSS Gridは党おのモダンブラりザで動䜜する。画像はgrid-templateプロパティの堎合。

今回耇雑なレむアりトをしおはいないけれども、別にそんじょそこらの现かいずころでも割ず気軜に䜿えるので、今埌はがしがし䜿っお行きたい。

今回䜿ったのは右偎半分。”T”の字に区切っおたす。

GitHub Pages + Cloudflare

今回は党郚静的ファむルなので、GitHub Pagesで公開しおCloudflareでhttps化。

これも簡単にできお楜だったので、今埌は同じようにサブドメむンにどんどん生やしおいく感じで色々䜜っおいこうかなず思いたした。

䜜業内容はこれ↓。

yarn

普段はnpmの方を䜿っおいるんだけど、今回はなんずなくこっちに。むンストヌルが早いずかは聞いおるけれども、うヌん特に䞍満はないけど利点を感じるほどでもなかった。npmも今はロックファむルあるし、普通にむンストヌルしたら蚘録されるしなあ。

アプリの玹介

時蚈です。

ポモドヌロのタむマヌ付きです。

おしたい

楜しかった。

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>

ずっぎんぱらりのぷう。