-
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]...
記事を読む -
Astro 2.0 + MDX + Recharts で Markdown ページにインタラクティブなチャートを描画する
人気の静的サイトジェネレーター Astro 2.0 がリリースされました。 Astro 2.0 | Astro Content Collections API、Hybrid Rendering、Hot Module Reloading などの新機能が追加されました...
記事を読む -
Nuxt3入門(第8回) - Nuxt3のuseStateでコンポーネント間で状態を共有する
前回はNuxt3でプラグイン、ミドルウェアの導入について見てきました。 今回はNuxt3が提供する状態管理について見ていきます。 Nuxt2では、コンポーネント間で状態を共有するには、Nuxt2にバンドルされているVuexを使うのが一般的でした。 Nuxt3ではVuexはNuxt本体に含まれていません...
記事を読む -
Nuxt3入門(第7回) - Nuxt3のプラグイン・ミドルウェアを使う
前回はNuxt3のエラーハンドリングについて見てきました。 今回はプラグインとミドルウェアを見ていきます。 両方とも必須という訳ではありませんが、うまく使えばアプリケーション開発を効率化できます。 プラグインはNuxtアプリケーション初期化時に実行してくれるもので、アプリケーション全体で利用するものはここでまとめて定義しておきます...
記事を読む -
Nuxt3入門(第6回) - アプリケーションで発生するエラーに対応する
前回はNuxt3の設定情報管理について見てきました。 今回のテーマは実用的なアプリケーションに不可欠なエラーハンドリングです。 Nuxtはクライアントサイドだけでなく、サーバーサイドレンダリングもサポートするハイブリッドフレームワークです。 このため、エラー発生箇所に対応した適切なハンドリングが求められます...
記事を読む -
Nuxt3入門(第5回) - アプリケーションの設定情報を管理する
前回はNuxt3のルーティング機能について見てきました。 今回はNuxt3が提供する設定情報の管理機能を見ていきます。 Nuxt3では、アプリケーションの設定はRuntime Config(またはApp Config)を通して管理され、グローバルに参照できます。 とはいえ、パスワード等の機密性の高い設定は、ブラウザ上では参照不可とするべきです...
記事を読む -
Nuxt3入門(第4回) - Nuxtのルーティングを理解する
前回はサンプルアプリのブログサイトがAPI経由でブログ情報を取得できるようにしました。 今回は、Nuxtアプリケーションでページ遷移に使うルーティングについて見ていきます。 Nuxt2でも同様ですが、Nuxt開発ではルーティング定義を個別に作成する必要はありません[1]。Nuxtではファイルシステムベースのルーティングを採用しており、pagesディレクトリ配下の構造でルートマッピング決まります...
記事を読む -
Nuxt3入門(第3回) - ユニバーサルフェッチでデータを取得する
前回は簡単なブログサイトを作成し、Nuxtの基本機能や開発の流れを見てきました。 ただ、ここで作成したサンプルアプリのブログサイトは、表示するブログデータは固定値で保持していました。新しいブログを追加した場合は別途ビルドする必要があります。 実際のブログシステムでは、リアルタイムで最新ブログを取得したいところです...
記事を読む
