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

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

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

vue-slickを使用した場合のエラー 複数画像のスライド表示を簡単に実装できるJavascriptのプラグインであるslick.js。 これをVueやNuxtに実装する場合はvue-slickをインストールしてimportすれば簡単に実装できます。 ただここでNuxtに実装する場合は注意が…

Go+GinでCors設定を行い、クロスオリジンのアクセスを制御する

APIとして使用される場合を想定 近年SPAサイトがよく作られており、サーバサイドの言語はAPIとして開発されることが多いでしょう。 APIとして使用する場合、注意しなくてはいけないのがクロスオリジンの設定です。 他サイトから自由自在にアクセスされてしま…

herokuでGoのGinを動かしてみる

herokuでGo herokuは非常に便利なPaasですよね。 アプリケーション開発では、せっかく開発が終わったのにも関わらず、サーバの準備でまた時間がかかってしまうのが面倒ですよね。 それほどインフラ面にこだわりがあるわけではないのに。 そんな時にherokuは…

godotenvによる.envファイルの読み込み有無で、開発環境と本番環境を切り分け

開発環境と本番環境を切り分けたい理由 アプリケーションの起動に当たって、開発環境と本番環境で設定を変えたいことがあるでしょう。 例えばサーバのポート番号やDB接続の定義情報など。 サードバーティのAPIに繋ぐ際に開発モードと本番モードが分かれてい…

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

Vue.jsとNuxt.jsのrouterの違い Vue.jsでは、ルーティングを設定する際にrouter/index.jsなどで自分で自由に設定することができます。 カスタマイズなど自由自在で、pages配下のファイルの置き場所に関係なく、pathやcomponentやname、それにmetaなどを設定…

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

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

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

Javascriptのwindow.open Javascriptでaタグの「target=_blank」の要領で、別タブでページを開きたいことありますよね。 そんな時にはwindow.open('ここにURL', '_blank')を使えばOKです!これを応用すれば、以下のような複数のURLリンクを一括でタブ表示す…

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

target="_blank" 外部ページへ遷移する際に使われるtarget="_blank"。 あまり知られていないのですが、そのまま使うと実はセキュリティ的なリスクをはらんでいるのです。 その脆弱性対策として、リンクに「rel="noopener"」を付けましょう。 <a href="https://jidou.jp" target="_blank" rel="noopener">リンクのテキスト</a>…

パスワード生成ツールが多すぎてウケる

パスワード生成ツールがなぜ使われるのか 今の世の中、パスワードを設定する場面が多いですよね。 いろんなサービスで会員登録をしたりしますし。。。 会員登録の時はさすがに使い慣れたパスワードを使い回すか笑ただ、ものによってはパスワードを自分で生成…

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

QRコード生成機能は実装が簡単! URLを入力してポチッとボタンを押せばQRコードが生成されるあの機能。 実際に実装してみましたが、超簡単にできたので共有します。 バックエンドは不要で、Javascriptだけで実装できてしまいます。 (複雑そうな仕組みに見え…

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

Nuxtでソースの表示 ブラウザ上からページのソースを見ることができますが(Chromeで「ページのソースを表示」を実行する)Nuxtでソースを表示させた時にデフォルトの設定だとCSSが全部出力されませんか? 本来見たい部分までひたすらスクロールして大変な思…

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

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

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

ファイルを読み込む処理 例えばcsvファイルなど、ファイルの内容を読み込んで処理をすることがありますよね。そんな時にFileInputStreamやらInputStreamReaderやらBufferedReaderを使う必要があるのですが、初見だと何がなにやらさっぱりですよね。そんなメ…

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

コンパイル言語の宿命 Spring Bootに限らずJava等コンパイル言語の宿命ですが、ちょっとした変更でもいちいちコンパイルが必要になりますよね。 そうして開発効率の悪さを感じてしまいます。 ※もちろんコンパイル言語は実行時のパフォーマンスに安定感がある…

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

開発時のVueとサーバサイドのポート番号 VueでサーバサイドのAPIを使用する開発をしており、サーバサイドのサーバも起動させている場合、Vueとサーバサイドのポート番号は異なることと思います。 Vueで「npm run dev」コマンドを使用して開発している場合、…