readみなさんこんにちは、かじりです。remarkjsでこのblogを作成しました。AMP対応も試みたんですが、見た目が好みじゃなかったんでやめましたwJamstackとはjamstack.orgに特徴が書いてありました。Jamstackは、ウェブの新しい標準アーキテクチャです。Gitワークフローと最新のビルドツールを用いて、プリレンダリングされたコンテンツをCDNに配信し、APIやサーバーレス機能によってダイナミックにします。Generator、ヘッドレスCMS、CDNなどがあります。)をロードするようなアプリケーションです。初回ページもしくはそれ以降のページでのユーザとのやりとりにおいて、サーバとの往復が不要、すなわちページのリロードが発生しません。stackoverflowのある回答によると、以前まではJamstackでなく、JAMstackという表記だったそうです。昔の定義を見て、非常に純粋に考えれば、SPAはこのカテゴリーに入ることができます。tech)に移ったのもそのためでしょう。以前までの定義ではSPAはJAMstackに入るらしく、それで様々なテクノロジーを使うJamという表現に変わったようで、Jamstackというのは定義が曖昧なものだと思っていますが、個人的には事前にビルドされた静的なファイルをデプロイするやつだと思ってます。Next.jsでJamstackを使うvercel/next.jsのexampleリポジトリでサンプルが配布されています。今回はこれを元にサイトを作りました。なっており、またビルドの構成画面をみるにstartコマンドの登録箇所が無いです。exoprtに変更しましたこれでデプロイしたところとりあえずうごいいたので満足です。ついでに大事に3日くらい温めておいたドメインを使いました。googleDomainsだと1400円ドメインによって値段違うだろうし、税込み税抜とか調べて無いですが、まあgoogleDomainsで買いましょう。細かく調べて無いですが。更新料も毎年そのまま取られるんで、2178*nと1400*nだと長年使うとデカイですね。googleDomainsのUIは新しい感じで個人的に好みです。materil-uiを設定するvercel/next.jsのexampleリポジトリではtailwindcssを使っていましたが、materil-uiの[^1]が個人的に好きで、パンくずとか自分でつくろうとすると面倒だしとか、いろいろあってmateril-uiが採用されました。component="h1">とか書くとh1タグとして使えますよすごくないですか。ことで参考に作らせていただきました。このサイトのこのページだけめっちゃ見た記憶ある。自分のサイトも現在は動いてるんでコード参考になるかも知れません。d3.jsのtreemapを使って、サイトのカテゴリを実装するブログ作ってみたんですが、まあどこにでもあるサイトだなあと思ったんで、変わったものを実装してみました。SEOとかいろいろ面倒なことに対処してたら時間かかりましたね。最低でも8pxは開けてほしいとかいろいろ言われたんですが、svgは上に要素を積んでいく感じで描画されるみたいで、リンクを設定した四角を描画した後に上に文字を描画してんですが、文字はリンクになってなくて。いえ文字をリンクにすると最低でも最低でも8pxは開けてほしいって怒られて大変でした。(clickイベント設定した。)下の要素に伝搬させればいいんじゃないかとか、上に透明なリンクを被せればいいんじゃないかとか考えましたが、svgの知識とか足りなくて時間かかりそうだったんで断念しました。あとデータ形式csvとjsonがあって、最初csvの方でやったら、思ってたカテゴリ表示ができなくてjsonのカスタムで実装し直しました。Test(これはあとから見たらかんちがいだった。amp対応しているかサイトをテストするやつ。)って書いてあって、googleでもまだテスト中なんだなと思って諦めました。苦手なので助けて)って書いてあるのが、普通のcssっていう意味じゃなくて縛りがあるうえでのcssのことだなって勝手に納得した。適当に動かしてfullampの状態で試したときは確かに動作早かった。remarkjsmarkdownをhtmlに変換してます。remarkjsとrehypejsがあって、unifiedjsをつかうことで共存させられるっぽいとこまで進んだところで闇だなと思って、remarkjsだけでつくり終わりました。"^7.2.0",こんな感じでプラグインが豊富です。h1タグとかにリンク付けてくれるのとか、スペース2個で改行じゃなくて、改行を改行として扱うやつとか、tocを生成してくれるやつとかあって便利です。終盤で疲れててドキュメント読解力が低下してて辛かった。lighthouse-ci便利な時代になったなーって感じました。actionsでlighthouseを簡単に実行できます。googleさんが太っ腹なのでファイルをgoogleさんのサーバーに無料でアップロードさせてくれます。},};いつまで閲覧できるのか知りませんが、googleのサーバーにアップされてるlighthouseの結果はこちらです。sitemap生成next-sitemapでsitemapも生成できますよ。postbuild",こんな感じのbuildコマンドになりました。デプロイするたびに生成できます。analyzeするだけでパッケージの使用割合も見れます。便利ですねnpmjsの説明どおりにやったら簡単にどうにゅうできました。あとがきいろんなパッケージが試せて満足しました。Jamstack試してみてはいかがでしょうか。Jamstackめっちゃはやいです(まだ記事が少ないからかも知れないという懸念はある。Jamstackしらべたら、静的ファイル配信でサーバー管理費用安いとか、セキュリティ高い、アナリティクス画面がよさそうだなーとかいいところあって決算も良さそうでCloudflareは買いかなーっていう気持ちです。あと、lighthouseのスコアがなかなか高いです長期休暇が4日くらい消化されました。