Ruby on Rails 6にTailwindCSSを導入（Gemを使わず） - Qiitayarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
成熟したRailsアプリのフロントエンドを最新にリニューアルする方法（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Keep up with the Tines: Rails frontend revamp — Martian Chronicles, Evil Martians’ team blog 原文公開日: 2020/06/03 著者: Rita Klubochkina、Andy Barnov サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語タイトルは内容に即したものにしました。 アセットパイプラインで提供される既存のjQueryやCoffeeScriptのフロントエンドを一切損なわずに、「React」「MobX」「GraphQL」「Tailwind CSS」「Webpacker」の複雑な
フロントエンド担当へ。これからRuby/Railsに取組むなら、絶対押さえておくべき基本の「き」 - Qiita
エイチームライフスタイル アドベントカレンダー2017、17日目は株式会社エイチームライフスタイル、コード書くの大好きデザイナー@seiraが担当します。 #Ruby？Rails？ど、どうしよう、、 2017年春頃、弊社が運営しているWordPressサイトをRuby on Railsに移行することになり、いきなりRailsのフロント実装担当を拝命しました(￣□￣;)!? WordPressテーマ作成などを数年間担当していましたので、PHPについては多少知見がありますが、とはいえ数行のコードが書ける程度。 Ruby？Rails？ で、できないよ～、、、、（でもやりたい！） **Rubyって？Railsってなんぞや？**レベルだった私ですが、予備知識も全くないところから、Railsのフロント実装をこなせるようになるために、最初にやったこと、覚えたことを書きたいと思います。 これからRuby/
Railsフロントエンド技術の今とこれから
待望されたYarnサポートの入ったRails5.1が2017年4月にリリースされました。 Ruby on Rails 5.1 Release Notes — Ruby on Rails Guides 他にもjQueryがデフォルトdependencyから外されたり、Optionalでwebpackサポートが入ったりしており、Railsのフロントエンドは大きな転換点を迎えたと言ってよいでしょう。本エントリではRailsのフロントエンド技術の今を振り返り、今後どうなっていくかをまとめてみたいと思います。 DisられてきたRailsフロントエンド Railsのフロントエンド技術スタックは、フロントエンドを専業とするエンジニアにDisられるものでした。具体的には下記の技術要素です。 jQueryCoffeeScriptAssets Pipeline (sprockets)gemのエコシステムに乗っ
Autoprefixer RailsでCSSのベンダープレフィックスをsprocketsに任せよう - Qiita
はじめに CSS3のアニメーションなど新し目のものを使おうとするとベンダープレフィックス(-webkit-hogehoge)みたいなのをつけないといけない時があるよね？ ベンダープレフィックスをつけるとこんな感じで同じようなことを各ブラウザ向けに何度も書かなければならなくなってしまう。 animation: spin 1s infinite linear; -webkit-animation: spin 1s infinite linear; このベンダープレフィックスを意識していちいちこのプロジェクトで対応するブラウザにはこのCSSにはこのプレフィックスが必要なんて考えたりするのって生産性が悪いよね？ それにシンプルなコードにならない。 そこでベンダープレフィックスを自動でつけてくれるAutoprefixerなんだけど、基本的にGulpやWebpackなどフロントエンドのツールに組み込ん
SprocketsをやめてWebpackerに移行したのでどうやったか公開する - patorashのブログ
ようやくSprocketsからWebpackerに移行したので、そのためにやったことをまとめておきます。 移行前の状態 Railsのバージョンは6.0系 Sprockets4 CoffeeScript Sass Bootstrap3を使用 yarnは使ってる 筆者（私）はECMAScriptに関してはそこまで詳しくなくて、今後習得していきたいと思っているレベル。 方針 「とにかくWebpackerに移行する」ということを念頭に置き、JavaScriptを完璧にモジュール化する等は目指さない。Webpackerで動けばいい。後でリファクタリングしていくから！ Webpackerをざっくり理解する Webpackerはwebpackの設定などをほとんど意識することなく、いい感じに使えるようにしてくれるやつです。 webpackをざっくり理解する じゃあwebpackって何？となるかと思いますが
Ruby on Rails: cssの管理をAssets PipelineからWebpakerに移行するときのメモ - Madogiwa Blog
個人のアプリケーションを今まではデフォルトのアセットまわり(CSS等)をSprockets、JavaScriptをWebpackerでビルドするような形にしてたのですが、 今回はstylesheetをWebpackerで管理するようにしたので、そのへんの手順をメモしておきます📝 対応したアプリケーションのRailsのバージョンは6.0.3.2、Webpackerのバージョンは5.1.1です。 .cssファイルをWebpackerで管理する assets配下の.cssファイルをjavascript配下に移動 entryの.jsで.cssファイルをimportしてWebapckerのビルド対象にする .cssファイルを個別のファイルとしてビルドするようにする Viewでビルドされた.cssファイルを読み込む おまけ：eslintの対象からCSSまわりを除外する おまけ: Sproketsの無
Is it possible to import a whole directory in sass using @import?
I'm modularizing my stylesheets with SASS partials like so: @import partials/header @import partials/viewport @import partials/footer @import partials/forms @import partials/list_container @import partials/info_container @import partials/notifications @import partials/queues Is there any way to include the whole partials directory(it's a directory full of SASS-partials) like @import compass or som
Rails 7.0でアセットパイプラインはどう変わるか | Wantedly Engineer Blog
Rails 7.0ではフロントエンドサポートが刷新されます。新たなライブラリが多数導入され、選択肢が増えるため、「Rails公式のものを選べばOK」という戦略が通用しなくなります。 本稿では、Railsでフロントエンドを書くための選択肢について、その歴史と実装を踏まえて比較検討します。 結論から言うと(まだアルファ版なので今後も状況が変わる可能性はありますが、) 新規アプリケーションではSprocketsの役割は無くなりそうです。新しいライブラリとして Propshaft, importmap-rails, jsbundling-rails, cssbundling-rails が登場し、主要な選択肢として以下が提供されます。 (各ライブラリの詳細については後述します) Propshaft + importmap-railsデフォルトの選択肢。Node.jsが不要。トランスパイルを含め、複
Rails 7: dartsass-rails gemはNode.jsなしで使える｜TechRacho by BPS株式会社
週刊Railsウォッチ20220228でもお伝えしましたが、つい最近、dartsass-rails gemがRailsのGitHubリポジトリで正式に登場しました。 dartsass-railsは、本家Dart Sassのバイナリ実行ファイルをラップしています。現時点ではLinuxとmacOSでi32版とx64版、Windowsでx64版のバイナリ実行ファイルがあります。今回初めて気づきましたが、Dart Sassは2016年のごく初期からバイナリ実行ファイルをリリースし続けているんですね。 参考: Releases · sass/dart-sass どこかで見たような話ですね。そう、以下の記事にも書いたように、tailwindcss-rails gemもバイナリ版CLIツールをラップしています↓。最近のJSツールチェインはバイナリ版も出すのが流行りなのでしょうか。 Rails 7: im
使えるRSpec入門・その4「どんなブラウザ操作も自由自在！逆引きCapybara大辞典」 - Qiita
はじめに みなさんこんにちは！ この記事は「必要最小限の努力で最大限実戦で使える知識を提供するRSpec入門記事」、略して「使えるRSpec入門」の第4回です。 今回はCapybaraを使ったフィーチャスペックについて説明します。 ただし、今までの記事とは異なり、フィーチャスペックのイロハよりも「Capybaraの使い方」に重点を置きます。 なぜなら、僕個人の経験からいって、フィーチャスペックで困るのは「このブラウザの操作って、どうやってコードで表現するの？？」というケースが大半だからです。 それ以外は第1回～第3回の内容をそのまま応用できるので、特に「フィーチャスペックだから困る」ということはないと思います。 今回は説明する主な項目は以下の通りです。 フィーチャスペックの基本 ページの移動や画面のクリック、フォームの操作など 画面やフォームの検証 画面の操作や検証の応用テクニック その他
忙しい人のための Rails デバッグ方法まとめ - Qiita
ざっくりと書いたので、何かの参考にどうぞ Rails の問題かどうか、ログを調べる あなたのRails アプリが、例えばブラウザからのリクエストに対して何か応答する場合、リクエスト情報はRails のアプリケーションプログラムに到達する前にHTTP サーバのプログラムを通ります。 ですので、HTTP サーバがRails にリクエスト情報を渡さなかった場合、もしくはリクエストがHTTP サーバにすら到達しなかった場合は、当然Rails プログラムは動きません。 ということでまずは、リクエストがRails に到達しているかをログから調べましょう。 ログ デフォルトでは、development 環境の Rails のログは log/development.log に出ます。 ログ見るときの基本的なことですが、tail コマンドの f オプションで、追加行が随時流れてくるようにしてみましょう ここ
Railsのpresentの使い方を現役エンジニアが解説【初心者向け】
presentとは Railsにおいてpresentメソッドはオブジェクトであるレシーバーの値が存在すればtrue、存在しなければfalseを返すメソッドとなります。if文など条件分岐をプログラムで書くときによく使われるメソッドとなります。 presentメソッドは 変数.present? ?を最後につけます。 presentのメソッドで真偽判定を行う方法 まず、presentメソッドと似た機能をもつメソッドとして、nil?、empty?、 blank?、 present?などのメソッドについても触れておきます。 nil?メソッド 変数.nil? このメソッドでtrueが返ってくる時はレシーバーである変数そのものが存在しない時ということになります。 empty?メソッド 変数.empty? このメソッドでtrueが返ってくる時はレシーバーである変数に値が入っていない時ということになります。
Railsのパフォーマンス調査でrack-mini-profilerを使ってみました。
こんにちは。H.Tと申します。 今年の1月よりGMOソリューションパートナーからGMOアドマーケティングに転籍となりました。 アドマではAkaNe管理画面の開発を担当することになりRails漬けの毎日を過ごしております。 今回は画面のパフォーマンス調査をする機会がありrack-mini-profilerを使ってみたので簡単にご紹介できればと思います。 rack-mini-profilerは手軽にRuby on Railsのパフォーマンス計測ができるgemとなります。 使い方の詳細については下記の通りです。 インストール ローカルなどの開発環境で使う前提の場合は下記のインストールですぐに使えます。
[Rails] link_toのリンク先を別タブで表示させたい - Qiita
Railsでlink_toを使うときに別タブで表示させたいと思い、実装したのでメモとして残しておきます。 手順 まず link_to で表示させたい文字列とリンク先URLを指定。
![[Rails] link_toのリンク先を別タブで表示させたい - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/00b836c891c32e2a56abdab8ae8ca25f6b803b90/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-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCUmFpbHMlNUQlMjBsaW5rX3RvJUUzJTgxJUFFJUUzJTgzJUFBJUUzJTgzJUIzJUUzJTgyJUFGJUU1JTg1JTg4JUUzJTgyJTkyJUU1JTg4JUE1JUUzJTgyJUJGJUUzJTgzJTk2JUUzJTgxJUE3JUU4JUExJUE4JUU3JUE0JUJBJUUzJTgxJTk1JUUzJTgxJTlCJUUzJTgxJTlGJUUzJTgxJTg0JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1hNDlhMGQwOTgzMmZjYzJlNjU3OTA2M2Y5NjA0MGZmOQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBLYXp1aGlyb19NaW1ha2kmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTY1NjY4ZGY0ODhlMWZmMmRlZGJlODQxNTJmMjUzNGRk%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D518865023e88a025e3e3b80e72a8afb9)
論理削除と物理削除とは - Qiita
論理削除とは 実際にはデータを削除せずに、削除されたと見なすフラッグと呼ばれるカラムを設定することでユーザーには削除しているかのように振る舞うことができることをさします。 例えばtweetsテーブルというものがあった時に、 そのテーブルにdeleted_flagというboolean型のカラムを追加しておきます。 この状態のときdeleted_flagカラムのデフォルト値はnullです。 こうすることによって、ユーザーにtweetの削除ボタンが押された時にdeleted_flagに1という値がセットすることで、その削除されたツイートとして扱うことができるのです。 実際にSQLでDeleteされることをさし、データベースからも削除されます。そのため復元したり削除されたデータを参照することはできません。 論理削除のメリット 先ほどの例でも伝えたとうり、削除したかのように振る舞うだけなのですぐにデ
【rails】controllerとviewページでデバッグする方法をまとめてみたよ
Botchi 主に20代前後の学生や社会人向けに休学、留学、英語、長期インターン、シェアハウス、転職、投資、プログラミングなどキャリアや海外に関する記事を書いています。筆者は複数カ国の留学経験もあれば、新卒の会社からレイオフされた経歴も持つ文系出身のソフトウェアエンジニアです。現在はフルリモートでVueとGoを使用しながらフリマアプリの開発に従事しています。タイトルが「文系エンジニア大学生の技術ブログ」なのは大学生時代に学んだ技術をアウトプットしようとしてブログを始めた名残です。 ソフトウェアエンジニア/プログラミングスクールメンター/トビタテ留学JAPAN 理系、融合・複合コース/カナダ・インド・アメリカ・イスラエル留学/海外インターン/技術:Ruby(Ruby on Rails)、Python(Flask、Django), My SQL,GCP,AWS, JavaScript,Hero
rubyの真偽判定メソッド(nil?/empty?/blank?/present?)を検証してみた結果、興味深いことがわかった - Qiita
rubyの真偽判定メソッド(nil?/empty?/blank?/present?)を検証してみた結果、興味深いことがわかったRubyRails はじめに if文を使う時に、この条件ならempty?かblank?はどっちを使う方が正しいだろう・・・、と迷ったことはありませんか？ rubyやrailsは多くの真偽判定メソッドを提供しています。 けれど、逆に多すぎることで混乱して、こんな時はどうなんだっけ？ということがたまに起きてしまいます。 なので、主要な真偽判定メソッド(nil?/empty?/blank?/present?)の挙動について色々と検証していきたいと思います。 環境 検証は下記バージョンで行いました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rails5.1.3でsassとjsの管理をSprocketsからWebpackerに移行した - Qiita
Rails 5.1+jQueryでajaxを試す (罠にハマる) - Qiita
