初心者向け

初心者のための用語辞典:プログラミングでよく出る難しい言葉をやさしく解説

初心者のための用語辞典:プログラミングでよく出る難しい言葉をやさしく解説

「API?非同期?フレームワーク?」——まずは言葉から怖くなくしよう!
各用語は 一言定義つまずき の順で、コピペできるミニコード付き。末尾に 学習の次の一歩も案内しています。

A. コードの基本

変数 / 定数(variable / constant)

値を入れる変数は中身を変えられ、定数は変えない約束。

// JavaScript
let count = 0;    // 変数
const TAX = 0.1;  // 定数(上書き禁止)

つまずき:スコープ(届く範囲)で同名がかぶると混乱します。

型(type)

「これは数?文字?」というデータの種類。言語により厳しさ(静的/動的)が違う。

// Java
int n = 10;      // 整数
String s = "Hi"; // 文字列

つまずき:型変換(数 ⇄ 文字)で意図しない計算結果になりがち。

関数 / メソッド(function / method)

入力を受けて処理し、結果を返す小さなプログラム」。メソッドは「オブジェクトにぶら下がる関数」。

// JS
function add(a, b){ return a + b; }
add(2,3); // 5

パラメータ(定義側)」と「引数(呼び出し側)」を混同しない。

オブジェクト / クラス / OOP

関連するデータ+処理を1つにまとめる考え方。クラスは設計図、オブジェクトは実体。

// Java
class User { String name; void hello(){ System.out.println("Hi "+name); } }
User u = new User(); u.name = "Masa"; u.hello();

用語:カプセル化/継承/ポリモーフィズムはOOPの3本柱。

非同期(asynchronous)

待ち時間(通信など)の間に他の処理を進められるやり方。

// JS: async/await
async function getUser(){
  const res = await fetch('/api/user');
  return await res.json();
}

並行/並列スレッドと混同しやすい。非同期=必ずしも並列ではない。

例外 / 例外処理(exception / try-catch)

想定外のエラーが起きたときに処理を安全に中断・回復する仕組み。

// Java
try { Files.readString(Path.of("config.txt")); }
catch (IOException e) { System.err.println("設定が読めません"); }

握りつぶさず、原因をログに残す。ユーザーには丁寧なメッセージを。

正規表現(regex)

文字のパターンで検索・置換する記法。

// JS: メールっぽい文字列をざっくり検出
/.+@.+\..+/.test("hi@example.com") // → true

過度に複雑にしない。テスト用文字列で小さく試す。

B. Webの基礎

HTTP / HTTPS

ブラウザとサーバの会話ルール。HTTPSは暗号化して安全。

GET /index.html HTTP/1.1
Host: example.com

フォームやクリップボードAPIはHTTPS前提が多い。

API / REST

アプリ同士が決まりごとで情報をやりとりする窓口。RESTはURLとHTTPメソッドで操作を表す考え方。

# 例:/users を操作
GET /users       # 取得
POST /users      # 作成
PUT /users/1     # 更新
DELETE /users/1  # 削除

CRUD(Create/Read/Update/Delete)と対応づけて覚える。

DOM / CSS セレクタ

ブラウザがHTMLを木構造として扱う仕組み(DOM)。CSSセレクタはその木から要素を選ぶ。

// JS: id="msg" を書き換える
document.getElementById('msg').textContent = 'Hello';

特異性(specificity)が強いと上書きしにくい。クラス中心で設計を。

CORS

他サイトのAPIを使うときの安全ルール。サーバ側が許可ヘッダを返す必要あり。

Access-Control-Allow-Origin: https://your.site

ローカルで動くのに本番で失敗→許可オリジンの設定漏れが定番。

SPA / SSR

SPAはページ遷移をJSで行う単一ページ型。SSRはサーバでHTMLを作って返す。

SEOや初期表示はSSR有利。用途で使い分け。

C. データ/DB

JSON / YAML / XML

