diff --git a/docs/docs/creating-a-local-plugin.md b/docs/docs/creating-a-local-plugin.md index f603ccc2c..8f5438070 100644 --- a/docs/docs/creating-a-local-plugin.md +++ b/docs/docs/creating-a-local-plugin.md @@ -1,12 +1,12 @@ --- -title: Creating a Local Plugin +titie: ローカルプラグインの作成 --- -If a plugin is only relevant to your specific use-case, or if you’re developing a plugin and want a simpler workflow, a locally defined plugin is a convenient way to create and manage your plugin code. +もしプラグインを特定の用途で使うときや、簡単なやりかたでプラグインを開発したいときは、ローカルに定義されたプラグインを使うことで作成および管理が便利になります。 -## Project structure for a local plugin +## ローカルプラグインのプロジェクト構成 -Place the code in the `plugins` folder in the root of your project like this: +このように、コードをプロジェクトルートの `plugins` フォルダーの中に配置します。 ```text /my-gatsby-site @@ -17,9 +17,9 @@ Place the code in the `plugins` folder in the root of your project like this: └── package.json ``` -The plugin also needs to be added to your `gatsby-config.js`, because there is no auto-detection of plugins. It can be added alongside any other 3rd party Gatsby plugins already included in your config. +また、プラグインは自動的に検知されないので、`gatsby-config.js` に追加する必要があります。すでに、設定ファイルに含まれているサードパーティー Gatsby プラグインと同じように追加できます。 -For the plugin to be discovered when you run `gatsby develop`, the plugin's root folder name needs to match the name used in the `gatsby-config.js` (_not_ the _name_ it goes by in your `package.json` file). For example, in the above structure, the correct way to load the plugin is: +`gatsby develop` を実行するとき、プラグインを検知するため、プラグインのルートフォルダーの名前は `gatsby-config.js` で使用しているもの（`package.json` で使用している名前**ではありません**）と同じにする必要があります。上記の構成では、プラグインを読み込む正しい方法は以下のようになります。 ```javascript:title=gatsby-config.js module.exports = { @@ -30,21 +30,22 @@ module.exports = { } ``` -Then the plugin can begin to hook into Gatsby through [Node](/docs/node-apis/) and [SSR](/docs/ssr-apis/) APIs. +その後、プラグインは [Node](/docs/node-apis/) や [SSR](/docs/ssr-apis/) API を介して Gatsby に接続されます。 -## Developing a local plugin that is outside your project +## プロジェクト外部のローカルプラグインを開発する -Your plugin doesn't have to be in your project in order to be tested or worked on. If you'd like to [decouple](/docs/glossary#decoupled) your plugin from your site you can follow one of the methods described below. This is a useful thing to do if you want to publish the plugin as its own package, or test/develop a forked version of a community authored plugin. +プラグインを動作させたりテストするために、必ずプロジェクトに含めないといけないわけではありません。もしプラグインをサイトから[分離](/docs/glossary#decoupled)させたいなら、以下の方法が使えます。これはプラグインをパッケージとして公開したいときや、コミュニティーが作成したプラグインをフォークしたものをテスト、開発するときに便利です。 -To get started developing a plugin outside of your site's root folder, you can quickly generate one using `gatsby new` with the [starter for plugins](https://github.com/gatsbyjs/gatsby/tree/master/starters/gatsby-starter-plugin): + +`gatsby new`で[プラグインのスターター](https://github.com/gatsbyjs/gatsby/tree/master/starters/gatsby-starter-plugin)を使用すれば、素早くプロジェクト外部のプラグインの開発を始めることができます： ```shell gatsby new gatsby-plugin-foo https://github.com/gatsbyjs/gatsby-starter-plugin ``` -### Using `require.resolve` and a filepath +### `require.resolve` とファイルパスを使う -Including a `plugins` folder is not the only way to reference a local plugin. Alternatively, you can include a plugin in your `gatsby-config.js` file by directly referencing its path (relative to the `gatsby-config.js` file) with `require`. +`plugins` フォルダーがローカルプラグインを参照する唯一の方法ではありません。ほかに `gatsby-config.js` ファイルで、`require` を使い直接パス（`gatsby-config.js` からの相対パス）を指定して、プラグインを含めることができます。 ```javascript:title=gatsby-config.js module.exports = { @@ -52,7 +53,7 @@ module.exports = { `gatsby-plugin-react-helmet`, // highlight-start { - // including a plugin from outside the plugins folder needs the path to it + // plugins フォルダ外のプラグインを使うためにパスを指定 resolve: require.resolve(`../path/to/gatsby-local-plugin`), }, // highlight-end @@ -60,19 +61,16 @@ module.exports = { } ``` -### Using `npm link` or `yarn link` +### `npm link` または `yarn link` を使う -You can use [`npm link`](https://docs.npmjs.com/cli/link.html) or [`yarn link`](https://yarnpkg.com/lang/en/docs/cli/link/) to reference a package from another location on your machine. +あなたのマシン内の別の場所にあるパッケージを参照するときは、[`npm link`](https://docs.npmjs.com/cli/link.html) や [`yarn link`](https://yarnpkg.com/lang/en/docs/cli/link/) が使えます。 -By running `npm link ../path/to/my-plugin` in the root of your Gatsby site, your computer will create a symlink to your package. +Gatsby サイトのルートで `npm link ../path/to/my-plugin` を実行すると、パッケージへのシンボリックリンクが作られます。 -This is a similar process to setting up yarn workspaces for development with Gatsby themes (which is the recommended approach for developing themes). You can read how to setup a site in this manner in the [Building a Theme guide](/tutorial/building-a-theme/#set-up-yarn-workspaces). +これは、Gatsby テーマ開発の yarn ワークスペースを作成するときと同じ工程（テーマを開発する際に推奨される方法）です。[テーマ作成ガイド](/tutorial/buidling-a-theme/#set-up-yarn-workspaces) でサイトを設定する方法を読むことができます。 -**Note**: See an example of using a local plugin from the plugins folder, with `require.resolve`, and `npm link` in [this example repository](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-multiple-local-plugins). +**ヒント**： `require.resolve` や `npm link` を使って、plugins フォルダーからローカルプラグインを使う例として、[こちらのサンプルリポジトリ](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-multiple-local-plugins)をご覧ください。 -## Compilation and processing with Babel +## Babel を使ってコンパイルする -Like all `gatsby-*` files, the code is not processed by Babel. If you want -to use JavaScript syntax which isn't supported by your version of Node.js, you -can place the files in a `src` subfolder and build them to the plugin folder -root. +`gatsby-*` ファイルと同じように、Babel によるコンパイルは行われません。もし使用している Node.js のバージョンではサポートされていない JavaScript 構文を使いたいときは、ファイルを `src` サブフォルダーに置き、プラグインフォルダーのルートへビルドされるようにしてください。