1.超頻出・最優先(骨組みを作る)
| 記号 | 日本語・英語 | 用途 | プログラミングでの実例 | 実例の解説 |
|---|---|---|---|---|
( ) | 丸かっこ parentheses /pəˈrɛnθəsiz/ | 関数・条件 | print("Hello") | ← 実行の合図 ← 条件の範囲 |
{ } | 波かっこ 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/ | 比較・HTML | if (age < 20) | ← 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 | ← 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/ | コードブロック | | ← 上下を 3 つずつの記号で囲むことで、中身をプログラムとして表示(※ 補足) |
--- | ハイフン(3 つ) horizontal rule /ˌhɔrəˈzɑntəl/ /rul/ | 境界線(罫線) | --- | ← 間に文字を書かずに 3 つ並べると、画面に「横線」を引く |
# | ハッシュ hash /hæʃ/ | 見出し(Markdown) ID(CSS) | # タイトル | ← 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> | [] が文字、() がリンク先 |
| 画像挿入 |  | <img src="URL" alt="説明"> | リンクの書き方の頭に ! をつけるだけ |
| 引用 | > 引用文 | <blockquote>引用文</blockquote> | 他者の発言やコードの解説を引用する時 |
| インラインコード | `code` | <code>code</code> | 文章の中で var x = 1; のように見せる |
| コードブロック | ```javascript |
<pre><code>code</code></pre> | エンジニア最重要。 複数行のコードを囲む |
| 打ち消し線 | ~~間違い~~ | <del>間違い</del> | 仕様変更などを表現する時に使う |
| チェックリスト | - [ ] タスク | (標準 HTML になし) | GitHub などの ToDo 管理で超便利 |
| 表(※ 補足) |
VS Code Preview
|
<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
|
|
記号の豆知識
||(バーティカルバー 2 本)-
「A または B」という意味。
例: if (お腹が空いた || 喉が渇いた) { コンビニに行く; }どちらか一方でも当てはまれば、コンビニに行く。
_(アンダースコア)-
プログラミングでは「スペース」が使えないルールがあるため、代わりにこれを使う。
例: login_password文字が繋がって読みづらくなるのを防ぐための「地上の架け橋」のような存在。
:(コロン)-
「左側が項目、右側が中身」というペアを作る時に使う。
例: age: 20 (年齢:20 歳)設定ファイルや、デザインを決める CSS で非常に多く登場。
- 読み方のバリエーション
-
現場や言語によって呼び方が変わることがあるので、知っておくとコミュニケーションがスムーズになる。
{ }(波かっこ): 日本の現場では「中かっこ」「ブレース」とも呼ばれる。[ ](角かっこ): 「ブラケット」と呼ぶのが一般的。!(エクスクラメーション): プログラミング文脈では短く「ノット」と読むことが多い。
(例:!=は「ノットイコール」)#(ハッシュ): 日本語では「シャープ」と呼びがちだが、海外エンジニアには「ハッシュ」や「ナンバーサイン」で通じる。
==と===の違い(重要)-
JavaScript などで出てくるこの違いは非常に重要。
==(等価演算子): 「だいたい同じ」。型が違っても変換して比較。(例:10 == "10"は true)===(厳格等価演算子): 「完全に同じ」。型も値もチェック。(例:10 === "10"は false)
▶ 実務のアドバイス: 予期せぬバグを防ぐため、モダンな開発では常に
===(厳格比較) を使うのが鉄則。 - バックスラッシュ
\と¥ -
環境(Windows か Mac / Linux か)によって、同じ意味なのに見た目が変わる唯一の記号。
- Windows:
¥(円記号)として表示されることが多い。 - Mac / Linux:
\(バックスラッシュ)として表示される。 プログラミングコード上では「同じもの(エスケープ文字)」として扱われる。
- Windows:
- Markdown の表(Table)のコツ
-
▶ 可読性: 表を書くとき、見た目を整えるためにスペースを入れてもOK。
Markdown | 名前 | 役割 | | :--- | :---: | | JS | 動作 |このように書くと、書いている時も読みやすくなる。
```javascript-
Markdown(マークダウン)という書き方において、最初の
```の直後にjavascriptやjsと書くことには、主に 2 つの大きなメリットがある。1. 「シンタックスハイライト(Syntax Highlighting)」が効く(一番の理由)
プログラミング言語の名前を書くと、その言語のルールに合わせて予約語や文字列に色がつく。
●
```のみで言語指定なしの場合:ただの白い文字になる
JS``` const message = "Hello World"; console.log(message); ```
Plain Text
●
```javascriptと書いた場合:カラフルで読みやすくなる
JS```javascript const message = "Hello World"; console.log(message); ```
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 見出し 文字を大きくする # 本日の議題プログラム コメント 実行されないメモ # ここでデータを保存CSS IDセレクタ 特定の 1 箇所を指定 #header { ... }▶ キーボードで打つときは同じだけど、以下の点だけ注意
- Markdown の見出しとして使うときは、必ず
#のあとに半角スペースを入れる。(例:# 見出し) - プログラミングや CSS で使うときは、スペースを入れずに書くのが一般的。(例:
#main)
- 書き方:
