Javascript

CodeSandboxがNuxt.jsに対応してたからNowデプロイまでやってみたら数分で終わって凄かった話

by

全くCodeSandboxについて知らない人は前に書いたCodeSandboxとNow(ZEIT)で爆速Webアプリ作成 を読むといいかもしれない。

陰陽師の周回中手持ち無沙汰だったのでなんとなくCodeSandboxを開いてみたら、いつの間にかNext.jsとかNuxt.jsとかが増えてたんですねえ…。

TypeScriptセットのやつも増えてて時流を感じます。

続きを読む

Nuxt.jsでStorybookを使用してみたメモ

by

React・Vue・Angularなど使うとコンポーネント単位でUIプレビューしたくなるんですよねえ。
Storybookはそれを叶えてくれるツールで、規模や人員が大きくなればなるほど必要性が増してくると思いました。
StyleDoccoとか使ってた頃の手間や苦労を思い出すと、いやはや便利になったものです。

Nuxtで作ってるサイトにStorybook入れてみたら、ちょいちょいつまづくポイントがあったので、導入から問題解決についてStepByStepでメモりました。

続きを読む

[JS] Web Audio API であの楽器

by

私が初めて触った時はFirebox4のベータ版しか対応してなかったWeb Audio API、
今はもう殆どのブラウザがサポートしてるんですねえ…。

いや～感慨深いなあ。
ってことで今週も陰陽師の周回中に9年前に作ったまま放置してて音が鳴らなくなってたあの楽器を音出るようにしてみた。

See the Pen あの楽器 by Tenderfeel (@Tenderfeel) on CodePen.

続きを読む

[Vue.js] ファイルアップロード＆バリデーション ( use bootstrap-vue )

by

See the Pen
vue.js(bootstrap-vue) File Upload by Tenderfeel (@Tenderfeel)
on CodePen.

なんでか初回はonchangeが反応しない挙動があった。
プレビュー表示ならwatchでv-model監視する手もあるな🤔と思った。

draganddropの判別にmodernizr使おうとしたら存在しなかったんだけど消えたんですかね。
ないものは仕方ないからisMobileでPCだけドラッグドロップUIになるようにしてます。

続きを読む

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

by

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

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

続きを読む

[JS] PHPのarray_combineをJavaScriptで

by

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

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

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

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

続きを読む

[Vue.js] ページネーション機能の作り方（弐）コンポーネントのテスト作成入門

by

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

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

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

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

【2019/10/21追記】CodeSandboxのバグでテスト機能が動きません

続きを読む