Markdown

Markdownは標準的な記法に加えて、本プロジェクトで独自拡張した仕様があります。

Frontmatter

必要に応じてページのメタ情報や設定をfrontmatterに書くことができます。frontmatterはYAML形式です。

yaml
---
slug: /reference/function
---

yaml
---
slug: /reference/function
---

利用可能な設定は次のものがあります。

キー	型	説明
`sidebar_label`	`string`	サイドバーや前後ページナビゲーション、サイト内リンクブロックに表示されるページタイトルです。指定しない場合、最初の見出しの内容がサイドバーに表示されます。
`slug`	`string`	ページのURLのパス部分。指定しない場合、ファイル名から拡張子を除いたものが`slug`になります。
`tags`	`string[]`	ページのタグ。デフォルト値は`[]`です。
`description`	`string`	ページの要約。`<meta name="description" content="..."/>`やサイト内リンクブロックの説明として使われる。指定しない場合、コンテンツの最初の段落が`description`になります。
`title`	`string`	ページのタイトル。これを指定した場合、Markdownに見出しをつける必要はありません。
`image`	`string`	OGP画像のパス。staticディレクトリからの相対パスを指定します。

yaml
---
sidebar_label: アロー関数
slug: /reference/functions/arrow-function
tags:
  - 関数
  - アロー関数
description: TypeScriptでアロー関数を定義する方法
image: /img/ogp.png
---

yaml
---
sidebar_label: アロー関数
slug: /reference/functions/arrow-function
tags:
  - 関数
  - アロー関数
description: TypeScriptでアロー関数を定義する方法
image: /img/ogp.png
---

見出し

見出しレベル1#は、ページタイトルにのみ使います。
ページ内のセクションは見出しレベル2##以上を使います。

例
markdown
# ページタイトル
...序文...
## 大見出し
...
### 中見出し
...

例
markdown
# ページタイトル
...序文...
## 大見出し
...
### 中見出し
...

リンク

サイト内リンクはMarkdownファイルパスを相対パスで書きます。

markdown
詳細は[関数](../references/functions.md)をご覧ください。

markdown
詳細は[関数](../references/functions.md)をご覧ください。

内部リンクブロック

内部リンクブロックは、サイト内のページへのリンクを表示するためのものです。次の例のように、ページタイトルと説明文が自動的に表示されるコンポーネントです。

📄️ 変数宣言: letとconst

JavaScriptの変数宣言(variable declaration)には、letとconstがあります。

内部リンクブロックには次の利点があります。

関連ページが目立つ
リンク先ページのタイトル変更に自動的に追従できる

リンクブロックを作るには、前後に空白行を置き、かつ、サイト内リンクの行の前後には何も文字を書かないようにします。

markdown
...テキスト...
[letとconst](../references/values-types-variables/let-and-const.md)
...テキスト...

markdown
...テキスト...
[letとconst](../references/values-types-variables/let-and-const.md)
...テキスト...

caution

Markdownのリンクテキストは無視され、リンク先のタイトルが採用されます。たとえば、function.mdのタイトルが「関数について」で、Markdownが[ファンクション](./function.md)のとき、「ファンクション」は無視され、ウェブサイト上の表示は「関数について」が採用されます。

インラインコード

インラインコードの前後には空白を置かないようにします。

markdown
❌ 変数宣言は `const` を用います。
⭕️ 変数宣言は`const`を用います。

markdown
❌ 変数宣言は `const` を用います。
⭕️ 変数宣言は`const`を用います。

インラインコードでバッククォートを使うには、ダブルバッククォートを使います。

markdown
テンプレートリテラルは`` ` ``を使います。

markdown
テンプレートリテラルは`` ` ``を使います。

