技術

目次

• はじめに
• 概要
• 開発環境
• 発生した問題と解決方法
  • crypto.hash エラーの解決
  • pnpm インストールエラーの解決
  • TypeScript peer dependency 警告の解決
• 最終的な設定ファイル
• トラブルシューティング
• リファクタリング後の最適化
• まとめ
• 参考リンク

 

一定の幅と高さのボックスを繰り返し表示するタイルレイアウトをレスポンシブ対応にするため、CSS Grid Layout について調べてみました。

---

CSS Grid Layout（グリッドレイアウト） とは

CSS を用いて 2 次元のレイアウトを構築するための機能です。格子状のマス目（グリッド）に要素を配置したり、結合したりすることで、様々なレイアウトが可能になります。

画像とファイル

Keystone のフィールドには、画像やファイルなどの種類が含まれています。これらを使用して、Keystone から画像やファイルを参照および (必要に応じて) 提供することができます。このガイドでは、Keystone システムで画像とファイルを構成する方法を説明し、アセットをローカルに保存するか、Amazon S3 ストレージまたは DigitalOcean Spaces などの互換性のある S3 プロバイダを使用することができます。

適切なデータベースを選択する

Keystone は、Postgres、MySQL、および SQLite データベースプロバイダをサポートしています。このガイドでは、これらのプロバイダの違いを強調し、プロジェクトに適したものを選択するのに役立ちます。

仮想フィールド

Keystone では、フィールドを持つリストという形式でデータモデルを定義することができます。ほとんどのリストには、データベースに保存されるテキストや整数などのスカラーフィールドがあります。
また、クエリ時に計算される読み取り専用のフィールドを持つと便利な場合もあります。Keystone では、仮想フィールドタイプを使用してこれを行うことができます。
仮想フィールドは、GraphQL API を拡張するための強力な手段を提供します。このガイドでは、仮想フィールドを追加するための構文を紹介し、簡単な例から複雑な例に進んでいく方法を示します。

テスト

Web アプリケーションを構築する際には、システムの動作をテストして予想通りに動作することを確認することが重要です。このガイドでは、@keystone-6/core/testing と Jest を使用して、GraphQL API の動作をテストするためのテストの書き方を紹介します。

カスタムフィールド

Keystone は、システムを構築するために使用できるフィールドタイプのコレクションを提供しています。提供されていない必要があるフィールドタイプがある場合、または既存のフィールドタイプの専門バージョンが必要な場合は、カスタムフィールドタイプを定義することができます。
フィールドタイプには2つの部分があります。

ドキュメントフィールドのデモ

「ドキュメントフィールドタイプ」とは、コンテンツ作成者がシステム内のコンテンツを素早く簡単に編集できる高度にカスタマイズ可能なリッチテキストエディタです。
異なる設定を試して、エディタの使用感にどのような影響を与えるかを確認できます。
Keystone アプリケーションでドキュメントフィールドを設定およびレンダリングする方法の詳細については、「ドキュメントフィールドガイド」を参照してください。

ドキュメントフィールドの使い方

ドキュメントフィールドタイプは、システム内のコンテンツ作成者が迅速かつ簡単にコンテンツを編集できる高度にカスタマイズ可能なリッチテキストエディタです。
このエディタは Slate で構築され、コンテンツを JSON 構造化データとして保存し、以下のようなことができます。

フック

Keystone は強力な CRUD GraphQL API を提供しており、データに対して基本的な操作を実行することができます。しかし、システムが進化するにつれて、これらの操作に加えてビジネスロジックを含める必要がある場合があります。
フックを使用して、コア操作をさまざまな方法で強化する方法を紹介します。関数のシグネチャの詳細については、Hooks API を確認してください。