クライアント側のJavaScriptを最小限にするHotwire
iCARE Developer Meetupは、月次で開催している株式会社iCAREが主催するエンジニア向けのLT勉強会です。18回目の今回は、Ruby on Railsをテーマに行いました。株式会社iCAREの技術顧問である前島真一氏がHotwireについて話しました。全2回。前半はHotwireのアーキテクチャとTurbolinksについて。 HotwireはWebアプリケーションを作るための新しいアプローチ 前島真一氏：Hotwireについて話します。前島です。ハンドルネームはwillnetや、netwillnetです。iCAREさんをはじめとして、いろいろな会社で技術顧問をしています。空いた時間を使って、「savanna.io」というお仕事情報SNSを開発しています。savanna.ioは、これから話すHotwireを利用して作っています。 Hotwireがどんなものかを簡単に説明
idやclassを使ってテストを書くのは、もはやアンチパターンである - Qiita
いきなり結論を書くと、idやclassはスタイルのためのものなので、テストでそれを使うのはやめましょう。そして、カスタムデータ属性を使いましょう。(idやclassはスタイルのためだけではないという意見はごもっともです！しかし、主にとしてスタイルに使われるということでご了承頂いて以下の駄文に付き合って頂けると幸いです🙇) 先に断っておくと主にreactについての話で、JSXを前提とします。(手法はReactに限りませんが理由は後述) 2020/03/23 追記 この記事は1年以上前に書かれた記事なのでテストフレームワークとしてenzymeを使っていますが、現時点ではTesting Libraryの使用をオススメします。data-testid に対応するクエリを備えています。 React Testing Library · Testing Library はじめに ご存知の通り、ロジックと
morishitterのCSSの書き方（2016年夏） - morishitter blog
今、自分がどうやってCSSを書いているのかについてまとめる。 CSSを書く前にすること 持論だが、「デザインの意図を正確に理解した上で書かれたCSSは破綻しない」と思っている。 しかし、自分ひとりでサービスを作るときような、デザインの決定権を持つ人とUI実装者が同じである場合を除いて、デザインの意図を正確に伝え、理解することは難しい。 僕が1番時間を使うのがこの工程だ。 今の仕事ではデザイナーがSketchファイルを作成し、エンジニアがそれを元に実装する。 Sketchファイルを開き、アートボードをひたすら眺めデザインの矛盾がないかを確認し、「なぜこのようなデザインなのか」を質問しまくる。 ここで良い質問と提案をするためにも、エンジニア側に最低限のデザインに対する知識が必要だと思う。 最近読んだ本だと、「みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善
QiitaのCSS構成2016 - Qiita
Qiitaを開発しているIncrementsで、フロントエンドをやっていってる @morishitter です。入社して4ヶ月が経ち、会社にも少しずつ慣れてきました。 CSS Advent Calendar 2016 の1日目の記事として、Qiita及びQiita:TeamでのCSSの構成について書きます。 脱Sprockets Qiita / Qiita:Teamでは、サーバーサイドのアプリケーションフレームワークとしてRuby on Railsを採用しています。そのため、これまでは Sprockets というRailsにbundleされているassetビルドツールを使ってSassをCSSにコンパイルしていました。しかし今では、全てのCSS, JSのビルドをNode.jsで行っています。 CSSでの移行手順はざっと以下の通りです。 まず、Sprocketsで使われているRuby製のSas
掲示板のJavaScriptこういう風に最適化しました - ✘╹◡╹✘
最近Railsで掲示板つくってて、サボって後回しにしていたJavaScriptの最適化をやりました。 掲示板の構成 Webpackを使っている Reactを使っている Server-Side Renderingをやっている Railsを使っている Sprocketsを使っていない 作業内容 webpack-bundle-size-analyzerで容量の大きいpackageを調査 HTTPクライアントに利用していたjQueryを撤廃 HTTPクライアントにaxiosを採用 lodashを一部しか読み込まないように変更 moment.jsの不要なlocaleを読み込まないように設定 変更結果 これでminify後の容量が770KB→476KBに。gzip圧縮状態では202KB→125KB。 $(npm bin)/webpack --profile --json | webpack-bundl
amakanのフロントエンドを色々改善した - ✘╹◡╹✘
https://amakan.net/ のこの辺の改善の続き。 amakanをUnicornからPumaに移行した - ✘╹◡╹✘ amakanでyarnを使うようにした - ✘╹◡╹✘ amakanでRuby 2.3.3を使うようにした - ✘╹◡╹✘ amakanを Ruby 2.3.3 から 2.4.0-preview3 に移行した - ✘╹◡╹✘ react_on_rails amakan ではサーバサイドで React.js で記述したコードを使ってHTMLを生成していて、このために react_on_rails というライブラリを使っている。このライブラリの最新バージョンが v5 から v6 に上がっていたので、まず v6 を使うように変更を加えた。 v5 までは、サーバサイドとクライアントサイドで別々の Webpack の設定ファイルを用意するような設計になっていたが。しかし
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コンポーネント
Rails5.1に向けてフロントエンド周りで起こっている革命まとめ - Qiita
こんにちは Rails5.1に向けて、DHHのjqueryを依存から外す発言を発端にフロントエンド周りが急激に発展しているので、簡単にですがまとめてみました。 各issue, PRの詳細には踏み込みませんが、知見に溢れているので読んでみるの推奨です。 間違い、足りないものがあったら編集リクエストお願いします。 jQuery依存を無くす話が出る rails(issue): Drop jQuery as a dependency jquery-ujsはjqueryに依存しないようにする jquery-ujs: Drop jQuery as a dependency "jquery"-ujsじゃなくなったので名前変更 rails-ujs誕生 実際にRailsからjquery依存がなくなる rails: Drop jQuery as a dependency jsライブラリを入れる方法がnpmパッ
モデルからJSON生成するときこうやってます2016 - ✘╹◡╹✘
最近RubyとReact.jsをよく利用していて、Rubyで扱っている値をJSONとして表現したいケースが増えてきた。こういうのどうやっていますかと人に聞きたいので、自分はこうやっていますよというのを説明のためにまとめておくことにする。 概観 自分の場合、次のような方法で実装することが多い。 JSONとして表現したいオブジェクトをコンストラクタで受け取るクラスを定義する クラスに #as_json を定義して適当なHashを返すようにする Object#to_json が再帰的に #as_json を利用するようにする (ActiveSupportがやってくれる) コード 具体的には、以下のようなクラスをつくっている。これは最近つくっている掲示板での例で、Megaboard::Resources::Comment はコメントのJSON表現のためのクラスである。いわばコメントのJSON表現に
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を見せない という要求に
5年間開発しているRailsプロジェクトにReact + Reduxを導入した話 by Shimpei Takamatsu | Wantedly, Inc.
こんにちは、WantedlyのWebエンジニアの高松です。 このエンジニアブログでも何度かReact関連の話題が出ていますが、WantedlyではReact + Reduxを中心としたWebフロントエンドの技術スタックを導入して開発しています。 今回はスタックの導入方法や勘所について、詳しく解説してみたいと思います。特に既存のRails環境にReactなどの導入を検討していらっしゃる方の参考になれば、と思います。 今回の内容は以前発表した以下のスライドを元にしています。 これまでのWantedlyのフロントエンド開発 まず、今回のスタック導入前のWantedlyのフロントエンド開発がどのようなものであったのかについてご説明します。 Wantedlyの開発リポジトリを参照すると、最初のコミットは2011年9月になっています。現在は社内でもマイクロサービス化の動きが始まっていますが、基本的にW
webpackで作るSprockets無しのフロントエンド開発 - クラウドワークス エンジニアブログ
こんにちは！12月に子供が生まれたばかりの鈴木( @suzan2go ) です。現在は週2~3日リモートで子供の成長を片目にみつつコードを書いています。うちの子はガラピコぷ〜がお気に入りです。 さて今回はRailsでのフロントエンド開発についてです。 昨今のフロントエンドの進化はめまぐるしく、Rails標準のSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みでは以下のような要望に答えられなくなってきています。*1 ECMAScript6で書きたい！ フロントエンドのライブラリ管理にnpmを使いたい！ で、上記に対応するにはおおまかに分類すると以下のような方法があります。 browserify-rails を使う github.com これが一番導入が簡単ですし、既存のRailsアプリに突っ込むならこれが選択肢としては手堅いと思います。 ただ開発中のビルドがめ
フロントエンド開発における革命とビルドプロセスについて - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、freeeでフロントエンドエンジニアをしている @joe_re です。 freee Engineers Advent Calendar 2015の4日目を書きます。 僕からはfreeeで現在進行中の革命について、フロントエンドのビルドプロセスを中心に書こうと思います。 革命 ってなんのこと？ というのはフロントエンドヤンキーこと @ymrl が 2日目で書いたので詳しくはそちらをご参照頂ければ幸いです。 背景 弊社ではRuby on Railsを主軸にしてWebサービスを作っています。 Railsは素晴らしいフレームワークで
RailsのAsset PipelineとPrecompileをNode.jsのみで処理できるgulp-sprocketsを作った - yo_waka's blog
RailsのAsset PipelineとPrecompileをNode.jsのみで処理できるgulp-sprocketsを作った 仕事ではRailsアプリを書いていて、JSやCSSなどのフロントエンドはRailsのAsset Pipelineの仕組みに則ってビルドしてる。 普通にRailsアプリ作ってると普段Sprocketsについて特に意識しないと思う。 Sprocketsはそこが凄くて、あまり考えなくてもドキュメント通りにやってれば、必要なAssetを結合できて、リリース時は変更がなければブラウザキャッシュから、変更があれば 新しく読み込まれるみたいなことをやってくれる。 なんだけど、もうそろそろ新しい機能はES2015で書きたいよねという人が増えてきた。 とはいえSprocketsは独自のディレクティブ以外は使えなくて、SprocketsWayから外れると途端に脆い。 ES2015
Rails: send_data でダウンロードした後に表示更新する方法
データベースの集計を CSVファイルでダウンロードする処理が必要になった。 ファイルダウンロードには send_data を使う。 今回は、非同期処理するつもりはなかったが、集計の処理には10秒くらいかかるので、ボタンをクリックして10秒くらい待ってからダウンロードが始まるので、待ち時間に「しばらくお待ちください」を表示したい。 処理開始時にこれを表示して、ダウンロードが終わったらそれを消すという動きにしたかった。 ボタンをクリック→以下のJavaScript $("#message").html("しばらくお待ちください"); window.location.href = "<%= totaling_path %>"; //←集計してsend_dataするアクションのURL ↓ そして「集計してsend_dataするアクション」の最後にメッセージを消すためのレンダリングして完了！ ところ
Railsのフロントエンドのビルドをnpmコマンドのみで完結したい - Qiita
こんにちは、freeeでエンジニアをやってます @yo_waka です。 これは、freee Engineers Advent Calendar 2015の11日目の記事です。 これまでの弊社のAdvent Calendarでは、社内で革命と呼ばれるフロントエンドの改善ネタが多いと思いますが、その流れとして、RailsアプリケーションにおけるフロントエンドのビルドツールであるところのSprocketsをどのようにしたら外せるかという話を書きます。 Sprocketsがやってくれること まずはSprocketsが裏側でどういうことをやっているのか知る必要があります。 Advent Calendar4日目の記事で既に概要が書かれていますが、もう少し細かく内部動作に踏み込んで書いてみます。 尚、Sprocketsのコードは現状のRailsの最新版である4.2.5で利用されている、Sprocket
俺の最近のRailsのJS開発環境を教えてやる - Qiita
こうやってるだけでも出力されたhtmlにはscriptタグが30個ぐらいならんでて、ページの読み込みに10sec以上かかる。 だけど、単にapp/assets/javascriptsをgulp watchとかはしたくない。 なぜならビルドはブラウザのリロード時に変更がある場合だけして欲しかった。 あとwindow.AppNamespace以下にモジュール追加していくのも辛い。 モジュール同士の依存関係もよくわかんないし、何よりwindow.AppNamespace.Modules.UserList.ItemViewとか長すぎ！ browserify-railsってやつ使ってみた browserifyがrailsの仕組みの中で動くようになる。 browserify-rails/browserify-rails https://github.com/browserify-rails/brows
Rails + React + ES6 のためのアセット環境構築 - 破いて捨てたノート
結論 Sprocketsの動作を維持しつつ、npmやgulpなどのモダンなパワーも取り入れた、いいとこどりな環境を構築してみた。 やりたいこと SEOのため、Reactでserver-side renderingをしたい JSコードをES6で記述したい 既存のCoffeeScriptのコードも共存させたい（後ほど書き換える予定） npmやgulpといったモダンな環境でアセット管理をしたい browserifyを使いたい Sprocketsが実現している機能は維持したい そもそもSprocketsは何をしているか 周知のことでしょうが念のためおさらい。 ファイル毎の依存関係の管理 application.jsなどのマニュフェストファイルがやってること altJSのコンパイル アセットのminify アセットの連結 アセットファイル名にMD5フィンガープリントを挿入 Sprocketsの問題点
Qiitaの画像アップロード機能も簡単に実装できる。そう、S3ならね。 - Qiita
QiitaとKobitoで画像アップロードができるようになりました。 その後ろ側をちょっぴり公開します。 件名からも分かるように、背後ではAWSのS3を画像ストレージに採用しています。 画像アップロード機能をリリースしました - The Official Qiita Blog Kobito v1.6.1リリース: ドラッグ&ドロップやスクリーンショット撮影で簡単に画像を添付できるようになりました! - The Official Qiita Blog 用語統一 サーバ はQiitaのサーバのことを指すことにします。（つまり、S3ではない、ということ） また クライアント は各ユーザのブラウザのことを指します。 要件 画像アップロード機能を実装するにあたっていくつかの要求がありました。 成りすましを防げる アップロードされたファイルを管理できる 自分達のサーバに負荷をかけたくない 変な画像のア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
wikihub.io