初心者

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

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

「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