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

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

文章どうしの差分を取得するなら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では数々のイベントを設置するもの。 ホバーした時、スクロールした時、、、など色々パターンはありますが、特に多いのはクリック時のイベントではないでしょうか。 そして…

Javaのファイル読み込みメソッドを整理

ファイルを読み込む処理 FileInputStreamでファイルの内容を読み込み InputStreamReaderで指定した文字コードに FileReaderを使えばInputStreamReader要らず 旧来のファイルの読み込み方比較 方法1 方法2 BufferedReaderを使えば一行単位で呼び出し可能に Ja…

Spring Bootの起動が遅いので試行錯誤した話

コンパイル言語の宿命 Initialized JPA EntityManagerFactory for persistence unit ‘default’ 他の試行錯誤 コンパイル言語の宿命 Spring Bootに限らずJava等コンパイル言語の宿命ですが、ちょっとした変更でもいちいちコンパイルが必要になりますよね。 そ…

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

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

Spring Boot のCORS対策

CORSとは? CORSの対策 Spring Bootでの対策 方法1 @CrossOriginアノテーション 方法2 Spring SecurityでCORSの設定をする方法 まずはSpring Securityのインストール WebSecurityConfigurerAdapterにCORSの設定 CORSとは? 通常Webページでは、同一生成元ポ…

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ではデフォルトで.gitファイルが配置される

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

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

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