レイアウトを弄る

あっという間に2月だよ。

2021/02/01 07:46:01

ブログ相変わらず更新頻度が低いがレイアウトをいじる機運がなんとなくあったので調整した。幅を少し広くし、行間を高めにとって可読性をあげた。その他表示が少しおかしかった部分の修正など。

ついでにNuxtのPreview機能を使ってGhostのDraftをpreviewできる機能を実装しようとしたが、思ったより面倒くさくて挫折した。Draftを取得するには普段のContent APIではなくAdmin APIでやる必要があり、トークンも管理画面から取得できるものではなく、JWT形式でコネコネしたものを使う必要があるらしい。なんで?
加えて、APIを叩く際に使える公式ラッパーである@tryghost/content-apiはぎりぎり型定義が存在するものの、@tryghost/admin-apiは型定義がないので放り投げた。2021年にもなってJSだけでフロント構築するの愚か者の極みだと思う。ちなみに公式ラッパーはあるものの、戻り値の型定義が大変気持ち悪く、

{
  meta: { ... }
  posts: [...]
}

みたいなレスポンスをごにょごにょされた結果、一見すると `Post[]` なのに Arrayにmetaというフィールドが生えた大変気持ち悪い型が返ってくる。文字で書くと分かりづらいが内部はこう。

interface BrowseResults<T> extends Array<T> {
    meta: { pagination: Pagination };
}

export interface PostsOrPages extends BrowseResults<PostOrPage> {
}

これが嫌でしばらく公式のライブラリをあげるのをためらっていたが、最悪コンテンツ生成には影響がないので諦めてあげた。ちなみにその型定義になる前の型も全部exportされてはいるので型定義だけ使ってやることもできる。Ghostの思想はミニマムなブログを構築するという意味ではかなり好きだが、設計が追いついてないように感じる。内部の実装もjsだったりExpressだったりで、これからの実装もずっとこれでやっていくのは大変そうだなあと内部実装を見るたびに思う。過度じゃないWYSIWYGな管理画面自体はそこそこ使いやすくて好きなので頑張ってほしい。

purgeCSSを入れたりしてBulmaの未使用スタイルを削ろうとしたが、記事画面はHTMLを流し込んでおり、どのスタイルが降ってくるかあんまり予想できないのと(まず記事にHTMLを書くことはないので、テンプレートに書かれていない要素型セレクター周りだけだが)、ホワイトリストの管理あたりが面倒くさいので1日くらいで消した。

久々にVueやNuxtをTypeScriptで向き合い、CompositionAPIも実際に触ってみたが、現時点では体験の悪い一応hooksがあるReact*TypeScriptみたいな感じだった。以前よりかはsetupなどでロジックの切り離しがしやすくなり、多少コードは綺麗に書けるようになったが、Vueの根幹であろう、双方向Bindingみたいなのが依然として残っており(これがなければVueではないとも言えそうだが)、データの更新もvalueフィールドを介したものになっていて、これは良くなったのかどうかよくわからなかった。もはや一度定義した変数はオブジェクトのようなjsの仕様で変更できてしまうものでも触りたくなく、更新関数をタプルでもってこれるReactの方がよっぽどシンプルでわかりやすい設計になっているように思う。

また、これもVueの特色であろう.vueファイルというSFCがTypeScriptと相性が悪く、テストもしづらい。2021年にもなってVSCodeでimport文に対してF12を押したとき、vue-shim.d.tsdeclare module '*.vue'に飛ぶという残念な体験をしたくない。当然Propsの定義なども飛ぶことができないので、@vue/test-utils でテストを書くときにすら苦労する。というか型定義の意味がなさすぎてTypeScriptを使っている意味がもはや薄い。全部JSだけで作り上げてテストもほとんど書きません!くらいだったら使ってもやってもいいのではという風になってきてしまった。後PWA周りの手軽さあたりはReact(Next)あたりも良いんじゃないかなあという気がしてる。

こんな風に書いているがむしろ私は元々VueやNuxtが好きで、業務プロダクトでも採用したことがある(負債になった)。Vueは簡単に書けるが、あまりにも簡単に書けてしまうことがむしろ仇になる場面が多いことを長期的なメンテナンスを交えて感じた。asyncDataでHTTP Requestしているものが各所に散らばっていて見通しが悪かったり、ロジックが肥大化してコンポーネントが何をしているのかわからなくなったり。これらの問題はNuxtであればpluginsを使ってNuxtのContextやVueのインスタンスに対してinjectを行ったり、SFCをやめてTSXを使ったり、今であればcompositionAPIを使えば改善できるであろうが、そこまで設計出来るならもう全部Reactでいいじゃん、という風に思うのがここ半年で感じたこと。

とは言うけど好きなのは本当なのでこのブログくらいの規模であればメンテナンスは出来るので、バージョンアップデートと時間があれば、ちょこちょこメンテナスしてVueやNuxtの未来に期待したいころ。


日常ブログのはずだったのにどうして…。