「Notionでプログラムコードを書きたいけど、どうすればいい？」
「コードブロックって何？普通のテキストと何が違うの？」
そんな疑問を持っていませんか？プログラミングを学んでいる方や、エンジニアの方にとって、コードを見やすく保存する機能は必須ですよね。
この記事では、Notionのコードブロック機能について、プログラミング初心者の方にも分かりやすく解説します。基本的な使い方から便利な活用法まで、すぐに実践できる情報をお届けします。
コードブロックとは？基本を理解しよう
コードブロックの定義
コードブロック（Code Block）は、プログラミングコードを専用の形式で表示するための機能です。
普通のテキストとは違い、プログラムコードを書くために最適化されています。
特徴：
- 等幅フォント（文字幅が揃った書体）で表示
- 背景色がグレーになる
- シンタックスハイライト（色分け表示）がある
- インデント（字下げ）がそのまま保持される
なぜコードブロックが必要なの？
プログラミングコードには、見やすさがとても重要です。
コードブロックのメリット：
- コードと説明文を明確に区別できる
- インデントが崩れない
- 色分けでコードが読みやすい
- コピー＆ペーストが簡単
- 複数のプログラミング言語に対応
普通のテキストでコードを書くと、スペースが詰まったり、見づらくなったりします。
どんな人が使うの？
主な利用者：
- プログラマー、エンジニア
- プログラミング学習者
- 技術文書を書く人
- 開発チームのメンバー
- コードのメモを取りたい人
プログラミングに関わる人なら、必ず使う機能と言えます。
コードブロックの作成方法（3つの方法）
それでは、実際にコードブロックを作ってみましょう。
方法1：スラッシュコマンドを使う（推奨）
最も基本的で確実な方法です。
手順：
- Notionのページを開く
- コードブロックを挿入したい場所をクリック
- 「/code」と入力
- 候補から「Code」を選択
- コードブロックが作成される
- コードを入力開始
これだけで、すぐにコードが書けます。
方法2：バッククォート3つを使う（上級者向け）
Markdownに慣れている方には、この方法が便利です。
手順：
- 新しい行で「“`」（バッククォート3つ）と入力
- 自動的にコードブロックに変換される
- コードを書き始める
バッククォートは、キーボードの「Shift + @」で入力できます（日本語キーボードの場合）。
方法3：ブロックメニューから選択
マウス操作で選びたい方向けです。
手順：
- 新しい行で「+」ボタンをクリック
- メニューが開く
- 「Code」を探してクリック
- コードブロックが挿入される
プログラミング言語を選択する方法
Notionのコードブロックは、60種類以上の言語に対応しています。
言語の設定手順
- コードブロックの左上をクリック
- 「Language」または「言語」と表示されている部分をクリック
- プログラミング言語の一覧が表示される
- 使いたい言語を選択
- シンタックスハイライト（色分け）が適用される
主な対応言語
よく使われる言語：
- JavaScript
- Python
- Java
- C / C++ / C#
- HTML / CSS
- SQL
- Ruby
- PHP
- Swift
- Go
- Rust
- TypeScript
- Kotlin
- Shell / Bash
ほぼすべてのメジャーな言語に対応していると考えて大丈夫です。
言語を選ぶと何が変わる？
言語を選択すると、その言語の文法に合わせて色分けされます。
例（Pythonの場合）：
- キーワード（if、for、defなど）が色付き
- 文字列が別の色
- コメントがグレーになる
- 関数名が強調される
これにより、コードの構造が一目で分かるようになります。
Plain Textも選択可能
プログラミング言語以外のテキストも、コードブロックに入れられます。
「Plain Text」を選べば、色分けなしの等幅フォントで表示されます。設定ファイルやログの表示に便利です。
コードブロックの便利な機能
機能1：自動インデント保持
コードを書く時、インデント（字下げ）はとても重要です。
コードブロックなら、Tabキーやスペースで入れたインデントがそのまま保持されます。普通のテキストだと崩れることがあるので、これは大きな利点ですね。
機能2：行番号の表示
コードブロックには、行番号が表示されます。
メリット：
- 「10行目を見て」と指示しやすい
- 長いコードでも位置が分かりやすい
- チームでのコードレビューに便利
行番号は自動的に表示されるので、特別な設定は不要です。
機能3：コピーボタン
コードブロックの右上にマウスを置くと、「Copy」ボタンが表示されます。
ワンクリックで、コードブロック全体をコピーできる便利機能。いちいち範囲選択する必要がありません。
機能4：折り返し表示
長い行のコードも、自動的に折り返されて表示されます。
横スクロールしなくても、全体が見やすいです。
機能5：ダークモード対応
Notionをダークモードにすると、コードブロックも自動的に暗い背景になります。
夜間の作業でも、目に優しい表示です。
インラインコードとの違い
コードブロック以外に、「インラインコード」という機能もあります。
インラインコードとは
文章の中に、短いコードを埋め込む機能です。
例：
「変数 userName に値を代入します」
バッククォート（`）で囲むと、その部分だけがコード表示になります。
使い分けのポイント
コードブロック：
- 複数行のコード
- プログラム全体や関数
- 独立したコードの説明
インラインコード：
- 文中の変数名や関数名
- 短いコマンド
- ファイル名やパス
1〜2単語ならインラインコード、それ以上ならコードブロックという感じです。
インラインコードの作り方
- 文章中でコードにしたい部分を選択
- キーボードで「Ctrl + E」（Mac: Command + E）
- または、バッククォート（`）で囲む
とても簡単ですね。
コードブロックの実践的な活用例
活用例1：学習ノートでのコード保存
プログラミングを勉強している時、サンプルコードを保存しておくのに便利。
使い方：
- 見出しで「配列の使い方」など書く
- 説明文を書く
- コードブロックでサンプルコードを挿入
- 実行結果をコードブロックの下に記載
活用例2：エラーメッセージの記録
エラーが出た時の記録にも使えます。
使い方：
- エラーメッセージをコードブロックにコピー
- 言語は「Plain Text」を選択
- その下に、解決方法を書く
後で同じエラーが出た時、すぐに対処法が分かります。
活用例3：APIドキュメント作成
開発チームで使うAPI仕様書の作成。
使い方：
- エンドポイントのURLをインラインコードで
- リクエスト例をコードブロックで（JSONなど）
- レスポンス例もコードブロックで表示
活用例4：コードレビュー
チームメンバーのコードをレビューする時。
使い方：
- レビュー対象のコードをコードブロックに貼る
- コメント機能で指摘を追加
- 修正案も別のコードブロックで提示
活用例5：設定ファイルの保存
サーバー設定やアプリの設定ファイルの保管。
使い方：
- YAML、JSON、XMLなどの設定ファイルをコピー
- コードブロックに貼り付け
- 言語を適切に選択（YAML、JSONなど）
- 設定の説明を上下に追加
活用例6：コマンドのメモ
よく使うターミナルコマンドの記録。
使い方：
- 言語を「Shell」または「Bash」に設定
- コマンドを記録
- オプションの説明も添える
活用例7：アルゴリズムの説明
プログラミング面接対策や、アルゴリズム学習。
使い方：
- アルゴリズムの説明を文章で
- 擬似コードをコードブロックで
- 実装例も別のコードブロックで
- 計算量（時間複雑度）も記載
活用例8：正規表現のパターン集
正規表現を忘れないように記録。
使い方：
- 言語を「Regex」に設定
- パターンをコードブロックに
- どんな場合に使うか説明を添える
コードブロックのカスタマイズ
カスタマイズ1：キャプションを追加
コードブロックの上下に、説明文を追加できます。
追加方法：
- コードブロックの上にカーソルを置く
- 「Caption」をクリック
- 説明文を入力
「このコードは○○を実現します」といった補足が入れられます。
カスタマイズ2：ページ内でリンク
コードブロックに直接リンクすることも可能。
方法：
- コードブロックの左側「⋮⋮」をクリック
- 「Copy link to block」を選択
- このリンクを貼れば、そのコードブロックに直接ジャンプ
「10行目のコードを見てください」のような指示がしやすくなります。
カスタマイズ3：背景色の変更
通常はグレーですが、背景色を変えることも可能です。
変更方法：
- ブロックメニュー（⋮⋮）を開く
- 「Color」を選択
- 好きな背景色を選ぶ
重要なコードを目立たせたい時に便利ですね。
よくあるトラブルと解決法
トラブル1：日本語が文字化けする
原因：
言語設定が間違っている可能性があります。
解決策：
- 言語を「Plain Text」に変更
- または、日本語部分はコメントにする
- コードと日本語を分けて記載
トラブル2：インデントがずれる
原因：
コピー元のインデントが混在している（タブとスペース）。
解決策：
- エディタでインデントを統一してからコピー
- Notion内で手動で修正
- 言語の設定を確認
トラブル3：色分けがおかしい
原因：
選択している言語が間違っている。
解決策：
- 正しいプログラミング言語を選び直す
- コードの文法にエラーがないか確認
トラブル4：コードが長すぎて見づらい
解決策：
- 複数のコードブロックに分割
- 見出しで区切る
- トグルブロックの中に入れて折りたたみ可能にする
トラブル5：コピーしても動かない
原因：
コード自体に問題があるか、環境依存の可能性。
解決策：
- コピー時に余計な改行や空白が入っていないか確認
- 元のコードが正しく動作するか確認
- Notion以外のエディタで一度確認
モバイルでのコードブロック操作
スマホやタブレットでも、コードブロックは使えます。
スマホでの作成
- キーボード上部の「/」ボタンをタップ
- 「code」と入力
- 「Code」を選択
基本的には、パソコンと同じ操作です。
言語の変更
- コードブロックをタップ
- 上部の言語名をタップ
- リストから選択
画面が小さいので、少し選びづらいかもしれません。
コピー機能
スマホでも、コピーボタンは表示されます。
コードブロックをタップして、右上のボタンを探してください。
コードブロックを使う上でのベストプラクティス
ポイント1：適切な言語を選択
正しい言語を選ぶことで、シンタックスハイライトが機能します。
コードの可読性が大きく向上するので、面倒がらずに選びましょう。
ポイント2：コメントを適切に入れる
コード内にコメントを書いておくと、後で見返した時に理解しやすいです。
特に、複雑なロジックには必ずコメントを。
ポイント3：説明文を添える
コードブロックの上下に、何をするコードなのか説明を書きましょう。
コードだけだと、後で「これ何だっけ？」となりがちです。
ポイント4：バージョン情報を記録
使用している言語やライブラリのバージョンも記録しておくと良いです。
「Python 3.10で動作確認済み」などと書いておくと親切ですね。
ポイント5：長いコードは分割
1つのコードブロックに全部詰め込まず、機能ごとに分けましょう。
見出しで区切ると、さらに分かりやすくなります。
他のツールとの連携
GitHubとの連携
Notionには、GitHubのコードを埋め込む機能もあります。
方法：
- GitHubのリポジトリURLをコピー
- Notionに貼り付け
- 「Create embed」を選択
ただし、これは埋め込み表示であり、コードブロックとは別物です。
VS Codeとの併用
多くのエンジニアは、VS Codeでコードを書いて、Notionに記録という使い方をしています。
ワークフロー：
- VS Codeでコードを書く
- 完成したコードをコピー
- Notionのコードブロックに貼り付け
- 説明を追加
よくある質問（Q&A）
Q：コードブロックに何行まで書けますか？
A：特に制限はありません。ただし、あまりにも長いと読みづらくなるので、適度に分割することをおすすめします。
Q：コードを実行できますか？
A：いいえ、Notionのコードブロックは表示専用です。実行機能はありません。コードを実行したい場合は、別のエディタやIDEを使ってください。
Q：コードブロックをエクスポートできますか？
A：できます。ページをMarkdown形式やHTML形式でエクスポートすれば、コードブロックも含まれます。
Q：チームメンバーと共有できますか？
A：もちろんです。ページを共有すれば、コードブロックも一緒に共有されます。リアルタイムで共同編集も可能です。
Q：ダークテーマとライトテーマで、コードの見え方は変わりますか？
A：変わります。ダークテーマでは背景が暗くなり、テキストが明るくなります。どちらでも読みやすいように最適化されています。
まとめ：コードブロックでコードを美しく管理しよう
コードブロックは、プログラミングに関わる人にとって必須の機能です。
この記事のポイント：
- コードブロックは、プログラムコードを見やすく表示する専用機能
- 「/code」で簡単に作成できる
- 60種類以上のプログラミング言語に対応
- シンタックスハイライトでコードが色分けされる
- コピーボタンで簡単にコードを再利用可能
- 学習ノート、エラー記録、API文書など幅広い用途
- インラインコードとの使い分けも重要
- モバイルでも基本的な操作は同じ
コードを書く機会がある方は、ぜひNotionのコードブロックを活用してください。
コードと説明を一緒に管理できるので、学習効率が大幅にアップします。きれいに整理されたコードノートで、プログラミングスキルをさらに高めていきましょう！
コメント