レベルが低かろうと技術ブログという矜持を持つ 最終更新日を付与したい。 というのも技術ブログにおいて更新日はとても大きな意味を持つ。 ちゃんと更新されている記事であれば、たとえ公開日が古かろうと問題ない。 ということで、このブログにも更新日を付与することにした。 HogoのテーマであるPagermodのカスタマイズ 当然、サブモジュールとしてインストールしたファイルをカスタマイズすると、本家の更新時に上書きされる。 これはみんな大好きwordpressと同様。 wordpressで子テーマを作るのと同様に、Hugoではサイト名\layouts\partials\というフォルダを用意して、そこにカスタマイズしたいファイルを持ってくる。 更新日を付与する 今回であれば、post_meta.htmlに投稿日の記述等があったので、このファイルをカスタマイズする。 そのため\layouts\partials\post_meta.htmlを作成し、 {{- if not .Date.IsZero -}} {{- $scratch.Add "meta" (slice (printf "<span title="%s" >%s</span >" (.Date) (.Date | time.Format (default "January 2, 2006" site.Params.DateFormat)))) }} {{- end }} という元記述を {{- if not .Date.IsZero -}} {{- $scratch.Add "meta" (slice "投稿日" (.Date.Format (default "2006-01-02" .Site.Params.DateFormat)) "更新日" (.Lastmod.Format (default "2006-01-02"))) }} {{- end }} に変更した。ついでに日本語にした。 最後にhugo.yamlにenableGitInfo: trueを付与する。 この設定はbuild時に読み込まれるので、ローカルで開発している場合は一度サーバーを止め、再度buildしなおせば更新日が付与されていることが確認できる。 実際に付与されている例 ↓ nextjsで開発中にモックサーバーを立ち上げたいのでnext-swagger-docと@stoplight/prism-cliを比較してみた

ネイティブアプリを諦めた さかのぼることはるか昔、まだ子どもが妻のおなかにいる頃。 要は1年9か月前にネイティブアプリの作成を思いついた。 それから幾星霜、まだネイティブアプリは完成していないし、モチベーションはすっかり下火になっている。 技術スタックを欲張った 理由はバックエンドにある。 というより、技術スタックを欲張ったことにある。 というのも今までは慣れた言語に1つ新しい言語を取り入れることで個人開発をしてきた。 Nuxt + firestore Next + firestore Next + Nest + aws といった具合に行ってきたのだが、今回は「React Native + Go + GCP」というすべて初めての言語で臨むことにした。 わからないストレスをずっと感じつつプログラミングを進めていった結果、すべてそれなりの形にすることに成功した。 GCPにかかる料金で心が折れた じゃあ、結合しようという時点で、GCPにかかる料金を知り仰天し、心が折れた。 Go & Cloud Run & Cloud SQLでWebAPIを作成したけど、公開する前に諦めた GCPは無理だと知った時、もうモチベーションを保つことができなくなった。 すらすら書けないストレス コードを書く時に、すらすら書ける言語と調べつつ書く言語だと心理的ストレスが全然違う。 今は全ての言語が初めてで調べつつ書いているので、辛い。 すらすらコードを書きとりあえず、モチベーションを上げ、最終的にネイティブアプリを完成させたい。 ただでは起きない という理由があり、すらすら書けるWeb版の作成に着手しようと思い立った。 ただそれだけだとつまらないので、今回はテストコードも書いてみうと思う。 テストコードの勉強をしたいと思っていたのでちょうどいい。 そして、最終的にネィティブアプリを作成するので、その時の労力を減らすためにここでAPIを作成しちゃおうと思う。 決してただでは起きないように頑張る。 やること じゃあ何をするのか。 Nextでフロントエンドを実装する バックエンドはSupabaseを使ってみる。 app/apiでSupabaseをAPIにラップする テストコードをしっかり実装してみる という風にしようと思う。 それでPWAにしようかなあ。 その後ネイティブアプリ化するっていう目標。

new Set()ってなに？ 先日ChatGPTでコード生成したところ、new Set()というオブジェクトが登場した。 そういえば使ったことあると思い調べてみると、JavaScriptの配列で重複したものを削除し、ユニークな配列を作成するで使っていた。どうやら配列を削除するのに使っていたよう。 実際に調べてみると、 Set オブジェクトは値のコレクションです。 Set に重複する値は格納出来ません。 Set 内の値はコレクション内で一意になります。 とのこと。 簡単に言うと「要素の重複を許可しない配列のこと」だと思う。 じゃあ、配列と何が違うのか。 配列と何が違うのか 配列との違いは、 重複を許さない インデックスでアクセスできない あとは追加とか削除とかのメソッドが異なる 高次関数（map, filter, reduce）を使用できない という点。 重複を許さない const setValue = new Set([1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6]); console.log(setValue); // [LOG]: Set (6) {1, 2, 3, 4, 5, 6} このように重複した値はなかったことになる。 インデックスでアクセスできない const setValue = new Set([1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6]); console....

