Vue.jsサンプルコード（13）「承認」チェックボックスをオンにしないと「送信」ボタンを押せないようにする｜TechRacho by BPS株式会社
前記事: 12. 特定の単語を入力したらボタンを無効にする 次記事: 14. 「承認」ボタンを押したら解除できないようにする 13. 「承認」チェックボックスをオンにしないと「送信」ボタンを押せないようにする Vue.jsバージョン: 2.5.2 「承認」チェックボックスがオフだと「送信］ボタンが半透明になり、押しても効きません。 「承認」チェックボックスをオンにすると「送信」ボタンが押せる状態になります。 画面を再読み込みすると最初の状態に戻ります。 ポイント: htmlのボタンの属性の:disabled="!a"で、aの論理値を反転しています。 <div class="btn btn-primary" :disabled="!a"> 送信 </div> 「承認」チェックボックスがオフの状態だと、「送信」ボタンの属性はdisabled="true"ではなくdisabled="disabl
Vue.jsサンプルコード（12）特定の単語を入力したらボタンを無効にする｜TechRacho by BPS株式会社
前記事: 11. ラベルをクリックして表示の開閉とラベルの変更を行う 次記事: 13. 「承認」チェックボックスをオンにしないと「送信」ボタンを押せないようにする 12. 特定の単語を入力したらボタンを無効にする Vue.jsバージョン: 2.5.2 フィールドに「WIP」という単語が含まれている場合に「Merge」ボタンを無効にします。 「WIP」が他の英単語の一部の場合は無視されます。 「WIP」が日本語などの2バイト文字に接している場合は単語とみなされません。 小文字の「wip」でも「Merge」ボタンは無効になります。 ポイントはreturn /\bWIP\b/i.test(this.a)の行です。正規表現でiを指定しているので大文字小文字は区別されません。 const vm = new Vue({ el: "#app", data: {a: "WIP: 親譲りの無鉄砲で小供の時か
Vue.jsサンプルコード（11）ラベルをクリックして表示開閉とラベル変更を行う｜TechRacho by BPS株式会社
前記事: 10. スライダーで入力したカラーコードを動的に表示する 次記事: 12. 特定の文字列を入力したらボタンを無効にする 11. ラベルをクリックして表示開閉とラベル変更を行う Vue.jsバージョン: 2.5.2 「もっと見る」ラベルをクリックするとコンテンツが表示されてラベルが「閉じる」に変更されます。 「閉じる」ラベルをクリックするとコンテンツが閉じて「もっと見る」ラベルに戻ります。 なお、「CONTENTS」というプレースホルダはplaceholder.comで表示しています（以前はplaceholder.itというドメインでしたが移転したようです）。フレキシブルなプレースホルダを簡単に利用できるので何かと便利です。 https://via.placeholder.com/256?text=CONTENTS placeholder.comより 補足: const vmについ
週刊Railsウォッチ（20170728）bootsnapがRailsで正式採用、Ruby Prizeの推薦開始、PostgreSQL配列の重複を除去ほか｜TechRacho by BPS株式会社
2017.07.28 週刊Railsウォッチ（20170728）bootsnapがRailsで正式採用、Ruby Prizeの推薦開始、PostgreSQL配列の重複を除去ほか こんにちは、hachi8833です。南極の氷が増えているのか減っているのか、だんだんよくわからなくなってきました。 7月最後のRailsウォッチ、いってみましょう。 Rails 5.1.3rc2と5.0.5rc2がリリース（Rails公式ニュースより） 公式: Rails 5.0.5.rc2 and 5.1.3.rc2 have been released rubyonrails.orgより Changelog: v5.1.2...v5.1.3.rc2 Changelog: v5.0.4...v5.0.5.rc2 つっつきボイス: 「バグフィックスが中心だろうし、正式版来たらアップグレードするかな」「先週rc1リリ
Vue.jsサンプルコード（10）スライダーで入力したカラーコードを動的に表示する｜TechRacho by BPS株式会社
前記事: 09. カラーピッカーで選択した色を動的に表示する 次記事: 11. ラベルをクリックして表示の開閉とラベルの変更を行う 10. スライダーで入力したカラーコードを動的に表示する Vue.jsバージョン: 2.5.2 3つのスライダーでHSLの値を変更すると、色と数値が動的に変更されます。 var vm = new Vue({ el: "#app", data: { h: 163, s: 84, l: 77, }, computed: { c: function() { return `hsl(${this.h}, ${this.s}%, ${this.l}%)` }, }, }); 以下はHTML部分の要点のみを抜粋したものです。 <input class="form-control" v-model="c" :style="{backgroundColor: c}" /> <
Vue.jsサンプルコード（08）入力したカラーコードをリアルタイムでプレビューする｜TechRacho by BPS株式会社
前記事: 07. 入力文字数をリアルタイムにプレビューする 次記事: 09. カラーピッカーで選択した色を動的に表示する 08. 入力したカラーコードをリアルタイムでプレビューする はなはだ簡単ですが、これも双方向データバインディングの例です。 Vue.jsバージョン: 2.5.2 6桁または3桁の16進カラーコードを入力すると、その場で下の色が更新されます。 :styleや:classには「魔法」が効く 今回のはシンプルですが、ポイントはHTMLの:style="{color: a}の部分です。 <div class="help-block" :style="{color: a}"> これはv-bindの略記法です（実はこれまでのサンプルコードにも登場しています）。普通のHTML属性と異なるのは、属性名が:で始まっていることです。 <!-- 属性を束縛 --> <img v-bind:s
週刊Railsウォッチ（20170630）Rails 5.1.2/4.2.9リリース、高機能なRailsキャッシュcounter_culture、Vue.jsの公式SSRガイドほか｜TechRacho by BPS株式会社
2017.06.30 週刊Railsウォッチ（20170630）Rails 5.1.2/4.2.9リリース、高機能なRailsキャッシュcounter_culture、Vue.jsの公式SSRガイドほか こんにちは、hachi8833です。最近RubyWeeklyより先にウォッチで紹介している記事がちょくちょくあることに気づきました。 6月最後のRailsウォッチ、いってみましょう。 Rails 5.1.2と4.2.9が正式リリース（Rails公式ニュースより） Rails 5.1.2 has been released Rails 4.2.9 has been released 5.1.2の修正は、これまでにもRailsウォッチで取り上げてきたものが多いので何だか親しみが持てます。ActionMailer、ActiveJob、ActionCable以外で修正が行われています。 4.2.9
Vue.jsサンプルコード（06）合計金額をリアルタイムに表示する｜TechRacho by BPS株式会社
前記事: 05. 複数のinputに同じ変数を割り当てるとどうなるか 次記事: 07. 入力文字数をリアルタイムにプレビューする 06. 合計金額をリアルタイムに表示するには？ 今回も双方向データバインディングの例です。表計算的な機能を簡単に実現できます。 Vue.jsバージョン: 2.5.2 サンプルコード03でご紹介したcomputedでメモ化すると、計算結果の表示を高速化できます。 computed: { sum: function() { return this.a * this.b + this.c * this.d }, tax: function() { return Math.ceil(this.sum * 0.08) }, }, HTML側で{{sum + tax}}とインラインで式を書けるのもVue.jsのありがたい点です。表示にしか使わないような処理を書くときに便利で
Vue.jsサンプルコード（05）複数のinputに同じ変数を割り当てる｜TechRacho by BPS株式会社
前記事: 04. 双方向データバインディングを使ってみる 次記事: 06. 合計金額をリアルタイムに表示する 05. 複数のinputに同じ変数を割り当てるとどうなる？ これも双方向データバインディングのサンプルコードです。今回はBootstrapのCSSとJSもCDNから追加して見た目を向上させています。 Vue.jsバージョン: 2.5.2 動作 HTMLソースで、以下のようにv-model='a'属性をさまざまなinputに追加することで同じ変数aを共用しています。以下はサンプルコードのHTMLを読みやすく省略・整形したものです。 <input type='text' v-model='a'> <label><input type='radio' v-model='a' value='1'>壱</label> <label><input type='radio' v-model='a
Vue.jsサンプルコード（01〜03）Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化｜TechRacho by BPS株式会社
こんにちは、hachi8833です。新シリーズ「Vue.jsの使い方」では、BPS Webチームのakioさん作のVue.jsのサンプルコードを順次掲載いたします。公式サイトのサンプルコードが全体に散らばっていてちょっと探しにくかったので、やりたいこと別の最小限のサンプルが欲しくて作ったとのことです。 Vue.jsのドキュメントをひととおり読んだことがあり、すぐ動かせる最小限のサンプルコードを探している方を対象としています。また、Vue.jsをまだやったことのない方でも、このサンプルコードを動かしてみることでVue.jsでどんなことができるか雰囲気をつかみやすくなると思います。 Vue.jsそのものについて詳しくは、公式サイトの「Vue.js」あたりからご覧ください。 次の記事: 04: 双方向データバインディングを使ってみる 01. 手元で Hello, World してみるには？ 10
RailsConf 2017のパフォーマンス関連の話題（3）「あなたのアプリサーバーの設定は間違っている」など（翻訳）｜TechRacho by BPS株式会社
「RailsConf 2017のパフォーマンス関連の話題」は今回で完結です。 第1回: BootsnapやPumaなど -- 開発中のRailsをBootsnapで倍速起動するなど 第2回: rack-freezeやsnip_snipなど -- スレッドバグや未使用カラムの検出など 第3回: 「あなたのアプリサーバーの設定は間違っている」など（本記事） 概要 原著者より許諾を得て翻訳・公開いたします。 元記事: Railsconf 2017: The Performance Update 著者: Nate Berkopec (@nateberkopec): Railsのパフォーマンスコンサルタントです。 主著: The Complete Guide to Rails Performance 楽しい画像はすべて元記事からの引用です。 7. あなたのアプリサーバーの設定は間違っている 私は今回
週刊Railsウォッチ（20170609）ついにtherubyracerからmini_racerへ、注意しないとハマるgem、5.1でのVue.jsとTurbolinksの共存ほか｜TechRacho by BPS株式会社
2017.06.09 週刊Railsウォッチ（20170609）ついにtherubyracerからmini_racerへ、注意しないとハマるgem、5.1でのVue.jsとTurbolinksの共存ほか こんにちは、hachi8833です。暦では梅雨ですが近年のこの時期、どうも天候がはっきりしませんね。 それでは今週のウォッチ、いってみましょう。 Rails: 今週の改修（Rails公式ニュースより） ついにtherubyracerを置き換え: 後任はmini_racer PR: #29285: Replace therubyracer with mini_racer therubyracerのV8エンジンのバージョンが古いことはRailsウォッチでもお知らせしましたが、2013年のChrome 31並に古かったんですね。古いV8の脆弱性が見過ごせない状態になったのがきっかけだそうです。
正規表現: 文字クラス [ ] 内でエスケープしなくてもよい記号｜TechRacho by BPS株式会社
こんにちは、hachi8833です。久しぶりに正規表現についての記事を書いてみました。 一応Ruby（Onigmo）を対象にしましたが、なるべく他の正規表現ライブラリでも通用する一般的な記述を心がけました。エッジケースを扱っているためシンタックスハイライトがついていけてない部分がありますのでご了承ください。 ⚓ 文字クラス[ ]内のエスケープ 正規表現でのエスケープ、特に記号のエスケープは何かと面倒になりがちです。記号が出てくるたびに片っ端からバックスラッシュ\でエスケープしてばかりだと疲れてしまいます。 しかしつい忘れがちですが、正規表現の中でも文字クラス[ ]の中だけは別世界になっていて、文字クラスの外よりもエスケープが少なくてすみます。 あくまで原則としてですが、文字クラス[ ]の中に限り、以下の4つの記号だけがメタキャラクタ（=機能を持つ記号）として扱われます。 \ バックスラッシ
![正規表現: 文字クラス [ ] 内でエスケープしなくてもよい記号｜TechRacho by BPS株式会社](https://cdn-ak-scissors.b.st-hatena.com/image/square/f148416a5cc49119b1e419fed39d4ad841c1c08b/height=288;version=1;width=512/https%3A%2F%2Ftechracho.bpsinc.jp%2Fwp-content%2Fuploads%2F2020%2F10%2Fregexp_signs_no_need_to_escape_in_braces_eyecatch-min.png)
週刊Railsウォッチ（20170512）Rubyの不思議な挙動「シャドウイング」、コードレビュー作法を定めるDanger gemほか｜TechRacho by BPS株式会社
2017.05.12 週刊Railsウォッチ（20170512）Rubyの不思議な挙動「シャドウイング」、コードレビュー作法を定めるDanger gemほか こんにちは、hachi8833です。Rails 5.1でrails newすると忘れた頃にspringに邪魔されます。 GWをはさんだ2週間ぶりのRailsウォッチ、いってみましょう。 Rails: aggregated_resultsで任意の種類の引数を取れるよう修正 PR: #29022 Allow to receive arbitrary arguments in aggregated_results y-yagiさんという方の「なるようになるブログ」は、Railsのコミットログをひたすら読む記事を毎日のようにアップするというすごいブログなのですが、そのy-yagiさんがRailsにちょくちょくプルリクを送っていることに昨日初め
週刊Railsウォッチ（20170407）N+1問題解決のトレードオフ、Capybaraのテスト効率を上げる5つのコツほか｜TechRacho by BPS株式会社
2017.04.07 週刊Railsウォッチ（20170407）N+1問題解決のトレードオフ、Capybaraのテスト効率を上げる5つのコツほか こんにちは、hachi8833です。HackerNewsにあがってたHOW BANK OF AMERICA GAVE AWAY MY MONEYをつい読んでしまいました。いかにもコントやショートショートにありそうな話ですが、実際に起きるとめちゃ怖いですね。たぶんそのうちどこかの海外ネタサイトに載ると思います。 Ruby 2.1のサポート終了（Ruby公式ニュースより） 公式発表: Support of Ruby 2.1 has ended 日本語版: Ruby 2.1 公式サポート終了 発表日が4/1だったので、すわエイプリルフールかと思いきや、1年前の予告どおりのスケジュールでの発表でした。 昨年 3 月末の Ruby 2.1.10 のリリース
5.1 beta1リリースノートに見るRails 5.1の姿｜TechRacho by BPS株式会社
こんにちは、hachi8833です。Rails 5.1beta1がリリースされました。Rails 5リリースからのコミット数は既に3500件を超えているそうです。 公式ニュース: Rails 5.1.0.beta1: Loving JavaScript, System Tests, Encrypted Secrets, and more なおRails 5.0.2.rc1も並行してリリースされました。 公式ニュース: [ANN] Rails 5.0.2.rc1 has been released! beta1にみるRails 5.1の姿 公式ニュースの情報では、5.1で予定される多数の更新の中から以下をピックアップしています。週刊Railsウォッチをお読みの方は多くの項目に見覚えがあるかと思います。 5.1リリースまでに詳細は変わる可能性がありますが、この方向性で進むと考えてよいと思います
週刊Railsウォッチ（20170227）Rails 4.2.8リリース、SHA-1コリジョンアタック、便利なハッシュ変換ツールほか｜TechRacho by BPS株式会社
こんにちは、hachi8833です。今週は公式サイト以外からの情報も少し多めにしようかと思いましたが、4.2.8リリース記事を優先しました。 臨時ニュース: SHA-1のコリジョンアタック手法が見つかったとGoogleから発表 一次ニュースソース: Google Security Blog: Announcing the first SHA1 collision Slackでbabaさんの書き込みから第一報を知りました。早くも日本語ニュースが出ていますので、詳しくはそちらをどうぞ。 HackerNewsのスレ「Announcing the first SHA-1 collision (googleblog.com)」では、PDFをドロップするだけでSHA-1コリジョン問題を手軽にチェックできるhttps://shattered.it/サイトが大賑わいになっています。問題の要点がよくまとまっ
週刊Railsウォッチ（20170217）Rails 4.2.8.rc2リリース、Ruby 2.4正規表現とActiveSupportのnormalizeほか｜TechRacho by BPS株式会社
2017.02.17 週刊Railsウォッチ（20170217）Rails 4.2.8.rc2リリース、Ruby 2.4正規表現とActiveSupportのnormalizeほか こんにちは、hachi8833です。週刊Railsウォッチの記事件数が増えて泣く泣く絞り込むことが増えてきました。それでは今週もいってみましょう。 臨時ニュース: JavaScriptのアドレス空間配置ランダム化を無効にする攻撃 ニュースソース: 既存のx86/ARM CPUほぼ全てに通用するJavaScript攻撃が発見される morimorihogeさんがつい先ほどfetchしたニュースです。詳しくはリンク先をどうぞ。 HackerNewsでも元論文が上昇中のようです。 Rails 4.2.8.rc1リリース（Rails公式より） ニュースソース: Rails 4.2.8.rc1 has been rele
週刊Railsウォッチ（20170210）JRubyやRubiniusの配列への追加はスレッドセーフではないほか｜TechRacho by BPS株式会社
2017.02.10 週刊Railsウォッチ（20170210）JRubyやRubiniusの配列への追加はスレッドセーフではないほか こんにちは、hachi8833です。今週はJavaScriptのニュースが目につきました。 V8 JavaScript エンジン5.7がリリース ソース: V8公式ブログ v8project.blogspot.jpより パフォーマンス向上 ES2015の改良 RegExpが15%高速化 ライブラリの新機能 WebAssemblyが有効になった V8 APIをさらに追加 個人的にはRegExpの高速化が気になりました。早くJavaScriptの正規表現がPCRE並になって欲しいものです。 Railsでよく使われるtherubyracerではlibv8が使われていますが、以前に比べると随分安定するようになったとの声がありました。libv8でググると当時ハマった
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsサンプルコード（04）双方向データバインディングを使ってみる｜TechRacho by BPS株式会社