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の基本機能や開発の流れを見てきました。 ただ、ここで作成したサンプルアプリのブログサイトは、表示するブログデータは固定値で保持していました。新しいブログを追加した場合は別途ビルドする必要があります。 実際のブログシステムでは、リアルタイムで最新ブログを取得したいところです。また、SEOや初期ロード時間を考慮して、クライアントサイドではなくサーバーサイドでレンダリングした意味のあるHTMLで取得できるようにしたいという要求もあるでしょう...
記事を読むNuxt3入門(第2回) - 簡単なNuxtアプリケーションを作成する
前回はNuxtの基本的なレンダリングモードを説明しました。 第2回は、実際に簡単なNuxtアプリケーションを作成し、Nuxt3の開発フローを見ていきます。 事前準備 # まずは、npx nuxi create sample-appを実行し、Nuxtのプロジェクトを作成します。 その後に今回使う以下ディレクトリを追加しておきます...
記事を読むNuxt3入門(第1回) - Nuxtがサポートするレンダリングモードを理解する
Vue.jsのハイブリッドフレームワークとして人気のNuxtですが、メジャーアップデートとなるNuxt3がそろそろGAになりそうです。 Vue3やNitro、Vite等、多くの変更があるNuxt3ですが2022年春にRC版が公開された後、ハイペースで更新が続きかなり安定してきた印象です。 ここでは、Nuxt3入門と題してNuxt3が提供する基本機能について連載を書いていきたいと思います。 まず、初回はNuxtが提供するレンダリングモードを整理します...
記事を読むコンテンツ重視の静的サイトジェネレーター Astro でドキュメントサイトを構築する
Astro は SSG (Static Site Generator) の1つです。「高速でコンテンツにフォーカスした Web サイトを構築するためのオールインワン Web フレームワーク」というのがキャッチコピーです。 Astro | Build faster websites v1.0 がリリースされました。 Astro 1.0 | Astro ブログやポートフォリオサイトの他、ドキュメンテーションサイトのテンプレートも提供されています。公式ドキュメントには日本語版もあります...
記事を読むNetlify CMSのワークフローでコンテンツ管理をする
当サイトも記事数が180を超え、執筆者も増えてきました。 現状はGitHubをNetlifyと連携させることで、プルリクエスト経由で記事公開をしてきました。 これでも問題はないのですが、そろそろCMS的な仕組みでGitに不慣れな人でも簡単に記事作成やサイト自体の設定変更ができないかなと思い始めました。 世の中的には、ヘッドレスCMSが流行っていると思います。 ヘッドレスCMSはWordPressのようにフロントエンド向けのUIを提供せずに、単純なコンテンツ管理機能のみを提供します...
記事を読む11tyで生成したマークダウン記事の画像を拡大する
早いものでデベロッパーサイトを開設して半年ほど経過しました。継続的に記事も公開し、もうすぐ100本に到達します。 今後は記事の執筆と並行して、サイト自体のUI/UX改善にも取り組んでいきたいと思います。 今回は改善要望として上がっていた記事の画像のズーム機能について対応しました。デベロッパーサイトなのでここではそのやり方も記事として紹介したいと思います。 現在このデベロッパーサイトでは、SSGツールのeleventyで、マークダウン記事をHTMLへと変換しています...
記事を読むeleventy-plugin-code-clipboard
eleventy-plugin-code-clipboardは、静的サイトジェネレータツールの1つであるeleventy(以下11ty)のカスタムプラグインです。 このプラグインは、マークダウンのコードブロックで生成されたものに対して、クリップボードコピー機能を提供するもので、本サイトでも使用されています。 プラグインは以下の2つの機能で構成されます。 markdown-it カスタムレンダラー # 11tyのマークダウンパーサー markdown-itのカスタムレンダラーです...
記事を読む
