RailsのTurbolinksとVue.jsを共存させる方法 - Qiita
はじめに ジドウシャ部ではフロントエンドにRails + Turbolinks + Vue.jsを採用しています。 Turbolinksといえば敬遠されがちなRails標準ライブラリですが、ジドウシャ部ではTurbolinksを活用し、スマホブラウザでもアプリに近いUIを実現しています。 本記事では Turbolinks と Vue.js を併用する上で解決すべき課題と、解決策の一例をご紹介します。 解決すべき課題 TurbolinksとVueを共存させる上で解決すべき課題は下記の2点です。 Vueのマウントタイミング マウントするタイミングによってはエレメントが存在しないケースが発生します ヒストリーバック時の処理 Turbolinksのヒストリーバック機能ではVueが正しく復元されません 解決策 Vueのマウントタイミング制御 データ属性にマウントするVueの情報を埋め込み、Turbo
Vuex とは何か？ | Vuex
注意 これは、Vue 3 で動作する Vuex 4 のためのドキュメントです。Vue 2 で動作する Vuex 3 のドキュメントをお探しの方は、こちらをご覧ください。 Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。 "状態管理パターン"とはなんですか？ #単純な Vue で作られたカウンターアプリをみてみましょう: const Counter = { // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // actions methods: { increment ()
Turbolinks、時々Vue.js - Misoca開発者ブログ
こんにちは、@mugi_unoです。 今年は雪がスゴいですね。 暖かい我が家でリモートワークのありたがみを日々噛み締めています。 先日は雪だるまを作りましたが、想像とは違う仕上がりになりました。 娘は「これじゃない！」と不満そうでした。 新しいRails&フロントエンドの環境構築 さて、最近Misocaでは、新規Railsアプリケーションのフロントエンド環境を整える機会がありました。 チームで検討した結果、Turbolinks&Vue.jsを採用しており、 その際に得られた知見を紹介したいと思います。 Turbolinksを使う理由 TurbolinksはGoogleで検索するとサジェストがこんな感じになるほど無効化されがちです。 利用するために理解すべき独自の挙動がある ゴリゴリにフロントエンドを触っている人からすると 「そこまでやらないで〜〜！」といった気持ちになる といった具合に避け
Rails と Vue.js の設計覚書 - Qiita
はじめに これは Rails の View と Vue を馴染ませるための設計指針になります。 Rails 5.1 で webpack や Vue が公式サポートされました。SPA の場合はあまり気になりませんが、スタンダードな Rails 構成に Vue を適用する場合は、Rails の View と Vue をどのように管理すべきか悩むことになると思います。本記事にはその対処例をまとめています。 環境 Rails 5.1+ Turbolinks 5.0+ webpack 2.0+ Vue 2.0+ Vuex 2.0+ 参考 【動画付き】Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～ - Qiita Rails と Vue の導入に関しては、こちらが参考になります。 この内容を踏まえた上で、その先の設計周りについて考察していきます。
コンポーネントの基本 — Vue.js
基本例Vue コンポーネントの例を次に示します: // button-counter と呼ばれる新しいコンポーネントを定義します Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) コンポーネントは名前付きの再利用可能な Vue インスタンスです。この例の場合、<button-counter>です。このコンポーネントを new Vue で作成されたルート Vue インスタンス内でカスタム要素として使用することができます。 <div id="components-demo"> <button-counter></butt
単一ファイルコンポーネント — Vue.js
ガイド 基本的な使い方 インストール はじめに Vue インスタンス テンプレート構文 算出プロパティとウォッチャ クラスとスタイルのバインディング 条件付きレンダリング リストレンダリング イベントハンドリング フォーム入力バインディング コンポーネントの基本 コンポーネントの詳細 コンポーネントの登録 プロパティ カスタムイベント スロット 動的 & 非同期コンポーネント 特別な問題に対処する トランジションとアニメーション Enter/Leave とトランジション一覧 状態のトランジション 再利用と構成 ミックスイン カスタムディレクティブ 描画関数とJSX プラグイン フィルター ツール 単一ファイルコンポーネント テスト TypeScript のサポート プロダクション環境への配信 スケールアップ ルーティング 状態管理 サーバサイドレンダリング セキュリティ 内部 リアクティブ
Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】 | RE:ENGINES
はじめに 以前、Qiitaに書いた記事ですが、いくつか現行バージョンではうまくいかないという指摘があったため、やり直してみました。 各バージョンは、2018年3月24日時点の安定版で試しています。 作るもの 簡単なTODOアプリです。 TODOの管理はRailsのAPIで実施します。 前提条件、及び環境 Ruby、Rails、Node.jsの環境をご用意ください。 下記の記事などが分かりやすいです。 rbenvを利用したRuby環境の構築 Node.jsとnpm インストールとアップデート また、Webpack、およびVue.jsは yarn でインストールされるため、 yarn もインストールしておいてください。 yarnを使ってみた 本記事を書くにあたり、下記の環境で実施しました。 Ruby 2.5.0 Ruby on Rails 5.1.5 Node.js 9.9.0 yarn 1.
Rails 5.1 + Vue.js + Vuex + vue-routerの初期設定 - Qiita
Rails 5.1 + Vue.js + Vuex + vue-routerの初期設定 Rails 5.1でVue.jsの単一コンポーネントファイルを使おうとしたら初期設定が色々と面倒だったので、設定し終えた状態でGitHubに置いておきました。良かったら使ってください。 https://github.com/midwhite/VueOnRailsTemplate 使っているもの Ruby 2.4.1 Rails 5.1.4 Vue.js 2.5.9 Vuex 3.0.1 vue-router 3.0.1 webpacker 3.0.2 MySQL 5.6 bootstrap 4.0.0-beta ポイント app/javascript/pack/application.js import Vue from 'vue'; import Vuex from 'vuex'; import Vu
vue-router
Vue Router は Vue.js (opens new window) 公式ルータです。これは Vue.js のコアと深く深く統合されており、Vue.js でシングルページアプリケーションを構築します。機能は次の通りです: ネストされたルート/ビューマッピング モジュール式、コンポーネントベースのルータ構造 ルートパラメータ、クエリ、ワイルドカード Vue.js の transition 機能による、transition エフェクトの表示 細かいナビゲーションコントロール 自動で付与される active CSS クラス HTML5 history モードまたは hash モードと IE9 の互換性 カスタマイズ可能なスクロール動作 はじめに または 例 (opens new window) から試してください。 (README.md (opens new window)を参照してくだ
Vue-routerを使って、SPAをシンプルにはじめてみる - Qiita
はじめに Vue-routerを使ってシンプルなSPA(Single Page Application)的なサイトを作ってみる。なかなかシンプルにやりたいことだけやれる説明サイトが見つからなかったのでまとめておきます。 やりたいことは、最初に画面がでてきて、画面内のリンクをおしていくとどんどん次のページへ進んでいくという単純な画面遷移をVue-routerを使って実現すること、それだけです。 むかしはこれだけでもできたら、すぐに"アドベンチャーゲーム"作れるなー とか思いましたが、最近アドベンチャーゲームというジャンルもなかなか聞かなくなりましたね..... 説明は、大事なポイント以外は省略してやりたいことに一直線でいきます。 (2018.11) しばらく放置した結果Vueのバージョンが変わり動かないサンプルコードになっていたので修正しました。。 Vue および Vue-router のイ
はじめてのAjax(jQuery) 2018年版 - Qiita
2018/03/21 2018年版に再編集 はじめに：Ajaxとは Ajaxとは「Asynchronous JavaScript + XML」の略です。簡単に言えばJavaScriptとXMLを使って非同期にサーバとの間の通信を行うことが出来ます。 Ajaxを使用することで画面遷移をせずにHTMLを更新することが可能なので、ユーザビリティの向上やサーバ負荷の軽減に繋がります。AngularJSなどで作成したシングルページアプリケーションはこの技術を中心に構成されています。 簡単にまとめると次のようになります。 ページ遷移をさせず（非同期処理で）コンテンツを書き換えられる 他の処理と同時並行で、サーバとやりとりができる また、jQueryでのAjax実装が手軽なので、今回はjQuery、ローカルサーバにMAMPを使用しています。 最初は、pythonやnodeなどのワンライナーでのローカルサ
Rails & Webpackerでフロントエンド開発環境を整える - Qiita
概要 Rails 5.1 から導入されるというwebpackerを試してみます。 Webpackerとは Webpacker makes it easy to use the JavaScript preprocessor and bundler Webpack to manage application-like JavaScript in Rails. It coexists with the asset pipeline, as the purpose is only to use Webpack for app-like JavaScript, not images, css, or even JavaScript Sprinkles (that all continues to live in app/assets). It's designed to work with Rai
Rails 5.1 + Vue.js で開発を行う - part1 環境構築 - Qiita
概要 Webpacker を利用してRails 5.1 + Vue.js で開発を行う方法を紹介。 本記事では、開発環境を整えるまで行う 次回の記事では、Vue.js を使って Ajax 通信を行います。 Rails 5.1 + Vue.js で開発を行う - part2 Ajax で GET しよう！から確認ください 全コードはこちらより確認いただけます 環境 ruby 2.4.1 Rails 5.1.1 Vue 2.3.4 webpacker のインストール はじめに webpacker を install します。 ※ Rails アプリをすでに作成済みという前提で話を進めます。 webpacker とは Webpacker makes it easy to use the JavaScript pre-processor and bundler Webpack 2.x.x+ to
Rettyへの批判記事に対するお詫びと説明
日本最大級の実名型グルメサービスRetty（http://retty.me）の代表です。 Retty開発・運営に関する日々の出来事などを中心に記していきます。 Retty代表の武田と申します。 本日、Rettyの採用における対応についての批判記事がはてなブログにあがった事により、 様々なご意見や批判を頂いております。貴重なご意見を頂き、ありがとうございました。 私からの説明不足でご心配をおかけしてしまっている点や不快に感じられている方もいらっしゃいますので、私より直接説明をさせていただきます。 今回の記事について http://anond.hatelabo.jp/20141220102208 こちらは事実であり、昨日弊社にお越し頂いた方となります。 ◯経緯について 先日、武田のLinkedinアカウント経由で、魅力的な方を見つけたため、スカウト形式のリクルーティングメールを送信したところ、
Rettyの武田社長からLinkedIn経由でスカウトされたので行ってみたら・・
Rettyという有名クチコミグルメ情報サービスの武田さんという創業者の方からLinkedInで直接メッセージが来ましてですね、 「はじめまして、Retty株式会社 代表取締役CEOの武田と申します。突然のご連絡申し訳ございません。」 「まずは一度、お会いさせて頂き、Rettyの今後の事業展開やビジョン、貴殿のお考え等、ざっくばらんにお話させていただければと思っております」 「ご来社頂いた際には、メンバーともお話いただき事業については勿論ですが弊社の雰囲気も感じていただければと思っております」 というようなことが書いてあったので、当然面談の主体は武田さんで、他にも何人か同席される感じなんだろうなと思い、 直近でジョインできるかどうかは別として、Rettyや武田さんには以前からとても関心があったので、 とりあえず話だけでも聞いてみようと思って、わざわざ時間確保してオフィスに伺ってみたわけです。
git pull と git pull --rebase の違いって？図を交えて説明します！ | KRAY Inc
はじめに こんにちは、クレイの亀井です。ここ最近一気に気温が上がりましたね。顔に重点的に汗をかくタイプの私には憂鬱な季節がやってまいりました😩💦 さて、今月正式リリースしました(！) Doc...
Rails4で外部キー制約をつけるときに見直すメモ
migration するたびに見直している気がするので，メモしておく．今回は Rails4.2.1 で試している． まず xxxs テーブルに yyy へのリファレンス(yyy_id)を追加するには bin/rails g migration AddReferenceToXxxs yyy:references とする． reference ではなく， references であることに気をつけること． こうすると，外部制約つきの関連のマイグレーションファイルが用意される．別に手で書いてもいいのだけど，少しだけ楽ができる． class AddReferenceToXxxs < ActiveRecord::Migration def change add_reference :xxxs, :yyy, index: true add_foreign_key :xxxs, :yyys end en
class Range (Ruby 3.4 リファレンスマニュアル)
[edit] 要約 範囲オブジェクトのクラス。範囲オブジェクトは文字どおり何らかの意味での範囲を表します。数の範囲はもちろん、日付の範囲や、「"a" から "z" まで」といった文字列の範囲を表すこともできます。 作り方 範囲オブジェクトは、Range.new を用いるほか、範囲演算子（`..' または `...'）を用いた 演算子式/範囲式 で生成できます。いずれの方法でも始端と終端を与えます。 範囲オブジェクトの例 Range.new(1, 5) # 1 以上 5 以下 1..5 # 同上 1...5 # 1 以上 5 未満 この例で分かるように、範囲オブジェクトは終端を含む範囲も含まない範囲も表せます。 Ruby 2.6.0 からは、終端に nil を与えることで「終端を持たない範囲オブジェクト」を作ることができるようになりました。 終端を持たない範囲オブジェクト p Range.n
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Turbolinksを調べてみた
トップページ
はじめに | Vue Router
Learn to code with Scrimba
ruby on rails - ERROR: delete on table violates foreign key constraint. Key id is still referenced from table (many) - Stack Overflow
PostgreSQL - railsでデータを削除できません。(20137)｜teratail
【FANZA REPORT 2018】 今年のエロトレンドは！？「性に関する統計調査」結果発表！ - FANZA Magazine