Vue

[Vue] vue-test-utils の Deprecation warning への対応

by

ドキュメントの言語選択で日本語にしてるとまだ説明が出ないが、
警告は5月にリリースされててアップデートしたら洗礼を受ける。
よく使ってたのが対象になってるのでテストが多いと対応がしんどい😫

続きを読む

Vercel+Nuxt.jsで爆速Webアプリ作成

by

CodeSandboxとNowでアプリを作る話の続き。（読んでなくてもOK）
create-nuxt-app で作ったNuxt.jsアプリをVercelでデプロイする話です。

いつの間にやらZEITは新たなるブランドVercelに生まれ変わったそうで、NowもVercelという名称に変わってました🙄
よってこれからはNowとは言わずVercelと呼ぶことにします。

続きを読む

[Nuxt.js] core-jsエラーへの対処

by

何かしら外部のライブラリを追加したときこんな感じのエラーが出ることがある

ERROR in ./.nuxt/client.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.concat' in '/Users/**/**/.nuxt'
 @ ./.nuxt/client.js 4:0-41
 @ multi ./.nuxt/client.js

ERROR in ./.nuxt/utils.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.concat' in '/Users/**/**/.nuxt'
 @ ./.nuxt/utils.js 2:0-41
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

コンソールが真っ赤に染まってびっくりするよ😩

続きを読む

Electronでデスクトップアプリを作ろうとしたメモ

by

月曜日の祝日、陰陽師の週替りイベントの好機を逃すという悲しい思いをしまして。
いつも開いてるPC版の隣で通知とかするアプリがあればなーと思ったとき、Electronで作れるんでは？とその存在を思い出したのでした。
いつの時代も悔しさは己の闘志を奮起してくれるものです。

続きを読む

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

by

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

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

続きを読む

[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）を利用するフォーム要素のコンポーネントと、それを利用したフォームのサンプルを作ってみた。

続きを読む

CodeSandboxとNow(Vercel)で爆速Webアプリ作成

by

令和になりました～。
15年ほど前はテキストエディタとかFTPとか使ってたけど今はどうでしょ。
私はエディタはAtomに落ち着いてますが、NotePad++も気に入ってます。
FTPはレンタルサーバー借りてる人が使うくらいじゃないですかね。新卒世代はもうFTPなんて使ったこと無いのでは。

最近Firebaseが流行ってるけどNowもまあ凄いです。
認証とかデータベースとかが必要ないならFirebaseよりNowの方が合ってるんじゃないかな～。CodeSandbox+Nowだとローカル環境もサーバーも用意しなくていいし、デプロイだって自動でやってくれるからね。

昨日ちょっとしたアプリをCodeSandboxで作ったので、それをNowでデプロイするまでの手順をざっくりまとめてみた。

（現在NowはVercelという名前になってます）

続きを読む

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

by

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

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

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

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

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

続きを読む

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

by

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

今はPHPを書くことはWordpressを魔改造するときくらいで、もっぱらJavasScriptを使う事が多いです。
2018年はずっとVue.jsと戯れていたので、Vueでpaginationコンポーネントはどうやって作れば良いの？という視点でまとめてみました。

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

続きを読む