Vue.jsサンプルコード（39）画像の配置や背景をスライドバーで簡単に調整する｜TechRacho by BPS株式会社
前記事: 38. 入力をやめるとリダイレクトする 次記事: 40. 簡易漫画ビューアを作る 40. 画像の配置や背景をスライドバーで簡単に調整する Vue.jsバージョン: 2.5.2 画面をリロードすると最初に戻ります。 ポイント inputに割り当てた変数からtransformの書式を作るだけでできます。 const vm = new Vue({ el: "#app", data: {s: 1.0, x: 0, y: 0, a: 0, c: "#ADFF2F", b: 64}, computed: { transform: function() { return `scale(${this.s}) translate(${this.x}px, ${this.y}px) rotate(${this.a}deg)` }, }, }) 前記事: 38. 入力をやめるとリダイレクトする 次記事
Vue.jsサンプルコード（35）入力すると自動的に次のフィールドにフォーカスを進める｜TechRacho by BPS株式会社
前記事: 34. 逆ポーランド記法の電卓アプリを作る 次記事: 36. Deleteキーで前のフィールドに戻って消す 35. 入力すると自動的に次のフィールドにフォーカスを進める Vue.jsバージョン: 2.5.2 日本の携帯電話番号の入力を想定しています（3桁、4桁、4桁）。 フィールドに入力すると、桁数いっぱいになったときに次のフィールドにフォーカスが自動で移動します。 最後のフィールドは桁数いっぱいに入力してもフォーカスは移動しません。 Deleteキーは現在のフィールド内でのみ効きます（次回を参照）。 画面をリロードすると最初に戻ります。 ポイント HTML側でv-modelとともにrefで名前を付けておくと、後でthis.$refs.r2などと参照できるので便利です。 <div class="col-md-10 form-inline"> <input class="form-
RailsのVue.jsをWebpackerとJestでテストする（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Testing Vue.js in Rails with Webpacker and Jest 原文公開日: 2018/01/16 著者: Mario Saul 今やっているプロジェクトで、既存のRailsアプリにVue.jsを統合する方法の調査をを命じられました。とりあえず公式ガイドを読み、チュートリアルを視聴し、ブログを読みまくった結果、Vueコンポーネントを完全に動かせるようになりました。 最後の段階でいくつかテストを書こうとしましたが、残念なことにWebpacker gemにはテスト向け設定が含まれていなかったので、自分で設定せざるを得ませんでした。 驚いたことに、満足な設定方法がドキュメントに見当たらなかったのです。そこで私が何とかこれを動かせるようにしたときの方法を本記事で皆様と共有したいと考えました。 1. Jest
Vue.jsサンプルコード（34）逆ポーランド記法の電卓アプリを作る｜TechRacho by BPS株式会社
前記事: 33. Vue.jsでAJAXを使う 次記事: 35. 入力すると自動的に次のフィールドにフォーカスを進める 34. 逆ポーランド記法の電卓アプリを作る Vue.jsバージョン: 2.5.2 いわゆる逆ポーランド記法（RPN）方式のお遊び電卓です。 [入力] フィールドに数値か演算記号を入力できます。 数値はスタックにプッシュされて下に表示されます。 演算記号は直近の2つのスタックを演算し、2つのスタックをクリアしてから結果をスタックにプッシュします。 入力した瞬間に処理されるので、事実上1桁ずつしか入力できません。 計算できないときはNaNがスタックに置かれます。 画面をリロードすると最初に戻ります。 ポイント HTML側でv-forを用いて繰り返しを実現しています。 <template v-for="e in s.slice().reverse()"> <li class="
Vue.jsサンプルコード（33）Vue.jsでAJAXを使う｜TechRacho by BPS株式会社
前記事: 32. 郵便番号に対応する地図を表示する 次記事: 34. 逆ポーランド記法の電卓アプリを作る 33. Vue.jsでAJAXを使う Vue.jsバージョン: 2.5.2 axiosライブラリを併用しています。 [Yes or No]ボタンをクリックすると、yesno.wtfの画像をランダムに表示します。 画面をリロードすると元に戻ります。 ポイント axiosライブラリを使うとAJAXのやりとりを以下のように簡単に書けるので便利です。 const vm = new Vue({ el: "#app", data: {b: null}, methods: { a: function() { axios.get("https://yesno.wtf/api").then((r) => {this.b = r.data.image}) }, }, }) 前記事: 32. 郵便番号に対応
Vue.jsサンプルコード（31）パスワードの強度をバーで表現する｜TechRacho by BPS株式会社
前記事: 30. パスワードを自動生成する 次記事: 32. 郵便番号に対応する地図を表示する 31. パスワードの強度をバーで表現する Vue.jsバージョン: 2.5.2 [パスワード]フィールドにパスワードを入力すると、強度を判定してバーを伸ばします。 パスワードの文字数8文字以上、英小文字、英大文字、記号、数字の使用について20%ずつ配点しています。 パスワードは隠していません。 画面をリロードすると最初の状態に戻ります。 ポイント このような場合はwatchよりcomputed（第1回参照）を使うことをおすすめします。 const vm = new Vue({ el: "#app", data: {p: ""}, computed: { s: function() { let s = 0 s += /.{8,}/.test(this.p) ? 20 : 0 s += /\d/.t
Vue.jsサンプルコード（30）パスワードを自動生成する｜TechRacho by BPS株式会社
前記事: 29. フィールドごとに全角英数字入力と半角英数字入力を自動で切り替える 次記事: 31. パスワードの強度をバーで表現する 30. パスワードを自動生成する Vue.jsバージョン: 2.5.2 [パスワード生成]ボタンを押すと[パスワード]フィールドにパスワードが生成されます。 パスワードは隠していません。 画面をリロードすると最初の状態に戻ります。 ポイント Vue.jsのコード側では単に変数aを更新しているだけです。 const vm = new Vue({ el: "#app", data: {a: ""}, methods: { g: function() { this.a = Math.floor(Math.random() * 100000000000000000).toString(36) }, }, }) 前記事: 29. フィールドごとに全角英数字入力と半角
Vue.jsサンプルコード（29）フィールドごとに全角英数字入力と半角英数字入力を自動で切り替える｜TechRacho by BPS株式会社
前記事: 28. 文字の大きさをボタンで変更する 次記事: 30. パスワードを自動生成する 29. フィールドごとに全角英数字入力と半角英数字入力を自動で切り替える Vue.jsバージョン: 2.5.2 [全角]フィールドに入力する英数字は全角に、[半角]フィールドに入力する英数字は半角になります。 日本語入力には影響しません。 画面をリロードすると最初の状態に戻ります。 ポイント watchで変数の変更を監視しています。watchの内部で変数をさらに変更しても無限ループになりません。 const vm = new Vue({ el: "#app", data: {a: "", b: ""}, watch: { a: function(v) { this.a = v.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharC
Vue.jsサンプルコード（28）文字の大きさをボタンで変更する｜TechRacho by BPS株式会社
hachi8833 Twitter: @hachi8833、GitHub: @hachi8833 コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。 これまでにRuby on Rails チュートリアル第2版のコンテンツ監修、Railsガイドのコンテンツ作成を担当。 かと思うと、正規表現の粋を尽くした日本語エラーチェックサービス enno.jpを運営。 実は最近Go言語が好きで、Goで書かれたRubyライクなGoby言語のメンテナーでもある。 仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.comに移転。Amazonウィッシュリスト: https://bit.ly/32aAmiI hachi8833の書いた記事一覧へ
Vue.jsサンプルコード（26）多数のアンケートを同一画面で順に表示する｜TechRacho by BPS株式会社
前記事: 25. クイズの答えをダイアログに入力しないと送信できないようにする 次記事: 27. 選択肢に応じて入力項目を切り替える 26. 多数のアンケートを同一画面で順に表示する Vue.jsバージョン: 2.5.2 [応募]ボタンを押すと、メッセージの主語を切り替えてアンケートを表示します。 3つの回答の中から1つをクリックするとページを切り替えずに次の質問に進み、下の値リストを更新します。 （終了処理がないのでアンケートが終わると最初の質問に戻ります） 画面をリロードすると最初の状態に戻ります。 ポイント: Vue.jsの他にlodash.jsのdelayも使っています。 methods: { next: function(e) { this.answers.push(this.a) _.delay(() => { this.index++; this.a = null }, 50
Vue.jsサンプルコード（25）クイズの答えをダイアログに入力しないと送信できないようにする｜TechRacho by BPS株式会社
前記事: 24. テキストフィールドの文章量に応じて縦幅を自動拡張する 次記事: 26. 多数のアンケートを同一画面で順に表示する 25. クイズの答えをダイアログに入力しないと送信できないようにする Vue.jsバージョン: 2.5.2 [送信]ボタンを押すとダイアログにクイズが表示されます。正解しない場合は「不正解」と表示されます。 画面をリロードすると最初の状態に戻ります。 ポイント: formタグで@submit="c"のようにイベントと関数を指定できます。イベントはform以外のタグでも設定できます。 <form @submit="c" method="POST" action="" ref="form"> サンプルでは正解した場合の送信も抑制してあります。 ... else {e.preventDefault()} ... @で指定できるイベントは他にもありますが、以下によると
Vue.jsサンプルコード（23）テキストフィールドの行数に応じて縦幅を自動拡張する｜TechRacho by BPS株式会社
前記事: 22. YouTube風の[👆][👇]ボタンで1度だけGood/Bad評価する 次記事: 24. テキストフィールドの文章量に応じて縦幅を自動拡張する 23. テキストフィールドの行数に応じて縦幅を自動拡張する Vue.jsバージョン: 2.5.2 テキストフィールドの行数が増えるとフィールドが下に拡張し、行数が減ると上に縮小します。 画面をリロードすると最初の状態に戻ります。 ポイント: jsファイルはほぼ空です。HTML側のVue.jsコードでは、改行の数を行数と仮定しています。 <textarea class="form-control" v-model="a" :rows="a.split(/\n/).length"></textarea> 前記事: 22. YouTube風の[👆][👇]ボタンで1度だけGood/Bad評価する 次記事: 24. テキストフィール
Vue.jsサンプルコード（22）YouTube風の[👆][👇]ボタンで1度だけGood/Bad評価する｜TechRacho by BPS株式会社
前記事: 21. [はい][いいえ]ボタンを押すと表示を変える 次記事: 23. テキストフィールドの行数に応じて縦幅を自動拡張する 22. YouTube風の[👆][👇]ボタンで1度だけGood/Bad評価する Vue.jsバージョン: 2.5.2 [👆]または[👇]ボタンを押すと、カウントが1上がります。 ボタンをもう一度押してもカウントは変わりません。 画面をリロードすると最初の状態に戻ります。 ポイント: $once()で定義したコードは、$emitで「1度だけ」実行されます。 created: function() { this.$once("foo", function(e) { this[e.target.dataset.key] += 1 }) }, methods: { a: function(e) { this.$emit("foo", e) }, }, 前記事
CSSを迷いなく書く極意: 単一ファイルコンポーネント（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: The zen of Just Writing CSS 公開日: 2017/09/06 著者: Rich Harris サイト: https://svelte.technology/ SFCについてはVue.js: 単一ファイルコンポーネントもどうぞ。 これは未来の話だが、私たちは既にそれを実践しているのだ。 CSSを嫌うのが流行っています。CSSを嫌う理由はいくらでもありえますが、突き詰めれば「CSSが予測不可能である」ということです。スタイルのルールをこねくり回しているうちに、まったく関係ない別のレイアウトが不意に壊れてしまう（しかもたいてい納品間近に起きる）という経験をしたことがない人がいるとすれば、新人か、さもなければよほどプログラミングが上手いかのどちらかでしょう。 JavaScriptコミュニティはこの問題に取り組み続
Vue.jsサンプルコード（19）文字をクリックすると編集できるようにする｜TechRacho by BPS株式会社
前記事: 18. スター[★]を1回だけ押せるようにする 次記事: 20. スター[★★★☆☆]をクリックして数値を1桁だけ入力する 19. 文字をクリックすると編集できるようにする Vue.jsバージョン: 2.5.2 「クリックして編集」をクリックすると文字を変更できます。 Enterを入力するか、他の場所をクリックするなどでフォーカスを移動すると入力が終了します。 変更した文字は、入力が終わっても変わりません。 画面をリロードすると最初の状態に戻ります。 HTML側でvのtrue/falseを判定しています。 <template v-if="f"> <input v-model="v" @keyup.enter="f = false" @blur="f = false" ref="r1" /> </template> <template v-else=""> <span @click
Vue.jsサンプルコード（16）パスワードを入力中だけ表示する｜TechRacho by BPS株式会社
前記事: 15. パスワードのマスクを解除する 次記事: 17. [いいね]ボタンを押すとボタンが文言に変わる 16. パスワードを入力中だけ表示する Vue.jsバージョン: 2.5.2 入力中だけパスワードのマスクが解除されます。 EnterやTabを押して入力を終えると再びマスクされます。 ポイント: コード中のdebounceはLodash.jsのメソッドで、このような一定時間入力がないときの処理を書くのに使えます。このため、このサンプルの実行にはLodash.jsも必要です。 methods: { c: _.debounce(function() { this.t = "password" this.$nextTick(function() { this.$refs.r1.focus() }) }, 1000 * 1), }, 前記事: 15. パスワードのマスクを解除する 次記
Vue.jsサンプルコード（15）パスワードのマスクを解除する
前記事: 14.「承認」ボタンを押したら解除できないようにする 次記事: 16. 入力中だけパスワードを表示する 15. パスワードのマスクを解除する Vue.jsバージョン: 2.5.2 チェックボックスをオンにするとパスワードのマスクが解除され、パスワードが読めるようになります。 const vm = new Vue({ el: "#app", data: {p: "secret-password", t: "password"}, }) ポイント: この方法の代わりにHTMLの<input>タグでtypeを切り替えると、Vueの警告が表示されます。 前記事: 14.「承認」ボタンを押したら解除できないようにする 次記事: 16. 入力中だけパスワードを表示する バックナンバー（Vue.jsサンプルコード） Vue.jsサンプルコード（01〜03）Hello World・簡単な導入方法
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsサンプルコード（38）入力をやめるとリダイレクトする｜TechRacho by BPS株式会社
Vue.jsサンプルコード（32）郵便番号に対応する地図を表示する｜TechRacho by BPS株式会社
Vue.jsサンプルコード（27）選択肢に応じて入力項目を切り替える｜TechRacho by BPS株式会社