Skip to content
This repository was archived by the owner on Jan 20, 2025. It is now read-only.

docs: translate docs/recipes #12

Merged
merged 3 commits into from
Jan 16, 2020
Merged

docs: translate docs/recipes #12

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c5d76eb
docs: translate docs/recipes
uetchy Jan 13, 2020
1af1d22
docs: fix docs/recipes
uetchy Jan 15, 2020
7140983
docs: 表現を修正
uetchy Jan 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 75 additions & 74 deletions docs/docs/recipes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,116 +1,117 @@
---
title: Recipes
title: レシピ集
tableOfContentsDepth: 2
---

<!-- Basic template for a Gatsby recipe:
<!-- Gatsbyレシピのための基本テンプレート:

## Task to accomplish.
1-2 sentences about it. The more concise and focused, the better!
## 達成したいタスク
1-2行の説明。簡潔でまとまっているほど良いです。

### Prerequisites
- System/version requirements
- Everything necessary to set up the task
- Including setting up accounts at other sites, like Netlify
- See [docs templates](/docs/docs-templates/) for formatting tips
### 必要条件
- システム要件
- セットアップに必要なあらゆるもの
- Netlifyアカウントなど、セットアップに必要な外部アカウントの作成も含む
- フォーマットについて詳しくは[ドキュメントテンプレート](/docs/docs-templates/)を参照

### Directions
Step-by-step directions. Each step should be repeatable and to-the-point. Anything not critical to the task should be omitted.
### やり方
ステップ・バイ・ステップのガイド。各ステップは明解かつ再現性が担保されているべきです。直接タスクに関係のないものは何であれ取り除きましょう。

#### Live example (optional)
A live example may not be possible depending on the nature of the recipe, in which case it is fine to omit.
#### 動くデモ (任意)
実際に動作するデモはレシピの構成によっては不可能な場合があります。その際はデモを用意しなくても大丈夫です。

### Additional resources
- Tutorials
- Docs pages
- Plugin READMEs
- etc.
### 追加のリソース
- チュートリアル
- ドキュメント
- プラグインのREADME
- その他

See [docs templates](/docs/docs-templates/) in the contributing docs for more help.
より詳しくは[ドキュメントテンプレート](/docs/docs-templates/)を見てください。
-->

Craving a happy medium between [full-length tutorials](/tutorial/) and crawling the [docs](/docs/)? Here's a cookbook of guiding recipes on how to build things, Gatsby style.
[フルサイズのチュートリアル](/tutorial/)を読破するのでもなく、大量の[ドキュメント](/docs/)に埋もれるわけでもない、その中間に位置する"ちょうど良い"リソースが必要だと思ったことはありませんか？
ここには、Gatsby スタイルやその他つくりたいものに合わせた様々なレシピが揃っています。

## [1. Pages and layouts](/docs/recipes/pages-layouts)
## [1. ページとレイアウト](/docs/recipes/pages-layouts)

Add pages to your Gatsby site, and use layouts to manage common page elements.
あなたの Gatsby サイトにページを追加し、レイアウト機能を使って共通するページ要素を管理しましょう。

