ぱたぱたアニメ館

1.超頻出・最優先(骨組みを作る)

記号日本語・英語用途プログラミングでの実例実例の解説
( )丸かっこ
parentheses
/pəˈrɛnθəsiz/
関数・条件print("Hello")
if (x > 0)
← 実行の合図
← 条件の範囲
{ }波かっこ
curly braces / braces
/ˈkɜrli ˈbreɪsəz/ /ˈbreɪsəz/
範囲の指定if (x > 0) { 処理 }← ここからここまで実行(※ 補足
[ ]角かっこ
square brackets
/skwɛr/ /ˈbrækəts/
リスト(配列)users = ["佐藤", "鈴木", "田中"]← リストを作る(※ 補足
< >不等号
angle brackets
/ˈæŋɡəl/ /ˈbrækəts/
比較・HTMLif (age < 20)
<div>
← 20 歳未満か?
← タグを囲む
=イコール
equals
/ˈikwəlz/
代入score = 100← score に 100 を入れる
==等しい
equality operator
/ɪˈkwɑləti/ /ˈɑpəˌreɪtər/
比較if (score == 100)← 100 と等しいか?(※ 補足
===厳密に等しい
strict equality
/strɪkt/ /ɪˈkwɑləti/
JSなどの比較if (id === "10")← 型まで含めて完全に一致か?(※ 補足
;セミコロン
semicolon
/ˈsɛmiˌkoʊlən/
文の終わりlet x = 5;← ここで 1 行終わり(句読点)
,カンマ
comma
/ˈkɑmə/
区切りapple, orange, banana← 並べる時の区切り
.ドット
dot / period
/dɑt/ /ˈpɪriəd/
~の(所有)user.name← user「の」name プロパティ

2.条件・論理演算(「もしも〜なら」の判断)

記号日本語・英語用途プログラミングでの実例実例の解説
!エクスクラメーション
exclamation
/ˌɛkskləˈmeɪʃən/
否定if (!isLogin)← ログインしていないなら(※ 補足
!=ノットイコール
not equal
/nɑt ˈikwəl/
等しくないif (color != "red")← 赤じゃないなら
&&アンパサンド
logical AND
/ˈlɑʤɪkəl ænd/
どちらも成立
かつ
if (hasCard && hasMoney)← 両方持っているなら
||バーティカルバー
パイプ
logical OR
/ˈlɑʤɪkəl ɔr/
どちらかが成立if (isSunny || isCloudy)← 晴れ、または曇りなら実行(※ 補足
? :クエスチョン・コロン
ternary
/ˈtɜrnəri/
三項演算子
(簡易判定)
age >= 20 ? "OK" : "NG"← 20 以上なら OK、違うなら NG

3.計算・演算(データの加工)

記号日本語・英語用途プログラミングでの実例実例の解説
+足す
plus
/plʌs/
加算・文字の結合price + 100
"Hello" + "World"
← 100 足す
← 文字を繋ぐ
-引く
minus / hyphen
/ˈmaɪnəs/ /ˈhaɪfən/
減算(引き算)score - 10← 10 を引く
*アスタリスク
asterisk
/ˈæstərɪsk/
掛けるprice * 1.1← 価格に 1.1(消費税)を掛ける
/スラッシュ
slash
/slæʃ/
割るtotal / 5← 合計を 5 人で割る
%パーセント(剰余)
modulo
/ˈmɑdʒəˌloʊ/
余り10 % 3← 10 を 3 で割った余り(1)
++インクリメント
increment
/ˈɪnkrəmənt/
値を 1 増やすcount++← 今の数字に 1 を足して更新する
--デクリメント
decrement
/dɪˈkrɪmənt/
値を 1 減らすcount--← 今の数字から 1 を引いて更新する

4.文字・構文・環境依存(特殊な記号)

記号日本語・英語用途プログラミングでの実例実例の解説
`バッククォート
backtick
/ˈbækˌtɪk/
テンプレートリテラル`こんにちは${name}さん`← 文字の中に変数を混ぜる
~チルダ
tilde
/ˈtɪldə/
ホームディレクトリ
(自分のフォルダ)
cd ~/Desktop← デスクトップフォルダへ移動する
_アンダースコア
underscore
/ˌʌndərˈskɔr/
スペースが使えない時の
単語の区切り
user_name← 単語を繋いで 1 つの変数名にする(※ 補足
\バックスラッシュ
backslash
/ˈbækˌslæʃ/
エスケープシーケンス\n← 文字の中で「改行」する(※ 補足
|縦線
pipe / vertical bar
/paɪp/ /ˈvɜrtɪkəl bɑr/
命令の結果を次に渡すls | grep "txt"← ファイル一覧から「txt」が含まれるものを探す
#シャープ(ハッシュ)
hash
/hæʃ/
コメントアウト# コメントです← Python などでコメント。コンピュータはこの行を無視して実行する(※ 補足1)(※ 補足2
@アット
at sign
/æt saɪn/
特殊な機能の目印
(デコレータ)
@Component← このクラスは「部品」であると定義する
$ダラー(ドル)
dollar sign
/ˈdɑlər/ /saɪn/
変数の展開${value}← 文字に値を埋め込む
\'シングルクォートのエスケープ
single quote escape
/ˈsɪŋɡəl/ /kwoʊt/ /ɪˈskeɪp/
文字としての ' を表現する'It\'s me'← 文章の途中の引用符を文字として扱う
\n改行(ニューライン)
newline
/ˈnuˌlaɪn/
文章を途中で改行する"Hello\nWorld"← Hello の次で改行して World を表示

5.応用・モダンな構文(よく使う便利な記号)

記号日本語・英語用途プログラミングでの実例実例の解説
^キャレット
caret
/ˈkærət/
一部の環境ではべき乗
(↑ Excel など)
多くの言語では XOR
2 ^ 3← 2 の 3 乗(8)の計算
(Excel や一部の言語で使用)
**二重アスタリスク
double asterisk
/ˈdʌbəl/ /ˈæstərɪsk/
べき乗(〜乗)2 ** 3← 2 の 3 乗(8)の計算
(Python や JavaScript で使用)
&アンパサンド
ampersand
/ˈæmpərˌsænd/
URL の連結
ビット演算
index.html?id=1&name=tanaka← URL のパラメータを繋ぐときによく見る
:コロン
colon
/ˈkoʊlən/
データのペア(辞書){"name": "佐藤"}← Python や JS で「名前:値」のセットを作る(※ 補足
=>矢印(アロー)
arrow
/ˈæroʊ/
アロー関数(x) => x * 2← JavaScript などで関数を短く書く主役

^(キャレット)の注意点
プログラミングの世界では、^ を「べき乗(〜乗)」として使う言語は実は少数派です。 Excel や BASIC などでは「2 の 3 乗」のように計算できますが、JavaScript や Python、C 言語など多くの主要な言語では、「排他的論理和(XOR)」という全く別の計算(ビット演算)に使われます。 「〜乗」の計算をしたいときは、代わりに ** を使うのが今のモダンなプログラミングの主流です。使う言語によって意味がガラッと変わる記号なので、初心者は特に注意が必要です。

6.HTML / Markdown / CSS で必須(文書とデザイン)

記号日本語・英語用途実例・解説実例の解説
< >山かっこ
angle brackets
/ˈæŋɡəl/ /ˈbrækəts/
タグを囲む<p>こんにちは</p><p> で「ここから文章(Paragraph)だよ」と宣言
</>終了タグ
closing tag
/ˈkloʊzɪŋ/ /tæɡ/
タグを閉じる</h1>/ を入れることで「ここまでが見出し(h1)だよ」と終了
*アスタリスク
asterisk
/ˈæstərɪsk/
箇条書き* りんご← Markdown 形式で、行頭に置くとリスト(箇条書き)になる
```トリプルバッククォート
triple backticks
/ˈtrɪpəl/ /ˈbækˌtɪks/
コードブロック
```javascript
console.log("Hello");
```
← 上下を 3 つずつの記号で囲むことで、中身をプログラムとして表示(※ 補足
---ハイフン(3 つ)
horizontal rule
/ˌhɔrəˈzɑntəl/ /rul/
境界線(罫線)---← 間に文字を書かずに 3 つ並べると、画面に「横線」を引く
#ハッシュ
hash
/hæʃ/
見出し(Markdown)
ID(CSS)
# タイトル
#main
← Markdown では
     大きな見出し
← CSS では特定の場所
    (ID)の指定
:コロン
colon
/ˈkoʊlən/
項目と値の区切りcolor: red;← CSS などで「色(項目)」は「赤(値)」であると指定する

Markdown vs. HTML

やりたいことMarkdownの書き方HTMLでの書き方補足・メモ
見出し1# 見出し1<h1>見出し1</h1># の数でレベルが変わる(最大 6 まで)
見出し2## 見出し2<h2>見出し2</h2>実務では ##### を多用する
太字**重要**<strong>重要</strong>視覚的な強調だけでなく「意味的強調」
斜体*イタリック*<em>イタリック</em>英語の技術用語などでたまに使う
箇条書き* りんご<ul><li>りんご</li></ul>* の代わりに -+ でもOK
番号付きリスト1. 手順1<ol><li>手順1</li></ol>数字は何から始めても自動で連番になる
横線---<hr>セクションの区切り(境界線)
リンク[名前](URL)<a href="URL">名前</a>[] が文字、() がリンク先
画像挿入![説明](URL)<img src="URL" alt="説明">リンクの書き方の頭に ! をつけるだけ
引用> 引用文<blockquote>引用文</blockquote>他者の発言やコードの解説を引用する時
インラインコード`code`<code>code</code>文章の中で var x = 1; のように見せる
コードブロック ```javascript
code
```
<pre><code>code</code></pre>エンジニア最重要。 複数行のコードを囲む
打ち消し線~~間違い~~<del>間違い</del>仕様変更などを表現する時に使う
チェックリスト- [ ] タスク(標準 HTML になし)GitHub などの ToDo 管理で超便利
表(※ 補足
| 名前 | 役割 |
| --- | --- |
| JavaScript | 動作 |
| HTML | 骨組み |
VS Code Preview
VS Code プレビュー画像
<table>
  <tr>
    <th>名前</th>
    <th>役割</th>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>動作</td>
  </tr>
  <tr>
    <td>HTML</td>
    <td>骨組み</td>
  </tr>
</table>
VS Code Preview
VS Code プレビュー画像
|(パイプ)
これで文字を挟むと「列」
-(ハイフン)
2 行目に 3 つ以上並べると「ここから上が見出し」という区切り線になる。
:(コロン)
2 行目のハイフンの端っこに : をつけると、列の文字の位置を指定できる。
  • | :--- |← 左寄せ
  • | :---: |← 中央寄せ
  • | ---: |← 右寄せ

記号の豆知識

|| (バーティカルバー 2 本)

「A または B」という意味。

例: if (お腹が空いた || 喉が渇いた) { コンビニに行く; }

どちらか一方でも当てはまれば、コンビニに行く。

_ (アンダースコア)

プログラミングでは「スペース」が使えないルールがあるため、代わりにこれを使う。

例: login_password

文字が繋がって読みづらくなるのを防ぐための「地上の架け橋」のような存在。

: (コロン)

「左側が項目、右側が中身」というペアを作る時に使う。

例: age: 20 (年齢:20 歳)

設定ファイルや、デザインを決める CSS で非常に多く登場。

読み方のバリエーション

現場や言語によって呼び方が変わることがあるので、知っておくとコミュニケーションがスムーズになる。

  • { } (波かっこ): 日本の現場では「中かっこ」「ブレース」とも呼ばれる。
  • [ ] (角かっこ): 「ブラケット」と呼ぶのが一般的。
  • ! (エクスクラメーション): プログラミング文脈では短く「ノット」と読むことが多い。
    (例:!= は「ノットイコール」)
  • # (ハッシュ): 日本語では「シャープ」と呼びがちだが、海外エンジニアには「ハッシュ」や「ナンバーサイン」で通じる。
===== の違い(重要)

JavaScript などで出てくるこの違いは非常に重要。

  • == (等価演算子): 「だいたい同じ」。型が違っても変換して比較。(例:10 == "10" は true)
  • === (厳格等価演算子): 「完全に同じ」。型も値もチェック。(例:10 === "10" は false)

実務のアドバイス: 予期せぬバグを防ぐため、モダンな開発では常に === (厳格比較) を使うのが鉄則。

バックスラッシュ \¥

環境(Windows か Mac / Linux か)によって、同じ意味なのに見た目が変わる唯一の記号。

  • Windows: ¥(円記号)として表示されることが多い。
  • Mac / Linux: \(バックスラッシュ)として表示される。 プログラミングコード上では「同じもの(エスケープ文字)」として扱われる。
Markdown の表(Table)のコツ

可読性: 表を書くとき、見た目を整えるためにスペースを入れてもOK。

Markdown
| 名前 | 役割 |
| :--- | :---: |
| JS   | 動作 |

このように書くと、書いている時も読みやすくなる。

```javascript

Markdown(マークダウン)という書き方において、最初の```の直後に javascriptjs と書くことには、主に 2 つの大きなメリットがある。

1. 「シンタックスハイライト(Syntax Highlighting)」が効く(一番の理由)

プログラミング言語の名前を書くと、その言語のルールに合わせて予約語や文字列に色がつく。

``` のみで言語指定なしの場合:ただの白い文字になる

```
const message = "Hello World";
console.log(message);
```
JS
マークダウン白黒コード Plain Text

```javascript と書いた場合:カラフルで読みやすくなる

```javascript
const message = "Hello World";
console.log(message);
```
JS
マークダウンカラーコード Syntax Highlighting

2. コンピュータやツールに「何の言語か」を伝える

GitHub や VS Code、Notion などのツールは、この記述を見て「あ、これは JavaScript のコードだな」と判断する。

  • 検索性: 膨大なメモの中から「JavaScript のコードだけ」を探しやすくなる。
  • コピー機能: ツールによっては、言語が指定されていると「コードをコピー」ボタンが使いやすくなることがある。

基本的には小文字で書くのが一般的。

  • 長い版: ```javascript
  • 短い版: ```js (これでも正しく認識する)

もし HTML を書きたいなら ```html、 CSS なら ```css と、その時々の言語に合わせて書き換える。

# の主な3つの顔

1. Markdown(書類)の「見出し」

メモ帳や GitHub などで、文章の構造を作るための役割。

  • 書き方: # タイトル(後ろに半角スペースを入れるのがルール)
  • 効果: 文字が大きく太くなり、見出しになる。

2. プログラミング(Python, Ruby など)の「コメント」

コードの中に「自分用のメモ」を残すための役割。

  • 書き方: # ここは計算の処理です
  • 効果: コンピュータはこの行を無視するので実行されない。
  • 注意: JavaScript の場合は # ではなく // を使うので、言語によって記号が違う。

3. CSS(デザイン)の「ID(特定の場所)」

Web サイトの色などを変えるとき、特定の 1 箇所を指名する役割。

  • 書き方: #main { color: red; }
  • 効果: HTML で id="main" と名付けた場所だけを赤くする。
場面呼び方役割実例
Markdown見出し文字を大きくする# 本日の議題
プログラムコメント実行されないメモ# ここでデータを保存
CSSIDセレクタ特定の 1 箇所を指定#header { ... }

キーボードで打つときは同じだけど、以下の点だけ注意

  • Markdown の見出しとして使うときは、必ず # のあとに半角スペースを入れる。(例:# 見出し
  • プログラミングや CSS で使うときは、スペースを入れずに書くのが一般的。(例:#main
★ JavaScript について AI と話をしていたら、プログラミング用記号を表にまとめてくれたのでページにしました。コードなどは、あまり改行したくないので横スクロールが多くなりました。
口の画像国際発音記号 IPA(アメリカ発音)は私のこだわりです。
上に戻る