データの表現形式。JSONはブラウザと相性◎、YAMLは設定ファイルでよく使う。

// JSON
{"name":"Masa","age":21}

YAMLはインデント命。タブ/スペース混在でエラーに。

SQL / RDB

行と列で管理する関係データベースを操作する言語。

SELECT name FROM users WHERE age >= 20 ORDER BY age DESC;

インデックス(検索の近道)とトランザクション(処理のひとまとめ)は最重要。

NoSQL / キャッシュ

RDB以外のDB(文書型・キー値など)。キャッシュは結果の一時保存で高速化。

正解は1つじゃない。読み書き頻度/一貫性/スキーマで選ぶ。

D. ツール/開発プロセス

IDE / エディタ

IDEは開発に必要な機能全部入り(デバッガ等)。VS Codeは軽快エディタ+拡張で強化。

導入手順:VS Codeの入れ方Eclipseで最初のJavaプロジェクト

Git / GitHub

ファイルの履歴管理ツール。GitHubはその置き場所

git init
git add .
git commit -m "first"
git remote add origin URL
git push -u origin main

最短ガイド:Gitの超入門

ビルド / 依存管理(Maven/Gradle/npm/pip)

コードを動く形にまとめるのがビルド。他人のライブラリを使うのが依存管理。

# Node.js
npm init -y
npm install axios

Javaなら:Maven/Gradle超入門

CI/CD

コードをpushすると自動でテスト・ビルド・デプロイまで回る仕組み。

まずは小さく:テスト→ビルドだけでも価値が大きい。

Lint / フォーマッタ

Lintは品質チェック、フォーマッタは自動整形。保存時に実行すると楽。

// VS Code settings.json(例)
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

E. 設計/アーキテクチャ

フレームワーク vs ライブラリ

ライブラリはあなたが呼ぶ道具フレームワーク呼ばれる側(流れを握る)。

自由度はライブラリ>フレームワーク。学習コストは逆になりがち。

MVC / 責務分離

UI(View)、ロジック(Controller)、データ(Model)を分ける考え方。

1ファイルに全部書かない。役割ごとに場所を決める。

ステートレス

サーバが前回の状態を覚えない作り。スケールしやすい。

ログイン状態はトークンや外部セッションで扱う。

依存関係 / DI

部品同士の「頼り合い」。DIは外から部品を差し込むことで結合をゆるくする。

F. 計算・アルゴリズム

アルゴリズム / データ構造

解き方の手順(アルゴリズム)と、データの置き方(データ構造)。

// JS: スタック(後入れ先出し)
const stack = [];
stack.push(1); stack.push(2); // [1,2]
stack.pop(); // 2

計算量(Big-O)

データが増えたときに処理がどれだけ重くなるかの目安。

// O(n): 配列の合計
let sum = 0; for (const x of arr) sum += x;

ガーベジコレクション

不要になったメモリを自動回収する仕組み。Java/JSは自動、Cは手動に近い。

学習の次の一歩(おすすめルート)

  1. VS Code を導入(日本語化・拡張・保存時整形)
  2. Progateで概念を俯瞰 → ドットインストールで手を慣らす
  3. 模写コーディング(Codejump)→ 自作LP を1週間で完成
  4. Gitの超入門(学習ログを残す)
  5. ビルドと依存管理(チーム開発の入口)

著者:まーくん|更新日:2025-09-07

はじめてのプログラミング学習ロードマップ:VS Code導入 → Progate → ドットインストール → 模写コーディング → 自作LP → 就職/転職

はじめてのプログラミング学習ロードマップ

これから始める人向けに、最短で“作れる人”になるための流れを一本化。VS Code導入Progateドットインストール模写コーディング(Codejump)自作LP/サイト(AI活用で課題出し)→ 就職/転職 の順に、“何を・どのくらい・どう評価するか”まで具体化します。

VS Code Progate基礎固め ドットインストール手を動かす 模写(Codejump) 自作LP/サイト→応募
学びの順番を決めるだけで、迷いが激減します。