フロントエンドを開発するときにバックエンドサーバ―の用意ができていない時がよくある。 今までは側だけ作って待機していたが、せっかくなのでモックサーバーを立ち上げ、バックエンドができ次第、URLの向きを変え、完成！ という風に出来ればと思いモックサーバーの立ち上げを調べてみた。 json-server まずはjson-serverを使おうと思ったけど、同じエンドポイントでGet、Postが分けられなさそうということで不採用にした。けど、よくよく落ち着いて調べてみるとできるかもしれない。 いつか機をみて使ってみたい。 が、今回は上記の通り不採用した。 app/api 次に、そもそもnextjsにはAPIを作る機能があるじゃないかと思いだし、それを活用することにした。 ついでにAPI仕様書も作れればなおいいということで調べてみると、next-swagger-docというものがあった。 これでAPIを作成し、しかもSwaggerを作成できると舞い上がり実装してみた。 実装 npm i next-swagger-doc npm i swagger-ui-react まずはインストールする。 ちなみにバージョンは下記の通り。 "next": "14.2.3", "next-swagger-doc": "^0.4.0", "react": "^18", "swagger-ui-react": "^5.17.14" lib/swagger.tsに下記をコピペする。 import { createSwaggerSpec } from "next-swagger-doc"; export const getApiDocs = async () => { const spec = createSwaggerSpec({ apiFolder: "app/api", // define api folder under app folder definition: { openapi: "3.0.0", info: { title: "Next Swagger API Example", version: "1.0", }, components: { securitySchemes: { BearerAuth: { type: "http", scheme: "bearer", bearerFormat: "JWT", }, }, }, security: [], }, }); return spec; }; ※以降先頭行がファイル名になっている。...

最適なドメイン管理プラットフォームを探して 今までいくつかのドメイン管理プラットフォームを利用してきた。 エックスドメイン お名前ドットコム Google domains エックスドメインは特に不満がない。 Google domainsはよかったけど、サービス終了したので今後は使えない。 で、問題はお名前ドットコム。 ここ１年、メインのドメインを取得したんだけど、毎日のように膨大なメールが送られてくる。 設定でオフにできるかもだけれど、そもそもこんなにメールを送ってくるのはどうなのだろうかということで乗り換えることにした。 せっかくだし自身のドメインを新しくしようと思う。 今までnove-web.comというドメインだったけど、nove-bというドメインにしたい。 そしてトップドメインは開発者らしくdevにしたいということで、まずはなんら不満がないエックスドメインで探したが、どうやらdevドメインを扱っていないということ。 Cloudflare Registrarでドメインを登録する じゃあ、どこで購入しようと調べてみるとCloudflare Registrarの評判が良さげだった。 料金も、同様にdevドメインを扱っているお名前ドットコムと比べると 登録 更新 お名前ドットコム 2,178円 2,178円 Cloudflare Registrar $10.18（1,603.63 円） $10.18（1,603.63 円） Cloudflare Registrarの安い。 どうやら卸売価格で提供されているのが強みらしい。 登録料と更新料は卸売価格で提供 ドメイン名の登録市場は、初回のドメイン名購入時には大幅割引価格を提供するものの、じょじょに追加料金を加算し、更新料も膨れ上がるような企業で占められています。 Cloudflare Registrarの場合、お客様に請求するのは弊社が支払うドメイン登録料のみで、その他の料金はかかりません。 値上げや想定外の料金は生じません。 Cloudflareのニ要素認証、マルチユーザーサポート、セキュリティ重視のカスタマーサポートチームといったセキュリティ機能でドメインの安全を確保し、安心してお使いいただけます。 ありがたい。 そういうわけで登録していくけど、特に難しいことはなかったので省略する。 Netlifyにで動くブログにサブドメインを当てる Cloudflare Registrarでの作業 次にNetlifyにアップしているこのブログにサブドメインを当てていく。 DNS > Records > DNS management for nove-b.dev > Add Record の順にページを移動し、 タイプ 名前 コンテンツ プロキシ ステータス TTL CNAME blog nove-b.netlify.app DNS のみ 自動 のように登録した。...