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
週刊Railsウォッチ（20180316）Rails 5.2のドキュメント更新中、Value Objectの使い方、RubyがTIOBEトップテン復活、Rails「雪だるま」エンコーディングほか｜TechRacho by BPS株式会社
2018.03.16 週刊Railsウォッチ（20180316）Rails 5.2のドキュメント更新中、Value Objectの使い方、RubyがTIOBEトップテン復活、Rails「雪だるま」エンコーディングほか こんにちは、hachi8833です。先週終点で車両の座席に置き忘れたiPhone 7が粉々になって戻ってきて風景がぐらりとかしいだ気がしましたが、補償が効いて本体交換できてケロッと立ち直りました。春ですねぇ。 春たけなわのウォッチ、いってみましょう。 ⚓Rails: 今週の改修 5.2はまだ出ていませんが、ドキュメント更新が増えていて、収束に近づいていることを感じさせます。今週も5.2-stableと6.0向けmasterの両方から見繕いました。いずれも変更の可能性がありますので。 ⚓Rails 5.1->5.2アップグレードドキュメント まずは5.2-stableから。CS
Reduxストアの概念をRubyで再実装して理解する（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Understanding Redux store concepts by little Ruby reimplementation 原文公開日: 2018/01/30 著者: Josef Strzibny なお、reducerは「レデューサー」「リデューサー」の2とおりのカタカナがあるようですが、ネットで多数派の「レデューサー」にしました。 Reduxは最近のJavaScriptアプリのステート管理ライブラリとして人気が高まっており、実際にはその中心にシンプルなデータストアがあるだけです。Reduxのストアは他と何が違うのでしょうか？データを保存する点では他のストアと同様ですが、Reduxのデータ変更は常に「アクション」を「レデューサー」と呼ばれるものにディスパッチすることで行い、サブスクライブしているリスナーに通知します。Re
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="
JavaScript: Reduxが必要なとき/不要なとき（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: When (and when not) to use Redux – LogRocket 原文公開日: 2018/01/20 著者: Christian Nwamba サイト: LogRocket 2018/03/13: 初版公開 2021/06/03: 更新 Reduxが登場するまで、複雑なタスクを組むときのステート管理は相当つらい作業でした。Reduxは、Fluxというアプリケーションデザインパターンにヒントを得て、JavaScriptアプリでステートを管理するために設計されました。ReduxはReactと併用されることが多いのですが、ReduxはjQueryやAngular、Vueといった別のフレームワークとも併用できます。 Reduxのサイズは非常に小さい（依存関係も含めてわずか2KB）にもかかわらず、アプリの各コンポーネ
週刊Railsウォッチ（20180309）RubyGems.orgのTLS 1.0/1.1接続非推奨、2年に1度のRailsアンケート、DockerのMoby Project、Ruby拡張をRustで書けるruruほか｜TechRacho by BPS株式会社
2018.03.09 週刊Railsウォッチ（20180309）RubyGems.orgのTLS 1.0/1.1接続非推奨、2年に1度のRailsアンケート、DockerのMoby Project、Ruby拡張をRustで書けるruruほか こんにちは、hachi8833です。スマホを電車に置き忘れてしょんぼりしてます(´・ω・｀)。 3月のウォッチ、いってみましょう。今回はつっつき成分は少なめです。 Rails: 今週の改修 5.2リリース直前だけに、大きな修正は見当たらない感じでした。5.2-stableと6.0向けmasterの両方に多数の同じ修正が当たっています。 まずは5.2-stableから。 関連付けの作成と検索の挙動を一貫させた PR: #32048 Association creation and finding should work consistently これは#
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. 郵便番号に対応
週刊Railsウォッチ（20180302）Ruby 2.6.0-preview1とWebpack 4.0リリース、爆速検索APIサービスAlgolia、Clowneでモデルをクローンほか｜TechRacho by BPS株式会社
2018.03.02 週刊Railsウォッチ（20180302）Ruby 2.6.0-preview1とWebpack 4.0リリース、爆速検索APIサービスAlgolia、Clowneでモデルをクローンほか こんにちは、hachi8833です。Ruby生誕25周年おめでとうございます！ "Rubyはプログラミング言語の「塊魂」"は名言。 Link: ruby25/dave_thomas.en.md at master · ruby-no-kai/ruby25 https://t.co/tH54tCTytN — Yukihiro Matzmotto (@yukihiro_matz) February 26, 2018 3月最初のウォッチ、いってみましょう。最近社内での記事つっつき会が盛り上がっていて嬉しい限りです。 Rails: 今週の改修 Rails 5.2はまだ動いています。「2月中に
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
週刊Railsウォッチ（20180216）Rails 5.1.5リリース、DHHのYouTubeチャンネルは必見、Ruby Toolboxが運営再開ほか｜TechRacho by BPS株式会社
プレスリリース: Rails 5.1.5 has been released | Riding Rails weblog.rubyonrails.orgより マイナーリリースなのでバグ修正/セキュリティ対応が中心です。 ウォッチの社内つっつきを始めた直後にtakanekoさんに教えてもらうまでリリースに気づいてませんでした。ありがとうございます。 変更があったChangelogだけリストアップします。 ActionMailer: 1件 ActionPack: 2件 ActiveJob: 1件 ActiveModel: 1件 ActiveRecord: 10件 Railties: 1件 Rails: 今週の改修 5-2-stableが頻繁かつ細かく更新されていて、リリースが迫っていることを感じます。 以下はRails 6.0.0.alphaであるmasterから見繕いました。 新メソッド:
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. フィールドごとに全角英数字入力と半角
週刊Railsウォッチ（20180209）RubyにMJIT初マージ、高速JSON API gem、Railsにparallel-testingブランチほか｜TechRacho by BPS株式会社
2018.02.09 週刊Railsウォッチ（20180209）RubyにMJIT初マージ、高速JSON API gem、Railsにparallel-testingブランチほか こんにちは、hachi8833です。MacPaintとQuickDrawのソースコードが公開されていることに気づいたのでミーハー的にダウンロードしてみました。コードがびっくりするほど少ない... 臨時ニュース 祝MJIT初マージ🎉🎂🍣 I've just committed the initial JIT compiler for Ruby. It's not still so fast yet (especially it's performing badly with Rails for now), but we have much time to improve it until Ruby 2.6 (
週刊Railsウォッチ（20180202）Rails 5.2.0 RC1と5.1.5.rc1リリース、Rails 6開発開始、メソッド絵文字化gemほか｜TechRacho by BPS株式会社
2018.02.02 週刊Railsウォッチ（20180202）Rails 5.2.0 RC1と5.1.5.rc1リリース、Rails 6開発開始、メソッド絵文字化gemほか こんにちは、hachi8833です。生まれて初めて皆既月食をじかに見ました。 2月最初のウォッチ、いってみましょう。 つっつき中に録音ボタンを押し忘れてしまったので、今回のつっつき成分はいつもより少なめです🙇。 臨時ニュース Rails 5.2.0 RC1と5.1.5.rc1リリースとRails 6開発開始 立て続けのリリースです。RC版の表記が「RC」と「.rc」の2とおりなのが妙に気になりました。 Rails 5.2.0 RC1リリース 最終版は2月中に出したい意向だそうです。 Rails 5.2.0 RC1: Active Storage, Redis Cache Store, HTTP/2 Early Hi
画像とjQueryだけでグラフにアニメーションをつけてみた｜TechRacho by BPS株式会社
こんにちは、デザイナーのスギヤマです。 この間の雪を降らせるJSが一部で好評だったので、引き続きJSな記事を書いてみます。 サイトを作ってるとグラフなど、インフォグラフィックスを動的に表示して、インタラクティブなコンテンツにしたいといった要望は多々あると思います。 canvas要素を使って表現したりしますが、canvasが使えない（わからない）場合もあると思います。 なので、今回はcanvasを使わずに、画像とjQueryを使って、それっぽい動きのあるグラフを作ってみます。 サンプルコード いかがでしょう？それっぽく動くグラフになっているかと思います。 今回は、CSSのoverflow:hiddenとjQueryのanimate()関数を利用しています。 以下で簡単に説明していきます。 動きをつける単位で、グラフを画像パーツに分割する グラフのデザインデータは、psdなどでもらえる場合が多
週刊Railsウォッチ（20180119）derailed_benchmarks gem、PostgreSQLをGraphQL API化するPostGraphile、機械学習でモック画像をHTML化ほか｜TechRacho by BPS株式会社
2018.01.19 週刊Railsウォッチ（20180119）derailed_benchmarks gem、PostgreSQLをGraphQL API化するPostGraphile、機械学習でモック画像をHTML化ほか こんにちは、hachi8833です。Nintendo Laboにいろいろ持ってかれそうで気になってます。 つっつきボイス: 「任天堂のものづくりセンス、パないなー」 なんでこんなに感動してしまったかと考えていたんだけど、きっと心の中の「小5病」に火が着いたんだな — 稲見昌彦🌤️INAMI Masahiko (@drinami) January 18, 2018 それでは今週のウォッチ、いってみましょう。 Rails: 今週の改修 今回はCommit差分から見繕いました。 left_outer_joinsをunscopeできるようになった commit: f3d69
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
週刊Railsウォッチ（20180112）update_attributeが修正、ぼっち演算子`&.`は`Object#try`より高速、今年のRubyカンファレンス情報ほか｜TechRacho by BPS株式会社
2018.01.12 週刊Railsウォッチ（20180112）update_attributeが修正、ぼっち演算子`&.`は`Object#try`より高速、今年のRubyカンファレンス情報ほか こんにちは、hachi8833です。インフルエンザA型が身に沁みました。 2018年最初のウォッチ、いってみましょう。年末年始を挟んでだいぶ記事がたまっているのでいつもより多めです。 Rails: 今週の改修 Ruby 2.5をCIに追加 PR: #31570 CI against ruby 2.5.0 まずは縁起物コミットから。 # travis.yml - 2.2.8 - 2.3.5 - 2.4.2 + - 2.5.0 - ruby-head matrix: include: - - rvm: 2.4.2 + - rvm: 2.5.0 PostgreSQLでbulk_change_table
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の書いた記事一覧へ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsサンプルコード（32）郵便番号に対応する地図を表示する｜TechRacho by BPS株式会社