エラーの発生契機 解消方法1 解消方法2 エラーの発生契機 エラーの種類は以下 Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (108)node.jsのバージョンアップで発生するエラーになると思います。 …

vue-slickを使用した場合のエラー エラーの解消法 解消法1 解消法2 Nuxtでは同様のエラーが発生するプラグインが多い vue-slickを使用した場合のエラー 複数画像のスライド表示を簡単に実装できるJavascriptのプラグインであるslick.js。 これをVueやNuxtに…

Vue.jsとNuxt.jsのrouterの違い Nuxt.jsでのルーティングは便利だけどデメリットも どうやってNuxtでルーティングをカスタマイズする？ metaの設定は？ Vue.jsとNuxt.jsのrouterの違い Vue.jsでは、ルーティングを設定する際にrouter/index.jsなどで自分で自…

QRコード生成機能は実装が簡単！ モジュールのインストール コードの実装 筆者が実装してみたページ QRコード生成機能は実装が簡単！ URLを入力してポチッとボタンを押せばQRコードが生成されるあの機能。 実際に実装してみましたが、超簡単にできたので共有…

Nuxtでソースの表示 extractCSSの設定を変更するだけで解決 Nuxtでソースの表示 ブラウザ上からページのソースを見ることができますが（Chromeで「ページのソースを表示」を実行する）Nuxtでソースを表示させた時にデフォルトの設定だとCSSが全部出力されま…

開発時のVueとサーバサイドのポート番号 ポート番号が異なることでの問題点 proxyTableで解決 開発時のVueとサーバサイドのポート番号 VueでサーバサイドのAPIを使用する開発をしており、サーバサイドのサーバも起動させている場合、Vueとサーバサイドのポー…

Nuxtで使用する$axios getと$getの違い getで取得するパターン $getで取得するパターン POSTも一緒？ Nuxtで使用する$axios SPAサイトではガンガン行う非同期通信、その中でもaxiosは良く使われると思いますが、 Nuxtの場合はnuxt-community/axios-moduleの…

routerでchildrenを設定していると表示されるWARNING 不要なname設定 routerでchildrenを設定していると表示されるWARNING VueやNuxtでは、routerの設定でchildrenを使うと構造的に見やすいルーティングを生成できますよね。 ただし、以下のような一件問題な…

Nuxtのインストール後のディレクトリ構成 不要なら消してしまおう Nuxtのインストール後のディレクトリ構成 yarnやnpmでnuxtをインストールした後のディレクトリ構成は以下になります。Project ┣ .git ┣ .nuxt ┣ node_modules ┣ assets ┣ components ┣ layou…

Nuxt.jsとは？ Nuxt.jsプロジェクトの作成 Nuxt.jsとは？ Nuxt.jsとは、Vueアプリケーションを作成するフレームワークです。 通常のVue.jsの開発で頻繁に使用する以下の機能を最初から含んでいます。・Vue 2 ・Vue Router ・Vuex ・Vue Server Renderer ・vu…

storeの変更を検知したいパターン computedを利用するやり方 storeの変更を検知したいパターン Vue.jsでは状態を管理するのに便利なVuexのstoreですが、storeの値が変更されたタイミングでイベントを実行したくなる場面はありませんか？例えば別なコンポーネ…

object-fit ライブラリをnpmでダウンロード object-fit 画像を綺麗にトリミングしてくれるcssのプロパティにobject-fitがありますよね。 大きさが均一ではない多くの画像を扱うサービスでは非常に有用なプロパティです。 そんなobject-fitですが、全てのブラ…

出力ファイルは極力圧縮したい Vue.jsでのnpmビルド時に同時に圧縮 手順 サーバ側でgzipを読み込む設定にする 出力ファイルは極力圧縮したい Webサービスにおいて、コンテンツ内容や機能面の充実度が重要であることは言うまでもありませんが、ページのパフォ…

Vue.jsでの分岐やループ処理 templateタグを使う Vue.jsでの分岐やループ処理 Vue.jsでは分岐やループ処理で、動的にタグを描画したい場面がありますよね。 例えばリストを動的に増やしたい時は、liタグにv-forを付与したり、ある文言が特定の条件を満たした…

URLの#(シャープ) historyモードにすることで解決 URLの#(シャープ) Vue-cliでvue.jsのセットアップを行った時、開発環境のURLを叩くと後ろに#(シャープ)が付いてしまいます。http://localhost:8080と入力しても、http://localhost:8080/#/ となってしまいま…

CSRF対策について CSRFとは？ CSRFによる被害 通常のCSRF対策 SPAサイトのCSRF対策 方法1 リファラで判断 方法2 ログイン時に発行したトークンを照合 方法3 CORSと組み合わせてOriginをチェック CSRF対策について CSRFとは？ このページに来られた方ならもう…

値を配列でPOST 方法1 dataで定義する変数を配列で初期化してv-modelに設定 チェックボックスの例) 複数のテキストフォームがある時の例) 方法2 POSTする前に配列にまとめてしまう方法 チェックボックスの例) 複数のテキストフォームがある時の例) まとめ 値…

dataプロパティで配列の定義 変更する場合はspliceで置き換え 削除する場合もsplice 末尾に追加する場合は従来通りpushを使え 多次元配列はループなどで同様に変更可能 それぞれの配列の2番目（インデックスのキーが1）の値を変更する場合 dataプロパティで…

dataプロパティでオブジェクトの定義 変更する場合は$setで置き換え 配列中のオブジェクトはループなどで同様に変更可能 例1) 配列の2番目（インデックスのキーが1）の場合にvalueを変更する場合 例2) nameが「test2-Name」の場合にvalueを変更する場合 data…

今回はSPAサイトがGoogleのSearch Consoleで「Fetch as Google」をしてもレンダリングされず、サイトがインデックスされない時の対応方法です。 Googleのbotがサイトのクロール時に使うブラウザは、Javascriptも動作するために、SPAサイトでも（ページの表示…

ある条件を満たした時にクラスを割り当てる方法 ある条件を満たした時にクラスを複数割り当てる方法 ある条件Aを満たした時にクラスAを割り当て、ある条件Bを満たした時にクラスBを割り当てるなど、複数のクラスを割り当てる方法 三項演算子で条件次第で別々…

サイト分析において、ヘッダー内での読了率(つまりどこまで読まれたか)を分析することは重要ですよね。 そんな時に便利なライブラリはたくさんあるのですが、今回はその中の1つ、Scroll Depthについて、vue.js内で使用して上手く計測されない場合の対処法に…

プロジェクトをデプロイした後は、アナリティクスを設置してサイト分析をしますよね。 ここではそのための方法を2つほどご紹介したいと思います。まず1つ目は、vue-analyticsというモジュールを組み込む方法です。まずはモジュールをインストールしましょう…

全ページで毎回コンポーネントを書く方法 共通コンポーネントをrouterの外に出す方法 おまけ 複数のデザイン構成のサイトを作る場合 コンポーネントでヘッダーやフッターなど、どのページでも共通となる部分をまとめることってありますよね。 Vue.jsではその…

SPAでサイトの実装をすべてJavascriptで行う場合、headの要素までもJavascriptで行わなければいけないですよね。 要素を挿入するだけなのでやり方は色々ありますが、やはりライブラリなどを使用して簡単に実装したいところ。 そこで、vue.jsを使用している場…

Spring BootでSPAとAMPの併用 Spring Bootでは基本的にフロント側はThymeleafを使用し、サーバサイドで取得した変数を活用して描画させますが、HTMLの組み方によってはAMPページもThymeleafで作成することができます。 一方SPAはSingle Page Application(シ…