Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

これで最後にしたい! Astroと立ち向かう 6度目の個人ブログ再開発

ikuma-t
July 26, 2024

これで最後にしたい! Astroと立ち向かう 6度目の個人ブログ再開発

TechRAMEN 2024 Conference の登壇資料です!

https://techramenconf.net/
https://fortee.jp/techramen-24-conf

ikuma-t

July 26, 2024
Tweet

More Decks by ikuma-t

Other Decks in Technology

Transcript

  1. ikuma-t G 株式会社エンペイで働くエンジニS G 普段は React や Go、Rails を書いています3 G

    初北海道 from 千葉 G フロントエンドが好きです。 田所育真 / いくま / いくまてぃー
  2. Q. (前提として)作り直しは悪いことなのか A. メリット・デメリットがあるものの、個人のブログなのだから好きにやればよいŸ p メリット’ p 新しい技術の習得機会が増える(特に0→1で使う知識・技術z p ブログを書くモチベーションが上がn

    p デメリット’ p 年に数日がブログ作業で束縛される(それはそれで楽しいけどz p 家族から「またブログ作り直してんの? 」と言われ、なんとなく肩身が狭„ p リダイレクトを適切に設定しないと、参照してもらっていたリンクが切れn p GitHubに同じような名前のリポジトリが増えていく
  3. 2022-05-26 Next.js Pages Router 2023-08-07 Remix v2 2023-01-03 Astro v2

    2024-03-10 Astro v4.2 2021-08-01 Gatsby.js わたしも何度も 気に入っている!
  4. 2022-05-26 Next.js Pages Router 2023-08-07 Remix v2 2023-01-03 Astro v2

    2024-03-10 Astro v4.2 2021-08-01 Gatsby.js わたしも何度も 気に入っている! 10ヶ月 7ヶ月 7ヶ月 7ヶ月
  5. わたし as User わたし as Developer わたし as Writer 自分が耐えられそうなコンテンツ管理方法を選ぶ

    キメラUIを作らないように、体験・情報を考察する 雑に作らず普通のソフトウェア開発をやる
  6. 現在の技術スタック Astro フレームワーク Cloudflare Pages ホスティング・ドメイン Pages CMS CMS Tailwind

    CSS スタイリング Expressive Code シンタックスハイライト Pagefind サイト内全文検索 Biome Linter / Formatter Playwright E2E Test Vitest Unit Test GitHub Actions Workflow Lint / Test / Deploy renovate dependency management どの技術を使うかはそこまで重要ではなく、自分の手間を減らせるものであればよい
  7. コンテンツをどう管理するか 自分の場合は手軽さから多くのケースでMarkdownを使用  Markdown(Gitベース„  いつものドキュメントやコードを書く環境で執筆でき、体験が良い(例:textlint、Copilotž  サイト自体のソースと一体化するので、ソースや記事が増えるとやや扱いづらh  ヘッドレスCMS(SaaS

    / 自作„ e 管理画面によって記事に集中しやすいS e テキストファイルを扱うよりは編集が面倒(複数人向けサービスなので1人だとそう感じやすい) 自分が耐えられそうなコンテンツ管理方法を選ぶ
  8. CI を構築する 雑に作らず、普通のソフトウェア開発をやる 一般的な Lint / Test / Build /

    Deploy をめんどくさがらずに最初に整備しておく 特に静的ビルドでビルドがぶっ壊れると終わりな割に、たまに壊れるのでCIでチェックしておく 通常の開発のCIと合わせてライブラリアップデートは自動化しておく プラグインがあげられなくなったが最後、そこには作り直しの未来が待っている (実情)アクセシビリティのチェックを組み込んではいるものの、全部対応できていない Astro の Devtoolsでも a11y や パフォーマンスのチェックができる
  9. Astroでのテスト(.astro コンポーネント) 雑に作らず、普通のソフトウェア開発をやる - CIを構築する レンダリングの仕組み的にコンポーネントは基本E2E。もう少しでコンポーネント単位でテストで きるかも v4.9 で登場した Container

    API(experimental)の進化、StroybookのReact Server Component対応的なハックを期待 こんな感じのutilを作っておき、HTMLのスナップショットテストを実施可能 ただし script が含まれないので、ふるまいのテストはできない。
  10. わたし as User わたし as Developer わたし as Writer 自分が耐えられそうなコンテンツ管理方法を選ぶ

    キメラUIを作らないように、体験・情報を考察する 雑に作らず普通のソフトウェア開発をやる
  11. わたし as User わたし as Developer わたし as Writer 自分が耐えられそうなコンテンツ管理方法を選ぶ

    キメラUIを作らないように、体験・情報を考察する 雑に作らず普通のソフトウェア開発をやる どうやってコンテンツを管理するか、どこから編集する予定か CIを整備する、変更を意識して設計・実装しておく 自分がどんな情報を提供したいかをベースにUIを考えていく