はてなブックマーク

始めに ローカルでの開発でAPIのCORSを回避するためにproxyを通すことがあると思いますが、webpack-dev-serverを使うと簡単に設定することができます。また、検索にも引っ掛かりやすいのでつまづいたら調べることができます。 しかしbrowser-syncを使ったパターンになると中々記事がない上、browser-syncで使用するパラメータのproxyはwebpack-dev-serverとは違った意味で使われるため中々使い方が分かりませんでした。なのでその辺についてここでまとめたいと思います。 browser-syncで設定するproxyの勘違い browser-syncで設定するproxyはwebpack-dev-serverと違ってローカルサーバーのhostnameを指定するものになっています。localhostではなくhogehoge.comでアクセスできるようにす

始めに 今までgulpでコーディングの環境を作って、JSだけwebpackするというものを使っていましたが、それを何とかwebpack側に全部移行できないかなと思っていました。ただpugをビルドする方法がなかなかいいのが見つからなくて結構苦労しましたが、ある程度形になったのでそれを記事にまとめたいと思います。 動作確認用のリポジトリはこちらになっているので参考にしてください。色々余計なコードは入っていますが・・・。 コーディング環境リポジトリ pugのビルド ReactやVue.jsの開発でお世話になっているHTMLWebpackPluginは動的のファイル追加に対応できないので今回は使用しません。 今回はpug-html-loaderというものを使います。以下のような感じでローダーを呼んでいくとpugでビルドしてHTMLを出力してくれます。 module.exports = { // 他

Kindle Paperwhiteは一定時間放置していると以下のようなスクリーンセーバーが表示されます。 スリープを無効化する設定はありませんが、このスクリーンセーバーを表示させなくして、結果的にスリープしなくなる方法があります。 スクリーンセーバー無効化の設定 この方法は隠しコマンドを入力するやり方で、ホーム画面で普段使っている検索ボックスに~dsと入力します。 これでこのまま検索を実行すると何も変化はありませんが、電源ボタンを押してもスクリーンセーバーに切り替わらなくなったと思います。 この設定はスクリーンセーバーの表示を無効化するもので、結果的にスリープされない状態になります。 これによって今度は使い終わった時に画面をOFFにしたくてもできなくなるので、電源ボタン長押しで表示されるメニューで画面オフを選択するようにしてください。 このスクリーンセーバーの無効化設定は再起動するとリセッ

Scoped CSSの問題点 Vue.jsのscoped cssは気楽にコンポーネント単位のスタイル当てができますが、完璧ではありません。 場合によってスタイルのバッティングが起きてしまうことがあるのですが、思っていたよりその現象が発生したのでどんな時に起こるのかをまとめました。 バッティングするサンプルコードはこちらに置きましたので、興味がある方はご覧になってください。 https://codesandbox.io/s/63q0l71rr Vue.jsのscoped CSSの原理とバッティングの理由 詳細はドキュメントに譲りますが、簡単にいうと、コンポーネントごとにdata-v-[hash]が振られて、その属性とセットでスタイルが当たるものとなっています。これによってこの属性はコンポーネントごとに違うものが当たるため、コンポーネント単位でのスタイルが当たるということです。 scoped

<template lang="pug"> div p watch test input(type="text", v-model="$data.text1") br input(type="text", v-model="$data.text2") </template> <script> export default { data() { return { text1: '', text2: '' }; }, // 両方まとめてチェックする方法がない watch: { text1(value, oldValue) { console.log('text1 change:', oldValue, '->', value); }, text2(value, oldValue) { console.log('text2 change:', oldValue, '->', value); }

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Vueのアニメーション VueはFLIPアニメーションがデフォルトでついているので、以下のようなアニメーションを簡単に実装できます。 See the Pen vue flip animation test by wintyo (@wintyo) on CodePen. transition-group v-enter, v-leaveだけの場合は単純なtransitionを使えばいいですが、上のようにFLIPアニメーションを付ける場合はtransition-groupでラップします。 transition-groupではtransitionでも使えたv-enter, v-leaveに加えて、v-moveもクラスに付与されます。v-moveは追加や削除などで要素が動く時に付与されます。要素の位置が重要なのでkeyの設定は必須です。 以下のコードは設定だけなので、後は$data.listに対し