軽量Webフレームワーク・AstroでMarkdown記述式のブログサイトをリニューアル

Contents

• オールインワン軽量WebフレームワークAstroでブログサイトを構築
• Markdownだけで実現できる表現性、スタイル
• リスト(list)や表組み(table)も対応。Markdownでの記述例付き
• 最後に

オールインワン軽量WebフレームワークAstroでブログサイトを構築

やっとたどり着いた自分にとって理想のブログ執筆環境。Markdown¹でサクサク書ける(厳密にはMarkdown + JSXなMDXを採用)、オールインワン軽量Webフレームワーク・Astroでブログサイトを構築した話。

1: Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。 本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。

引用: Markdown - Wikipedia

始め方は簡単。CLIを使用して指定ディレクトリ上で以下のシェルコマンドを入力。

  npm create astro (または yarn create astro)

AstroはIslands Architecture(アイランドアーキテクチャ)と名付けられたフロントエンドアーキテクトを採用しており、描画パフォーマンスに大変優れたWebフレームワーク/Static Site Generatorだ。フレームワーク自体に余計なJavaScriptオーバーヘッドがないデフォルトゼロJSをうたっており、生成コンテンツの描画速度は体感上も、パフォーマンステストスコアもかなり良好だ。

React、Svelte、Vue、Litなど多くのJavaScriptフレームワークをラップ/組み合わせて使用することもできる。このブログサイトは複雑さを極力回避したかったのでAstro単体利用に留めている。ほかにも多くの機能・開発体験を備えた、今後期待の比較的新しいフレームワークだ(2023年7月執筆時点)。

Markdownだけで実現できる表現性、スタイル

Markdownのシンプルな記法だけではまだ正直ブログとして表現面で心許ない。セマンティクスにおいてもHTMLには到底及ばない。だが、一応表現のバリエーションとして最低限+くらいのレベルはクリア・確保できていると思う(ことにした)。

これは**(任意の文字)**と記述することで、強調用(strong要素)のスタイルとなる。 そしてこちら*(任意の文字)*と記述し準強調用(em要素)のスタイルとして使用する。

各種絵文字(emoji)も使用可能 ☞ 😅✌️。

以下は、美麗な数式利用に適した組版システム・$\TeX$(テックまたはテフ)の描画ができるJavaScriptライブラリ・$\KaTeX$で数式を表示している。$$~$$の$$で上下に囲って以下のようにブロックとして扱ったり、$~$の$で左右を挟んでインライン表示したりといった記法で利用が可能。

また、以下のコードのシンタックスハイライト(構文強調/Syntax highlight)には、Shikiのmaterial-theme-darker一時的にPrismのsynthwave84というテーマを使用している。コードブロックは`(バッククォート)3つで上下から文字を挟むことで、インラインコードは1つで文字の両側を囲うことで実現する。

HTML(Astro)の表示見本

  <article class="artArticle">
    <h1>{remarkPluginFrontmatter.title}</h1>
    <img src={remarkPluginFrontmatter.thumb} alt="アイキャッチ" width="339" height="191" decoding="async">
    <Content />
  </article>

JavaScriptの表示見本

  function $initHighlight(block, cls) {
    try {
      if (cls.search(/\bno\-highlight\b/) != -1) {
        return process(block, true, 0x0F) +` class="${cls}"`;
      }
    } catch (e) {
      /* handle exception */
    }
    for (var i = 0 / 2; i < classes.length; i++) {
      if (checkCondition(classes[i]) === undefined) {
        console.log('undefined');
      }
    }
    return (
      <div>
        <web-component>{block}</web-component>
      </div>
    )
  }

  export  $initHighlight;

リスト(list)や表組み(table)も対応。Markdownでの記述例付き

こんな感じ☟

• Unordered list 1
• Unordered list 2
• Unordered list 3

1. Ordered list 1
2. Ordered list 2
3. Ordered list 3

Markdown: 順序なしリストと順序付きリスト

  * Unordered list 1
  * Unordered list 2
  * Unordered list 3

  1. Ordered list 1
  2. Ordered list 2
  3. Ordered list 3

Markdown: 左寄せの表(デフォルト)と中央寄せの表

  | TH | TH | TH | TH |
  | --- | --- | --- | --- |
  | TD | TD | TD | TD |
  | TD | TD | TD | TD |

  | TH | TH | TH |
  | :--: | :--: | :--: |
  | TD | TD | TD |
  | TD | TD | TD |

最後に

Web・IT系の制作開発が主戦場の自分はMarkdownでメモを取る癖がついているため、この執筆環境はかなり親和性が高そうだ。今後はメモレベルからでも書き留めたことを種として、スピーディーに公開することでアウトプットの量・質ともに高めていくことを目標に掲げたい。