このロードマップで得られること

  • 学習を順番化し、迷いを0にする
  • “見て終わり”を防ぎ、必ず手が動く状態にする
  • ポートフォリオ(面接で見せられる成果物)が手元に残る

Step 0:VS Code を導入(最短10分)

まずは道具を整えます。VS Code は無料・軽量・拡張が豊富。初心者向け VS Code の入れ方を見ながら、日本語化・おすすめ拡張・保存時フォーマットまで終わらせましょう。

  • 最低限の拡張:Japanese Language Pack / Prettier / GitLens
  • Git も同時に使えるとベスト:Git超入門

Step 1:Progateで基礎固め(概念を一気に掴む)

Progate は図解+スライドで概念を素早く掴むのに最適。HTML/CSS/JavaScript(もしくはPython/Java)など、やりたい分野の道筋を一気に俯瞰しましょう。

  • 狙い:用語・全体像・代表的な文法を“覚える”ではなく見渡す
  • 目安:1〜2週間で2コース以上(メモ取り推奨)
  • アウトプット:重要語の1行定義をノート化(例:DOM=HTMLをツリーとして扱う仕組み)
  

ダウンロードはここから

Step 2:ドットインストールで“手”を育てる(短時間×反復)

ドットインストールは3分動画で“手を動かす習慣”がつきます。毎日2〜3本ずつでOK。止めて真似して打つ→詰まったら10秒戻す、を繰り返します。

  • 狙い:タイピングで迷わない指を作る(コピペでは伸びません)
  • 目安:1〜2週間、毎日30〜45分
  • アウトプット:やったことをそのままGitでコミット(学習ログが職歴の代わりになります)
  

ダウンロードはここから

Step 3:模写コーディング(Codejump推奨)

模写は設計目線を育てます。Codejump は学習向けに作例が整理されていて難易度調整しやすいのが利点。

  1. 作例を1つ選ぶ → まず完成イメージのスクショを保存
  2. 骨組み(HTML)→ 見た目(CSS)→ 動き(必要ならJS)の順で作る
  3. Figma/DevToolsで余白・フォント・色を計測して合わせる
  4. できたらBefore/Afterの画像をREADMEに並べる

コツ:スマホ幅→PC幅のモバイルファーストで作ると崩れにくい。

  ここからいけるよ!

Step 4:自作LP/ホームページを作る(AIで課題を出してもらう)

いきなり“完全オリジナル”はハード。まずはテーマを1つ決める(例:カフェLP、ポートフォリオ、架空サービス)。AIに要件定義を手伝ってもらい、短いスプリントで小さく作って小刻みに改善します。

AIへの依頼テンプレ(コピペOK)

あなたはウェブ制作の講師です。初心者向けに、1週間で完成できるランディングページ課題を出してください。
制約:HTML/CSS/プレーンJSのみ。長いアニメは禁止。スマホファースト。
出力:
1) ペルソナとサイト目的
2) 必要セクション(見出しと要素)
3) ワイヤーフレームのテキスト説明
4) 色・フォントの提案(Google Fonts)
5) 完成チェックリスト(アクセシビリティ/表示速度含む)

完成させるためのチェックリスト

  • 目的(1行)が冒頭に書ける
  • CTA(お問い合わせ/申込)が目立つ
  • スマホ幅(375px)で崩れない
  • Lighthouse で Performance 80+ / A11y 90+
  • READMEに機能・スクショ・学びを記載
  • 無料ホスティング(Vercel/Netlify等)にデプロイ済み

Step 5:作品を“職歴”に変える(就職/転職)

面接は作品×説明力で戦えます。3点セットを用意しましょう。

  1. GitHubリンク(コミット履歴で継続を示す)
  2. デプロイURL(スマホで開ける実物)
  3. README(目的/工夫/大変だった点/今後の改善)

READMEの雛形(コピペOK)

