ちょっと複雑なサイドバーをHotwireで簡単に作りたい - クックパッド開発者ブログ
こんにちは、レシピ事業部プロダクト開発グループの渡邉（@taso0096）です。 クックパッドは最近、One Experienceというプロジェクトによって日本版とグローバル版のシステムが統合されました。 どちらのシステムもRailsで実装されているという点は同じですが、統合先となったグローバル版ではHotwireが使われていました*1。そのため、One Experience関連の開発ではHotwireが積極的に活用されています。本記事ではそんなHotwireの多くの機能が使われたデスクトップ版のサイドバーについてご紹介します。 デスクトップ版で表示されるサイドバー ちょっと複雑なサイドバー One Experienceに伴い、グローバル版にもともと存在したUIのまま移行するのではなく、いくつか画面構成の変更を入れる事になりました。特にデスクトップ版においては、自分のコンテンツにより素早く
Next.js App Routerの"use server"雑感 : Rails視点から
はじめに Next.jsにServer Actionが新しく導入されました。サーバ上の関数をブラウザから直接呼び出すようなコードの書き味を提供するもので、非常に魅力のあるコンセプトだと私は思っています。ただしサーバ上で実行されるコードとブラウザで実行されるコードの境界が曖昧で、"use server"のセキュリティ上の懸念もよく議論されています。 一方で、私の先日の記事Next.jsで簡単なCRUDアプリを作りながら気になったセキュリティ: Railsの視点からで、私はこの"use server"問題には言及しませんでした。まだ非常に新しい話題でかつNext.js側の対応も進行中だというのもありますが、実は個人的にあまり気にならないのが最大の理由です。 気にならなくなったきっかけは、Server ActionをRuby on Railsのコントローラと同じように考え始めたことです。こうする
Next.jsで簡単なCRUDアプリを作りながら気になったセキュリティ: Railsの視点から
先日、Kamal 2でNext.jsを安価なVPSにデプロイする勉強をしながら、Next.js App Router/Server ActionでCRUDのデモアプリを作成しました（コードはGitHub）。そのときにセキュリティについて気になって点がいくつかあり、勉強しながら対策をしましたので紹介したいと思います。 私自身は業務でNext.jsを書いた経験が限定的です。的外れな議論をしているかもしれません。あくまでもRuby on Railsアプリを書くときと同じ気持ちでNext.jsのアプリを書いたとき、セキュリティ上で気になった点を挙げているだけです。私が見落としている点や誤っている点等ありましたら、コメントやX等で教えていただけると大変ありがたいです。 その１：データ漏洩の危険性 この問題についてはムーザルちゃんねるが紹介しています。またNext.jsの公式ブログでも対策が紹介されて
I'm back, Ruby on Rails
03 Aug, 2024 Last year, I wrote a blog post called Goodbye, Ruby on Rails. One year later, after creating my own business, I decided to be back to Ruby on Rails. I’m withdrawing my previous statements on DHH and Rails. Though I still have some concerns about the directions of Ruby on Rails, especially the rejection of TypeScript, I still believe that Ruby on Rails is a great framework for web deve
Rails is Good Enough
The first time I watched the infamous “build a blog in 15 mins” video, Dreamweaver was a thing, Flash was owned by Macromedia, and Twitter did not exist. 20 years later, Rails is alive and well. While it has never been the the most popular kid on the block by any means, it remains widely used by bootstrapped founders, large tech companies and everyone in between. Learning programming after 40 with
Rails 7のHotwireを簡単に理解する
GMOアドマーケティングの吉岡です。 今回の記事ではRails 7で追加されたHotwireという技術について、何が良いのか？どんなことができるのか？を話したいと思います。 Hotwireとは？ 大量のJavaScriptを使わずに、モダンなWebアプリケーションを作るためのアプローチ JSONではなくHTMLベース サーバーサイドでHTMLを生成し、WebSocketでWebブラウザへ送信 構成する主な要素 Turbo Stimulus Hotwireを使うと何が良いのか？ Rails6以前の環境 最新バージョンのjs(ES6)を使いたい →主要なブラウザが対応していないため、ブラウザで動作するES5にトランスパイルする必要がある そのために必要なパッケージとその役割 node.js ES6のjsをサーバー側で解釈するために必要 ES6のjsをES5にトランスパイルするため、node.j
Rails: HotwireとSPAを比較するなら実装コストの違いに注意（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: The popover drama 原文公開日: 2024/06/02 原著者: Jorge Manrubia 日本語タイトルは内容に即したものにしました。 インターネット接続が遅い環境でHEYカレンダーのポップオーバーの読み込みが遅くなる様子が以下でツイートされたことがきっかけで、ポップオーバーのドラマが幕を開けました。その後、無慈悲で辛辣な書き込みやプロの荒らしの出現など、最もSNSらしい形で議論がヒートアップしました。 If you want to know why an app *needs* JavaScript on the client and can’t just do it all on the server, just look at Hey or any other Hotwrite app pic.twit
Rails7 + ViewComponent + Hotwireでのコンポーネント指向なフロントエンド開発を試してみた
はじめに 本記事では環境構築について取り扱いません。 詳細につきましてはリポジトリを参照してください。 Railsのフロントエンド開発でつらいところ Railsでフロントエンド開発する場合に、よく使う部品はPartialなどで共通化しますよね？ 小規模であればPartialだけで十分なのですが、コードベースが成長したり、複雑なユースケースを満たすようになると以下のような課題が生まれてきます。 1. データフローを把握しづらい PartialはControllerで定義したインスタンス変数を参照できるため、以下のようにデータフローが複雑になりがちです。 Partialに値を受け渡すときにlocalsでの受け渡しを必須にすれば解消できますが、曖昧な方針でPartialを実装しているとカオスになります。 2. JavaScriptとViewの依存関係が曖昧で保守しづらい View単位でJavaS
From Next.js to Rails then Elixir: My journey through React.js burnout
DEV Community Follow A space to discuss and keep up software development and manage your software career Future Follow News and discussion of science and technology such as AI, VR, cryptocurrency, quantum computing, and more. Open Forem Follow A general discussion space for the Forem community. If it doesn't have a home elsewhere, it belongs here
Remove TypeScript - laiso
経緯 world.hey.com DHHが「オタクくん見てる〜？ 今からうちのレポジトリからTypeScriptを剥しま〜す」と宣言したことにより、Web開発者界隈でTypeScriptの是非自体の話になり騒ぎになった*1*2。 github.com その後、野次馬がたくさん集ってきてrevertプルリクエストを立てる人やTypeScript公式リポジトリから全ソースコードを消すプルリクエストを出す*3ようなキッズムーブをする人も出てきた world.hey.com 実際の変更 8617行のTypeScriptがJavaScript化された。(Sloc 便利) ❯ scc src/ ─────────────────────────────────────────────────────────────────────────────── Language Files Lines Blan
ruby.wasmに対する思いとか、企んでいることとか - @ledsun blog
ruby.wasmについて、現時点で僕が思っていることを記録しておきます。 思っていること 主にonブラウザ 僕がruby.wasmに興味があるのは、ブラウザで動かす方です。 エッジワーカーで動かす方は今のところあまり興味がありません。 また、ruby.wasmがプロダクションで使えることは期待していません。 つまり「Reactをひっぺがして、ruby.wasm + Railsで大統一Ruby Webアプリケーション開発だ！」みたいな線はあんまり考えていません。 というか次の2点で大統一理論に勝ち目はないと思っています。 言語を統一したところで、ブラウザとサーバーはプログラミングモデルが違いすぎる JavaScriptエコシステムの規模はRubyエコシステムの規模を圧倒している わざわざJavaScriptの資産を捨てて、イベントプログラミングに向いているわけでもないRubyを選択するメリ
Ruby に >>> 演算子を実装して遊ぶ
私は Ruby ビギナーなんですが、最近ちょっとしたきっかけがあって、Ruby に興味津々です。 そこで、Ruby(MRI)をちょっとだけ改造して遊んでみました。 Ruby に貢献！みたいな良い話ではなくて、自分の手元の Ruby に対してあんまり意味のない改造を施して、楽しいね！ っていう類の話です。 ちなみに C 言語はほとんど書いたことありません。 どう遊ぶか 私はパーサーがちょっとだけ好きなので、パーサーを触ってみたいと思いました。 パーサーを触るような改造をするなら、新しい構文を追加してみるのがてっとり早そうです。その中でも二項演算子なら簡単なのではないかと考えました。 ということで、(私が日頃から書いている)JavaScript にあって Ruby にはない演算子として、>>> 演算子を実装してみることにしました。 >>> 演算子は、符号なし右シフト演算子というやつで、Java
Mapkick - Create beautiful JavaScript maps with one line of Ruby
Installation Add this line to your application’s Gemfile: gem "mapkick-rb" Mapkick uses Mapbox GL JS v1. To use tiles from Mapbox, create a Mapbox account to get an access token and set ENV["MAPBOX_ACCESS_TOKEN"] in your environment. Then follow the instructions for your JavaScript setup: Importmap (Rails 7+ default) Bun, esbuild, rollup.js, or Webpack Sprockets Importmap In config/importmap.rb, a
今年のオープンソース活動振り返り @ 2022
2022年のオープンソース活動の振り返り記事です。 今までの振り返りの一覧です。 今年のオープンソース活動振り返り @ 2021 | Web Scratch 今年のオープンソース活動振り返り @ 2020 | Web Scratch 今年のOSS活動振り返り @ 2019 | Web Scratch 今年のOSS活動振り返り @ 2018 | Web Scratch 今年のOSS活動振り返り @ 2017 | Web Scratch 今年のOSS活動振り返り @ 2016 | Web Scratch 今年のOSS活動振り返り @ 2015 | Web Scratch 今年のOSS活動振り返り @ 2014 | Web Scratch 2022年のGitHubのPublicなContributionsは7000~8000ぐらいを推移していました。 Privateリポジトリも含めると大体1.5
Rubyを手軽にブラウザ上で動かすことが可能に WebAssemblyを使って解消する、Rubyの動作環境問題 | ログミーBusiness
プログラミング言語Rubyの国内最大級のカンファレンス「RubyKaigi」。「RubyKaigi 2022」のKeynoteで登壇したのは、齋藤優太氏。「Ruby meets WebAssembly」のテーマで、WebAssembly上でRubyが動くようになった経緯、テクニック、ユースケースについて発表しました。全2回。前半は、なぜWebAssembly対応をするのか、そのモチベーションと経緯について。 登壇者の自己紹介とアジェンダ紹介齋藤優太氏（以下、齋藤）：いやぁ～、緊張しますね（笑）。みなさんおはようございます。 会場：おはようございます。 齋藤：「Ruby meets WebAssembly」ということで、今日は最近少し話題になっているRubyとWebAssemblyの話をしようと思います。よろしくお願いします。 （会場拍手） RubyがWebAssembly上で動くようになっ
研修で初めてRuby on Railsを触って学んだこと - ドワンゴ教育サービス開発者ブログ
はじめに 配属研修の課題について エンジニア新入社員研修の個人課題：「JavaScriptでの開発」 配属研修課題1：「RailsでAPIサーバのみ構築」 配属研修課題2：「Railsでフロントエンドも含めた開発」 作ったアプリケーションの概要 JavaScript・Expressで開発した時との違いに関する感想 letやconstが要らない変数定義 falsyな値の違い ブロックをそのまま変数に代入できない 暗黙のreturn 条件文の後置 フレームワークの機能が豊富 ディレクトリ構造の一貫性 リソースベースルーティング 課題を取り組みながら学んだこと OpenAPIを使ったAPI定義ファイルの作成 N+1問題対策 テストコードに関する考えの変化 おわりに We are hiring! サムネイル画像 はじめに こんにちは。2022年4月に新卒で入社しました教育事業本部サービス開発部バッ
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ページを開く
2024年のRailsと自由について考える
