GitHub - ruby/ruby.wasm: ruby.wasm is a collection of WebAssembly ports of the CRuby.You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Rails 7 で React & TypeScript を導入する方法（tsx, esbuild, jsbundling-rails） - LEFログ：学習記録ノート
※この記事では「新しくRails 7 アプリを作成するときのこと」を想定していますが、Rails 6を7に上げるときにもそれなりに役立つ情報だと思います！ 結論 rails newのときにesbuildを指定してあげれば、あとはJavaScriptファイルや.jsxファイルを、.tsxにしてあげるだけでOK。 型チェックや構文チェックを導入するには少し注意が必要。 概要 現在、Rails 7を使ってフロントエンドを構築する方法には、大きく分けて３種類あります。 importmapsを使って、素のJavaScriptを使ってフロントエンドを作る esbuildを使って、JSXファイルを使ってフロントエンドを作る Rails 7をAPIモードにして、フロントエンドはNextjsで作る 自分はこの２番めの「esbuildを使ってフロントエンドを作る」を選択しました。理由は、Railsのslim上
今更調べてみる Ruby on Rails7 フロントエンド周りの選択肢(と個人的な採用方針) - Qiita
Ruby on Rails7ではWebpackerがデフォルトで無くなったらしい... え？マジ？じゃあJavaScriptのバンドルとかどうすんの？ Rails7に触れる機会がなかったのでこの辺りの疑問をながらく放置してきたが、いい加減調べることにした。 何番煎じだい？という内容だが、2023年初頭時点で見えているものとして、まとめることに意味があると信じたい。 前提 対象読者 Rails7のフロントエンド周りに関して、大きく変わったらしいということは知っていてもそれ以上詳しいことは知らない人。 この記事の目標 個人的に 採用する Rails7のフロントエンド周りの選択を固める まとめ importmap-rails Hotwire(turbo-rails + stimulus-rails) sprockets-rails tailwindcss-rails を個人的には採用していこうと
【Rails】WebアプリにPWAを導入してネイティブアプリっぽくしてみた！ - Qiita
PWAとは？ PWAとは、「Progressive Web Apps」の略称で、PCやスマホでWebアプリを表示する際に、ネイティブアプリのような動作を可能にする仕組みのことです！ PWAを導入するメリットとして OSによる制限がないこと プッシュ通知を送ることができること ホーム画面にアイコンを設置できること Webアプリ上でキャッシュを使用でき、ローカルのキャッシュに保存できるため、再びアプリを開いた際の読み込みのスピードが従来よりも速くなること などが挙げられます！ 実装 まずは、app/views/layouts/application.html.erbに以下のように2箇所追記します！ <!DOCTYPE html> <html> <head> <title>Example</title> <%= favicon_link_tag('favicon.ico') %> + <link
Stimulus 2.0 を試してみた
はじめに 2020/12/5 に Stimulus 2.0 がリリースされました 🎉 Stimulus 2.0 リリースノート 以前 Rails アプリで JavaScript を書くときに少しだけ使ったことがあり便利だったので、2.0 も試してみました。 前提 $ ruby -v ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x86_64-darwin19] $ bin/rails -v Rails 6.1.1 今回はテキストエリアの文字数をカウントする処理を Stimulus で実装してみようと思います。 Rails Girls アプリ・チュートリアル でつくるアイデア投稿アプリをベースにして、アイデアの Description 項目に処理を入れていきます。 参考: How to use Stimulus JS 2.0's new Va
【Rails】kaminariの使い方をざっくりまとめてみた
1.この記事をなぜ書いたか kaminariの使い方を忘れてしまったので、復習の意味で記事を作成しました。 記事の中で間違いがある場合、コメント頂けると嬉しいです。 2.kaminariとはそもそも何か？ kaminariとはページネーションを簡単に実装するためのGemです。このGemをインストールすることによって、簡単にページネーションを実装することができます。ちなみに、ページネーションとは、長くなってしまったWebページを分割するものです。googleで適当に検索して検索結果ページの一番下に行くと、以下の画像のようなものがあります。これがページネーションです。 まとめると、kaminariをインストールして、kaminariが提供するスコープとメソッドを使えば、簡単にページネーションを実装できます。 3.kaminariを用いたページネーションの実装手順 以下に、掲示板サイトのページネ
Rails でシンプルな無限スクロール実装 - ボクココ
ども、@kimihom です。 久々に無限スクロールを実装する機会が 詠みラボで発生しました。そこで、振り返りがてら、こんな感じで実装するのが個人的に一番シンプルだったコードをご紹介します。 サーバー側実装 俳句(Haiku) をそれぞれ20句ごとに毎回取得し、スクロール下部についたら新しく20件を取得します。HTMLの生成は Rails サーバー側で実施し、それをフロントエンド側では単に HTML を追加するだけの処理になっています。 # Gemfile gem "kaminari" # config/routes.rb resources :haiku # app/models/haiku.rb class Haiku < ApplicationRecord paginates_per 20 end # app/controllers/haiku_controller.rb class
【Rails】kaminariのページネーションのデザインをviewごとに変更する
はじめに この記事の概要 こんにちは、株式会社TOKOSのたくまです！ 今回はviewごとにkaminari を使用したページネーションのデザインを変更する方法について紹介します! ページネーション実装時にkaminari を使用されている方も多いかと思います。 kaminari を使用することで簡単にページネーションを実装することは出来ますが、 例えば管理者側の画面とユーザー側の画面でデザインを変更したいと思うことはありませんか？ そんな時は、これから紹介する方法で簡単にデザインを変更することが出来ます！ 基本的なページネーションの使い方や実装方法については、以下のサイトが参考になると思います。 対象読者 kaminariを使用してページネーションを実装している方 ページネーションのデザインを変更したい方 ページネーションのデザインを変更する themeごとにディレクトリを作成する ka
猫Rails
（自分はRailsを書くことが多く、フロントエンドの経験は乏しいです。見方にだいぶ偏りがあると思いますので、そのあたり差し引いてお読みいただければと思います〜🙇♂️） こんにちは〜。Hotwireを仕事で使う機会があったので、実際に使ってみて感じた、良かった点、辛かった点、向いているケース、向いていないケースを共有します〜。 Hotwireとは？ Turbo Driveとは？ Turbo Framesとは？ Turbo Streamsとは？ Stimulusとは？ Hotwireのデモ 良かった点 サーバーサイドに集中できる Railsの資産をフルに活かせる 後付けで段階的にSPA風の挙動を追加できる 学習コストが低い 開発コストが低い WebSocketは必須ではない 辛かった点・辛くなりそうな点 DOM更新時にレスポンスを待たないといけない SPAのユーザー体験とはだいぶ違う He
Rails：form_withのオプションや特徴について整理 - Qiita
localオプションについて :localはリモート送信（Ajax通信のような非同期通信）によるフォームの送信の有効・無効を設定するオプションです。 JavaScriptでAjax通信によるフォームの送信を実装する場合などは、何も記述しなくてOKです。 逆に、ブラウザの読み込みをするような同期通信を実装する場合は、local: trueと記述して、リモート送信をオフにします。 ※参考記事:[Qiita【Rails】form_withに記述するlocal: trueについて] (https://qiita.com/sho_tsuchida1105/items/b08df35fe3c45f3756da) form_withメソッドの便利な機能 form_withには、モデル（:model）で記述した場合の便利な機能があります。 引数として渡されたモデルクラスのインスタンスに中身が入っているか否
[Rails] application.scssのrequire_tree .に関して - Qiita
はじめに "rails new"を実行して得られるファイルにapp/assets/stylesheets/application.scssってありますよね。 これまで学習したきた中で の存在は知っていて、この記述があることで、stylesheetsディレクトリ内にある、scssファイルを読み込んでくれている、という認識でした。 それは間違いではないのですが、ある問題がおこって、あれ？ってなった scssファイルが読み込まれて、、ない、、？？ 問題が起きたのは、以下のようなコードを書いた時です。 # application.scss /* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS
![[Rails] application.scssのrequire_tree .に関して - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/461ac0c2a67c0ed9158c76f74b0176a06c976310/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCUmFpbHMlNUQlMjBhcHBsaWNhdGlvbi5zY3NzJUUzJTgxJUFFcmVxdWlyZV90cmVlJTIwLiVFMyU4MSVBQiVFOSU5NiVBMiVFMyU4MSU5NyVFMyU4MSVBNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MWVkYzU3NmFmNDJmNmNkZTViMWE5MDcyNzMxNTBiZTE%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrZW56by10YSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZmZhMWY1Njk1ODI3NTJhZmVmZTg3MDhjMzU1NjUzNDU%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Df7539d70285841ad896a8a5cfbd38603)
Rails7時代のJS/CSSバンドルの新常識 – <hazm.jp />
Rails7では、jsをバンドルせずにimportmapでjsを直接読み込む方式がデフォルトとなりました。しかしwebpack等でのバンドル方式の選択肢を完全に失ったわけではありません。特定のターゲット（ES5など）にトランスパイルすることができます。レガシーブラウザをサポートする要件下ではバンドル方式を選択することもあるでしょう。そこで来たるRails7時代に、我々アプリケーションエンジニアにとってどのような手段があるのか、Railsの基礎知識をアップデートしていくのがこの記事の目的になります。早速始めましょう！ JSの読み込ませ方 かつてのRailsではSprocketsでバンドルして単一のjsファイルとして配信する方法が常識でした。Sprocketsはトランスパイルはしないものの、minifyする仕組みを持っていました。 Rails7からは、importmapまたはwebpack/e
Railsで複数のSass(.scssファイル)を使用する際の読み込み方法 - Qiita
はじめに RailsでSassを使用し、かつファイルを用途・適応範囲に応じて複数に分割したとき、どのような構成、読み込み方式にするかを実際の失敗談交えながら、記載したいと思います。 最初に「つまづいたこと」で、私が体験した発生した事象や原因などを書いていますが、必要なければ読み飛ばしてもらえればと思います。 環境 ruby: 2.6.4 rails: Rails 6.0.3.1 (sass-rails gemを使用) まず結論 Railsで複数のSassを使用する際には、読み込みをSprocketsディレクティブ方式(require_tree)ではなく、@importで読み込むこと つまづいたこと 携わったプロジェクトではSassを使用しており、かつスタイルファイルをメンテしやすくするため、コントローラ単位で.scssファイルを作成していた。 stylesheets直下のapplicati
Railsの技: "プログレッシブエンハンスメント"でHotwire的思考を身につける（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Thinking in Hotwire: Progressive Enhancement | Boring Rails: Skip the bullshit and ship fast 原文公開日: 2022/08/16 原著者: Matt Swanson サイト: Boring Rails 日本語タイトルは内容に即したものにしました。 Turboについては以下の記事もどうぞ。 参考: 猫でもわかるHotwire入門 Turbo編 Hotwireを始める方法や個別のパーツの利用法を学べるチュートリアルはたくさんあります。しかし私は「Hotwireで考える」コツを会得するのにしばらく時間がかかりました。 Hotwireそのものは「HTML-over-the-wire」という包括的なコンセプトに過ぎず、以下のような部品をいつどのように
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
form_withがlocal: trueなのにviewが再描画されずにはまった件 - Qiita
猫でもわかるHotwire入門 Turbo編
【Rails】kaminariのpageメソッドを用いて、配列のページャを作成する方法｜TechTechMedia
rails 7.00における "cannot load such file --sassc"の解決法 - Qiita
Rails: assets pipelineでrequire_tree . から特定のファイルを除く - Qiita
はじめに｜猫でもわかるHotwire入門 Turbo編