はじめに HotwireはBasecampが発表した、モダンなWebアプリケーションを作るための新しいアプローチです。名前もHTML OVER THE WIREから来ているように、HotwireではHTMLをサーバーから送ります。「それ普通のWebアプリケーションでは？」と思う方もいるかもしれませんが、SPA + APIサーバでJSONが使われるのに対し、SPAと同様の体験をHTMLを中心に置いて作るアプローチであることを示す表現です。 僕個人は、最初は「ふ〜ん」という感じだったんですが turbo-railsを読みつつHotwireのデモアプリをPhoenixに移植してみたり WebSocketではないTurbo Streamsのsourceを作ってみて遊んだり と、ある程度触ってみて良さが理解できてきたので、Hotwireを使うと何が嬉しいのか、Hotwireの各要素の紹介を記事として
はじめに Railsにも対応しているJavaScriptのサーバサイドレンダリング用ライブラリairbnb/hypernovaが、airbnbからリリースされました。 この記事では、シンプルなRailsアプリを構築し、これまたシンプルなReactコンポーネントをサーバサイドレンダリングで表示するまでのチュートリアルを解説します。 ReactによるSPA（シングルページアプリケーション）も増え、Google等の検索エンジンでもある程度はページ内容を解釈してくれるらしいですが、サーバ側でHTMLをレンダリングして出力するサーバサイドレンダリングを利用すると、より正しくページ内容を解釈してもらえます。 Hypernovaとは A service for server-side rendering your JavaScript views Hypernovaは、JavaScriptコンポーネント
When you’ve completed the steps below, camelCase param names submitted via JSON requests will be changed to snake_case. For example, a JSON request param named passwordConfirmation would be accessed in a controller as params[:password_confirmation] Create an initializer at config/initializers/json_param_key_transform.rb. This file is going to change the parameter parsing behaviour for JSON request
こんにちは。マーケティングプロダクト開発部の長田です。 この記事では、私が現在進めているプロジェクトで、Webpackerを使ったJavaScriptのモジュール管理を導入したので、それについて紹介したいと思います。 Webpackerとは Webpackerとは、Webpackを用いてRails上でJavaScript開発をするために必要な一連の流れを提供してくれる、Rails organizationで開発されているgemです。 これまで、Rails上でJavaScriptのパッケージをどのように管理するか、また、モジュール依存をどのように解決するかについて、多くの選択肢があり、それらをどう組み合わせて使うのかについて悩まされてきました。 このブログでも過去に何度か記事が投稿されており、その中でも複数の選択肢が上げられています。 webpackを使った Rails上でのReact開発
Turbolinks 5.0.0.beta2 がリリースされたのと、githubのリポジトリにdocが追加されたので、勉強がでら既存のRailsアプリのTurbolinksのバージョンアップ対応を行った。以下対応行った時のメモ。 asset変更時にreload処理を行う為のdata-turbolinks-trackに指定する値がtrueからreload(`‘data-turbolinks-track’: 'reload’)に変更になったのを対応turbolinksを使用したく無い場合に指定する値がdata-no-turbolinkからdata-turbolinks="false"に変更になったのを対応eventの名前が全て変わったのを対応。全部turbolinksという名前がつくようになっている(例：page:load -> turbolinks:load) eventの詳細は、turbo
こんにちは！12月に子供が生まれたばかりの鈴木( @suzan2go ) です。現在は週2~3日リモートで子供の成長を片目にみつつコードを書いています。うちの子はガラピコぷ〜がお気に入りです。 さて今回はRailsでのフロントエンド開発についてです。 昨今のフロントエンドの進化はめまぐるしく、Rails標準のSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みでは以下のような要望に答えられなくなってきています。*1 ECMAScript6で書きたい！ フロントエンドのライブラリ管理にnpmを使いたい！ で、上記に対応するにはおおまかに分類すると以下のような方法があります。 browserify-rails を使う github.com これが一番導入が簡単ですし、既存のRailsアプリに突っ込むならこれが選択肢としては手堅いと思います。 ただ開発中のビルドがめ
こんにちは、WantedlyのWebエンジニアの高松です。 このエンジニアブログでも何度かReact関連の話題が出ていますが、WantedlyではReact + Reduxを中心としたWebフロントエンドの技術スタックを導入して開発しています。 今回はスタックの導入方法や勘所について、詳しく解説してみたいと思います。特に既存のRails環境にReactなどの導入を検討していらっしゃる方の参考になれば、と思います。 今回の内容は以前発表した以下のスライドを元にしています。 これまでのWantedlyのフロントエンド開発 まず、今回のスタック導入前のWantedlyのフロントエンド開発がどのようなものであったのかについてご説明します。 Wantedlyの開発リポジトリを参照すると、最初のコミットは2011年9月になっています。現在は社内でもマイクロサービス化の動きが始まっていますが、基本的にW
Rails 3.1 以降で良く使われるようになった therubyracer ですが、最近、これを含む bundle install がやたらと時間がかかったり、あるいはそもそも失敗してしまう、という事象が多数報告されています。 解決方法 以下の三つの方法が基本的な解決方法です。 その0 （※ 2013/1/11 追記） Gemfile にて、libv8 3.11 系を使用することを明記します*1 *2 gem 'therubyracer', '0.11.1' gem 'libv8', '~> 3.11.8.13' その1 Gemfile にて、 therubyracer のバージョンを 0.11.0beta8 に戻します gem 'therubyracer', '0.11.0beta8' gem 'libv8' その2 Gemfile にて、 therubyracer のバージョンを 0
投稿推進部の外村（@hokaccha）です。 クックパッドブログの開発でRails上にECMAScript6などのモダンなJavaScript開発環境を導入した経験を元にノウハウを紹介したいと思います。 RailsはSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みが提供されています。Sprocketsによるasset管理の仕組みは非常によくできており、AltJSのトランスパイルやファイルの結合、minifyなど、assetのコンパイルに必要な機能を一通り備えています。 しかし、JavaScriptにおけるモジュールの依存関係の解決や、ライブラリの管理などについてはモダンなJavaScript開発と乖離してきているのが現状です。そこで、Railsでも以下のようなことを実現できることを目標に環境を作りました。 ECMAScript6のシンタックスを使う モジュ
RailsのAsset PipelineとPrecompileをNode.jsのみで処理できるgulp-sprocketsを作った 仕事ではRailsアプリを書いていて、JSやCSSなどのフロントエンドはRailsのAsset Pipelineの仕組みに則ってビルドしてる。 普通にRailsアプリ作ってると普段Sprocketsについて特に意識しないと思う。 Sprocketsはそこが凄くて、あまり考えなくてもドキュメント通りにやってれば、必要なAssetを結合できて、リリース時は変更がなければブラウザキャッシュから、変更があれば 新しく読み込まれるみたいなことをやってくれる。 なんだけど、もうそろそろ新しい機能はES2015で書きたいよねという人が増えてきた。 とはいえSprocketsは独自のディレクティブ以外は使えなくて、SprocketsWayから外れると途端に脆い。 ES2015
前書き Railsを使いつつJSもそこそこ書きたい、という条件であればまず前提としてjQuery脳を捨てましょう。jQueryスタイルで考えるかぎり何をどうやっても破綻するのでJSを諦めるか保守性を諦めるかして覚悟を決めましょう。 捨てるのは「jQuery」ではなく「jQuery脳」です。jQueryでグローバルな領域に進出してメソッドチェインで狼藉を働いたり、いま現在目の前にあるHTMLだけを考えてDOM操作をしたり、$.onと$.triggerを使ったクロージャ内部へのGOTOなどを記憶から消しましょう。 可能な限りスコープを小さく保つのはプログラミングの基本原則といえます。その原則を思い出し、JSを軽く扱わず、一般的なプログラミングと同様に閉じられた関心事にのみ注力するようにしましょう。 RailsとJSと役割分担 Railsもviewとしてテンプレートエンジンの処理を持っていますが
■ [rails][javascript] JavaScriptのテストフレームワークをRailsのためにパッケージングしたKonachaを使ってみた 「RailsでJavaSciriptのテストを」と言った場合、画面上でダイアログ開く処理とかをcapybara-webkitやpoltergeistでテストしたい…という話のときと、 そうではなくシングルページアプリとかでJS部分に複雑なロジックがあり、その部分をテスト駆動的に開発したい…というケースの2種類がありますが、今日は後者の話。 Rails + CoffeeScriptでぷよぷよシミュレータを書いていたのだけど、coffee部分のテストがしたくなって「coffeescript テスト」でググったところ、Konachaというライブラリが見つかった。 RailsでJavascript/CoffeeScriptをテストするときの決定版（
というわけでKonachaです。https://github.com/jfirebaugh/konacha なにこれ、粉茶？ JavascriptのテスティングフレームワークとしてはJasmineやらMochaあたりがメジャーどころのようだけど、セットアップが難しかったりして「これだ！」というものがなかった。個人的には。 で、今回、よーし、お父さんCoffeeScript書いちゃうぞー！というタイミングにあたって、もう一回いろいろ探してみたところ、これが一番スジがいいっぽかった。 KonachaはRailsでMochaとchaiを使いやすくしたGemらしい。Mochaとchaiは使ったことなかったけど、公式を5秒ほどみたところ、nodeでうごくrspecライクなテスティングフレームワークということでJasmineとかとあんまかわらないんじゃないかと推測。chaiはマッチャーのライブラリのよ
UPDATE: I’ve written an updated article on this and the larger topic of organizing Javascript within a Rails project that includes Turbolinks. The asset pipeline has made including javascript in Rails applications a breeze. Without any additional changes, the code included in your app is executed on every page. However, with a combination of CSS class scopes and a jQuery plugin, you can isolate ce
はじめに Rails 4になってTurbolinksやpjaxなどの非同期通信を使ってページを更新する方法が広く知られるようになりました。自分も積極的にプロジェクトに取り込んだのですが、結構癖があり、実装するにあたって色々考慮が必要だったのでその実装方法をまとめておきます。 ページ遷移後に$.readyが実行されない jQueryの.readyが実行されないというのがありますが、実はjquery-turbolinksというgemをGemfileに加えて、追加されたファイルをJavascriptのマニフェストファイルに加えるだけで解決するので特に問題ではありません。 グローバルスコープがクリアされない 技術の特性として、コンテンツ部分だけを置き換えているので、Javascriptのスコープはページ遷移をしてもクリアされません。なので、グローバルスコープに関数や変数を定義し続けると、どんどんメ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rails: Page Specific JavaScript with Asset Pipeline