# プロジェクト名
- 目的(1行): 例)カフェの来店予約を増やすLP
- 役割: デザイン/コーディング/テスト
- 期間: 7日
- 技術: HTML/CSS/JS, Git, Lighthouse

## スクリーンショット
- Before(模写元/参考): 画像URL
- After(完成): 画像URL

## こだわり・工夫
- 例)ファーストビューのLCPを2.0s以下に最適化(画像の遅延読み込み)

## 難しかった点と解決
- 例)ヘッダー固定によるレイアウトずれ → sticky + padding-top で解決

## 今後の改善
- 例)フォームのバリデーション強化、アクセシビリティ改善

面接では「作り直すなら何を変えるか」を話せると評価が上がります。

学習スケジュール例(8週間)

Week 1

  • VS Code導入・日本語化・拡張
  • Git初回設定・学習ログ用リポジトリ作成

Week 2–3

  • Progateで基礎2コース
  • 用語の1行定義ノート

Week 4–5

  • ドットインストール毎日30–45分
  • 学習ログを毎日コミット

Week 6

  • Codejumpで模写1本完走
  • Before/AfterでREADME作成

Week 7–8

  • AIで課題をもらい自作LP完成
  • デプロイ→応募開始

よくあるつまずきと回避策

  • 動画を見て満足 → 毎回完了コミットを1つ残す(ログ=資産)
  • 完璧主義 → 小さく出す。LPは1週間で“良い未完成”を公開
  • 環境で迷子 → VS Code記事をブックマークして戻る / つまずきはREADMEに記録

FAQ

Progateとドットインストールは両方必要?

役割が違います。Progate=概念の俯瞰、ドットインストール=手を動かす練習。両方やると定着が早いです。

模写は何本やればいい?

最低1本完走。余裕があれば2本目で難易度を少し上げ、最後に自作LPへ進みます。

バックエンドをしたい場合は?

このロードマップの後に、Node.js/Python/Javaの基礎→簡単なAPI→フォーム送信のバックエンド化へ進むと良いです。

著者:まーくん|更新日:2025-09-07

初心者向けVS Codeの入れ方:Windows/Macの完全ガイド

最短10分で完了! 初心者向け VS Code の入れ方 Windows / Mac の手順を図で解説

「まずは道具を整える」が最短ルート。Visual Studio Code(VS Code)は軽快で拡張も豊富。ここでは WindowsmacOS の導入、日本語化おすすめ拡張初期設定Hello World までを迷わず終わらせます。

事前に知っておくこと

  • VS Codeは無料・軽量・拡張が豊富なエディタです(IDEではありません)。
  • 各言語を動かすには、別途実行環境(例:Node.js/Python/Javaなど)が必要です。
  • 公式:https://code.visualstudio.com/(ダウンロードはここから)
インストールの流れ(Windows/Mac共通)
ダウンロード インストール 日本語化 初期設定

Windowsに入れる(最短)

  1. 公式サイトへ:code.visualstudio.comWindows x64 をクリック。
  2. ダウンロードした VSCodeUserSetup-x64-*.exe を起動。
    セットアップでは次のチェックを推奨
    • Add “Open with Code” action to context menu(右クリックに追加)
    • Add to PATH(コマンドラインから code を使える)
    • デスクトップにショートカットを作成(任意)
  3. 完了後、スタートメニューから VS Code を起動。
インストールに失敗する/権限がない場合

管理者権限が必要な環境では、システム版ではなくユーザーインストーラーを使うと通りやすいです。

Macに入れる(最短)

  1. 公式サイトへ:code.visualstudio.commacOS をクリック(Universal版)。
  2. ダウンロードした .dmg を開き、Visual Studio Code.appApplications へドラッグ。
  3. 初回起動でブロックされたら:システム設定 → プライバシーとセキュリティ で「このまま開く」。
  4. ターミナルから code を使えるようにする:
    VS Codeで Cmd + Shift + P → 「Shell Command: Install ‘code’ command in PATH」を実行。

