Rails: jQueryをVue.jsに置き換える方法（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: 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のデフォルトオプションであり続けています。しかし現在であれば、クライアント側コードがさらに複雑になったためにもう少し別のライブラリが必要とされていることでしょう。
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サンプルコード（37）一定時間経過後に自動でリダイレクトする｜TechRacho by BPS株式会社
前記事: 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
Vue.jsサンプルコード（36）Deleteキーで前のフィールドに戻って消す｜TechRacho by BPS株式会社
前記事: 35. 入力すると自動的に次のフィールドにフォーカスを進める 次記事: 37. 一定時間経過後に自動でリダイレクトする 36. Deleteキーで前のフィールドに戻って消す Vue.jsバージョン: 2.5.2 日本の携帯電話番号の入力を想定しています（3桁、4桁、4桁）。 フィールドに入力すると、桁数いっぱいになったときに次のフィールドにフォーカスが自動で移動します。 最後のフィールドは桁数いっぱいに入力してもフォーカスは移動しません。 Deleteキーでフィールドの数字を消すと、前のフィールドにフォーカスが戻り、さらに1文字消します。 最初のフィールドはDeleteキーですべて消してもフォーカスは移動しません。 画面をリロードすると最初に戻ります。 ポイント 前のフィールドに戻ったときに1文字消したくない場合は、以下の2か所の@keydownを@keyupに変更します。 <i
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コミュニティはこの問題に取り組み続
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsサンプルコード（38）入力をやめるとリダイレクトする｜TechRacho by BPS株式会社
Vue.jsサンプルコード（32）郵便番号に対応する地図を表示する｜TechRacho by BPS株式会社
Vue.jsサンプルコード（27）選択肢に応じて入力項目を切り替える｜TechRacho by BPS株式会社