- [Project structure](/docs/recipes/pages-layouts#project-structure)
- [Creating pages automatically](/docs/recipes/pages-layouts#creating-pages-automatically)
- [Linking between pages](/docs/recipes/pages-layouts#linking-between-pages)
- [Creating a layout component](/docs/recipes/pages-layouts#creating-a-layout-component)
- [Creating pages programmatically with createPage](/docs/recipes/pages-layouts#creating-pages-programmatically-with-createpage)
- [プロジェクトの構造](/docs/recipes/pages-layouts#project-structure)
- [ページの自動生成](/docs/recipes/pages-layouts#creating-pages-automatically)
- [ページ間のリンク](/docs/recipes/pages-layouts#linking-between-pages)
- [レイアウトコンポーネントの作成](/docs/recipes/pages-layouts#creating-a-layout-component)
- [createPage を用いたページの自動生成](/docs/recipes/pages-layouts#creating-pages-programmatically-with-createpage)

## [2. Styling with CSS](/docs/recipes/styling-css)
## [2. CSS によるスタイリング](/docs/recipes/styling-css)

There are so many ways to add styles to your website; Gatsby supports almost every possible option, through official and community plugins.
あなたのウェブサイトにスタイルを追加する手段はたくさんあります。公式チームとコミュニティーが提供するプラグインのおかげで、ほとんどすべての方法が Gatsby で使えます。

- [Using global CSS files without a Layout component](/docs/recipes/styling-css#using-global-css-files-without-a-layout-component)
- [Using global styles in a layout component](/docs/recipes/styling-css#using-global-styles-in-a-layout-component)
- [Using Styled Components](/docs/recipes/styling-css#using-styled-components)
- [Using CSS Modules](/docs/recipes/styling-css#using-css-modules)
- [Using Sass/SCSS](/docs/recipes/styling-css#using-sassscss)
- [Adding a Local Font](/docs/recipes/styling-css#adding-a-local-font)
- [Using Emotion](/docs/recipes/styling-css#using-emotion)
- [Using Google Fonts](/docs/recipes/styling-css#using-google-fonts)
- [レイアウトコンポーネントを使わないグローバル CSS の使用](/docs/recipes/styling-css#using-global-css-files-without-a-layout-component)
- [レイアウトコンポーネント内のグローバルなスタイル](/docs/recipes/styling-css#using-global-styles-in-a-layout-component)
- [Styled Components](/docs/recipes/styling-css#using-styled-components)
- [CSS Modules](/docs/recipes/styling-css#using-css-modules)
- [Sass/SCSS](/docs/recipes/styling-css#using-sassscss)
- [ローカルフォントの追加](/docs/recipes/styling-css#adding-a-local-font)
- [Emotion](/docs/recipes/styling-css#using-emotion)
- [Google Fonts](/docs/recipes/styling-css#using-google-fonts)

## [3. Working with starters](/docs/recipes/working-with-starters)
## [3. スターターを活用する](/docs/recipes/working-with-starters)

[Starters](/docs/starters/) are boilerplate Gatsby sites maintained officially, or by the community.
[スターター](/docs/starters/) は、公式チームやコミュニティーによってメンテナンスされている Gatsby サイトの雛形です。

- [Using a starter](/docs/recipes/working-with-starters#using-a-starter)
- [スターターを使う](/docs/recipes/working-with-starters#using-a-starter)

## [4. Working with themes](/docs/recipes/working-with-themes)
## [4. テーマを使う](/docs/recipes/working-with-themes)

A Gatsby theme lets you centralize the look-and-feel of your site. You can seamlessly update a theme, compose themes together, and even swap out one compatible theme for another.
Gatsby テーマを使用するとサイトの見た目を統一できます。 テーマをシームレスに更新したり、まとめて作成したり、あるいは互換性のあるテーマを別のものに交換したりすることもできます。

- [Creating a new site using a theme starter](/docs/recipes/working-with-themes#creating-a-new-site-using-a-theme-starter)
- [Building a new theme](/docs/recipes/working-with-themes#building-a-new-theme)
- [テーマスターターを使って新しいサイトをつくる](/docs/recipes/working-with-themes#creating-a-new-site-using-a-theme-starter)
- [新しいテーマをつくる](/docs/recipes/working-with-themes#building-a-new-theme)

## [5. Sourcing data](/docs/recipes/sourcing-data)
## [5. データの取得](/docs/recipes/sourcing-data)

Pull data from multiple locations, like the filesystem or database, into your Gatsby site.
ファイルシステムやデータベースなど、複数の場所からデータを取得し Gatsby サイトに取り込みます。

- [Adding data to GraphQL](/docs/recipes/sourcing-data#adding-data-to-graphql)
- [GraphQL にデータを追加する](/docs/recipes/sourcing-data#adding-data-to-graphql)
- [Sourcing Markdown data for blog posts and pages with GraphQL](/docs/recipes/sourcing-data#sourcing-markdown-data-for-blog-posts-and-pages-with-graphql)
- [Sourcing from WordPress](/docs/recipes/sourcing-data#sourcing-from-wordpress)
- [Sourcing data from Contentful](/docs/recipes/sourcing-data#sourcing-data-from-contentful)
- [Pulling data from an external source and creating pages without GraphQL](/docs/recipes/sourcing-data#pulling-data-from-an-external-source-and-creating-pages-without-graphql)
- [Sourcing content from Drupal](/docs/recipes/sourcing-data#sourcing-content-from-drupal)
- [WordPress からデータを取得する](/docs/recipes/sourcing-data#sourcing-from-wordpress)
- [Contentful からデータを取得する](/docs/recipes/sourcing-data#sourcing-data-from-contentful)
- [GraphQL を使わずに外部からデータを取得しページを作成する](/docs/recipes/sourcing-data#pulling-data-from-an-external-source-and-creating-pages-without-graphql)
- [Drupal からデータを取得する](/docs/recipes/sourcing-data#sourcing-content-from-drupal)

## [6. Querying data](/docs/recipes/querying-data)
## [6. データを要求する](/docs/recipes/querying-data)

Gatsby lets you access your data across all sources using a single GraphQL interface.
Gatsby では、単一の GraphQL インターフェイスを通じてあらゆるソースからデータにアクセスできます。

- [Querying data with a Page Query](/docs/recipes/querying-data#querying-data-with-a-page-query)
- [Querying data with the StaticQuery Component](/docs/recipes/querying-data#querying-data-with-the-staticquery-component)
- [Querying data with the useStaticQuery hook](/docs/recipes/querying-data/#querying-data-with-the-usestaticquery-hook)
- [Limiting with GraphQL](/docs/recipes/querying-data#limiting-with-graphql)
- [Sorting with GraphQL](/docs/recipes/querying-data#sorting-with-graphql)
- [Filtering with GraphQL](/docs/recipes/querying-data#filtering-with-graphql)
- [Page Query を用いたデータ要求](/docs/recipes/querying-data#querying-data-with-a-page-query)
- [StaticQuery Component を用いたデータ要求](/docs/recipes/querying-data#querying-data-with-the-staticquery-component)
- [useStaticQuery hook を用いたデータ要求](/docs/recipes/querying-data/#querying-data-with-the-usestaticquery-hook)
- [GraphQL で数に制限をかける](/docs/recipes/querying-data#limiting-with-graphql)
- [GraphQL でソートする](/docs/recipes/querying-data#sorting-with-graphql)
- [GraphQL でフィルターをかける](/docs/recipes/querying-data#filtering-with-graphql)
- [GraphQL Query Aliases](/docs/recipes/querying-data#graphql-query-aliases)
- [GraphQL Query Fragments](/docs/recipes/querying-data#graphql-query-fragments)
- [Querying data client-side with fetch](/docs/recipes/querying-data#querying-data-client-side-with-fetch)
- [fetch によるクライアントサイドクエリ](/docs/recipes/querying-data#querying-data-client-side-with-fetch)

## [7. Working with images](/docs/recipes/working-with-images)
## [7. 画像を取り扱う](/docs/recipes/working-with-images)

Access images as static resources, or automate the process of optimizing them through powerful plugins.
イメージを静的なリソースとして使ったり、あるいはプラグインを通じて最適化プロセスを自動化しましょう。

- [Import an image into a component with webpack](/docs/recipes/working-with-images#import-an-image-into-a-component-with-webpack)
- [Reference an image from the static folder](/docs/recipes/working-with-images#reference-an-image-from-the-static-folder)
- [Optimizing and querying local images with gatsby-image](/docs/recipes/working-with-images#optimizing-and-querying-local-images-with-gatsby-image)
- [Optimizing and querying images in post frontmatter with gatsby-image](/docs/recipes/working-with-images#optimizing-and-querying-images-in-post-frontmatter-with-gatsby-image)
- [webpack を使って画像をコンポーネントに埋め込む](/docs/recipes/working-with-images#import-an-image-into-a-component-with-webpack)
- [静的フォルダにある画像への参照](/docs/recipes/working-with-images#reference-an-image-from-the-static-folder)
- [gatsby-image を使って画像を最適化するクエリを書く](/docs/recipes/working-with-images#optimizing-and-querying-local-images-with-gatsby-image)
- [Front-matter で gatsby-image による最適化を指示する](/docs/recipes/working-with-images#optimizing-and-querying-images-in-post-frontmatter-with-gatsby-image)

## [8. Transforming data](/docs/recipes/transforming-data)
## [8. データの変換](/docs/recipes/transforming-data)

Transforming data in Gatsby is plugin-driven. Transformer plugins take data fetched using source plugins, and process it into something more usable (e.g. JSON into JavaScript objects, and more).
Gatsby でのデータ変換はプラグインによって実現されています。Transformer プラグインは source プラグインを通じてデータを取得し、実際に使う形式へ変換します（例：JSON を JavaScript オブジェクトにする等）。

- [Transforming Markdown into HTML](/docs/recipes/transforming-data#transforming-markdown-into-html)
- [Markdown を HTML に変換する](/docs/recipes/transforming-data#transforming-markdown-into-html)

## [9. Deploying your site](/docs/recipes/deploying-your-site)
## [9. サイトのデプロイ](/docs/recipes/deploying-your-site)

Showtime. Once you are happy with your site, you are ready to go live with it!
お披露目の時間です。サイトの出来栄えに満足したら、全世界に公開しましょう！

- [Preparing for deployment](/docs/recipes/deploying-your-site#preparing-for-deployment)
- [Deploying to Netlify](/docs/recipes/deploying-your-site#deploying-to-netlify)
- [Deploying to ZEIT Now](/docs/recipes/deploying-your-site#deploying-to-zeit-now)
- [デプロイの準備](/docs/recipes/deploying-your-site#preparing-for-deployment)
- [Netlify によるデプロイ](/docs/recipes/deploying-your-site#deploying-to-netlify)
- [ZEIT Now によるデプロイ](/docs/recipes/deploying-your-site#deploying-to-zeit-now)