親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。

Javascript

yarnでnightwatch.jsを動かす簡単設定

nightwatch.jsとは nightwatch.jsはE2Eテストフレームワークとして最も有名なものの1つではないでしょうか。 開発したWebのアプリケーションに対して1つ1つ手動でテストをしていくのは大変なので、Seleniumでテストを自動化させることが主流になっていますが…

vue-slickをNuxt.jsで使用した時の「window is not defined」エラー解消法

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

Nuxtのrouterやmetaを自由にカスタマイズしたい

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

文章どうしの差分を取得するならdiff-match-patchが便利

文章どうしの差分を取得 モジュールのインストール コードの実装 文章どうしの差分を取得 文章の差分を取得するような機能を作りたい時、diff-match-patchを使えば簡単に実装することができます。 PythonやGo、PHPなど、各種言語にライブラリが用意されてい…

複数のURLリンクを一発でタブ表示!

Javascriptのwindow.open 複数ページを開く時のネックになるポイント Javascriptのwindow.open Javascriptでaタグの「target=_blank」の要領で、別タブでページを開きたいことありますよね。 そんな時にはwindow.open('ここにURL', '_blank')を使えばOKです…

target="_blank"にはrel=noopenerを付けないと超怖い

target="_blank" rel="noopener"を付けないとどうなる? どんな場面で悪用されてしまうのか まとめ target="_blank" 外部ページへ遷移する際に使われるtarget="_blank"。 あまり知られていないのですが、そのまま使うと実はセキュリティ的なリスクをはらんで…

NuxtでQRコードを簡単に生成する機能を実装!こんなに簡単に実装できたのか!

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

Nuxtのソース表示でcssが全部出力されないようにする方法

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

Vue.jsではjavascript:void(0)をなくそう

aタグのイベント イベントを止める方法が用意されている aタグのイベント javascriptでは数々のイベントを設置するもの。 ホバーした時、スクロールした時、、、など色々パターンはありますが、特に多いのはクリック時のイベントではないでしょうか。 そして…

Vue.jsから開発モードでクロスドメインのアクセス

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

Nuxtの$axiosにおけるgetと$getの違い

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

VueやNuxtで消えないdefault child route のWARNING

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

Nuxtでfunction()から始まるようなJavascript構文を呼び出し

function()から始まるような構文 モジュールを使って呼び出し Google Tag Managerを使いたい時 Google Fontsを使いたい時 その他の方法 function()から始まるような構文 サイト制作でJavascriptのライブラリを使う昨今、サイト表示時点で外部にアクセスする…

Nuxt.jsでプロジェクトを作成してみた

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

Vue.jsでビルド時にgzipファイルを出力する方法

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

Vue.jsのv-ifやv-forで無駄にタグを増やしたくない時はtemplateで代用するのが便利

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

Vue.jsでURLの#(シャープ)を取り除く方法

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

XSSってどうやって仕込まれる?

XSSについて どうやってタグを入れられる? GETパラメータにスクリプトを入れる方法 POSTでスクリプトを埋め込まれる方法 まとめ XSSについて このページを閲覧している方ならご存知とは思いますが、まずはXSSについて超簡単に説明します。この事象は入力フ…

SPAサイトのCSRF対策

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

Spring BootのFormクラスでIntegerの項目にNULLはPOSTできない

NULLをPOSTした時点でStringとして認識されてしまう 数値(Integer)型の項目で空の可能性がある場合 AjaxでPOSTする時の例 NULLをPOSTした時点でStringとして認識されてしまう Spring Bootにおけるフォームから値をPOSTする際の挙動になりますが、Integer型の…

Vue.jsのdataプロパティで配列の変更はspliceで置き換えろ!

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

Vue.jsのdataプロパティでオブジェクトの変更は$setで置き換えろ!

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

ThymeleafでJavascriptエラー(SAXParseException)

Thymeleafでのorg.xml.sax.SAXParseException例外 解決方法1 「&」をエスケープ 解決方法2 エスケープしなくても使用できるようにコメントを挿入する Thymeleafでのorg.xml.sax.SAXParseException例外 Thymeleafは構文チェックが厳しく、Javascriptなどをそ…

vue.jsで全ページ共通コンポーネントのまとめ方

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

vue.jsでheadの要素を設定する時はvue-headが便利!

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

WPML Multilingual CMSでリダイレクトされてしまう問題

WPMLはWordPressで多言語対応する時に最も有名なプラグインですね。 僕も業務でこのプラグインを用いた対応を行ったのですが、ブラウザの言語でリダイレクト設定をし、日本語を母国語として設定した状態で他の言語を選択すると1回目はなぜか反映されないとい…

WEBページを自動スクロールさせて、画像をゆっくり見たい!

今回の記事は、非プログラマー向けの記事になります。 WEBページを開いた時に、画面を自動スクロールしたい時はありませんか? 例えば写真が一覧で表示されるギャラリーページなど、どこまで続いているのかわからないページでは、手動で一番下までスクロール…