動機

SNS乱立やWebサービスもたくさんあるので、とりあえずこのサイトにアクセスすれば私の使っているSNSやサービスのアカウントリンクが見れるみたいなリンク集兼ポートフォリオ的な静的サイトつくりたいなーと前々から思い
次の例大祭でそのサイトのリンクを貼った名刺新調したいしなーという動機で、静的サイトは今どきどれが良いのかというところで調べたところ、Gatsbyというものに出会った。

www.gatsbyjs.com

なぜGatsbyか

私のWeb開発歴はもっぱら.NET系のフレームワークが多く、ASP.NET MVCやWebFormsという古の物からBlazorも今がっつり仕事で使っている。
なのではじめはC#で静的サイトが作れるやつを探しており、Statiqを試した。

www.statiq.dev

チュートリアルというかHello Worldを試したけど、カスタマイズとかそういうのにちょっと時間がかかりそうという印象を受けたのでちょっとやめた。あとライセンス周りがちょっとめんどくさそうな気がしたのも一つある。*1ブログサイトはここを使う想定なので、ブログサイト構築までは不要なんだよなー

他調べたりAIに聞くと、やっぱりJavaScriptを使わざる負えない感じ*2らしく、腹をくくって取り掛かる前提で調べたらGatsbyかNuxt.jsがええよとのこと。具体的には以下

これを聞くと、今回はサーバーサイドがっつり実装とかないし、フロントだけだしなんならGitHub Pagesにデプロイする想定なんだよなという気持ちがあるので、とりあえず手を動かして考えようというところもありCopilotがGatsbyなら静的サイトええよと提案していただいたのでそれのチュートリアルをやってみた。

チュートリアルのざっくり概要

基本的な概念とか説明から、最終的には簡易的なブログ機能作成まで。とりあえず最後までやった。

開発環境について

WSL2のUbuntu上で開発。IDEはVSCode。Windows上でやっても良かったけど、環境やらかしたらいつでも捨てられるようにしたいというのもありWSL2にした。すごい時代になったなぁと感じられ。

所感

まず、とても優しい。AIは初見にはやめた方がいい的なこと書かれてたけど、チュートリアル自体WebとはHTMLとCSSとJSから構成してるんじゃよ…というところから説明してくれるので優しさを感じた。多分、興味を持った一般人を優しさで囲んで沼と界隈に落とす戦法と非常に似ていると思う。
なので章ごとの目的とそれにあわせての用語も都度解説してくれるし、フロントエンドからっきしの私でもなんとなく把握した。
次に、今どきのWeb開発というかフレームワークの所感を得られる。.NETのBlazorのようなコンポーネントベースの開発をGatsbyは採用しているので、そこでかなりとっつきやすかった。Blazorやってなかったら雰囲気でやっていたかもしれない。なので実装の思想的なのに抵抗はなかった。*3
あとはプラグインが思ったより良さそう。特に画像の扱いをいい感じにするプラグインとかあって描いた絵を載せるのにいいのでは？と思ってしまった。多分Blazorには無いのでそこがGatsbyの強みなんだと思う。一瞬コンポーネントベースならBlazorでも良いか…とは思っていたけど、プラグインとあとがっつりサーバーサイド的なことは不要だし、なんか動きをつけるときはどうせJSだしなーというのもありBlazorは外した。
他、GraphQLも雰囲気だけど触れたのが良かった。サイト構築のメタデータ的なのをGraphQLで取得して、それをブログの表示にする例とかなかなかわかりやすかった。