💥 プログラマー常識力テスト！この記号、読める？打てる？（超図解追記予定）まとめ（Mac/Win完全対応）💻🧠

## はじめに 👋

プログラミングを学び始めると、様々な記号に出会います。これらの記号の名前や読み方、そしてWindowsとMacのキーボードでどのように入力するのかを知ることは、コードを理解したり、他の開発者とコミュニケーションをとったりする上で非常に重要です。

この記事では、プログラミングでよく使用される記号の読み方と、WindowsとMacのキーボードでの入力方法を詳しく解説します。

## 目次 📋

- [() 丸括弧・パーレン](#丸括弧-パーレン)
- [[] 角括弧・ブラケット](#角括弧-ブラケット)
- [{} 波括弧・ブレース](#波括弧-ブレース)
- [<> 山括弧・アングルブラケット](#lt-gt-山括弧-アングルブラケット)
- [" " ダブルクォーテーション](#ダブルクォーテーション)
- [' ' シングルクォーテーション](#シングルクォーテーション)
- [\` \` バッククォート](#バッククォート)
- [/ スラッシュ](#スラッシュ)
- [\\ バックスラッシュ](#バックスラッシュ)
- [| パイプ](#パイプ)
- [&amp; アンパサンド](#amp-アンパサンド)
- [# シャープ・ハッシュ](#シャープ-ハッシュ)
- [! エクスクラメーションマーク](#エクスクラメーションマーク)
- [? クエスチョンマーク](#クエスチョンマーク)
- [_ アンダースコア](#_-アンダースコア)
- [- ハイフン・マイナス](#ハイフン-マイナス)
- [+ プラス](#プラス)
- [* アスタリスク・アスター](#アスタリスク-アスター)
- [= イコール](#イコール)
- [% パーセント](#パーセント)
- [^ キャレット](#キャレット)
- [~ チルダ](#チルダ)
- [@ アットマーク](#アットマーク)
- [$ドル記号](#ドル記号)
- [. ドット・ピリオド](#ドット-ピリオド)
- [, カンマ](#カンマ)
- [: コロン](#コロン)
- [; セミコロン](#セミコロン)
- [複合記号](#複合記号)
- [まとめ](#まとめ)
## 各記号の詳細解説 🔍

### 丸括弧・パーレン

**記号**: `()`  
**読み方**: 丸括弧（まるかっこ）、パーレン、パレンシス、カッコ  
**英語**: Parentheses, Round brackets  

**入力方法**:
- **Windows**: `8` キーと `9` キー（シフトキーなし）
- **Mac**: `8` キーと `9` キー（シフトキーなし）

**用途**:
- 関数の引数
- 演算の優先順位の指定
- 条件分岐の条件式

```javascript
function add(a, b) {
  return a + b;
}

if (x > 10) {
  console.log("xは10より大きい");
}
```

### 角括弧・ブラケット

**記号**: `[]`  
**読み方**: 角括弧（かくかっこ）、ブラケット、スクエアブラケット  
**英語**: Square brackets, Brackets  

**入力方法**:
- **Windows**: `[` と `]` キー（シフトキーなし）
- **Mac**: `[` と `]` キー（シフトキーなし）

**用途**:
- 配列の宣言
- 配列要素へのアクセス
- オブジェクトのプロパティへのアクセス

```javascript
const fruits = ["りんご", "バナナ", "オレンジ"];
console.log(fruits[0]); // "りんご"を出力
```

### 波括弧・ブレース

**記号**: `{}`  
**読み方**: 波括弧（なみかっこ）、ブレース、中括弧（ちゅうかっこ）  
**英語**: Curly brackets, Braces  

**入力方法**:
- **Windows**: `[` と `]` キー（シフトキー押しながら）
- **Mac**: `[` と `]` キー（シフトキー押しながら）

**用途**:
- コードブロックの範囲指定
- オブジェクトリテラル
- テンプレートリテラル内の式

```javascript
function greet() {
  // この波括弧内がコードブロック
  console.log("こんにちは");
}

const person = { name: "太郎", age: 30 };
```

### 山括弧・アングルブラケット

**記号**: `<>`  
**読み方**: 山括弧（やまかっこ）、アングルブラケット  
**英語**: Angle brackets, Chevrons  

**入力方法**:
- **Windows**: `,` と `.` キー（シフトキー押しながら）
- **Mac**: `,` と `.` キー（シフトキー押しながら）

**用途**:
- HTMLタグ
- ジェネリック型の指定
- 比較演算子（不等号）

```html
<div>これはHTMLタグです</div>
```

```typescript
// TypeScriptでのジェネリック型の指定
function getFirst<T>(arr: T[]): T {
  return arr[0];
}
```

### ダブルクォーテーション

**記号**: `""`  
**読み方**: ダブルクォーテーション、二重引用符（にじゅういんようふ）  
**英語**: Double quotes  

**入力方法**:
- **Windows**: `2` キー（シフトキー押しながら）
- **Mac**: `'` キー（シフトキー押しながら）

**用途**:
- 文字列の表現

```javascript
const message = "こんにちは、世界！";
```

### シングルクォーテーション

**記号**: `''`  
**読み方**: シングルクォーテーション、引用符（いんようふ）  
**英語**: Single quotes  

**入力方法**:
- **Windows**: `7` キー（シフトキー押しながら）
- **Mac**: `'` キー（シフトキーなし）

**用途**:
- 文字列の表現（言語によってはダブルクォートと使い分ける）

```javascript
const name = 'John';
```

### バッククォート

**記号**: `` ` ``  
**読み方**: バッククォート、バックティック、グレイヴアクセント  
**英語**: Backtick, Backquote, Grave accent  

**入力方法**:
- **Windows**: `@` キーの左（シフトキーなし）、または `Shift + @`
- **Mac**: `~` キー（シフトキーなし）

**用途**:
- テンプレートリテラル（JavaScript）
- コードブロック（Markdown）

```javascript
const name = "太郎";
console.log(`こんにちは、${name}さん！`);
```

### スラッシュ

**記号**: `/`  
**読み方**: スラッシュ、斜線（しゃせん）、フォワードスラッシュ  
**英語**: Slash, Forward slash  

**入力方法**:
- **Windows**: `/` キー
- **Mac**: `/` キー

**用途**:
- パスの区切り（URL、ファイルパス）
- 除算演算子
- コメント（//）

```javascript
// これはコメントです
const result = 10 / 2; // 除算

const url = "https://qiita.com/";
```

### バックスラッシュ

**記号**: `\`  
**読み方**: バックスラッシュ、円記号（えんきごう）  
**英語**: Backslash  

**入力方法**:
- **Windows**: `\` キー（日本語キーボードでは「¥」と表記されていることが多い）
- **Mac**: `¥` キー

**用途**:
- エスケープシーケンス
- Windowsのファイルパスの区切り

```javascript
const text = "彼は\"プログラマー\"です。"; // ダブルクォートをエスケープ
const windowsPath = "C:\\Users\\Username\\Documents";
```

### パイプ

**記号**: `|`  
**読み方**: パイプ、縦線（たてせん）、バーティカルバー  
**英語**: Pipe, Vertical bar  

**入力方法**:
- **Windows**: `\` キー（シフトキー押しながら）
- **Mac**: `\` キー（シフトキー押しながら）または `Option + ¥`

**用途**:
- ビット演算のOR
- 正規表現の選択（OR）
- シェルでのパイプ処理

```javascript
const result = 5 | 3; // ビット演算のOR

const regex = /apple|orange/; // appleまたはorangeにマッチ
```

### アンパサンド

**記号**: `&`  
**読み方**: アンパサンド、アンド  
**英語**: Ampersand  

**入力方法**:
- **Windows**: `6` キー（シフトキー押しながら）
- **Mac**: `6` キー（シフトキー押しながら）

**用途**:
- ビット演算のAND
- 論理演算子（&&）
- HTMLでの特殊文字の表現（&lt; など）

```javascript
const result = 5 & 3; // ビット演算のAND

if (x > 0 && y > 0) {
  // xとyの両方が0より大きい場合
}
```

### シャープ・ハッシュ

**記号**: `#`  
**読み方**: シャープ、ハッシュ、ナンバーサイン  
**英語**: Hash, Number sign, Pound sign  

**入力方法**:
- **Windows**: `3` キー（シフトキー押しながら）
- **Mac**: `3` キー（シフトキー押しながら）

**用途**:
- コメント（多くのスクリプト言語）
- CSSのID選択子
- プライベートクラスメンバー（JavaScript）

```python
# Pythonのコメント
```

```css
#header {
  color: blue;
}
```

```javascript
class Person {
  #privateField; // プライベートフィールド
}
```

### エクスクラメーションマーク

**記号**: `!`  
**読み方**: エクスクラメーションマーク、感嘆符（かんたんふ）、ビックリマーク  
**英語**: Exclamation mark, Bang  

**入力方法**:
- **Windows**: `1` キー（シフトキー押しながら）
- **Mac**: `1` キー（シフトキー押しながら）

**用途**:
- 論理否定（NOT）
- 条件式
- 非null表明演算子（TypeScript）

```javascript
if (!isValid) {
  // isValidがfalseの場合
}

const result = x !== y; // xとyが等しくない場合true
```

### クエスチョンマーク

**記号**: `?`  
**読み方**: クエスチョンマーク、疑問符（ぎもんふ）  
**英語**: Question mark  

**入力方法**:
- **Windows**: `/` キー（シフトキー押しながら）
- **Mac**: `/` キー（シフトキー押しながら）

**用途**:
- 三項演算子
- オプショナルチェーン
- Nullish合体演算子（??）

```javascript
// 三項演算子
const status = age >= 18 ? "大人" : "子供";

// オプショナルチェーン
const name = user?.profile?.name;
```

### アンダースコア

**記号**: `_`  
**読み方**: アンダースコア、アンダーバー、下線（かせん）  
**英語**: Underscore  

**入力方法**:
- **Windows**: `-` キー（シフトキー押しながら）
- **Mac**: `-` キー（シフトキー押しながら）

**用途**:
- 変数名やファイル名の区切り
- プライベート変数の慣例的な命名
- 数値リテラルの桁区切り（多くの言語）

```javascript
const user_name = "john_doe";

const _privateVar = 42; // 慣例的なプライベート変数

const billion = 1_000_000_000; // 桁区切り
```

### ハイフン・マイナス

**記号**: `-`  
**読み方**: ハイフン、マイナス、ダッシュ  
**英語**: Hyphen, Minus, Dash  

**入力方法**:
- **Windows**: `-` キー
- **Mac**: `-` キー

**用途**:
- 減算演算子
- 負の数の表現
- CSSのプロパティ名（ケバブケース）

```javascript
const result = 10 - 5; // 減算

const negativeNumber = -42; // 負の数
```

```css
.container {
  background-color: #f0f0f0;
  border-radius: 5px;
}
```

### プラス

**記号**: `+`  
**読み方**: プラス  
**英語**: Plus  

**入力方法**:
- **Windows**: `;` キー（シフトキー押しながら）
- **Mac**: `;` キー（シフトキー押しながら）

**用途**:
- 加算演算子
- 文字列の連結
- 単項プラス演算子（数値への変換）

```javascript
const sum = 5 + 3; // 加算

const greeting = "こんにちは" + "世界"; // 文字列連結

const numStr = "42";
const num = +numStr; // 文字列から数値への変換
```

### アスタリスク・アスター

**記号**: `*`  
**読み方**: アスタリスク、アスター、星印（ほしじるし）  
**英語**: Asterisk, Star  

**入力方法**:
- **Windows**: `:` キー（シフトキー押しながら）
- **Mac**: `:` キー（シフトキー押しながら）

**用途**:
- 乗算演算子
- ポインタ（C言語など）
- ワイルドカード
- JSDocやMarkdownなどでの強調

```javascript
const product = 5 * 3; // 乗算

// JSDocでの使用例
/**
 * これは *重要な* ドキュメントです
 */
```

### イコール

**記号**: `=`  
**読み方**: イコール、等号（とうごう）  
**英語**: Equal sign, Equals  

**入力方法**:
- **Windows**: `-` キー（シフトキー押しながら）
- **Mac**: `-` キー（シフトキー押しながら）

**用途**:
- 変数への代入
- 等価演算子（==, ===）
- デフォルト引数の指定

```javascript
let x = 10; // 代入

if (x === 10) { // 厳密等価演算子
  console.log("xは10です");
}

function greet(name = "ゲスト") { // デフォルト引数
  console.log(`こんにちは、${name}さん`);
}
```

### パーセント

**記号**: `%`  
**読み方**: パーセント、パーセントサイン  
**英語**: Percent sign  

**入力方法**:
- **Windows**: `5` キー（シフトキー押しながら）
- **Mac**: `5` キー（シフトキー押しながら）

**用途**:
- 剰余演算子（余り）
- 文字列フォーマット（一部の言語）

```javascript
const remainder = 10 % 3; // 10÷3の余り（1）

// Pythonでの文字列フォーマット例
// result = "Name: %s, Age: %d" % (name, age)
```

### キャレット

**記号**: `^`  
**読み方**: キャレット、ハット、カラット  
**英語**: Caret, Hat  

**入力方法**:
- **Windows**: `6` キー（シフトキー押しながら）
- **Mac**: `6` キー（シフトキー押しながら）

**用途**:
- ビット演算のXOR
- 累乗演算子（一部の言語）
- 正規表現での先頭一致

```javascript
const result = 5 ^ 3; // ビット演算のXOR

// 正規表現での先頭一致
const regex = /^Hello/; // 「Hello」で始まる文字列にマッチ
```

### チルダ

**記号**: `~`  
**読み方**: チルダ、ティルダ、波ダッシュ  
**英語**: Tilde  

**入力方法**:
- **Windows**: `^` キー（シフトキー押しながら）
- **Mac**: `~` キー（シフトキー押しながら）

**用途**:
- ビット反転（ビットNOT）
- 近似値を表す
- ホームディレクトリのパス

```javascript
const result = ~5; // ビット反転（-6になる）

// Unixシステムでのホームディレクトリ
// "~/Documents"
```

### アットマーク

**記号**: `@`  
**読み方**: アットマーク、アット  
**英語**: At sign, At  

**入力方法**:
- **Windows**: `P` キー（シフトキー押しながら）
- **Mac**: `@` キー（シフトキーなし）

**用途**:
- メールアドレス
- デコレータ（Python、TypeScriptなど）
- SNSでのユーザーメンション

```typescript
// TypeScriptのデコレータ
@Component({
  selector: 'app-root',
  template: '&lt;h1&gt;Hello World&lt;/h1&gt;'
})
export class AppComponent {}
```

### ドル記号

**記号**: `$`  
**読み方**: ドル記号、ダラー  
**英語**: Dollar sign  

**入力方法**:
- **Windows**: `4` キー（シフトキー押しながら）
- **Mac**: `4` キー（シフトキー押しながら）

**用途**:
- 変数（シェル、PHP、jQuery）
- 正規表現での末尾一致
- テンプレートリテラル内の変数参照

```javascript
// jQueryでの要素選択
// $("#header")

// PHPでの変数
// $name = "John";

// 正規表現での末尾一致
const regex = /world$/; // 「world」で終わる文字列にマッチ
```

### ドット・ピリオド

**記号**: `.`  
**読み方**: ドット、ピリオド、句点（くてん）  
**英語**: Dot, Period, Full stop  

**入力方法**:
- **Windows**: `.` キー
- **Mac**: `.` キー

**用途**:
- オブジェクトのプロパティアクセス
- 小数点
- ファイル拡張子の区切り

```javascript
const user = { name: "太郎" };
console.log(user.name); // プロパティアクセス

const pi = 3.14; // 小数点

// ファイル名: script.js
```

### カンマ

**記号**: `,`  
**読み方**: カンマ、コンマ  
**英語**: Comma  

**入力方法**:
- **Windows**: `,` キー
- **Mac**: `,` キー

**用途**:
- 配列やオブジェクトの要素の区切り
- 関数の引数の区切り
- ループ内の複数式

```javascript
const fruits = ["リンゴ", "バナナ", "オレンジ"];

function add(a, b, c) {
  return a + b + c;
}

for (let i = 0, j = 10; i < j; i++, j--) {
  // 複数の変数を使ったループ
}
```

### コロン

**記号**: `:`  
**読み方**: コロン  
**英語**: Colon  

**入力方法**:
- **Windows**: `:` キー
- **Mac**: `:` キー

**用途**:
- オブジェクトのキーと値の区切り
- 三項演算子
- CSS擬似クラス
- ラベル付きブロック（一部の言語）

```javascript
const person = { name: "太郎", age: 30 }; // キーと値の区切り

const status = isAdult ? "大人" : "子供"; // 三項演算子
```

```css
button:hover {
  background-color: blue;
}
```

### セミコロン

**記号**: `;`  
**読み方**: セミコロン  
**英語**: Semicolon  

**入力方法**:
- **Windows**: `;` キー
- **Mac**: `;` キー

**用途**:
- 文の終端（多くの言語）
- for文内の式の区切り

```javascript
let x = 10; // 文の終端

for (let i = 0; i < 10; i++) {
  // forループ内の式の区切り
}
```

## 複合記号

プログラミングでは、単一の記号だけでなく、複数の記号を組み合わせた複合記号もよく使用されます。

### 代表的な複合記号

#### `==` (等価演算子)
**読み方**: イコールイコール、等価演算子
```javascript
if (x == y) {
  // xとyが同じ値の場合（型変換あり）
}
```

#### `===` (厳密等価演算子)
**読み方**: イコールイコールイコール、厳密等価演算子
```javascript
if (x === y) {
  // xとyが同じ値かつ同じ型の場合
}
```

#### `!=` (不等価演算子)
**読み方**: ノットイコール、不等価演算子
```javascript
if (x != y) {
  // xとyが異なる値の場合（型変換あり）
}
```

#### `!==` (厳密不等価演算子)
**読み方**: ノットイコールイコール、厳密不等価演算子
```javascript
if (x !== y) {
  // xとyが異なる値または異なる型の場合
}
```

#### `&&` (論理AND)
**読み方**: アンドアンド、論理AND
```javascript
if (x > 0 && y > 0) {
  // xとyの両方が0より大きい場合
}
```

#### `||` (論理OR)
**読み方**: パイプパイプ、論理OR
```javascript
if (x > 0 || y > 0) {
  // xまたはyのいずれかが0より大きい場合
}
```

#### `++` (インクリメント)
**読み方**: プラスプラス、インクリメント
```javascript
let i = 0;
i++; // iの値を1増やす
```

#### `--` (デクリメント)
**読み方**: マイナスマイナス、デクリメント
```javascript
let i = 10;
i--; // iの値を1減らす
```

#### `+=` (加算代入)
**読み方**: プラスイコール、加算代入
```javascript
let sum = 10;
sum += 5; // sum = sum + 5 と同じ
```

#### `-=` (減算代入)
**読み方**: マイナスイコール、減算代入
```javascript
let value = 10;
value -= 3; // value = value - 3 と同じ
```

#### `*=` (乗算代入)
**読み方**: アスタリスクイコール、乗算代入
```javascript
let product = 4;
product *= 2; // product = product * 2 と同じ
```

#### `/=` (除算代入)
**読み方**: スラッシュイコール、除算代入
```javascript
let quotient = 10;
quotient /= 2; // quotient = quotient / 2 と同じ
```

#### `%=` (剰余代入)
**読み方**: パーセントイコール、剰余代入
```javascript
let remainder = 10;
remainder %= 3; // remainder = remainder % 3 と同じ
```

#### `=>` (アロー)
**読み方**: イコールアロー、アロー、ファットアロー
```javascript
// アロー関数
const add = (a, b) => a + b;
```

#### `??` (Nullish合体演算子)
**読み方**: クエスチョンクエスチョン、Nullish合体演算子
```javascript
const name = username ?? "ゲスト"; // usernameがnullまたはundefinedの場合、"ゲスト"を使用
```

#### `?.` (オプショナルチェーン)
**読み方**: クエスチョンドット、オプショナルチェーン
```javascript
const userName = user?.profile?.name; // userまたはprofileがnullまたはundefinedの場合、undefinedを返す
```

## まとめ 📝

プログラミングで使用される記号には様々な種類があり、それぞれが特定の目的を持っています。これらの記号の読み方と入力方法を知ることで、コードを読み書きする際のコミュニケーションがスムーズになります。

この記事で紹介した記号はプログラミングでよく使用されるものですが、言語によって使い方や意味が異なる場合もあります。特定の言語を学ぶ際には、その言語固有の記号の使い方についても理解を深めるとよいでしょう。

プログラミングを学ぶ過程では、これらの記号に慣れていくことが重要です。実際にコードを書いて試すことで、自然と記号の使い方が身についていきます。

皆さんのプログラミング学習が、この記事によって少しでも楽になれば幸いです！ 🚀

## 参考リンク 🔗

- [ASCII表](https://www.asciitable.com/)
- [MDN Web Docs - 演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators)

---

記事に間違いや追加してほしい内容がありましたら、コメントでお知らせください！ 👍