Next.js + RailsでポートフォリオサイトをISR対応＆メンテナンスフリー化した - Qiita
2年ほど前にNuxt.jsを使ってポートフォリオサイトを作成しました。 今回、このサイトをNext.js + Railsでリニューアルしたので、経緯を記事にまとめます。 リニューアル後のページ https://portfolio.y-uuu.net/ デザインは前回のものを踏襲していて、ほとんど変わっていません。 リポジトリ フロントエンド: https://github.com/yuuu/portfolio_v2_ui バックエンド: https://github.com/yuuu/portfolio_v2_api リニューアルの目的 Next.jsを使って何か作りたい 昨年からReactやNext.jsを触ってノウハウを蓄積するようにしています。私自身普段はRailsを使った開発をしているので、Next.jsを採用するとしたらRailsと組み合わせて使う可能性が高いです。 昨今のフロン
Rails+ReactなSPAサイトでSEOをしようとしてぶつかった壁 - オウチーノ開発者ブログ
Rejectcon 2018 レポート記事 こんにちは。オウチーノ吉川です。 去る9/29にRejectconで「Rails+ReactなSPAサイトでのSEO」について登壇してきました。 SPAサイトでSEOを行う際にぶつかった壁と、それをどのように乗り越えていったかの経緯をご紹介しました。 ちょっと内容詰め込みすぎて途中途中端折ってしまったのと、発表後にもいろいろ質問などをいただいていたのであわせて補足しながらご紹介します。 発表資料はこちらです。 なぜ経緯を紹介したのか？ 昨今のフロントエンド技術の進化速度は非常に速く、どんどん新しい技術が登場しています。 記事などでどういった技術が登場しているのかは抑えているが、実際に全てちゃんと触ってはいないという方も多いのではないでしょうか。 SSRをするためにはreact-railsやhypernovaがある、ということを知っているだけでは、
RailsエンジニアがReactを始めてSSRとReduxとTypeScriptを導入するまで | bitjourney Kibela
RailsエンジニアがReactを始めてSSRとReduxを導入するまで Roppongi.rb #3 "Rails x Frontend-Tech" 自己紹介 github.com/gfx BitJourneyでKibelaを開発 Speee, Inc. で技術顧問をしてる Reactは現職で初めて触った（2016年8月~） 今日の話 Kibelaのフロントエンドの話です。 読みはキベラ Markdownで書けて、フロー情報（Blog）とストック情報（Wiki）を区別して整理できる情報共有ツール これまでの話 新規Railsアプリに小さく導入するReact // Speaker Deck （dex1t, 2016/09/05） 小さく導入して学びながら開発を進める ⭕ Interactive UI componentをReactで＆jQueryも併用 ❌ viewをすべてReactで実装
ReactSPAをRailsに戻している話 - Speaker Deck
All slide content and descriptions are owned by their creators.
全社合宿を支えた SPA アプリ開発 〜 React + Rails でプログレッシブ Web アプリ構築〜 - adish intelligence
皆さんはじめまして。2年目新卒エンジニアの坪井(@ufo_ocha)です。普段は先日リリース致しましたhitoboの主にフロント周りを開発しています。 さて、Gaiaxグループでは年に2度、夏と冬に全社合宿を行っています。冬は事業部毎の発表など真面目なコンテンツがメイン、夏はみんなで集まり仕事を忘れて遊びましょうと交流がメインとなっています。だいぶ時間がたってしまっていますが、今回は9月に実施した夏合宿で運営として参加し、合宿用アプリを作成した話です。少しではありますが、当日の様子はこちらからどうぞ。 子ども・パートナーも参加！ガイアックスグループ夏合宿の軌跡 アプリ要件 今回の要件ですが、ざっくりと 合宿のしおり 参加メンバーのプロフィール閲覧 コンテンツのフォトロゲイニング となっています。これは僕ではないのですが、昨年度の冬合宿でしおりをスマホで閲覧しやすいWebページで提供したとこ
サーバサイドレンダリング、してますか?
サーバサイドレンダリング、してますか? ~ 憧れのIsomorphic JavaScript ~ Meguro.es #6 2016/10/13 http://meguroes.connpass.com/event/39081/
Ruby on Rails on React on SSR on SPA - ✘╹◡╹✘
amakan での設計を例に、RailsでSingle-Page Applicationをつくるときの自分のやり方をまとめてみます。 Gem 「JavaScriptで書かれたReactのコンポーネントからHTMLを生成する」というのをRubyでやるために、RubyのV8エンジン実装であるmini_racerというGemを使う。この処理を楽に実行するために、react_on_railsというGemも使う。 gem "mini_racer" gem "react_on_rails" View body要素内のHTMLは全てReactで生成するので、layout以外にviewのテンプレートは存在しない。 Controller 初回リクエストの場合はHTMLを返す ページ遷移時に呼ばれるリクエストの場合はJSONを返す 外部サイトからブラウザバックで戻ってきたときにJSONを見せない という要求に
新規Railsアプリに小さく導入するReact - Speaker Deck
dotsで開催されたReactの導入を検討されてる方向けの勉強会でお話しました https://eventdots.jp/event/597088
webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ
はじめに こんにちは、投稿開発部エンジニアの芳賀です。 既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップできていなかったのですが、それらの状況を把握しつつ試行錯誤で開発していった経験から、できるだけ「React採用してみたいけどJavaScript界隈よくわからない目線」で書いてみようと思います。 RailsでReact.jsを使ういくつかの方法 2016年時点で、RailsでReact.jsを使う方法はいくつかあって、どれを採用するかで悩みました。 vendor/assets/javascripts にreact.jsを置いて利用する react-rails gem を利用する br
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で構築しているWebサービスをjQueryベースからReactに移行する時の知見 | スペースマーケットブログ
こんにちは、エンジニアの小林です。 先日、スペースを貸し出すオーナー様向けのダッシュボード(管理画面)をリニューアルしました。 スペースマーケットはwebサーバもAPIサーバもRailsで構築しているのですが、JQueryをベースに構築していたリニューアル前の実装からReactをベースにした実装へ移行した際に得た知見を書きたいと思います。 サーバ構成 既存のサーバ構成では、webサイトはwebサーバから、アプリはAPIサーバからそれぞれデータベースを参照していました。 リニューアルに伴いwebサーバからもAPIサーバを参照する構成となります。 webサーバから別ドメインのAPIサーバにアクセスするためには CORSの設定 webサーバとAPIサーバはドメインが違うため、ReactのコードからAPIサーバにajaxリクエストが送れません。これを回避するためにCORS(Cross-Origin
React Redux Rails - (rudolph-miller)
React.js & Redux & Ruby on Railsでserver-side rendering. この記事はReact.js Advent Calendar 2015の10日目の記事であり、 仮想DOM/Flux Advent Calendar 2015の10日目の記事です. (欲張り.) Source codeはReact Rails Example. React Redux Rails See Also React Redux Rails React.js React.jsはFacebook製のJavaScriptのUI Library. Viewの状態管理をさぼれる. React.js 一人React.js Advent Calendar 2014 Redux Reduxは今一番熱いFlux architecture frameworkで状態管理をatomitにする.
2015年版Adventarの構成 - Qiita
2015年版Adventarをリリースしたので今年の構成をメモとして残しておく。 ちなみにAdventarはソースコード公開したい気持ちもあるんだけど色々めんどいこともあるので二の足を踏んでいる。 サーバー 言語はRuby。WAFはRails。特に物珍しいものは使ってない。Gemfileはこんな感じ。 https://gist.github.com/hokaccha/6413437122815143f0d0 ホスティングはHeroku。1月〜10月は全然アクセスないので1dynoにしといて、11月と12月だけ2dynoにしてお金払うっていうスタンスだったけど、料金形態変わったのでHobbyプランにした。そこまでアクセスないのでたぶんHobbyで大丈夫だと思うけど厳し書くなったらStandardにあげる。 DBはHeroku PostgresのHobby Planで全然足りてる。あとはNew
Ginza.rb で Quipper のシングルページアプリケーション開発について発表しました - @kyanny's blog
ginzarb.doorkeeper.jp Ginza.rb 第26回 シングルページアプリケーションのためのRailsとJavaScript フレームワーク という勉強会で、 Quipper で JavaScript (CoffeeScript) と Rails によるシングルページアプリケーション開発をどうやっているかについて発表しました。お声がけいただいた @willnet さん、 Ginza.rb のみなさま、ありがとうございました。 発表で使った資料はこちらです。 Backbone, Chaplin, Marionette そして React - Quipper における Single Page Application 開発の変遷 もともと YAPC::Asia の CFP に応募して落選したネタだったのだが、ある意味で自分がこの 2 年間やってきた仕事の集大成ともいえる内容だっ
react-railsでサーバーサイドレンダリングしつつクライアントでsetStateできて最高になった - Qiita
土日でreact-railsとturbolinksを勉強してみた成果です やりたいこと 画面遷移するときは<div id='content'></div> の中身だけ入れ替えて、pushStateで行き来できるようにしたい reactを使ったリッチなページでも、イニシャルロードやSEOの為にサーバーサイドでレンダリングしておきたい サーバーサイドレンダリングした要素を破棄することなくReactで初期化してsetStateでガンガンViewを書き換えたい 結果どうなったか サーバーサイドでReactComponentをレンダリングしてクライアントのReact.renderで初期化情報を揃えて引き継ぎ どんな画面でもapp.component.setState({})が反映されて最高 TurbolinksでReactComponentをマウントしたルート要素だけ入れ替え その為にTurboli
俺の最近のRailsのJS開発環境を教えてやる - Qiita
はじめに railsのsprocketsがキツイ。特にjsファイルが多くなると開発がとっってもキツイ。 layoutに こうやってるだけでも出力されたhtmlにはscriptタグが30個ぐらいならんでて、ページの読み込みに10sec以上かかる。 だけど、単にapp/assets/javascriptsをgulp watchとかはしたくない。 なぜならビルドはブラウザのリロード時に変更がある場合だけして欲しかった。 あとwindow.AppNamespace以下にモジュール追加していくのも辛い。 モジュール同士の依存関係もよくわかんないし、何よりwindow.AppNamespace.Modules.UserList.ItemViewとか長すぎ！ browserify-railsってやつ使ってみた browserifyがrailsの仕組みの中で動くようになる。 browserify-rail
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://post.simplie.jp/posts/27