sside.net

早くもBlog作るのに心を折ったので、一から作り直しています

Remix.runで作り始めたこのBlogですが、Remixのフルスタックな構成だと、段々と自分が何を書いているのか分からなくなって、好きに書けるはずのコード修正がどんどん地獄味を増して、最近だとIDE開くだけで嫌な気持ちになり、Switchコントローラを手に取ったり、Steamで適当なゲームを起動するようになり、いよいよ辛くなってきた。

Remix自体はすげー良いプロダクトでした。UIフレームワークやスタイルシートの取り扱いがあまり宜しくないことはあったけれど、それに勝るメリットが多々あった。<Outlet>で気持ちよく書けるレイアウト、SSRデフォルトの設計思想、高速なホットリロード、フロントとバックエンド混ぜ書きできること自体も、クエリの結果をサクッとブラウザに表示させたいならかなり良い。

ただ、やっぱりフロントとバックエンドが混ぜ書きみたいになると、

  • モジュールのファイルをどのディレクトリに配置するべきか異様に悩む
    • どうやってもバックエンドとフロントエンドの都合が近接してくる
  • DBのエンティティの型がフロントエンドに貫通してくる
    • 適当な型に変換して渡すのも面倒
    • それを変換したりフィルタしたりして、ReactNodeを返す関数が爆誕したりする
  • Nodeとブラウザで存在しないオブジェクトを参照しようとしてエラー出るたびにイライラする

などのことがあり「やっぱやり慣れたフロントエンド + バックエンド構成がいいな」「やるなら傷が深くなる前にやった方がいいな」ということで、

  • Next.js
  • 使い慣れたNest.js
    • 普段はNodeでバックエンドの仕事をしています

でやり直すことにしました。本当はNext.jsのLayout RFCが実装された後にしたかったんですが、決断は早い方がいいので…。

今動いているコードですが、GitHubのこのリポジトリに供養として残しておきます。

ユーザによる入力が可能なタグ入力フォーム用意するなら、Choices.jsよりtagifyだった

当Blog、現状だと

  • メタタグの入力UI
  • 画像のアップロード
  • codeタグのシンタックスハイライト

などが全然未実装なので、とりあえずメタタグの入力UIを何とかすることにした。

作ってる最中はカンマ区切りの文字列渡してたけれど、formのPOST時にダメ文字のバリデーションしてる(パスパラメータに使ってる)ので、入力時にバリデーション掛けられないと面倒よなということで、何か入力ライブラリないかと探したところ、真っ先に見つかったのがChoices-js

とりあえずフォームに追加して、スタイルとか弄ってたんですが、これ、ユーザの入力時にアイテムの追加ができないのな…。8割方書いた時点で動作確認して「出来ねえぞ?」と思ってissues見てみたら、こんなリンクが貼られており、無理じゃんとなった時のゲンナリ感よ。Choices-js使おうとしたときに、他のオルタナティブも調べて、GitHub Starの数も多いし大丈夫だろうと思ってたらこれ。真面目にドキュメント読んだり、ライブラリの目的にしてるアプリケーションを把握しないとやっぱ駄目だな…。

で、そこで挙げられてたyairEO/tagify、すげえ簡単に使えるので実によかったですという話。

  • 所謂メタタグの入力に特化している
  • ReactやVueのコンポーネントも付いてくる
  • inputタグ内の値もライブラリ側で自由に加工できる
    • submit時に加工する必要がない
  • スタイルのカスタマイズがCSS Variablesで楽に変更可能
    • Choices-jsは上書きが面倒だった

ということで、滅茶苦茶良かった。ありがてえ…。