TypeScript+webpack+Hypernova on RailsでSSRするときの設定ファイル - Bit Journey's Tech Blog
「Roppongi.rb #3 で「RailsエンジニアがReactを始めてSSRとReduxを導入するまで」という発表を行いました - Bit Journey's Tech Blog」あたりの話のなかで触れている、KibelaにおけるJSのビルド環境に関係する設定ファイルなどを公開します。 現在もこのときと基本的な構成は変わっておらず、すでに数ヶ月安定して運用できています。 環境 Rails v5.1 TypeScript v2.5 webpack v3.6 Hypernova*1 webpackerは不使用で、webpack-rails*2を使用 ディレクトリ構成 client/ - フロントエンド用TSコード（.ts, .tsx,.json） spec/javascripts/* - テスト用TSコード なおプロダクション用フロントエンドコードは 100% TypeScript です
今更聞けないpryの使い方と便利プラグイン集 - Qiita
Rubyのソースコードを読むとき、grepやctagsだけで読んでるとどこにどういう値が入るのか頭で考える必要があり大変。 そういう時、実際に動かしながらpryを使って中身を確認すると、どういう動きをしているのか楽に把握できる。 普通のエディタを使ってRubyを書いている人にとって、IDE的な機能を提供してくれるのがpryといえる。 本稿では、この記事を書く前の私のように、この次の「最低限の使い方」くらいしかpryを使いこなせていない人向けに、便利な機能をひと通り説明する。 最低限の使い方 まだpryを使ったことがない人はこれだけ知ってれば十分な気がする。 binding.pryで任意の場所からREPLを立ち上げる ソースの任意の箇所にbinding.pryを書いてRubyのプログラムを走らせると、実行中にその行でストップしてpryのREPLが立ち上がり、その環境での変数がどうなっているか
Rails内でのwebpackの使い方
February 14, 2016 rails webpack “How to use webpack with Rails”翻訳記事になります。 webpackは強力なモジュールバンドラである。主としてフロントエンド開発のために設計されており、 bowerやnpmのJavaScriptモジュールをうまく統合することができる。 Sproketsやアセットパイプラインを用いればシームレスな挿入をすることが可能だけれども、これには典型的なRailsのJSマネジメントシステムを使うによりいくつか大きな利点がある。残念ながらwebpackのドキュメントはまだ要約することが難しく、特にRailsに統合したいとなればなおさらだ。 あなたがまだwebpackを使っていないのであれば、ここに何ができるのかを示そう。 npmやbowerを使っている全てのフロントエンドのJS(依存関係も)管理する Coffe
新規Railsアプリに小さく導入するReact - Speaker Deck
dotsで開催されたReactの導入を検討されてる方向けの勉強会でお話しました https://eventdots.jp/event/597088
Rails4でフォームに入力された値を取得するStrongParameters機能 - Rails Webook
Rails4以降で導入されたフォームで入力された値のマスアサイメントを防ぐためのStrongParametersという機能について説明します。 動作確認 Rails 4.1 目次 Railsのparamsメソッド StrongParameterのメソッド 1. RailsのparamsメソッドRailsではname属性には次のような規約があるため、コントローラー内のparamsメソッドで値をネストされたハッシュとして取得できます。 product[name]のように、name属性に[名前]をつけると、ネストしたハッシュとして受け取れる product[category_ids][]のように、name属性に複数空の[]をつけると、配列として値を受け取れる。 例えば、次のような商品情報を登録するフォームから入力を受け付けたとします。 <form action="/products" metho
使えるRSpec入門・その1「RSpecの基本的な構文や便利な機能を理解する」 - Qiita
はじめに RSpecは難しい、よくわからない、といったコメントをときどき見かけます。 確かにちょっと独特な構文を持っていますし、機能も結構多いので「難しそう」と感じてしまう気持ちもわかります。 （構文については僕も最初見たときに「うげっ、なんか気持ちわるっ」と思った記憶がありますw） しかし、RSpecに限らずどんなフレームワークでも同じですが、慣れてしまえばスラスラ書けますし、実際僕自身は「RSpecって便利だな－」と思いながらテストコードを書いています。 そこでこの記事では、僕が考える「最低限ここだけを押さえていれば大丈夫！！」なRSpecの構文や、僕が普段よく使う便利な機能をまとめてみます。 具体的には以下のような構文や機能です。 describe / it / expect の役割 ネストした describe context の使い方 before の使い方 let / let!
RailsでAMP対応する方法と注意点 - Web Walker
SEOをやっているかたやWEBサイトを運営している方の中に「最近よくきくAMPってなんなの？」、「どうやって対応するの？」と気になっている方が多いのではないでしょうか。 仕事がらAMPについては耳にしていましたが、ニュース性のものが対象なのかと思いちょっと距離をとっていましたが なぜか急に興味がわいてきたため私の個人サイト（Rails）に対してAMP対応をしてみました。 このページでは具体的なAMP対応方法をRailsサイトについて紹介していきます。 エンジニアで「AMPってどんなもの？」、「実装って大変？」と疑問に思っている方に対し、AMP対応方法やリファレンス、私がはまった注意点について紹介していきますので 参考になれば幸いです。 AMPとは？何ができるの？ AMP（Accelerated Mobile Pages）とは2015年からGoogleが進めいているプロジェクトで、スマホのW
React+ReduxをRails環境下で開発する環境構築テンプレート（Webpackも使うし、Reduxのサーバサイドレンダリングもあるよ） - Qiita
React+ReduxをRails環境下で開発する環境構築テンプレート（Webpackも使うし、Reduxのサーバサイドレンダリングもあるよ）RubyRailswebpackReactredux 色々情報がありますが、断片化されてたので纏めました。 もしこんな環境で開発する人がいれば参考にして下さい。 というか1つの記事に詰め込み過ぎたかもしれません。 ちなみにこの環境構築は以下の記事を参考に作成されています。 WebPackを使ってRailsからJavaScriptを楽に良い感じに分離する Rails + モダンJS環境(Webpack)で新規アプリ作成 RailsでReduxコンテナをサーバサイドレンダリング (use Hypernova by airbnb) 素晴らしい記事に感謝。 今回書いた記事のソースはこちらです。 前提条件 本記事では以下のような開発環境を想定して記載します。
5年間開発しているRailsプロジェクトにReact + Reduxを導入した話 by Shimpei Takamatsu | Wantedly, Inc.
こんにちは、WantedlyのWebエンジニアの高松です。 このエンジニアブログでも何度かReact関連の話題が出ていますが、WantedlyではReact + Reduxを中心としたWebフロントエンドの技術スタックを導入して開発しています。 今回はスタックの導入方法や勘所について、詳しく解説してみたいと思います。特に既存のRails環境にReactなどの導入を検討していらっしゃる方の参考になれば、と思います。 今回の内容は以前発表した以下のスライドを元にしています。 これまでのWantedlyのフロントエンド開発 まず、今回のスタック導入前のWantedlyのフロントエンド開発がどのようなものであったのかについてご説明します。 Wantedlyの開発リポジトリを参照すると、最初のコミットは2011年9月になっています。現在は社内でもマイクロサービス化の動きが始まっていますが、基本的にW
RailsでReactをサーバサイドレンダリング（use Hypernova by airbnb） - Qiita
はじめに Railsにも対応しているJavaScriptのサーバサイドレンダリング用ライブラリairbnb/hypernovaが、airbnbからリリースされました。 この記事では、シンプルなRailsアプリを構築し、これまたシンプルなReactコンポーネントをサーバサイドレンダリングで表示するまでのチュートリアルを解説します。 ReactによるSPA（シングルページアプリケーション）も増え、Google等の検索エンジンでもある程度はページ内容を解釈してくれるらしいですが、サーバ側でHTMLをレンダリングして出力するサーバサイドレンダリングを利用すると、より正しくページ内容を解釈してもらえます。 Hypernovaとは A service for server-side rendering your JavaScript views Hypernovaは、JavaScriptコンポーネント
Rails + モダンJS環境(Webpack)で新規アプリ作成 - Qiita
Rails5の正式版でましたね！早速触ろう！でも、フロントはWebpackでブラウザの自動更新といった環境で開発したい！ということでRails5 + フロントはwebpackでビルドするサンプルアプリを作ってみました。 なお、今回のコードは以下においておきましたので、ご参考に。 https://github.com/ufotsuboi/rails-webpack-sample （追記） 続きを書きました。上記のリポジトリは次のコードも含まれていますのでご注意ください。 SassのビルドもWebpackでHot Module Replacementしたい 方針 RailsでモダンなJS環境にするにはいくつか方法があって、下記URLがわかりやすく、参考にさせていただきました。 モダンJavaScript開発環境 on Rails 上記の記事ではざっくり言うと 直接ビルドしたものを public
Gemfileについて調べてみた - xxxcaqui.log
Gemfileについてよくわかってなかったので調べてみた。 そもそもGemfileって？ Bundler用の設定ファイル。 BundlerはGemfileの記述にしたがって、gemの依存関係を示したGemfile.lockを生成する。 じゃあ、Bundlerって何さ？ アプリケーションで使用するgemのバージョン管理を行うプログラム。 「お前が書いたコード動かないんだけど？」 「ハァ？ 俺の環境では動いてるし。バージョン違うんじゃねーの？ 死ねよ」 ってならないためのツール。 Railsをはじめ、SinatraやRubyMotionでも使われている。*1 ちなみに、Bundlerの公式サイトにはこう書いてある。 The best way to manage your application's dependencies ベストらしいので使わない手はない。 source gemが置いてある場
Railsでログを出力してみる - yk5656 diary (旧)
RailsでHello, world!を表示してみるの続き Railsでログを出力してみる。 ログファイル とりあえずログファイルを見てみる。 特にログ出力の処理がなくても、デフォルトで、アクセスのログがdevelopment.logに出力されている。 $ cat log/development.log Started GET "/" for 192.168.56.1 at 2014-01-02 17:05:37 +0900 Processing by SampleController#index as HTML Rendered sample/index.html.erb within layouts/application (1.5ms) Completed 200 OK in 92ms (Views: 66.1ms | ActiveRecord: 0.0ms) Started GET
Haml
Beautifully DRY, well-indented, clear markup: templating haiku. Download Haml Latest: 6.3.0 - What's New? .erb <section class="container"> <h1><%= post.title %></h1> <h2><%= post.subtitle %></h2> <div class="content"> <%= post.content %> </div> </section> What is it? Haml (HTML abstraction markup language) is based on one primary principle: markup should be beautiful. It’s not just beauty for beau
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RSpecにおけるFactoryGirlの使い方まとめ - Qiita
https://qiita.com/merrill/items/8ec158953cb4c2715c7b
rails generate migrationコマンドまとめ - Qiita
Create AMP Accelerated Mobile Pages with Rails
[Pow]Railsで使える便利な開発サーバー - Qiita![[Pow]Railsで使える便利な開発サーバー - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/21143cf828aff4050ba879d4176e6604f9db3fd8/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCUG93JTVEUmFpbHMlRTMlODElQTclRTQlQkQlQkYlRTMlODElODglRTMlODIlOEIlRTQlQkUlQkYlRTUlODglQTklRTMlODElQUElRTklOTYlOEIlRTclOTklQkElRTMlODIlQjUlRTMlODMlQkMlRTMlODMlOTAlRTMlODMlQkMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWVjOWFiYTE0M2VjZjM1ZTk3MTk5ZmI5N2E2YWQ1ZTE0%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwc2hpa2F0YWthJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00ODc3YmVlOTIwZTlhNzJiOWM0N2FiNjFkNjFlZmY4OQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3De23493e293b314133c9a3b60ba4c63d7)
GitHub - airbnb/hypernova: A service for server-side rendering your JavaScript views
