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とRailsの最適な融合を考える - メドピア開発者ブログ
もう新年を迎えて2ヶ月が経ちますね。 多くの人は新年の目標を立てますが、皆さんは何かしら立てましたでしょうか? 英語を毎日勉強するという目標を立てましたが、既に挫折してしまったエンジニアの村上(pipopotamasu (pipopotamasu) · GitHub)です。 本日はその懺悔も込めてVue.jsとRailsの話をお送りします。 この記事を書く背景 以前ブログで書いた通り、現在Webpackerへの移行を機にフロントエンド周りの改善を進めています。 tech.medpeer.co.jp その中でVue.jsとRailsをいい感じに組み合わせるにはどうしたら良いかについて悩むことがあったので、本記事にて共有させていただきます。 悩んだ内容としては以下になります。 1. Ajax通信時にCSRFトークンをどう設定すればいいか? 2. 単一ファイルコンポーネントで書くHTMLをもっと
【動画付き】Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～ - Qiita
はじめに Rails 5.1ではJavaScript/index.html.erb周りのサポートが大きく改善されました。 これにより、Vue.jsやReactといったモダンなJSフレームワークをRails内で非常に扱いやすくなっています。 僕も実際に試してみましたが、本当にびっくりするぐらい簡単にVue.jsやReactを動かすことができました。 そこでこの記事ではRails 5.1とVue.jsを組み合わせたサンプルアプリケーションの作成方法をチュートリアル形式で、できるだけ詳しく説明します。 また、ローカルで動かしておしまい、ではなく、Herokuにデプロイしたり、テストコードを書いたりするところまでカバーします。 この記事自体は長いですが、実際に手を動かすと（スムーズに進んだ場合）30分以内で終わらせることができるはずです！ 今回作成するサンプルアプリケーション 今回は以下のリンク先
Vue.js and Rails | Dreaming of Code
Getting up and running with Vue.js and Rails Vue.js has been widely adopted by the Laravel community, but I haven't seen much adoption in the Rails community. I have experimented with Vue.js in a couple different Rails applications and have had a very positive experience. I hope that this tutorial will show how easy it is to incorporate it into a Rails app and hope that the Rails community adopts
既存のRailsアプリケーションにVue.jsを採用した話 - スパイスな人生
こんにちは、id:ukstudioです。今回は弊社サービスの1つであるSPOTLIGHTSにVue.jsを採用した話をしようと思います。 SPOTLIGHTS自体は一般的なRailsアプリケーションといって問題ない作りになっているので、既存のRailsアプリケーションにどういった形でVue.jsを投入していったかを中心に書いていきます。 Vue.js採用前の状況 SPOTLIGHTS初期のJavaScriptはHTML/CSSと共に外注し納品してもらったものです。 フレームワークといった類はほぼ使っておらずjQueryに頼りきったコードでした。 当時は様々な事情によりこれはこれで妥当な判断だったと思うですが、今後社内でメンテナンスしていくうえで足かせになるであろうというのはなんとなく予想ができていました。jQueryのイベントハンドラやDOM操作がひとつのファイルにひたすら連なっているとい
Vue.js on Railsパーフェクトガイド - Qiita
概要 薄いフレームワークとしてVue.jsが有名ですが、規模が大きくなると結局たいへんなことになってしまうので、設計が必要です。また、Railsでアプリケーションをつくる場合、Vue.jsのComponentチックな志向をうまく利用するのが一工夫必要かと思います。 そこで今回は、Vue.js on Railsを、中~大規模開発に耐えうる、かつ、RailsとVue.jsのメリットを両方活かせる設計を考えてみました。 「さくっとフレームワークを導入したい！」という方にはやや面倒かもしれませんが、逆に、この通りに作りさえすれば、あとはVue.jsなので、難解な概念が出てくることはありません（個人的には、少なくともこれくらい設計しないとフレームワークを導入する意味が無いのでは?・・・と感じますが）。最初だけ頑張れば、あとは楽ですし、jQueryもそのまま動きます。 ※SPAなどではない、通常のRa
railsでVue.jsを使ってみる - Qiita
今話題ののvue.jsを既存のrailsのアプリケーションで使ってみたかったので、使う際の手順を書いておきます。 vue.jsに関しては、かなりまとめられた記事があるのでそちらを参考にしてください。 参考： Vue.js概要？ はじめよう Vue.js Vue.jsから手軽に始めるJavaScriptフレームワーク インストール まずはvue.jsをインストールしましょう。 本家サイトからインストールしてきても良いかと思いますが、今回はRails Assetsを使ってインストールします。 Rails Assetsとは？ Rails Assetsは少し前に話題になった、Bower(※Twitter社が作ったフロントエンド用のパッケージマネージャ)で管理しているパッケージをbundlerでインストールできるサービス。 Rails Assetsに関しての参考記事： bowerパッケージをbund
uu59のメモ | RailsとJS(vue.js)の連携
前書き Railsを使いつつJSもそこそこ書きたい、という条件であればまず前提としてjQuery脳を捨てましょう。jQueryスタイルで考えるかぎり何をどうやっても破綻するのでJSを諦めるか保守性を諦めるかして覚悟を決めましょう。 捨てるのは「jQuery」ではなく「jQuery脳」です。jQueryでグローバルな領域に進出してメソッドチェインで狼藉を働いたり、いま現在目の前にあるHTMLだけを考えてDOM操作をしたり、$.onと$.triggerを使ったクロージャ内部へのGOTOなどを記憶から消しましょう。 可能な限りスコープを小さく保つのはプログラミングの基本原則といえます。その原則を思い出し、JSを軽く扱わず、一般的なプログラミングと同様に閉じられた関心事にのみ注力するようにしましょう。 RailsとJSと役割分担 Railsもviewとしてテンプレートエンジンの処理を持っていますが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
