ライターズガイド

次のセクションでは、このサイト内のコンテンツの編集と書式設定について知っておく必要のあるすべての情報が含まれています。編集または追加を開始する前に、必ず調査を行ってください。コンテンツをどこに配置する必要があるかを見つけ、それが既に存在するかどうかを判断することが、最も難しい場合もあります。

プロセス

1. 記事がリンクしている場合は、関連するイシューを確認してください。
2. edit をクリックして、構造を拡張します。
3. PRの変更。

YAMLフロントマター

各記事の上部には、YAML Frontmatter で記述された小さなセクションが含まれています

---
title: My Article
group: My Sub-Section
sort: 3
contributors:
  - [github username]
related:
  - title: Title of Related Article
    url: [url of related article]
---

これらを分解してみましょう

• title: 記事の名前。
• group: サブセクションの名前
• sort: セクション（またはサブセクションが存在する場合はサブセクション）内の記事の順序。
• contributors: この記事に貢献した GitHub ユーザー名のリスト。
• related: 関連する読み物や役立つ例。

related はページの下部に Further Reading セクションを生成し、contributors はその下に Contributors セクションを生成することに注意してください。記事を編集して認識されたい場合は、遠慮なく GitHub ユーザー名を contributors リストに追加してください。

記事の構成

1. 簡単な紹介 - 何と理由についての基本的な考えを理解するための1つまたは2つの段落。
2. 残りのコンテンツの概要 – コンテンツがどのように表示されるか。
3. メインコンテンツ - 説明すると約束したことを伝えます。
4. 結論 - 何を伝えたかを伝え、主なポイントを要約します。

組版

• Webpackは、文の先頭に大文字のWで記述できます。（ソース）
• ローダーはバッククォートで囲まれ、ケバブケース：css-loader、ts-loader、…
• プラグインはバッククォートで囲まれ、キャメルケース：BannerPlugin、NpmInstallWebpackPlugin、…
• 特定の webpack バージョンを参照するには、「webpack 2」を使用します (「webpack v2」)
• ECMAScript 標準を参照するには、ES5; ES2015、ES2016、…を使用します（ES6、ES7）

書式設定

コード

構文：```javascript … ```

function foo() {
  return 'bar';
}

foo();

引用

コードスニペットとプロジェクトファイル（.jsx、.scss など）では、単一引用符を使用します

- import webpack from "webpack";
+ import webpack from 'webpack';

また、インラインバッククォートでも使用します

正しい

値を 'index.md' に設定します...

正しくない

値を "index.md" に設定します...

リスト

• Boo
• Foo
• Zoo

リストはアルファベット順に並べる必要があります。

テーブル

テーブルもアルファベット順に並べる必要があります。

設定プロパティ

設定 プロパティもアルファベット順に並べる必要があります

• devServer.compress
• devServer.hot
• devServer.static

引用

ブロッククォート

構文：>

これはブロッククォートです。

ヒント

構文：T>

構文：W>

構文：？>

前提と簡潔さ

ドキュメントを作成するときは、前提を立てないでください。

- You might already know how to optimize bundle for production...
+ As we've learned in [production guide](/guides/production/)...

物事が簡単であると仮定しないでください。「ちょうど」、「単に」のような言葉は避けてください。

- Simply run command...
+ Run the `command-name` command...

設定のデフォルトと型

ドキュメントをわかりやすく記述するため、ドキュメントオプションのすべてに型とデフォルトを常に指定してください。ドキュメント化されたオプションにタイトルを付けた後、型とデフォルトを追加しています

configuration.example.option

string = 'none'

ここで、= 'none' は、指定されたオプションのデフォルト値が 'none' であることを意味します。

string = 'none': 'none' | 'development' | 'production'

ここで、: 'none' | 'development' | 'production' は、可能な型値を列挙します。この場合、3つの文字列 'none'、'development'、および 'production' が使用できます。

指定されたオプションで使用可能なすべての型をリストするには、型の間にスペースを使用します

string = 'none': 'none' | 'development' | 'production' boolean

配列をマークするには、角かっこを使用します

string [string]

複数の型が array で許可されている場合は、カンマを使用します

string [string, RegExp, function(arg) => string]

関数をマークするには、使用可能な場合は引数もリストします

function (compilation, module, path) => boolean

ここで(compilation, module, path)は、提供された関数が受け取る引数をリストしており、=> booleanは関数の戻り値がboolean型でなければならないことを意味します。

Pluginを利用可能なオプション値型としてマークするには、Pluginのキャメルケースのタイトルを使用します。

TerserPlugin [TerserPlugin]

これは、オプションが1つまたは複数のTerserPluginインスタンスを期待していることを意味します。

数値型をマークするには、numberを使用します。

number = 15: 5, 15, 30

オブジェクト型をマークするには、objectを使用します。

object = { prop1 string = 'none': 'none' | 'development' | 'production', prop2 boolean = false, prop3 function (module) => string }

オブジェクトのキーが複数の型を持つ可能性がある場合は、|を使用してそれらをリストします。以下は、prop1が文字列と文字列の配列の両方になる例です。

object = { prop1 string = 'none': 'none' | 'development' | 'production' | [string]}

これにより、デフォルト値、列挙型、その他の情報を表示できます。

オブジェクトのキーが動的でユーザー定義の場合は、<key>を使用して記述します。

object = { <key> string }

オプションのショートリストとその型付け

場合によっては、リスト内のオブジェクトと関数の特定のプロパティを記述したいことがあります。可能な場合は、プロパティが列挙されているリストに直接型付けを追加してください。

• madeUp (boolean = true): 簡単な説明
• shortText (string = 'i am text'): もう一つの簡単な説明

例は、EvalSourceMapDevToolPluginのページのoptionsセクションにあります。

リンクの追加

絶対URL（例：https://webpack.dokyumento.jp/concepts/mode/）の代わりに、相対URL（例：/concepts/mode/）を使用して、独自のコンテンツにリンクしてください。