日本語化と言語パック

  1. 左サイドバーの拡張機能(四角いアイコン)を開く。
  2. Japanese Language Pack for Visual Studio Code を検索してインストール
  3. 右下の再起動ボタン、または「表示言語を変更」で日本語に切替。

最初にやる初期設定(コピペ可)

以下は「設定(JSON)」に追記するだけでOK。
コマンドパレットで 基本設定: 設定 (JSON) を開く → 右側のJSONに貼り付け。

{
  "editor.fontSize": 15,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.rulers": [80, 100],
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 800,
  "editor.renderWhitespace": "selection",
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "explorer.confirmDelete": false,
  "workbench.startupEditor": "newUntitledFile"
}

※ 迷ったら「ファイル → ユーザー設定 → 設定」からGUIで同様に変更できます。

初心者に効くおすすめ拡張

Japanese Language Pack

UIを日本語化。初回に入れておくと迷わない。

Prettier

コード自動整形。保存時フォーマットにするとキレイが続く。

ESLint

JavaScriptの品質チェック。チュートリアルに沿って初期化。

Python

Pythonを書くなら必須。Lint/デバッグも一括対応。

Java Extension Pack

Javaの開発向け(Language Support, Debuggerなど)。

GitLens

誰がいつどこを変更したかを可視化。学習にも役立つ。

保存時に自動整形(Prettier)
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Hello World(保存→実行)

ここではインストール直後でも試せる HTML を例にします(ブラウザで動く)。

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<title>Hello VS Code</title>
<h1>Hello VS Code!</h1>
<p>編集→保存→ブラウザで開けばOK。</p>
  1. VS Codeでフォルダを作成(例:hello-vscode)。
  2. 上のコードを index.html として保存。
  3. エクスプローラーで右クリック→既定のブラウザで開く
    Live Server拡張を入れると自動リロードで快適)

※ Python や Node.js を実行したい場合は、それぞれ Python / Node.js を別途インストールしてから実行してください。

よくあるつまずき

  • code コマンドが使えない:Macは「Shell Command: Install ‘code’ command in PATH」を実行。Windowsはインストーラーで「Add to PATH」を有効にして再起動。
  • 日本語が文字化け:右下のエンコーディングを UTF-8 に切替。保存時に再エンコード可。
  • 拡張がインストールできない:ネットワーク/プロキシ設定を確認(設定で「proxy」を検索)。
  • フォントが見づらいeditor.fontSizeeditor.lineHeight を上げる。等幅フォントの導入も効果的。

次に読むと効率が上がる記事

FAQ

VS Code と Visual Studio は別物?

別物です。VS Codeは軽量エディタ、Visual StudioはWindows向けの大型IDEです。初心者にはVS Codeが扱いやすいです。

どの言語を始めるのが良い?

WebならJavaScript、データ分析ならPython、業務システムならJavaが定番。VS Codeはどれにも対応できます。

著者:まーくん|更新日:2025-09-04

【保存版】Eclipseのインストール手順(JDK設定まで)Mac/Windows対応

EclipseのインストールからJDK設定、JAVA_HOME / PATHの正しい通し方まで。Mac/Windowsごとに手順を分け、つまずきポイントとチェックリストも付けました。

この記事のゴールと前提

  
  • Mac/WindowsでJDKを正しく導入し、JAVA_HOME/Pathを設定できる
  • Eclipse(Pleiades All in One)を迷わず入れられる
  • 導入直後にHello, World!を実行できる

配布元:JDKはOracle公式、Eclipseは日本語化済みのPleiades(willbrains.jp)。WindowsのJDKは Oracle Downloads から。

Mac編(JDK → 環境変数 → Eclipse)

1. JDKのインストール

  1. OracleのJDKダウンロードにアクセスし、macOSを選択。
  2. CPUに合わせてx64またはaarch64(Apple Silicon: M1/M2/M3)を選び、.dmgをダウンロード。
  3. ダウンロードした.dmgを開き、ウィザードに従ってインストール。
