コード構文

コードは技術文書において重要な要素です。Markdownは、インラインコードとコードブロックを含む、コードを表示するいくつかの方法を提供します。

インラインコード

基本構文

バッククォート ` を使用してコードを囲みます：

markdown

これは `インラインコード` の例です。
`console.log()` 関数を使用して情報を出力します。

レンダリング結果：

これは インラインコード の例です。 console.log() 関数を使用して情報を出力します。

バッククォートを含むコード

コード自体にバッククォートが含まれる場合は、ダブルバッククォートを使用します：

markdown

``Use `console.log()` function``

レンダリング結果：

Use `console.log()` function

複数のバッククォートの処理

markdown

```Code with multiple backticks `` ` ``` here```

レンダリング結果：

Code with multiple backticks `` ` here```

コードブロック

インデントされたコードブロック

4つのスペースまたは1つのタブでインデントします：

markdown

    function hello() {
        console.log("Hello, World!");
    }

レンダリング結果：

function hello() {
    console.log("Hello, World!");
}

フェンスされたコードブロック

3つのバッククォート ``` またはチルダ ~~~ を使用してコードを囲みます：

markdown

```
function hello() {
    console.log("Hello, World!");
}
```

レンダリング結果：

function hello() {
    console.log("Hello, World!");
}

プログラミング言語の指定

開始 ``` の後に言語名を指定して、構文強調を有効にします：

markdown

```javascript
function hello(name) {
    console.log(`Hello, ${name}!`);
}
```

レンダリング結果：

javascript

function hello(name) {
    console.log(`Hello, ${name}!`);
}

一般的なプログラミング言語の例

JavaScript

markdown

```javascript
// 非同期関数の例
async function fetchData(url) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('エラー:', error);
    }
}
```

レンダリング結果：

javascript

// 非同期関数の例
async function fetchData(url) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('エラー:', error);
    }
}

Python

markdown

```python
# クラス定義の例
class Calculator:
    def __init__(self):
        self.result = 0
    
    def add(self, x, y):
        return x + y
    
    def multiply(self, x, y):
        return x * y

# 使用例
calc = Calculator()
print(calc.add(5, 3))
```

レンダリング結果：

python

# クラス定義の例
class Calculator:
    def __init__(self):
        self.result = 0
    
    def add(self, x, y):
        return x + y
    
    def multiply(self, x, y):
        return x * y

# 使用例
calc = Calculator()
print(calc.add(5, 3))

HTML

markdown

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
</head>
<body>
    <h1>Markdownへようこそ</h1>
    <p>これはサンプル段落です。</p>
</body>
</html>
```

レンダリング結果：

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
</head>
<body>
    <h1>Markdownへようこそ</h1>
    <p>これはサンプル段落です。</p>
</body>
</html>

CSS

markdown

```css
/* レスポンシブレイアウトの例 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 10px;
    }
}

.button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.button:hover {
    background-color: #0056b3;
}
```

レンダリング結果：

css

