[Vue] HTML5 Form Validation を利用するフォーム要素コンポーネント

2年前に書いた HTML5 Form Validationサンプル(jQuery + Bootstrap 4.0 + Constraint Validation API) の Vue版です。

HTML5のフォーム要素に備わっているValidation機能(Constraint Validation API)を利用するフォーム要素のコンポーネントと、それを利用したフォームのサンプルを作ってみた。

“[Vue] HTML5 Form Validation を利用するフォーム要素コンポーネント” の続きを読む

[JS] PHPのarray_combineをJavaScriptで

array_combine — 一方の配列をキーとして、もう一方の配列を値として、ひとつの配列を生成する

ピコ太郎のPPAPがまんまそのイメージ。

つまりこういうのがやりたい:

const key = ['green', 'red', 'yellow'];
const val = ['avocado', 'apple', 'banana'];
↓
{"green":"avocado","red":"apple","yellow":"banana"}

“[JS] PHPのarray_combineをJavaScriptで” の続きを読む

[Vue] ページング機能の作り方(弐)コンポーネントのテスト作成入門

[Vue] ページング機能の作り方とコンポーネント作成入門 からの続き。
続きなので前の記事で作ったやつがないとできません!

引き続きCodeSandboxでやります。
ローカルに環境作った方はそちらでどうぞ。

CodeSandboxのプレビューのところに、Testsっていうタブがあるのに気づきましたか?

これ、テストを実行して結果を表示してくれる便利機能です。
今回はこの機能を使えるようにします!

“[Vue] ページング機能の作り方(弐)コンポーネントのテスト作成入門” の続きを読む

[Vue] ページング機能の作り方とコンポーネント作成入門

[PHP] ページング機能の仕組みとか作り方とか が今年で10周年!

今はPHPを書くことはWordpressを魔改造するときくらいで、もっぱらJavasScriptを使う事が多いです。
2018年はずっとVueと戯れていたので、Vueのコンポーネントとしてページング機能を実装するにはどうするのかという視点でまとめてみます。

環境構築は面倒くさいのでCodeSandbox使います!
なのでローカルにインストールからやってみたい方はVueの公式ドキュメント片手にトライしてどうぞ。

“[Vue] ページング機能の作り方とコンポーネント作成入門” の続きを読む

[JS] YouTubeのインラインプレイヤーとモーダルダイアログの連動

以下要件:

  1. YouTubeの動画をインラインで再生させる
  2. 1をクリックするとモーダルでその動画を拡大表示させる
  3. モーダルウィンドウが開いている時はインライン動画は停止、閉じたら再生

“[JS] YouTubeのインラインプレイヤーとモーダルダイアログの連動” の続きを読む

[JS] Object.entries や Template Strings による簡単なテンプレート

JavaScriptでオブジェクトをループさせたいと思った時は Object.keys でキーだけ配列にしたものを
Array.forEach で回すっていうのが鉄板だったが、
ES2017の Object.entries の方が見た目エレガントやなあと思った。

“[JS] Object.entries や Template Strings による簡単なテンプレート” の続きを読む

[JS] jest-mock-axios “Cannot read property ‘resolve’ of undefined”

JestのtestでmockAxios使ってて、mockResponseのところでエラーになる原因

//TypeError: Cannot read property 'resolve' of undefined

> 297 |  mockAxios.mockResponse({ data: [] });
  298 |  wrapper.vm.refresh(); ← axios.getしてる
  299 |  expect(mockAxios.get).toHaveBeenCalledWith(

同名であげられてたissueにあるコメントを要約すると
テスト書くときの順番の問題で

wrapper.vm.refresh(); ← axios.getしてる
mockAxios.mockResponse({ data: [] });
expect(mockAxios.get).toHaveBeenCalledWith(

axios.getしてるやつの後にmockResponseを書けばエラーは出ない