ブログ始めてみた

こんにちは、ソフトウェアエンジニアをしている立花優斗(@tachibanayu24)と申します。

ブログを開設してみました。

まだページ詳細とか一覧の画面しかないんですが、今後ちょこちょこ拡張していきたいです。

ブログを始めた動機は

1. 個人の技術的な発信の場がほしい
2. 気になったことについて書き記しておく場所がほしい
3. ウォッチしている金融市場についてアウトプットする場所がほしい

といったものがあります。

1. 個人の技術的な発信の場がほしい

まあZennとかでもいいんですが、自分が完全にコントロールできるような媒体でアウトプットできたほうがいいかなと思いました。

発言により責任を持つ必要があるように感じるということと、多少ポエミーで参考にならないような内容でも罪悪感がわかないといった理由です。

2. 気になったことについて書き記しておく場所がほしい

結構日常で触れる対象について、どうでもいいことが気になりがちな性格です。

知的好奇心を満たすことと教養は密接に関係していると考えています。

例えば居酒屋のデジタルメニューブックが使いづらかったとき、どの会社がどういう技術で開発していて、どの程度導入されているのかを気になって調べたりとかしてしまうタイプなんですが、だいたいこういうのはどこかでアウトプットしないと、三日後には完全に忘れてしまっています。

誰にも読まれなかったとしても、面倒じゃなければ今後はこのブログにまとめてみたいなーという感じです。

自分で数年後読み返したりすると面白いかも。

3. ウォッチしている金融市場についてアウトプットする場所がほしい

ファイナンスが好きだったりするので、日々各種指数や雇用統計、消費者物価指数などのFinance Eventをウォッチしており、初心者ながらも投資判断をしたりしています。

毎月個人のnotionにかんたんにレポートを書いたりしているのですが、別にオープンにしてもいいなと思いました。

オープンにしたほうがドキュメントとしての体裁も整うだろうし、あとから自分自身参照しやすいので、今後は（これも面倒じゃなければ）記録をこのブログに付けたいと思います。

ざっくり上記のような理由から始めますが、まあこのへんは変わってくると思います。

適当に、三日坊主にならないように運用できたら嬉しいかなという感じです。

ブログの構成

一応ブログの構成についても触れます。

• Remix
• 今月末くらいから仕事で触るので、その前に書き味を知っておきたかったので適用しました
• microCMS
• なんとなくです
• 国産だし、NetlifyのCMSは、エディタで日本語を利用すると変換がうまく行かなかったりとか聞いたことがあったため
• Vercel
• 自分が公開しているWebはVercelやGoogleCloudでhostしているのでどっちかがよかった
• VercelでRemixをサクッとデプロイできたので
• tailwind
• 最近目の敵にされているtailwindですが、個人開発ではやっぱり優れた書き味です
• デザイナーとうまく連携できているプロダクトでは、商用でも全然アリだと思っています

ReactのフレームワークはNextを使うことが多いのですが、RemixはNextと思想的に近いところもあれば、根本から異なっているところもあります。

例えばRemixはSSGやISRをサポートしません。

これはRemixの設計思想によるもので、SSGのように制約を伴ったアーキテクチャによるパフォーマンスに対するソリューションではなく、

エッジコンピューティングを活用し、ユーザーと地理的に近いサーバでアプリケーションを動作させることで、高いパフォーマンスを得ることを目論んでいるためです。

SSGの普及は、CDNに容易に静的ファイルをキャッシュして配信することができるようになったことが一つの理由であると主張しています。

一方で今日、エッジコンピューティングはCloudflareを筆頭に急速に普及しており、分散型データベースなどもエッジへ移行が進んでいるという状況があります。

この状況を見込んで、上記のような設計をRemixに適用したとされています。

(参考)

逆に、ルーティングは、Nextと近い感覚です。

Nextの file-system based router とほぼ同じ感じでかけます。

Remixでも、file-based routing という語彙が使われています。

Nested Routes という、ページの一部分のみをOutlet(ネストされた子ページに領域を割り当てる)する機能を初期から提供していたようですが、これは最近Nextがリリースした Nested Layout でも同じことができます。

ユニークなのは、metaタグなど、ページごとに以下のようにexportするだけで容易に設定できることでしょうか。

これは思想的にもNested Routesと整合しているし、楽でいいと思います。（まあ、Nextにも next-seo とかありますが。。）

export const meta: MetaFunction = ({ data }: { data: Article }) => {
  return {
    charset: "utf-8",
    title: `${data.title} | たちばなゆうとのブログ`,
    description: truncate(removeHTMLTags(data.content), 100),
    "og:title": `${data.title} | たちばなゆうとのブログ`,
    "og:description": truncate(removeHTMLTags(data.content), 100),
    "og:image": data.eyecatch.url,
    "twitter:card": "summary_large_image",
    "twitter:title": `${data.title} | たちばなゆうとのブログ`,
    "twitter:creator": "tachibanayu24",
    "twitter:description": truncate(removeHTMLTags(data.content), 100),
  };
};

まだまだ使い始めたばかりなので、引き続きもう少し深く触ってみようと思います。

ちなみにアイキャッチ画像はfishですが、fishはスラングで新人を意味するみたいです。

ガラの悪いコミュニティでよく使われるようです。（プリズン・ブレイクでマイケルもfishって呼ばれてた）

大口投資家のことはwhaleって言うし、fishは食い物にされるってことなのかな？