/* レスポンシブレイアウトの例 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 10px;
    }
}

.button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.button:hover {
    background-color: #0056b3;
}

Bash/Shell

markdown

```bash
#!/bin/bash

# スクリプト例: ファイルのバッチ処理
for file in *.txt; do
    if [ -f "$file" ]; then
        echo "処理中 $file"
        cp "$file" "backup_$file"
    fi
done

# 関数定義
function check_dependencies() {
    command -v git >/dev/null 2>&1 || {
        echo "Gitは必要ですがインストールされていません。"
        exit 1
    }
}

check_dependencies
echo "すべての依存関係が満たされました。"
```

レンダリング結果：

bash

#!/bin/bash

# スクリプト例: ファイルのバッチ処理
for file in *.txt; do
    if [ -f "$file" ]; then
        echo "処理中 $file"
        cp "$file" "backup_$file"
    fi
done

# 関数定義
function check_dependencies() {
    command -v git >/dev/null 2>&1 || {
        echo "Gitは必要ですがインストールされていません。"
        exit 1
    }
}

check_dependencies
echo "すべての依存関係が満たされました。"

JSON

markdown

```json
{
  "name": "markdown-tutorial",
  "version": "1.0.0",
  "description": "Markdown Chinese Tutorial",
  "main": "index.js",
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "preview": "vitepress preview docs"
  },
  "dependencies": {
    "vitepress": "^1.0.0"
  },
  "author": "Your Name",
  "license": "MIT"
}
```

レンダリング結果：

json

{
  "name": "markdown-tutorial",
  "version": "1.0.0",
  "description": "Markdown Chinese Tutorial",
  "main": "index.js",
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "preview": "vitepress preview docs"
  },
  "dependencies": {
    "vitepress": "^1.0.0"
  },
  "author": "Your Name",
  "license": "MIT"
}

高度なコードブロック機能

行番号を表示

いくつかのMarkdownプロセッサは行番号を表示します：

markdown

```javascript {1}
// これは1行目です
function example() {
    console.log("Hello");
}
```

行の強調表示

特定の行を強調表示します：

markdown

```javascript {2-3}
function example() {
    console.log("この行は強調表示されます");  // 強調表示
    return true;               // 強調表示
}
```

ファイル名を表示

コードファイル名を表示します：

markdown

```javascript title="app.js"
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello World!');
});
```

一般的なエラーと解決策

1. バッククォートの数が一致しない

markdown

❌ 不正:
```javascript
function hello() {
    console.log("Hello");
}
``  ← バッククォートの数が一致しません

✅ 正しい:
```javascript
function hello() {
    console.log("Hello");
}
```

2. インデントが不一致

markdown

❌ 不正: インデントされたコードブロック
    最初の行 (4つのスペース)
  2番目の行 (2つのスペース)  ← インデントが不一致

✅ 正しい: インデントされたコードブロック
    最初の行 (4つのスペース)
    2番目の行 (4つのスペース)

3. 言語名が不正

markdown

❌ 不正:
```js  ← javascriptにする必要があります
function hello() {}
```

✅ 正しい:
```javascript
function hello() {}
```

サポートされる言語リスト

一般的な言語識別子：

言語	識別子	例
JavaScript	`javascript`, `js`	`function(){}`
Python	`python`, `py`	`def function():`
Java	`java`	`public class{}`
C++	`cpp`, `c++`	`#include <iostream>`
C#	`csharp`, `cs`	`public class{}`
Go	`go`	`func main(){}`
Rust	`rust`, `rs`	`fn main(){}`
TypeScript	`typescript`, `ts`	`interface{}`
PHP	`php`	`<?php`
Ruby	`ruby`, `rb`	`def method`
SQL	`sql`	`SELECT * FROM`
HTML	`html`	`<div></div>`
CSS	`css`	`.class{}`
XML	`xml`	`<root></root>`
YAML	`yaml`, `yml`	`key: value`
Markdown	`markdown`, `md`	`# Title`
Bash	`bash`, `sh`	`#!/bin/bash`
PowerShell	`powershell`, `ps1`	`Get-Process`
Dockerfile	`dockerfile`	`FROM ubuntu`

ベストプラクティス

1. 適切なコード形式を選択

markdown

✅ 推奨: 短いコードにはインライン形式を使用
`Array.map()` メソッドを使用して配列を処理します。

✅ 推奨: 長いコードにはコードブロックを使用
function processArray(arr) {
    return arr.map(item => item * 2);
}

2. 適切なコメントを追加

markdown

✅ 推奨: 説明コメントを含める
```javascript
// 配列要素の平均を計算
function calculateAverage(numbers) {
    const sum = numbers.reduce((acc, num) => acc + num, 0);
    return sum / numbers.length;
}
```

3. 正しい言語識別子を使用

markdown

✅ 推奨: 明確な言語識別子
```typescript
interface User {
    id: number;
    name: string;
}
```

❌ 推奨: 曖昧な言語識別子
```text
interface User {
    id: number;
    name: string;
}
```

4. コードを簡潔に保つ

markdown

✅ 推奨: 核心のロジックを表示
```javascript
// ユーザー認証
function authenticate(token) {
    return validateToken(token);
}
```

❌ 推奨: 関連しない詳細が多すぎる
```javascript
// これは長いコードです...
```

HTML出力

MarkdownコードはHTMLに変換されます：

markdown

`インラインコード`

変換後：

html

<code>インラインコード</code>

コードブロック：

markdown

```javascript
function hello() {}
```

変換後：

html

<pre><code class="language-javascript">
function hello() {}
</code></pre>

実践例

APIドキュメント

markdown

## ユーザーログイン

`/api/login` にPOSTリクエストを送信します：

```bash
curl -X POST https://api.example.com/login \
  -H "Content-Type: application/json" \
  -d '{
    "email": "user@example.com",
    "password": "password123"
  }'
```

サンプルレスポンス：

```json
{
  "success": true,
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "user": {
    "id": 1,
    "email": "user@example.com",
    "name": "Zhang San"
  }
}
```

設定ファイル例

markdown

## プロジェクト設定

`config.json` ファイルを作成します：

```json
{
  "database": {
    "host": "localhost",
    "port": 5432,
    "name": "myapp"
  },
  "server": {
    "port": 3000,
    "host": "0.0.0.0"
  }
}
```

`package.json` スクリプトを更新します：

```json
{
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "test": "jest"
  }
}
```

インストールガイド

markdown

## 環境設定

1. Node.jsをインストールします：

```bash
# macOS (Homebrewを使用)
brew install node

# Ubuntu/Debian
sudo apt update
sudo apt install nodejs npm

# Windows (Chocolateyを使用)
choco install nodejs
```

2. インストールを確認します：

```bash
node --version
npm --version
```

3. プロジェクトを初期化します：

```bash
mkdir my-project
cd my-project
npm init -y
```

練習

以下を作成してみましょう：

様々なプログラミング言語のコード例
リクエストとレスポンスのAPI使用例
異なるシステムのコマンドラインインストールガイド
詳細なコメント付きの設定ファイルテンプレート

コード構文 ​

インラインコード ​

基本構文 ​

バッククォートを含むコード ​

複数のバッククォートの処理 ​

コードブロック ​

インデントされたコードブロック ​

フェンスされたコードブロック ​

プログラミング言語の指定 ​

一般的なプログラミング言語の例 ​

JavaScript ​

Python ​

HTML ​

CSS ​

Bash/Shell ​

JSON ​

高度なコードブロック機能 ​

行番号を表示 ​

行の強調表示 ​

ファイル名を表示 ​

一般的なエラーと解決策 ​

1. バッククォートの数が一致しない ​

2. インデントが不一致 ​

3. 言語名が不正 ​

サポートされる言語リスト ​

ベストプラクティス ​

1. 適切なコード形式を選択 ​

2. 適切なコメントを追加 ​

3. 正しい言語識別子を使用 ​

4. コードを簡潔に保つ ​

HTML出力 ​

実践例 ​

APIドキュメント ​

設定ファイル例 ​

インストールガイド ​

関連構文 ​

練習 ​

コード構文

インラインコード

基本構文

バッククォートを含むコード

複数のバッククォートの処理

コードブロック

インデントされたコードブロック

フェンスされたコードブロック

プログラミング言語の指定

一般的なプログラミング言語の例

JavaScript

Python

HTML

CSS

Bash/Shell

JSON

高度なコードブロック機能

行番号を表示

行の強調表示

ファイル名を表示

一般的なエラーと解決策

1. バッククォートの数が一致しない

2. インデントが不一致

3. 言語名が不正

サポートされる言語リスト

ベストプラクティス

1. 適切なコード形式を選択

2. 適切なコメントを追加

3. 正しい言語識別子を使用

4. コードを簡潔に保つ

HTML出力

実践例

APIドキュメント

設定ファイル例

インストールガイド

関連構文

練習