- このサイトと、過去に利用した構成について - [めぐる市開催に寄せて2/2]

さて、今回はこのサイトと、過去のサイトで利用していた技術構成について語っていこうと思います。
WEBエンジニアでお金をもらっている身なので、万人向けの技術かというと微妙ですが、HTML手打ちにハマる人は面白く学べる技術かなあ、と思っています。今回はできるだけ一般向けに書きたいので、『HTML手打ち時代から、今使っているAstroというフレームワークは、何が変わったのか』についても書いていきたいな、と思っています。

このサイトにたどり着くまでの技術的な歴史

最初期 - iWeb時代

最初期はMacに附属しているiWebというアプリを使っていました。一応インターネットの海に公開されてたと思うのですが、どういうドメインでどういう技術で公開されていたのかは不明です。
覚えてたら色々語れて面白かったと思うんですが、そのころはまだ『ドメイン』という言葉も知らなかったので仕方ないですね。

中高時代 - HTML手打ちと、FC2サーバー

この頃はHTML手打ち + FC2サーバーにアップロードでした。
この時代は個人サイト全盛期だったこともあり、HTMLの書き方のサイトも、テンプレサイトもたくさんありました。
私のHTMLの道はとほほのHTML入門を片手に、テンプレサイトの魔改造をすることだったと記憶しています。そのうちガラケーも入手して、ガラケーからの表示を色々模索したりと、楽しい時代でした。

仕事で学んだこと - 『フレームワーク』と『CI/CD』

大学では『プログラミング』を主に勉強していたので、WEBサイトを作成する技術などを学ぶことはありませんでした。
WEBサービス作成の仕事に就いて私が初めて学んだフレームワークが『Vue.js』。フレームワークとは何かについて説明をするのは難しいのですが、すごいざっくりいうとHTMLを手打ちしながら作るサイト作りがスパイスを使ったカレー作りだとしたら、フレームワークを使ったサイト作りは野菜セットとカレールゥを使ったカレー作り……みたいな感じでしょうか。HTML手打ちの頃はパーツの再利用の際にコピぺをしていたので、同じ見た目のパーツでも1つ1つ手作業で変更していく必要がありました（文字列の置換は当時からあったので置換で済むなら良いのですが）。フレームワークは『パーツを埋め込んで再利用可能にする』ということがすごく手軽になり、パーツを変更したら一気に全部に反映されます。感覚がつかめるまでは難しい技術ではありますが、感覚がつかめると楽しいと思える技術のひとつです。

また、CI/CDの概念も学びました。『Continuous Integration / Continuous Delivery』の略で、和訳すると『継続的インテグレーション・継続的デリバリー』の略なのですが、雑に言うと『ブログの公開ボタンを押すだけでブログが公開される、その時後ろで走っている技術』です。
かつては自分のPCで編集したHTMLのデータをFTPサーバに手作業で上げていたので、一部のファイルの更新し忘れや間違ったファイルを更新したり……地味に大変な作業でした。それが今はGithubにpushするだけで公開されます！やったね！

このサイトの構成

お待たせしました！本題のこのサイトの構成に入っていきます。
ざっくりいうと『Astro + Cloudflare + Github』という構成です。

Github とは

Githubとは『HTMLなどのソースコードを保管するサービス』です。私のGithubはこちら。
クリックしていくとこのサイトのフォルダ構成などがわかります。なんでサイトの中身をインターネットに大公開してるのか、正直申し上げますと職業上の癖ですね。エンジニアはこうして作ったものの中身を公開しておくのが技術力の披露になったりなったりするわけなんですよ。非公開で置くこともできるのでそこはご安心を。我が家はObsidianもGithubに保管しているのですが、そちらはさすがに非公開にしています。

で、なんでわざわざ外部に保管しているのかというと、これがCI/CDを利用するためです。つまりこれはHTML手打ち時代でいうところの『FTPサーバ』に近い立ち位置ということですね。ここに私が置いたものが、後述するCloudflareを経由してインターネットに公開される、というわけです。

先ほど『Githubにpushする』という言葉を使いましたが、これは『自分のPC上にあるデータを、Githubに同期する』という感じですね。iCloudとかGoogleDriveにスマホの写真を保管する時は自動同期されると思うのですが、Githubは自動同期されないので、『このデータを同期！』というのを明示してあげる必要があります。
この意図的な同期の良いところは、『過去の記録がすべて残っている』ところです。つまり、『あれ？昔は上手く動いてたコンテンツが、今は上手く動いてない！』って時に、過去にさかのぼってGithub上のデータを見ることができるので、うっかり壊しちゃっても安心！です。やったね。

Cloudflare とは

Cloudflareは、Githubを『原稿データを持っている出版社』としたら『製本と配本と本屋の運営をしている総合企業』です。本屋に例えるとすっごい色々なことをやってくれてますが、Cloudflareという会社はインターネットにおいて欠かせない企業となりつつすごい会社です。

Cloudflareに『ここにデータ置くから、同期したら後はよろしくね』という設定がしてあります。これによって、Githubにデータを置くだけで、全世界に公開される……という仕組みができてるわけです。Cloudflare、すごいですね。ちなみに無料で利用しています。

Astro とは

さて、先ほどVue.jsという言葉が出てきたのですが、これもVue.jsの仲間で『フレームワーク』というやつです。仕事ではVue.jsやReactというフレームワークを使っているのですが、何故『Astro』という仕事では使わないフレームワークを使っているのかというと、Vue.jsもReactも、小説・絵を公開するサイトを作成するにはちょっと多機能過ぎるから、です。WEBエンジニアがよく利用するVue.jsやReactなどのフレームワークはいわゆる『WEBアプリケーション』でよく利用されるような『ログインをして……』『クリックするとアレコレ動く……』という挙動を実現するための機能が多く含まれています。が、自分の個人サイトではそういった機能が必要になる可能性がほとんどなかったので、もっとシンプルなフレームワークを使いたい、考えていました。そこで目をつけたのがAstroです。
Astroも必要があればVue.jsやReactなどのフレームワークを召喚できるのですが、ベースはシンプル。それでいて、ページ間の移動が速く表示されるといった機能は揃っている、というのが特徴です。うちのサイトはページを移動するときに結構素早くぬるっと表示されると思うのですが、それがAstroが標準装備なのです。すごいぞAstro！

よりみち: CMSについて

他サイトでも良く見るCMS（コンテンツマネジメントシステム）についてですが、弊サイトでは過去に小説や更新履歴に利用していましたが、現在は利用していません。利用していたCMSがサービス終了してしまい、『やはり依存するものは少なければ少ないほど良い……！』と思った結果、Markdownで小説を管理することにしました。
昨日の歴史の記事でもちらっと話したように、中高生の時のように文章中に装飾をいれるみたいなこともやりたい気持ちもあるのですが、現在では小説本にしたい、という気持ちもあるため、プレーンな文章があげられれば充分！という方針でいくことにしました。

そんな感じでできているのが、現サイトです

以上の技術でできているのが現サイトです。万人にオススメできる構成かというとAstroは普通の生活をしていたらよくわからない技術の類だと思うので微妙なのですが、かつてHTMLやJavaScriptを楽しんだ人たちにはオススメの構成である、と思っています。
特にFTPでデータを上げる時にミスったことが何度もあったのは本当に記憶にあるので、それをやらなくていいのがすごい嬉しいです。

おわり

めぐる市、今日の夜までだと思っていたのですが、実は今日の朝10時までだったようです。
そんなわけで、めぐる市は終了していますが、何かのご縁でここに辿り着いて読んでくださった方、ありがとうございます。それではﾉｼ