補足:迷ったらLTS版(例:JDK 21)を選んでおくと安定します。

2. 環境変数の設定(JAVA_HOME/PATH)

Macは標準の/usr/libexec/java_homeを使うと安全です(複数JDKの切替に強い)。

# zsh(標準)を想定
echo 'export JAVA_HOME=$(/usr/libexec/java_home -v 21)' >> ~/.zshrc
echo 'export PATH="$JAVA_HOME/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

# 確認
/usr/libexec/java_home -V
echo $JAVA_HOME
java -version
javac -version

3. Eclipse(Pleiades)導入

  1. Pleiades公式にアクセスし、Mac版をダウンロード。
  2. ダウンロードしたファイルをダブルクリックして展開し、アプリをApplicationsへドラッグ&ドロップ
  3. 初回は警告が出る場合あり。右クリック → 開くで回避。

4. 動作確認(Eclipse側)

  1. Eclipse起動 → Preferences > Java > Installed JREsでJDKを追加し、デフォルトにチェック。
  2. Java > Compilerでコンプライアンスを21に。
  3. File > New > Java Project → クラスを作成し、次のコードを実行。
public class Hello {
  public static void main(String[] args) {
    System.out.println("Hello, World!");
  }
}

Windows編(JDK → 環境変数 → Eclipse)

1. JDKのインストール

  1. Oracle Downloadsへ。
  2. Windows x64用のインストーラ(.msi / .exe)をダウンロード。
  3. 管理者権限で実行し、指示に従ってインストール。

2. 環境変数の設定(JAVA_HOME/PATH)

GUIでの設定(推奨)

  1. スタートメニューで「環境変数」と検索 → システム環境変数の編集環境変数(N)…
  2. システム環境変数新規(N)…
    変数名:JAVA_HOME
    変数値:C:\Program Files\Java\jdk-21(例。binは付けない
  3. Pathを選択 → 編集新規%JAVA_HOME%\binを追加。
  4. OKで閉じて新しいコマンドプロンプトを開く。

コマンドで一括設定(管理者)

:: JDKの場所に合わせて変更してください
setx /M JAVA_HOME "C:\Program Files\Java\jdk-21"
setx /M PATH "%PATH%;%JAVA_HOME%\bin"

確認コマンド

echo %JAVA_HOME%
java -version
javac -version

3. Eclipse(Pleiades)導入

  1. Pleiades公式Windows版をダウンロード。
  2. zipを解凍し、C:\pleiades\など日本語や空白のないパスへ配置。
  3. eclipse.exeを起動。ワークスペースはC:\workspace等の半角英数字に。

4. 動作確認(Eclipse側)

  1. Window > Preferences > Java > Installed JREsでJDKを追加し、デフォルトに。
  2. Java > Compilerでコンプライアンスを21に。
  3. Hello, World! を作成して実行(Mac編と同じ)。

よくあるトラブルと対処

  • java が見つからない:WindowsはPathに%JAVA_HOME%\binが入っているか、Macは$JAVA_HOME/binがPATHの先頭か確認。ターミナルを新しく開く。
  • Eclipseが古いJREで動くInstalled JREsのチェック先とJava Compilerを見直し。プロジェクトの「JRE System Library」も確認。
  • Apple Siliconで遅い/起動しない:aarch64版のJDK/Eclipseを使用。Rosetta経由を避ける。

この次に知りたい情報

FAQ

JAVA_HOMEはどこを指せばいい?

JDKのルートフォルダを指定します(Windows例:C:\Program Files\Java\jdk-21、Macは/usr/libexec/java_homeの出力)。binは付けません。

JDKとJREの違いは?

JREは実行環境、JDKはコンパイル含む開発環境。開発にはJDKが必要です。

Oracle以外のJDKでもよい?

はい(例:Temurin)。ただし本記事はOracle JDKを前提に記述しています。

著者:まーくん|更新日:2025-08-24