2024年から現職の Momentum 株式会社を離れることになったため久しぶりにブログを再開してみました。過去には Medium に記事を書いたりしていたのですが、あまり続かないので、ブログを自作すれば楽しみながら続けられるかな。ブログの開発が止まって更新も止まるという諸刃の剣。

ドメインの管理

2023年6月に Google Domains の終了と Squarespace への譲渡のアナウンスがありました。 https://support.google.com/domains/answer/13689670?hl=ja

Squarespace もよく分からないし、ブログを始める前にずっと Cloudflare が気になっていたので移管することにしました。

作業は Cloudflare の設定ページに従って進めましたが、概ね以下のような感じでした。

Google Domains でドメインのロックを外す
Websites に自身のドメインを追加する
Cloudflare の DNS レコードに任意のレコードを追加する
Google Domains の DNS カスタムネームサーバーに Cloudflare のサーバーを指定する
Google Domains で認証コードを取得する
Cloudflare に認証コードを設定する

1 のロック解除で1時間ほど待ちました。また、4 の設定変更も反映まで少し時間かかります。ぼくの場合は1時間後くらいに気づいたら終わってました。

今回は DNS レコードの書き換えもあったので、突然メールアドレスが使えなくなったりしないかとドキドキでした。 Route 53 などで DNS レコードを管理している場合は DNS レコードは触らなくても良い気がするんですが、Cloudflare でもそのような移管ができるのかは未確認。

Google Domains ではドメインを 3 つ保持しており、Cloudflare への移管には $30 ほどかかりました。

ちなみにですが、 Google Cloud を使っており連携しやすいかなと思い Google Domains を使っていたのですが、 Google Domains を使っていて良かったと思ったことは一度もなかったです😅

技術選定

ドメインは用意できているので次にホストする場所の選定します。あまりお金かけたくないので慣れている GitHub Pages を使おうと思いましたが、Cloudflare に移管したことで Cloudflare Pages を利用できるようになりました。今回はこれでいきます。

次に何で作るかです。 GitHub Pages では GitHub Actions と組み合わせればなんでもできましたが、簡単に Jekyll を使うことが多かったです。 Jekyll 向けに静的HTML等を出力したり、JavaScript でそれっぽい仕組みを構築したりもしました。

今回は Cloudflare Pages なので、大好きな SvelteKit がそのまま使えます！☺️

Cloudflare Pages

GitHub Pages と Cloudflare Pages を比べた時にポイントとなるのが転送量の問題らしいです。ぼくは GitHub Pages でアクセス数の多いサイトの運用とかしたないので気になったことないですが😅

https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages#usage-limits

GitHub Pages サイトには、月当たり 100 GB のソフトな帯域幅制限があります。

https://www.cloudflare.com/ja-jp/plans/developer-platform/

無制限の帯域幅

Cloudflare Pages はフリープランでも帯域幅が無制限です。どんな人が有料プランを使うんだろう？多数のアフィリエイトサイトなどを運用する場合は月500回のビルド回数制限に引っかかるのかな？

Cloudflare で管理しているドメインを使ったウェブサイトの公開が簡単にできます。

SvelteKit

Svelte は React や Vue のようなフロントエンドフレームワークであり、SvelteKit は Angular, Next.js, Nuxt.js のようなウェブアプリケーションフレームワークです。

React と Vue にあまり詳しくないですが、誤解を恐れずに言えば Svelte はコードをコンパイルする点が React や Vue と最も違うところだと思います。

例えば React は以下のように HTML に記述することでページを構築することができますが、Svelte にはそのような機能はありません。

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

とは言え、上記のように React を使っている人は稀だと思いますし、JSX や Next.js などを使う人は NPM プロジェクトの構築や JSX のコンパイルが必要になると思うので、実際の開発スタイルには大きな違いはないと思います。

個人的に最も気に入っているのは、.svelte ファイルが HTML とそっくりに書ける点です。

JSX ファイルは以下のようなものになると思います。

function formatName(user) {
  return `${user.firstName}(${user.handleName})`;
}

const user = {
  firstName: 'Taro',
  handleName: 'dictav'
};

export default const Page() {
  return (
    <h1>
      Hello, {formatName(user)}!
    </h1>
  );
}

同じような機能を .svelte で書くと以下のようになります。

<script>
  function formatName(user) {
    return `${user.firstName}(${user.handleName})`;
  }

  const user = {
    firstName: 'Taro',
    handleName: 'dictav'
  };
</script>

<h1>
  Hello, {formatName(user)}!
</h1>

ぼくは Svelte の方が好みです。

npm trends を見るとやはり React が圧倒的です。来年の今頃はもうちょっと人気出ているといいなあ

Dictav Blog

ブログを再開しました

ドメインの管理

技術選定

Cloudflare Pages

SvelteKit