テンプレートリテラルは`を使います。

コードブロック

コードブロックは言語名を指定すると、シンタックスハイライトが効きます。

markdown
```ts
// code
```

markdown
```ts
// code
```

使用可能な言語は次のとおりです。

https://github.com/shikijs/shiki/blob/main/docs/languages.md#all-languages

コードブロックのタイトル

コードブロックにタイトルをつけるにはtitle属性を指定します。

markdown
```ts title="sample.ts"
// sample code
```

markdown
```ts title="sample.ts"
// sample code
```

sample.ts
ts
// sample code

sample.ts
ts
// sample code

行番号

4行以上あるコードブロックは行番号が自動で付与されます。

markdown
1行目
2行目
3行目

markdown
1行目
2行目
3行目

markdown
1行目
2行目
3行目
4行目

markdown
1行目
2行目
3行目
4行目

Twoslash

TwoslashはサンプルコードにTypeScriptコンパイラーから得られる情報を付加する機能です。付加される情報には変数の型、コンパイルエラーのメッセージなどがあります。

変数の型を表示する

^?を書くと型推論された変数の型の中身を表示できます。

markdown
```ts twoslash
const point = { x: 135, y: 35 };
//    ^?
type ReadonlyPoint = Readonly<typeof point>;
//   ^?
```

markdown
```ts twoslash
const point = { x: 135, y: 35 };
//    ^?
type ReadonlyPoint = Readonly<typeof point>;
//   ^?
```

表示例
ts
const point = { x: 135, y: 35 };
       const point: {
    x: number;
    y: number;
}
type ReadonlyPoint = Readonly<typeof point>;
          type ReadonlyPoint = {
    readonly x: number;
    readonly y: number;
}

表示例
ts
const point = { x: 135, y: 35 };
       const point: {
    x: number;
    y: number;
}
type ReadonlyPoint = Readonly<typeof point>;
          type ReadonlyPoint = {
    readonly x: number;
    readonly y: number;
}

エラーを表示する

@errorsでコンパイルエラーの内容を表示できます。

markdown
```ts twoslash
// @errors: 7006
function fn(s) {}
```

markdown
```ts twoslash
// @errors: 7006
function fn(s) {}
```

表示例
ts
function fn(s) {}
Parameter 's' implicitly has an 'any' type.7006Parameter 's' implicitly has an 'any' type.

表示例
ts
function fn(s) {}
Parameter 's' implicitly has an 'any' type.7006Parameter 's' implicitly has an 'any' type.

コンパイラーオプションを設定する

@コンパイラーオプション: 設定値の形式で書くと、そのコードブロックでのみ効くコンパイラーオプションを設定できます。

markdown
```ts twoslash
// @noImplicitAny: false
function fn(s) {}
```

markdown
```ts twoslash
// @noImplicitAny: false
function fn(s) {}
```

表示例
ts
function fn(s) {}

表示例
ts
function fn(s) {}

tip

twoslashのデフォルトのコンパイラオプションはtsconfig.twoslash.jsonをご覧ください。

実行結果を表示する

@log、@warn、@errorを用いると、実行結果のコメントをスタイリングして表示できます。

markdown
```js twoslash
console.log(123);
// @log: 123
console.warn("メッセージ");
// @warn: メッセージ
const x = value;
// @error: ReferenceError: value is not defined
```

markdown
```js twoslash
console.log(123);
// @log: 123
console.warn("メッセージ");
// @warn: メッセージ
const x = value;
// @error: ReferenceError: value is not defined
```

表示例
js
console.log(123);
123
console.warn("メッセージ");
メッセージ
const x = value;
ReferenceError: value is not defined

表示例
js
console.log(123);
123
console.warn("メッセージ");
メッセージ
const x = value;
ReferenceError: value is not defined

コード補完の再現

^|を書いたところにVS Codeでのコード補完の様子を再現できます。

markdown
```ts twoslash
// @noErrors
[1, 2, 3].fin
//           ^|
```

markdown
```ts twoslash
// @noErrors
[1, 2, 3].fin
//           ^|
```

表示例
ts
[1, 2, 3].fin
             find
findIndex

表示例
ts
[1, 2, 3].fin
             find
findIndex

JavaScriptの出力

@showEmitでコンパイル結果のJavaScriptコードを表示できます。

markdown
```ts twoslash title="表示例"
// @showEmit
enum Example {
  FOO,
  BAR,
}
```

markdown
```ts twoslash title="表示例"
// @showEmit
enum Example {
  FOO,
  BAR,
}
```

表示例
ts
"use strict";
var Example;
(function (Example) {
    Example[Example["FOO"] = 0] = "FOO";
    Example[Example["BAR"] = 1] = "BAR";
})(Example || (Example = {}));

表示例
ts
"use strict";
var Example;
(function (Example) {
    Example[Example["FOO"] = 0] = "FOO";
    Example[Example["BAR"] = 1] = "BAR";
})(Example || (Example = {}));

型定義ファイルの出力

TypeScriptソースコードを型定義ファイルに変換した結果を表示できます。

markdown
```ts twoslash
// @declaration: true
// @showEmit
// @showEmittedFile: index.d.ts
export function getStringLength(value: string) {
  return value.length;
}
```

markdown
```ts twoslash
// @declaration: true
// @showEmit
// @showEmittedFile: index.d.ts
export function getStringLength(value: string) {
  return value.length;
}
```

表示例
ts
export declare function getStringLength(value: string): number;

表示例
ts
export declare function getStringLength(value: string): number;

インラインハイライト(下線)

下線^^を引いた部分がハイライトされます。これは未対応で、下線コメントが消えるだけです。

markdown
```ts twoslash
function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
greet("Maddison", new Date());
//                ^^^^^^^^^^
```

markdown
```ts twoslash
function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
greet("Maddison", new Date());
//                ^^^^^^^^^^
```

表示例
ts
function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
 
greet("Maddison", new Date());

表示例
ts
function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
 
greet("Maddison", new Date());

Twoslashトラブルシューティング

`import`がコンパイルエラー(2307)になる

存在しない架空のモジュールをインポートしたとき、次のエラーが発生します。

[2307] 0 - Cannot find module 'モジュール名' or its corresponding type declarations.

架空のモジュールをサンプルコードに使う場合は、@filenameを使ってモジュールをでっちあげる必要があります。

markdown
```ts twoslash
// @filename: fictional-module.ts
export const fictional = "fictional value!";
// @filename: index.ts
// ---cut---
import { fictional } from "./fictional-module";
//       ^?
```

markdown
```ts twoslash
// @filename: fictional-module.ts
export const fictional = "fictional value!";
// @filename: index.ts
// ---cut---
import { fictional } from "./fictional-module";
//       ^?
```

表示例
ts
import { fictional } from "./fictional-module";
            (alias) const fictional: "fictional value!"
import fictional

表示例
ts
import { fictional } from "./fictional-module";
            (alias) const fictional: "fictional value!"
import fictional

架空のNPMモジュールをでっちあげる

架空のNPMモジュールをでっちあげるには、declare moduleでモジュールの型定義を用意します。その際、架空のモジュールのほうは@filenameがなくてもコンパイルがとおります。

markdown
```ts twoslash
declare module "fictional-npm-module" {
  const fictional = "fictional NPM module!";
}
// @filename: index.ts
// ---cut---
import { fictional } from "fictional-npm-module";
//       ^?
```

markdown
```ts twoslash
declare module "fictional-npm-module" {
  const fictional = "fictional NPM module!";
}
// @filename: index.ts
// ---cut---
import { fictional } from "fictional-npm-module";
//       ^?
```

表示例
ts
import { fictional } from "fictional-npm-module";
            (alias) const fictional: "fictional NPM module!"
import fictional

表示例
ts
import { fictional } from "fictional-npm-module";
            (alias) const fictional: "fictional NPM module!"
import fictional

行ハイライト

特定の行に注目してもらいたいときは、行番号を書くとその行の背景色を変えられます。

markdown
```js twoslash {1,4-6,11} title="行ハイライトの表示例"
import React from "react";
function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }
  return <div>Foo</div>;
}
export default MyComponent;
```

markdown
```js twoslash {1,4-6,11} title="行ハイライトの表示例"
import React from "react";
function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }
  return <div>Foo</div>;
}
export default MyComponent;
```

行ハイライトの表示例
js
import React from "react";
 
function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }
 
  return <div>Foo</div>;
}
 
export default MyComponent;

行ハイライトの表示例
js
import React from "react";
 
function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }
 
  return <div>Foo</div>;
}
 
export default MyComponent;

サンプルコードの自動整形

コードブロックはPrettierで自動整形されます。

自動整形をされたくないコードブロック場合は、を直前に書きます。

markdown
```ts
f = x => x;
```
<!--prettier-ignore-->
```ts
f = x => x;
```

markdown
```ts
f = x => x;
```
<!--prettier-ignore-->
```ts
f = x => x;
```

整形結果
markdown
```ts
f = (x) => x;
```
<!--prettier-ignore-->
```ts
f = x => x;
```

整形結果
markdown
```ts
f = (x) => x;
```
<!--prettier-ignore-->
```ts
f = x => x;
```

警告表示

トリプルコロン:::で囲んだテキストは警告表示にできます。

markdown
:::note
テキスト
:::
:::tip
テキスト
:::
:::info
テキスト
:::
:::caution
テキスト
:::
:::danger
テキスト
:::

markdown
:::note
テキスト
:::
:::tip
テキスト
:::
:::info
テキスト
:::
:::caution
テキスト
:::
:::danger
テキスト
:::

note

テキスト

tip

テキスト

info

テキスト

caution

テキスト

danger

テキスト

警告表示にはタイトルを指定できます。

markdown
:::note 好みのタイトル
テキスト
:::

markdown
:::note 好みのタイトル
テキスト
:::

好みのタイトル

テキスト

図表のキャプション

図表にキャプションを追加する場合は、<figure>と<figcaption>が使えます。

markdown
<figure><figcaption>猫の図</figcaption>
![](https://placekitten.com/300/300)
</figure>

markdown
<figure><figcaption>猫の図</figcaption>
![](https://placekitten.com/300/300)
</figure>

markdown
<figure><figcaption>国と通貨</figcaption>
| 国             | 通貨     |
| -------------- | -------- |
| アメリカ合衆国 | 米国ドル |
| 日本           | 日本円   |
</figure>

markdown
<figure><figcaption>国と通貨</figcaption>
| 国             | 通貨     |
| -------------- | -------- |
| アメリカ合衆国 | 米国ドル |
| 日本           | 日本円   |
</figure>

国と通貨

国	通貨
アメリカ合衆国	米国ドル
日本	日本円

「学びをシェアする」ブロック

「学びをシェアする」ブロックは、読者がページの内容をTwitterでシェアしやすくするブロックです。<TweetILearned>で囲った範囲がツイート内容になります。

学びをシェアするブロックの書き方例
markdown
<TweetILearned>
・JavaScriptの変数宣言はletとconstがある
・letは再代入OK、constは再代入NG
・基本的にconstを使うとよい
</TweetILearned>

学びをシェアするブロックの書き方例
markdown
<TweetILearned>
・JavaScriptの変数宣言はletとconstがある
・letは再代入OK、constは再代入NG
・基本的にconstを使うとよい
</TweetILearned>

表示例:

学びをシェアする

・JavaScriptの変数宣言はletとconstがある
・letは再代入OK、constは再代入NG
・基本的にconstを使うとよい

『サバイバルTypeScript』より

この内容をツイートする

「学びをシェアする」ブロックの注意点

<TweetILearned>の直後と</TweetILearned>の直前には空行が必要です。
Twitterはツイート内容に文字数制限があるため、分量には注意してください。「『サバイバルTypeScript』より」が末尾に追加されることを想定した分量にしてください。
ツイート内容にはMarkdownの記法を使わないでください。特にリスト記法は「・」で代用してください。
ツイート内容にはURLを含めないでください。URLを含んだツイートはタイムラインに表示されにくい傾向があるからです。

Frontmatter​

見出し​

リンク​

内部リンクブロック​

📄️ 変数宣言: letとconst

caution

インラインコード​

コードブロック​

コードブロックのタイトル​

行番号​

Twoslash​

変数の型を表示する​

エラーを表示する​

コンパイラーオプションを設定する​

tip

実行結果を表示する​

コード補完の再現​

JavaScriptの出力​

型定義ファイルの出力​

インラインハイライト(下線)​

Twoslashトラブルシューティング

importがコンパイルエラー(2307)になる​

架空のNPMモジュールをでっちあげる​

行ハイライト​

サンプルコードの自動整形​

警告表示​

note

tip

info

caution

danger

好みのタイトル

図表のキャプション​

「学びをシェアする」ブロック​

学びをシェアする

「学びをシェアする」ブロックの注意点

Frontmatter

見出し

リンク

内部リンクブロック

インラインコード

コードブロック

コードブロックのタイトル

行番号

Twoslash

変数の型を表示する

エラーを表示する

コンパイラーオプションを設定する

実行結果を表示する

コード補完の再現

JavaScriptの出力

型定義ファイルの出力

インラインハイライト(下線)

`import`がコンパイルエラー(2307)になる

架空のNPMモジュールをでっちあげる

行ハイライト

サンプルコードの自動整形

警告表示

図表のキャプション

「学びをシェアする」ブロック