JAVASCRIPT

Javascriptのコード

import { createApp } from 'vue'
import App from './App.vue'
import dayjs from 'dayjs';

const app = createApp(App);
app.config.globalProperties.$dayjs = dayjs
app.mount('#app')

JAVASCRIPT Vue.js 3でdayjsをグローバルに組み込む方法 Koji Kadoma

import { createApp } from 'vue'
import App from './App.vue'
import routes from './routes'
import { store } from './stores/'

const app = createApp(App);
app.use(routes);
app.use(store);
app.mount('#app')

JAVASCRIPT Vue.js 3でのmain.jsの書き方 Koji Kadoma

<template>
  <p id="exscript">
    <ins class="banner"></ins>
  </p>
</template>
<script>
  export default {
    mounted() {
      let scriptEl = document.createElement('script')
      scriptEl.setAttribute('src', 'スクリプトのURL')
      document.getElementById('exscript').appendChild(scriptEl)
    }
  }
</script>

JAVASCRIPT Vue.jsのコンポーネントで外部scriptをロードする方法 Koji Kadoma

{
  "name": "hoge",
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome dev",
    "lint": "vue-cli-service lint",
    "deploy": "gridsome build && netlify deploy --dir=dist/ -p"
  }
}

JAVASCRIPT Gridsomeコマンドを短くして使う方法 Koji Kadoma

<template>
  // OK
  <p v-if="!$route.params.page">1〜{{perPage}}件</p>

  // NG
  <p v-if="$route.params.page === null">1〜{{perPage}}件</p>

  // NG
  <p v-if="$route.params.page === 'undefined'">1〜{{perPage}}件</p>
</template>

JAVASCRIPT Vue.jsのテンプレート内でundefinedを判定する方法 Koji Kadoma

plugins: [
  {
    use: 'gridsome-plugin-matomo',
    options: {
      host: 'matomoのアドレス', // https:から書くこと
      siteId: サイトID
    }
  }
]

JAVASCRIPT Gridosomeに秒殺でmatomo analyticsを組み込む Koji Kadoma

export default function (Vue, { router, head, isClient }) {
  // 省略

  const gIndex = head.meta.findIndex(e => e.name === 'generator')
  if (gIndex !== -1) head.meta.splice(gIndex, 1)
}

JAVASCRIPT Gridosomeでジェネレータのmetaタグを削除する方法 Koji Kadoma

```
yarn add @gridsome/transformer-remark
```
JAVASCRIPT Gridosomeで「No transformer for 'text/markdown' is installed.」と出た時の対応 Koji Kadoma

window.navigator.serviceWorker.getRegistrations()
.then(registrations => {
  for(let registration of registrations) {
    registration.unregister();
  }
});
window.location.reload(true);

JAVASCRIPT PWAでキャッシュを消して強制アップデートをする方法 Koji Kadoma

module.exports = {    
  chainWebpack: config => {
    config
      .plugin('html-inline-source')
      .use(require('html-webpack-inline-source-plugin'))
    config.plugin('html').tap(args => {
      args[0].inlineSource = '^(/css/.+\\.css)'
      return args
    })
  }
}

JAVASCRIPT Vue.jsでCSSスタイルをHTMLヘッダーのインライン化する設定 Koji Kadoma

image: node:latest

pages:
  stage: deploy
  only:
    - master
  before_script:
    - 'yarn config set cache-folder .yarn'
    - 'yarn install'
  script:
    - 'yarn build'
    - 'mv public public_org && mv dist public'
  artifacts:
    paths:
      - public

JAVASCRIPT Gitlab CI/CD/PagesでVue.jsアプリをビルド&デプロイする設定ファイル Koji Kadoma

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js', // 必須パラメータ
      title: 'ページタイトル',
    }
  }
}

JAVASCRIPT Vue.jsでvue.config.jsからページタイトルを設定する C0d3man52

import Dexie from 'dexie';

const db = new Dexie('testDB');

async noteInit(){
  await db.delete();
  await db.version(1).stores({
    notes: 'fileName, noteTxt',
  });
  await db.open()
},

JAVASCRIPT Dexie.jsでテーブルを作り直したい時の対応 Koji Kadoma

// page.vue (呼び出し元)
<Btn :to="'/'" :className="{active: true}">実行する！</btn>

// btn.vue (受け取り側)
<template>
  <router-link class="btn" :class="className" :to="to"><slot></slot></router-link>
</template>

JAVASCRIPT Vue.jsの子コンポーネントに簡単にclassを付与する方法 Koji Kadoma

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: "/index.html",
      name: "index",
      redirect: '/',
    },
    {
      path: "/",
      name: "Home",
      component: () => import( './views/Home/Index.vue'),
    },
    {
      path: "/:categories(code|note|author)",
      name: "CategoryTop",
      component: () => import( './views/Categories/Detail.vue'),
    }
  ]
})

JAVASCRIPT Vue Routerで受けるパラメータの規定値を設定して値を制限する C0d3man52

buildImgProxyUrl: function(url){
  const crypto = require('crypto');
  const key = 'CAMO_KEY'; // 自分のものに置き換える
  const hmac = crypto.createHmac('sha1', key);
  const convUrl = hmac.update(url);
  const digest = hmac.digest('hex')
  const result = 'サーバーのURL' + digest + '?url=' + encodeURIComponent(url)  // 自分のものに置き換える
  return result;
}

JAVASCRIPT 画像プロキシ・camoのdigestコードを生成してURLを返すスクリプト Koji Kadoma

```
for(let [key, val] of Object.entries(testObj)){
  this[key] = val
}
```
JAVASCRIPT Javascriptで連想配列をPHPのforeachっぽい書き方でループを回す Koji Kadoma

// 以下router-viewするコンポーネントの設定
<keep-alive :include="/List/" :max="20">
  <router-view/>
</keep-alive>

// 以下キャッシュさせるコンポーネント側の設定
<script>
export default {
  name: "TopList", // ここにマッチする
}
</script>

JAVASCRIPT Vue.jsのnameにマッチしたコンポーネントをkeep-aliveする Koji Kadoma

methods: {
  someMethod(){
    setInterval(function () {
    console.log('30秒毎に処理')
      setTimeout(
        function() {
          console.log('5秒後に処理')
          setTimeout(
            function() {
              console.log('4秒後に処理')
            }.bind(this),
            4000
          );
        }.bind(this),
        5000
      );
    }.bind(this), 30000)
  },

JAVASCRIPT Vue.jsのmethodでsetInterval、setTimeoutを使う場合の注意点 Koji Kadoma

export default {
  beforeMount () {
    window.addEventListener('scroll', this.scrollHandler);
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.scrollHandler);
  },
}

JAVASCRIPT Vue.jsのSPAでページ遷移時にEventListenerを登録・解除する Koji Kadoma

Javascriptのコード

Javascriptに関するノート