javascriptのコード
-
JAVASCRIPT PWAでキャッシュを消して強制アップデートをする方法window.navigator.serviceWorker.getRegistrations() .then(registrations => { for(let registration of registrations) { registration.unregister(); } }); window.location.reload(true);
-
JAVASCRIPT Vue.jsでCSSスタイルをHTMLヘッダーのインライン化する設定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 Gitlab CI/CD/PagesでVue.jsアプリをビルド&デプロイする設定ファイル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 Vue.jsでvue.config.jsからページタイトルを設定するmodule.exports = { pages: { index: { entry: 'src/main.js', // 必須パラメータ title: 'ページタイトル', } } }
-
JAVASCRIPT Dexie.jsでテーブルを作り直したい時の対応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 Vue.jsの子コンポーネントに簡単にclassを付与する方法// 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 Routerで受けるパラメータの規定値を設定して値を制限する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 画像プロキシ・camoのdigestコードを生成してURLを返すスクリプト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 Javascriptで連想配列をPHPのforeachっぽい書き方でループを回すfor(let [key, val] of Object.entries(testObj)){ this[key] = val }
-
JAVASCRIPT Vue.jsのnameにマッチしたコンポーネントをkeep-aliveする// 以下router-viewするコンポーネントの設定 <keep-alive :include="/List/" :max="20"> <router-view/> </keep-alive> // 以下キャッシュさせるコンポーネント側の設定 <script> export default { name: "TopList", // ここにマッチする } </script>
-
JAVASCRIPT Vue.jsのmethodでsetInterval、setTimeoutを使う場合の注意点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のSPAでページ遷移時にEventListenerを登録・解除するexport default { beforeMount () { window.addEventListener('scroll', this.scrollHandler); }, beforeDestroy () { window.removeEventListener('scroll', this.scrollHandler); }, }
-
JAVASCRIPT v-forで要素の連番をつける<template> <div v-for="data in List" :key="data.page" class="list" :id="'page-' + data.page"> 何かの表示 </div> <template>
-
JAVASCRIPT vue headでHTMLヘッダにlink relを動的に追加・削除・変更するdata() { return { pageTotal: 0, pageNumber: 1, }; }, computed: { getRel: function() { let rel = [] if(this.pageNumber !== 1){ const prev = { rel: 'prev', id: 'rel-prev'} prev.href = this.$route.path + '?page=' + (parseInt(this.pageNumber) - 1) rel.push(prev) } if(parseInt(this.pageNumber) < parseInt(this.pageTotal)){ const next = { rel: 'next', id: 'rel-next'} next.href = this.$route.path + '?page=' + (parseInt(this.pageNumber) + 1) rel.push(next) } return rel }, }, head: { link: function () { return this.getRel }, },
-
JAVASCRIPT Vue.jsのフォームでsubmitをさせないでページ遷移させる<form @submit.prevent="doSearch"> <label for="search-txt">検索</label> <input type="text" name="key" placeholder="検索する" id="search-txt"> </form>
-
JAVASCRIPT フォームのinputでVuexのstoreデータをv-modelで使ってリアルタイムで変更する<input type="text" name="key" placeholder="キーワードで探す" v-model="keyword"> . . // 省略 . computed: { keyword: { get () { return this.$store.state.getKeyword }, set (value) { this.$store.commit('setKeyWord', value) } } },
-
JAVASCRIPT GoogleっぽいページャーのロジックgetPaginate: function() { let pages = [] // 最大ページ数から1引いた半分の数値をstartとendにセットする let start = parseInt(this.page) - (parseInt(this.pageMax - 1)/2); let end = parseInt(this.page) + (parseInt(this.pageMax - 1)/2); // startが1未満だった時はstartを1にしてendを最大ページ数にする if (start <= 0) { end = this.pageMax start = 1 } // endがpageTotal以上だった時はendをpageTotalにして // startを合計ページから最大ページ数-1個分戻った値にする if(this.pageTotal <= end){ end = this.pageTotal start = parseInt(this.pageTotal) - parseInt(this.pageMax - 1) } // ループしてpagesにページ番号を挿入する for(let i =start; i<=end; i++){ pages.push(i) } return pages },
-
JAVASCRIPT Vue Routerで、ネストした子ルートに親のdataを渡す<template> <div> <router-view v-bind:hoge="fuga"/> </div> </template> <script> export default { data() { return { fuga: {1: 'apple', 2: 'lemon'} } } } </script>
-
JAVASCRIPT [Vue.js] ネストしたRouteで、親ルート以下の場合activeクラスを付与する<template> <ul> <li v-for="page in pages"> <router-link :to="page.route" v-bind:exact="page.exact"> <span>{{page.title}}</span> </router-link> </li> </ul> </template> <script> export default { data() { return { pages: { page1: { route: {name: 'ParentChild1'}}, title: '子ページ', exact: false, }, page2: { route: {name: 'Parent'}}, title: '親ページ', exact: true, // trueじゃないと、子ページルート時にもactiveになる }, page3: { route: {name: 'ParentChild2'}}, title: '子ページ2', //このページ内でさらに子子ルートをネストしている exact: false, } } } } } </script> <style> .router-link-active{ } </style>
-
JAVASCRIPT Vue.js + Vuexで自サイトにHistoryがあるかを判定する. . . router.afterEach((to) =>{ if(store.getters.pageCount < 1){ store.commit('addPageCount') }else{ store.commit('setHasHistory', true) } })
javascriptに関するノート
-
Cloudflare Workerで価格コムライクなリダイレクト(扉)ページを完全無料で作る -
AMP Scriptでamp-script-srcのハッシュに対応する -
関数型コンポーネントで呼び出せる、よく使うAPIまとめ -
PWAアプリをOSのシェアダイアログの一覧に登録させてデータをシェアする方法 -
AMPページでWeb Share APIを呼び出す方法 -
CloudFlare WorkersでAPI情報を秘匿するProxyを建てる -
Vue.jsでCSSファイルをindex.htmlにインラインCSSとして取り込む方法 -
Vue.jsアプリの初期ロードを高速化するためにやったこと -
JavaScriptのfetch API&DOM Parserで外部HTMLを解析する -
Vue.js PWAで、勝手にheadに挿入されるiconのリンク先を変更する方法 -
Vue.jsのMixinはコーポネントをまたいだ共通変数(設定)に使うと便利 -
Vue.jsアプリでAPIのCORSの壁を越える方法 -
Vue routerでルート変更の度に、inputで開いているメニューを閉じる方法 -
AMPページでページシェア用に任意のURLをコピーするボタンを実装する -
Node.jsでGoogle Cloud Storageをセキュアに操作する -
Netlify CMSのeditorial_workflowで間違ってsave済みの編集画面を消してしまった時の対応 -
Dexie.jsでよく使うコマンドまとめ -
Vue.jsでIndexedDBとプラグイン「Dexie」で楽々クライアントデータベースを作成する -
Vue.jsで使えるブラウザストレージを調べた -
多言語SPAサイトでPWA(Service Worker)を使う時はファイルパスに注意 -
Herokuで「xxx has unmet peer dependency yyy」というエラーが起きた時の対応 -
GraphQLのAPIをNode.js + Express + MySQLで試してみた -
SSRは必要?Javascriptで構築したSPAサイトのSEOを考える -
Vue Routerで複数ルートを一つのルートにまとめて制御する -
PWAアプリをホーム画面に追加した時のリクエストヘッダのオリジンを検証 -
Herokuでワンクリックでcamoの画像HTTPSプロキシを立ててnode.jsアプリから呼び出す -
Vue.jsのSPAでPreFetchを使ってコンテンツを先読みして高速化する -
Vue.js + VuexでステートをブラウザのLocalStorageに保存・復元して永続管理する -
Vue.js + Vuexでkeep-aliveなコンポーネントに戻った時にstateを更新する方法 -
Vue.jsのSPAで、メンテナンスページを出す -
Vue.jsで作ったSPAがiOS Safariでクラッシュ多発した原因がCSSのトランジションだった話 -
Vue.jsで関数型コンポーネントの中で@clickでmethodを実行する -
Vue.jsでトランジションの間にページがスクロールしちゃう問題 -
Vue.jsで、入れ子になったコンポーネントの読み込みの動きを確認してみた -
Vue.js + Firebase AuthでログインsignInWithRedirectでログインフローを作る -
node.jsのExpressでCloudflareのキャッシュを効かせる -
Vue.jsでlazysizesを使って画像遅延ロードを実装する -
Vue Routerの導入と基本的な使い方 -
Vue.jsのテンプレート挙動まとめ -
Vue.jsで、「Component template should contain exactly one root element.」エラーが出た時の原因と対応