概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: How to replace jQuery with Vue.js in Ruby on Rails apps 原文公開日: 2018/05/25 著者: Igor Petrov Rails開発者を何年もやっている方であれば、おそらくjQueryをフロントエンド開発のデフォルトオプションとして用いていることでしょう。だいぶ前のバージョンのRailsではRailsコア開発者がjQueryを標準として提供し始め、ほどなく標準になりました。当時のjQeuryはJavaScriptライブラリの筆頭であり、非常に便利でした。 その後月日は流れましたが、jQueryは現在もRailsのデフォルトオプションであり続けています。しかし現在であれば、クライアント側コードがさらに複雑になったためにもう少し別のライブラリが必要とされていることでしょう。

前記事: 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. 入力をやめるとリダイレクトする 次記事

前記事: 37. 一定時間経過後に自動でリダイレクトする 次記事: 39. 画像の配置や背景をスライドバーで簡単に調整する 38. 入力をやめるとリダイレクトする Vue.jsバージョン: 2.5.2 動作にはlodash.jsも必要です。 フィールドに何か入力されている間はリダイレクトされません。 入力をやめると、1秒後に元のページにリダイレクトします。 以下のJSFiddleでは、何も入力しないか入力を止めると、フレーム内のみ元のページにリダイレクトします。 ブラウザによってはこのページの直前のページにリダイレクトする可能性もあります。 画面をリロードすると最初に戻ります。

前記事: 36. Deleteキーで前のフィールドに戻って消す 次記事: 38. 入力をやめるとリダイレクトする 37. 一定時間経過後に自動でリダイレクトする Vue.jsバージョン: 2.5.2 30カウントすると直前のページに自動でリダイレクトします。 以下のJSFiddle埋め込みはフレーム内のみリダイレクトします。 ブラウザによってはこのページの直前のページにリダイレクトする可能性もあります。 画面をリロードすると最初に戻ります。 ポイント createdは、new Vue のあとで1回呼ばれます。 const vm = new Vue({ el: "#app", data: {a: 30}, created: function() { setInterval(() => { this.a-- }, 1000) }, watch: { a: function(v) { if (v

前記事: 35. 入力すると自動的に次のフィールドにフォーカスを進める 次記事: 37. 一定時間経過後に自動でリダイレクトする 36. Deleteキーで前のフィールドに戻って消す Vue.jsバージョン: 2.5.2 日本の携帯電話番号の入力を想定しています（3桁、4桁、4桁）。 フィールドに入力すると、桁数いっぱいになったときに次のフィールドにフォーカスが自動で移動します。 最後のフィールドは桁数いっぱいに入力してもフォーカスは移動しません。 Deleteキーでフィールドの数字を消すと、前のフィールドにフォーカスが戻り、さらに1文字消します。 最初のフィールドはDeleteキーですべて消してもフォーカスは移動しません。 画面をリロードすると最初に戻ります。 ポイント 前のフィールドに戻ったときに1文字消したくない場合は、以下の2か所の@keydownを@keyupに変更します。 <i

前記事: 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-

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Testing Vue.js in Rails with Webpacker and Jest 原文公開日: 2018/01/16 著者: Mario Saul 今やっているプロジェクトで、既存のRailsアプリにVue.jsを統合する方法の調査をを命じられました。とりあえず公式ガイドを読み、チュートリアルを視聴し、ブログを読みまくった結果、Vueコンポーネントを完全に動かせるようになりました。 最後の段階でいくつかテストを書こうとしましたが、残念なことにWebpacker gemにはテスト向け設定が含まれていなかったので、自分で設定せざるを得ませんでした。 驚いたことに、満足な設定方法がドキュメントに見当たらなかったのです。そこで私が何とかこれを動かせるようにしたときの方法を本記事で皆様と共有したいと考えました。 1. Jest

前記事: 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="

前記事: 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. 郵便番号に対応

前記事: 31. パスワードの強度をバーで表現する 次記事: 33. Vue.jsでAJAXを使う 32. 郵便番号に対応する地図を表示する Vue.jsバージョン: 2.5.2 2つの郵便番号フィールドに郵便番号を入力すると、Enterを押さなくてもGoogleマップを動的に表示します。 1つ目のフィールドに入力するだけでもマップが表示されます。 画面をリロードすると最初の状態に戻ります。

前記事: 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

前記事: 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. フィールドごとに全角英数字入力と半角

前記事: 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

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の書いた記事一覧へ

前記事: 26. 多数のアンケートを同一画面で順に表示する 次記事: 28. 文字の大きさをボタンで変更する 27. 選択肢に応じて入力項目を切り替える Vue.jsバージョン: 2.5.2 上部の3つのラジオボタンをクリックすると、下の入力方法が変更されます。 「クレジットカード」: [番号]と[年月日]フィールドが表示されます。年月日はDatePickerでも入力できます。 「銀行振込」: [口座]フィールドが表示されます。 「チケット」: [コード]フィールドが表示されます。 画面をリロードすると最初の状態に戻ります。

前記事: 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

前記事: 24. テキストフィールドの文章量に応じて縦幅を自動拡張する 次記事: 26. 多数のアンケートを同一画面で順に表示する 25. クイズの答えをダイアログに入力しないと送信できないようにする Vue.jsバージョン: 2.5.2 [送信]ボタンを押すとダイアログにクイズが表示されます。正解しない場合は「不正解」と表示されます。 画面をリロードすると最初の状態に戻ります。 ポイント: formタグで@submit="c"のようにイベントと関数を指定できます。イベントはform以外のタグでも設定できます。 <form @submit="c" method="POST" action="" ref="form"> サンプルでは正解した場合の送信も抑制してあります。 ... else {e.preventDefault()} ... @で指定できるイベントは他にもありますが、以下によると

前記事: 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. テキストフィール

前記事: 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) }, }, 前記事

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: The zen of Just Writing CSS 公開日: 2017/09/06 著者: Rich Harris サイト: https://svelte.technology/ SFCについてはVue.js: 単一ファイルコンポーネントもどうぞ。 これは未来の話だが、私たちは既にそれを実践しているのだ。 CSSを嫌うのが流行っています。CSSを嫌う理由はいくらでもありえますが、突き詰めれば「CSSが予測不可能である」ということです。スタイルのルールをこねくり回しているうちに、まったく関係ない別のレイアウトが不意に壊れてしまう（しかもたいてい納品間近に起きる）という経験をしたことがない人がいるとすれば、新人か、さもなければよほどプログラミングが上手いかのどちらかでしょう。 JavaScriptコミュニティはこの問題に取り組み続