はてなブックマーク

はじめに UIライブラリとして最近話題なのはshadcnです。これは擬銃的にはRadix UIのスライル無しなコンポーネントにTailwind CSSでスタイリングをしたものです。 ただしRadix UIはReactに完全に依存します。Reactが無い環境ではい使用できず、Vue、SvelteやただのHTML/JSで使用することができません。もちろんHotwireで使用することもできません。同じようにスタイル無しのコンポーネントを提供するHeadlessUIもReactもしくはVueを必要としており、最新のUIコンポーネントライブラリはReact等が前提という流れになっていました。 そこに一石を投じるのが、Tailwind Labsが7月25日に公開したTailwind Elementsです。Tailwind LabsはHeadless UIも作ったのですが、今回のTailwind Ele

最初にこの記事を書いた時点では、jQueryでTypeScript, バンドラー, ES module, そしてmoduleを使ったビジネスロジックの分離を使ったものは現場で見たことはないと述べました。その後、これをすべて使っている現場があることも発見したので、本記事を修正しました。 用意したもの 例によって、デモコードをGitHubに公開しました。 今回作るのは下記のリンクにあるUIです。 電車の料金を計算するUIです 入力: ユーザが入力する項目 通常席かファーストクラスか 乗客の人数 割引率 出力: 画面で変化する項目 通常席かファーストクラスかのボタンの表示 単価 合計金額 jQueryが得意とするちょっとしたUIの動的アップデートではなく、ブラウザでステートとビジネスロジックを持たせるものを作っています。考えずに作るとスパゲッティーコード化しやすいものです。 複雑になりやすいUI

一時期Ruby on RailsのERB + jQueryベースのフロントエンドをReactやVueのモダンフロントエンドにリプレイスするのが流行りました。私も現場でこういう例を複数見ています。 しかしどれも途中で止まっています。半分にも届かないぐらいのところで "ERB + jQuery"だったものが "ERB + jQuery + React + Next.js"とか"ERB + jQuery + Vue"になっています。 複雑度はむしろ明確に増しています そこで、こういう結末が一般的なのかどうか、ウェブを検索して調べてみました。 タイミー社の例 Rails (多分ERB) + jQueryが出発点 30画面 Next.jsのSPAに移行 3年間かかった （2年弱の時点で一回中断） クックパッド社の例 2020年にRails (多分ERB) + CoffeeScript/jQueryを

既存プロジェクトにNext.js等のSSRを導入する場合は既存の認証機能を維持したり活かしたりする必要があります。しかしSSRの認証とCSR(SPA)の認証は同じではなく、簡単に共有できるものではありません。 ここでは複数のテックブログの事例を見ながら、この難しさと本物のウェブサービスで採用された解決策を見ていきます。 CSRとSSRの認証の違い まず最初に、CSR(SPA)とSSR[1]の認証の違いをざっくり紹介します。技術的制約を理解していただくことが目的です。 クライアント視点では、認証システムは突き詰めると、トークン(鍵)[2]を安全に保管し、必要時にサーバに渡す(鍵穴に差し込む) ことです。この２つに絞って解説します。[3] https://www.flaticon.com/free-icons/vault (by IYIKON) https://www.flaticon.com

下記の記事の内容をRuby Gemにしました！ react_router_rails_spa gem. 以下のコマンドを実行するだけで、Modern SPAをRuby on Railsに載せることができます。 # Railsのインストール rails new test_app cd test_app # gemのインストール bundle add react_router_rails_spa bundle install bin/rails generate react_router_rails_spa:install # サーバ立ち上げ bin/rails s bin/rails react_router:dev はじめに こんにちは！Ruby on Railsフロントエンドエンジニアを目指し、Hotwireを中心に活動しつつ、Next.jsもReactも勉強している加々美です！ 202

ここ３ヶ月間ほど、"Hotwire for Frontend Developers"「フロントエンドエンジニアのためのHotwire入門」というウェブサイトを作っていました。（ベータ版として公開していました） HotwireとNext.jsをちゃんと見てから比較してもらいたいというのが最大の目的で、同じUIをHotwireのとNext.jsで作成し、デモを動かしたり、コードを見たりしながら比較してもらおうというのが主旨です。同じUIをNext.jsのPages RouterとApp Routerで作っているものもありますので、この比較もできます。 結構コンテンツが多いので、Zennではこれから少しずつ内容も紹介していきたいと思います。 まずはご覧ください！ "Hotwire for Frontend Developers"

はじめに Next.jsにServer Actionが新しく導入されました。サーバ上の関数をブラウザから直接呼び出すようなコードの書き味を提供するもので、非常に魅力のあるコンセプトだと私は思っています。ただしサーバ上で実行されるコードとブラウザで実行されるコードの境界が曖昧で、"use server"のセキュリティ上の懸念もよく議論されています。 一方で、私の先日の記事Next.jsで簡単なCRUDアプリを作りながら気になったセキュリティ: Railsの視点からで、私はこの"use server"問題には言及しませんでした。まだ非常に新しい話題でかつNext.js側の対応も進行中だというのもありますが、実は個人的にあまり気にならないのが最大の理由です。 気にならなくなったきっかけは、Server ActionをRuby on Railsのコントローラと同じように考え始めたことです。こうする

先日、Kamal 2でNext.jsを安価なVPSにデプロイする勉強をしながら、Next.js App Router/Server ActionでCRUDのデモアプリを作成しました（コードはGitHub）。そのときにセキュリティについて気になって点がいくつかあり、勉強しながら対策をしましたので紹介したいと思います。 私自身は業務でNext.jsを書いた経験が限定的です。的外れな議論をしているかもしれません。あくまでもRuby on Railsアプリを書くときと同じ気持ちでNext.jsのアプリを書いたとき、セキュリティ上で気になった点を挙げているだけです。私が見落としている点や誤っている点等ありましたら、コメントやX等で教えていただけると大変ありがたいです。 その１：データ漏洩の危険性 この問題についてはムーザルちゃんねるが紹介しています。またNext.jsの公式ブログでも対策が紹介されて

Kamalシリーズ Kamalについては他にも記事を書いていますので、ご覧ください Kamal 2で さくらのVPS にRailsアプリをデプロイ Kamal 2 を使い、インフラに詳しくない人でもNext.jsを296円のVPSにデプロイできるよう、説明してみる(本記事) Kamal 2でNext.js + DatabaseをVPSにデプロイする Hono + JSX + Hotwire + SQLite + Kamal はじめに 9月26, 27日に開催され、めちゃくちゃ盛り上がったRails World 2024でKamal 2が発表されました。Kamal 2はRuby on Railsを作った37signals社が、自社の人気サービスをデプロイするのに使用しているツールです。 37signals社はAWS等のクラウドに年間で$3,201,564を使った(2022年: 日本円で4.5

Kamalシリーズ Kamalについては他にも記事を書いていますので、ご覧ください Kamal 2で さくらのVPS にRailsアプリをデプロイ(本記事) Kamal 2 を使い、インフラに詳しくない人でもNext.jsを296円のVPSにデプロイできるよう、説明してみる Kamal 2でNext.js + DatabaseをVPSにデプロイする Hono + JSX + Hotwire + SQLite + Kamal はじめに 開催されたばかりのRailsWorld 2024で発表されたKamal 2を使って、さくらのVPSにRailsアプリをデプロイしましたので報告します。 Linuxのサーバデプロイの知識がある程度あることを前提に、私が引っかかったポイントを中心に説明します。入門的な内容は、いつか別途書きたいと思います。 TL;DR Kamalを使うと さくらのVPSなどに、Ra