作ってみた

Railsのリハビリついでに欲しかったサイトを作りました。
簡単に言うと、npmtrendsを~~パクっ~~リスペクトしたサイトです。

サイト：rubytrends.net
ソースコード：github

こんな感じ

過去一年分のダウンロード数をグラフ化し、重ねて表示しただけです。
次は期間を変えれるようにする予定です。

また、裏で検索履歴をカウントしているので、皆さんが使ってくだされば、いずれは本家のようによく比較されている関連gemを表示できるようになるはずです。

需要がありそうなら機能強化していきます。

Rails7を使ってみた感想

この記事にRailsタグを貼り付けた以上、Railsに関して何も書かないのもあれなので、少しだけ所感を。
今回は出来るだけRails wayを歩むという裏テーマがあったので、rails new --database=mysql --css=tailwind .で作ったプロジェクトからはじめました。

バックエンド

いつものRailsです。
Rails6とそれほど変わっているとは思いません。

Turbo

Turbo Driveしか使っていないので、Turbolinksと同じ具合だなという印象しか今のところないです。
個人的にはTurbo Framesにかなり可能性を感じてるので、後でこのサイトのグラフ部分をTurbo Frames化して試してみる予定です。

JSからの遷移ではTurbo.visit(path);を使えばよく、イベント一覧もあるので、（このサイトの構造が単純だったこともあるでしょうが）特に困ることはなかったです。

追記：
グラフ描画部分をTurboFramesに差し替えました。
通常のページと全く変わらない書き心地で画面の一部差し替えが出来るというのは、正直革命的なものだと思います。
言うなれば動的なrender partialというイメージです。

各frameにはidが必要であり、frameの画面遷移はelementのsrcを差し替えるだけです。
JS部分は以下の二行だけで部分更新が実装できました。

    const chartElm = document.getElementById("chart");
    chartElm.src = path;

Stimulus

最近TS+Reactばかり触っていた身としては、はっきりいって最初は記法が気持ち悪くて使う気になれなかったのですが、DHH信者としてのプライドがそれを許さなかったので、歯を食いしばって使ってみることにしました。

人は慣れる生き物なので、２分もすればTS、Reactの書き方を忘れ、Stimulusもわるくない……のか？　という気持ちになりました。

html側は-、JSファイル名は_という奇妙な決まりごとに戸惑いはしたものの、慣れてしまえばそれもまたクセになるものです。
特にディレクトリは--で区切るところなんかはシビれました。

複雑な部品には複数のコントローラーをつけて制御することも出来るらしく、想像するだけでカオスなことになりそうではありますが、一般的なサイトでフロントエンドにそこまでゴリゴリロジックを書くことは稀でしょう。

複雑なフロントエンドは……素直にReactを使うのが良手でしょうか。

Importmap

具合は良いです。

npm install xxx
import {XXX} from "xxx";

が

./bin/importmap pin xxx
import {XXX} from "xxx";

に変わるくらいでしょうか。

importに失敗したときにエラーログが出ずに落ちるところは正直地獄ですが、これは恐らく設定か今後のアプデで解決される問題なので良しとしましょう。

まとめ

Rails7で一新されたフロントエンドの深いところまではまだ触っていませんが、浅いところで水遊びしてる分には悪くなかったです。