Lume入門(第4回) - ページ部品をコンポーネント化して再利用する
前回は、Lumeのタグ管理を使ってページの検索性を高める方法をご紹介しました。 ここでは、SearchプラグインやPaginateプラグインを使ってタグの一覧ページを作成しました。 今回はUIの部品化と再利用がテーマです。 昨今はReactやVue等のフロントエンドフレームワークの普及によってコンポーネント指向でUIを部品化することが当たり前になっています。 LumeはフレームワークではなくSSGの位置付けですが、強力なコンポーネント機能が用意されています...
記事を読むLume入門(第3回) - ページをタグ管理して検索性を高める
前回はLumeのテンプレートエンジンとしてJSX/MDXプラグインを使用する方法を見てきました。 サイト運営が順調でページが増えてくると、目的のページを探すのが辛くなってきます。 こんなときは、ページにタグ(目印)を付けて検索性を高める手法がよく使われますね。 今回は、Lumeを使ってタグ付けされた記事の一覧ページを生成する方法をご紹介します。 また、一覧ページにリストアップする記事が多い場合に有効なページネーション機能も見ていきます...
記事を読むLume入門(第2回) - テンプレートエンジンとしてJSXとMDXを使う
前回はLumeの基本的な使い方を見てきました。 ここではテンプレート言語として、ビルトインで使えるマークダウンとMozillaのNunjucksを使いました。 ただ、マークダウンとは違い、Nunjucksはあまり世の中に浸透しているとは言えず(たいしたことはないですが)学習コストも発生します。 最近はReactエコシステム普及に伴ってJSXが広く使われています。また、マークダウンでJSXを使えるように拡張したMDXを使いたいと考える人も多いのではないでしょうか...
記事を読むLume入門(第1回) - Denoベースの静的サイトジェネレーターLumeで静的サイトを手早く作る
当サイトもそろそろ開設から2年になろうとしています。 これを機(?)に、ページ生成に使っていた静的サイトジェネレーター(SSG)をLumeに変更しました。 以前はサイトの生成にEleventy(11ty)を使っていました。 Eleventyでも大きな不満はないのですが[1]、Denoが基盤のLumeに心惹かれて移行を決断しました。 移行にあたっては、サイト自体に加えて執筆体験に大きな変更が発生しないよう配慮しました...
記事を読むAstro 2.1 で実験的サポートされた Markdoc Integration を触ってみる
人気の静的サイトジェネレーター Astro 2.1がリリースされました。 Astro 2.1 | Astro 2.1では Markdoc の実験的サポートが入りました。Markdoc は Stripe 社によって開発された Markdown ベースのコンテンツフレームワークです...
記事を読むEleventy入門(第2回) - テンプレート・コードを部品化する
前回記事では、Eleventyでマークダウンベースの簡単なサイトを作成する方法をご紹介しました。 サイトがローンチして成長してくると、UIやコードに重複が発生してきます。 このような状況になると、部品化や再利用の仕組みが必要になってきます。 今回は、Eleventyで提供されている部品化テクニックを見ていきたいと思います。 テンプレートを部品化する # 前回はレイアウトファイルを親テンプレートとして作成し、基本的構造をマークダウンコンテンツに適用しました...
記事を読むEleventy入門(第1回) - 11tyで手早く静的サイトを作成する
本サイトは開設当初から静的サイトジェネレーター(SSG)としてEleventyを使っています。 もう1年以上使っていますが、特に大きな問題なく運用できています。 そんなEleventyが2023-02-08にv2.0となりました[1]。 ELEVENTY V2.0.0, THE STABLE RELEASE Eleventyはコンテンツ重視の静的サイト作成に大きなアドバンテージを持っていますが、特に日本では今ひとつ認知度がないと感じます...
記事を読むAstro 2.0 + MDX + Recharts で Markdown ページにインタラクティブなチャートを描画する
人気の静的サイトジェネレーター Astro 2.0 がリリースされました。 Astro 2.0 | Astro Content Collections API、Hybrid Rendering、Hot Module Reloading などの新機能が追加されました。 --> InformationAstro の概要については、昨年9月に1.0がリリースされた時記事にしましたので、参考にしてください...
記事を読むNuxt3入門(第8回) - Nuxt3のuseStateでコンポーネント間で状態を共有する
前回はNuxt3でプラグイン、ミドルウェアの導入について見てきました。 今回はNuxt3が提供する状態管理について見ていきます。 Nuxt2では、コンポーネント間で状態を共有するには、Nuxt2にバンドルされているVuexを使うのが一般的でした。 Nuxt3ではVuexはNuxt本体に含まれていません。 代わりにNuxt3では新たにuseState Composableが提供されるようになりました[1]...
記事を読むNuxt3入門(第7回) - Nuxt3のプラグイン・ミドルウェアを使う
前回はNuxt3のエラーハンドリングについて見てきました。 今回はプラグインとミドルウェアを見ていきます。 両方とも必須という訳ではありませんが、うまく使えばアプリケーション開発を効率化できます。 プラグインはNuxtアプリケーション初期化時に実行してくれるもので、アプリケーション全体で利用するものはここでまとめて定義しておきます...
記事を読む
