JavaScript

Vue.jsで配列・オブジェクトの変更がv-ifなどで検出できない場合の解決方法

Vue.jsで配列・オブジェクトを扱う場合、配列のデータは更新されているのに変更が検出できない、という現象でつまったので書きます。 僕がつまったケース mountedで配列に値をセットし、その後あるメソッドを実行した場合に変...
iziModal

iziModalにツイッターを埋め込む方法

こんにちは。 iziModalにツイッターを埋め込むと、モーダルウィンドウを開いた際に埋め込みタグがそのまま表示されてしまうという現象に悩んでいませんか? 本記事では、上記の原因と解決方法を紹介します。 iziModalにツイ...
CSS

CSSのdisplay:flex で幅(width)の指定が効かない時の対処法

こんにちは。 display:flex(flexbox)で要素を横に並べた際に、幅を指定してもその通りにならないと困っていませんか? 本記事では、CSSのdisplay:flexで幅(width)の指定が効かない時の対処法を解説して...
JavaScript

iPhoneのスクロール時にバウンス効果を無くす方法【iNoBounce使用】

こんにちは。 iPhoneやiPadなどのiOS端末で、一番上、または一番下までスクロールすると画面がボヨーンとバウンドする「バウンス効果」。 一見するとおしゃれな効果ではありますが、出てほしくない場面もありますよね。 本記事...
FileSaver

JSだけで複数のbase64データを画像化しZIPでダウンロード

こんにちは。 今回は、複数のbase64データを画像化して、ZIPで圧縮してダウンロードする機能を実装します。 まず使うライブラリは以下2つです。 JSZip FileSaver JSzipを読み込む 公...
JavaScript

Vue.jsで「?」から始まるURLのクエリパラメータを設定・取得する方法

こんにちは。 Vue.jsで開発をしていて、URLのクエリパラメータで情報を送りたいと思ったことはありませんか? この記事では、Vue.jsで「?」から始まるURLのクエリパラメータを設定・取得する方法について解説します。 ※...
JavaScript

Vue.jsのwatchで連想配列が監視できない場合の解決法

こんにちは、macoです。 Vue.jsの値の変更を監視できるwatch機能はすごく便利ですが、連想配列で値を変更した場合にうまく動作しなかったので、解決方法を解説します。 連想配列でwatchが動かない例 watchではuser...
SEO

Webサイトの表示を高速化してアクセスアップにつなげよう

「サイトの表示を早くしたい」 「アクセス数が上がらない」 このようなことで悩んでいませんか? 本記事では、サイトの表示スピードを高速化してアクセス数アップ・直帰率を改善する方法を解説します。 この記事を書いている僕は、Webエンジニ...
JavaScript

Vueでpropsの変更を検知する方法

Vueでpropsの変更を検知する方法 今回はpropsで受け取る変数をhogeとします。 // ・・・省略・・・ props: // ・・・省略・・・ watchを使い、hogeが変更された場合にその変更を検知できます。 /...
CSS

【CSS】テキストで背景を切り抜く方法

使うプロパティは、以下の3つです。 -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; ba...