フロントエンドでよく聞く「○○ってなに？」私的まとめ2025

はーい こんにちは。めっちゃこんにちは。
ブログ担当の2回目が回ってきました、中田です。

今回は、フロントエンドでよく聞くキーワードを「かなりざっくり」まとめてみました！

※ キーワードの説明文中にさらに知らないキーワードが出てきたらググってくれたら嬉しいです！

はじめに

フロントエンドエンジニアってなんでしょう？
HTMLやCSS、JavaScriptだけじゃなく、PHPやLaravel、GitやDockerなど──技術の範囲が広すぎて、もうどこまでがフロントエンドなのか分からなくなること、ありますよね。

正直、会社や案件によって必要な知識や使うツールはバラバラです。

そして、それぞれのキーワードに対して新卒社員さん、別の業種の方々は聞いたことはあるけど結局何ができるの？どんな場面で使うの？っていう疑問を持つことも多いはず。

そこでフロントエンドでよく登場するキーワードたちを「かなり!かなり!かなり!ざっくり」まとめてみました。

・何のために使うのか
・どんな人に向いてるか
・初心者はどう始めればいいか

情報の洪水におぼれる前に、「ここだけ押さえとけばなんとかなる」という取っかかりの手助けになればうれしいです！

HTML：Web の骨組みメーカー

Webページの構造を作るためのマークアップ言語。見出し、本文、リンク、画像などを配置します。

向いている人：Web制作を始めたいすべての初心者
初心者がやること：タグの使い方を覚えて簡単なページを作る

<h1>Hello World</h1>
<p>これは本文です。</p>

CSS / Sass：見た目担当

HTMLの構造にデザインを加えるスタイル指定言語。SassはCSSの拡張版で、効率よくスタイルを管理できます。

向いている人：デザインに興味がある人、Webページを美しくしたい人
初心者がやること：CSSとSassの違いを理解して変数やネストを使ってみる

$mainColor: #3498db;
.button {
  background-color: $mainColor;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
}

JavaScript：ページに命を吹き込む

Webページに動きを加える言語。クリックで画像が切り替わったり、スクロールでアニメーションしたり、ユーザーの操作に反応できるようになります。

向いている人：動きのあるページを作りたい人／ロジックが好きな人
初心者がやること：イベントの取得とDOMの操作を試してみる

document.querySelector(".btn").addEventListener("click", () => {
  alert("クリックされました！");
});

補足知識：JavaScriptにおけるAjax（非同期通信）は、かつて「ページをリロードしないと何もできないWeb」の常識を変えた立役者。ページ遷移なしにデータ通信ができるようになり、チャットや無限スクロールのようなインタラクティブUIが当たり前になりました。

jQuery：かつての救世主

JavaScriptを簡潔に書けるようにしたライブラリ。レガシーなサイトやWordPressテーマではまだ現役。

向いている人：古いプロジェクトに関わる人／JS初心者
初心者がやること：CDN読み込み＋基本的なクリックイベントを試す

$(".btn").on("click", function () {
  alert("クリックされました！");
});

TypeScript：JS界の几帳面さん

JavaScriptに「型」を追加した言語で、実行前にミスを検出しやすくなります。

向いている人：大規模開発やチームでの保守を考える人／補完や静的チェックが欲しい人
初心者がやること：型つき関数を書いてVSCodeで補完やエラー確認してみる

function greet(name: string): string {
  return `こんにちは、${name}さん`;
}

React / Vue：UI の部品工場

ユーザーインターフェースを部品（コンポーネント）単位で作れるモダンなJavaScriptライブラリ/フレームワーク。

向いている人：再利用しやすい設計が好きな人／状態管理に興味がある人
初心者がやること：小さなボタンコンポーネントを作って表示してみる

React

import { useState } from 'react';

export default function Hello() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Vue（v3）

<template>
  <p>Hello, Vue!</p>
</template>

Next.js：React界のフルスタック代表

Reactをベースにしたフレームワーク。ページ単位のルーティングやSSR、APIまで全部入り。

向いている人：React使いでアプリを完結させたい人／SSGやSSRに触れたい人
初心者がやること：npx create-next-appでプロジェクト作成→ ページ作成

export default function Home() {
  return <h1>Hello from Next.js</h1>;
}

Astro：軽量＆爆速な静的サイト職人

JavaScriptの知識があまりなくてもコンポーネントベースで爆速な静的サイトが作れるフレームワーク。

向いている人：表示速度重視／マーケ系LPを作る人
初心者がやること：npm create astro@latestでプロジェクト作成

---
const name = "Astro";
---
<h1>Hello {name}!</h1>

Svelte：書いたらそのまま動く魔法のUI

構文がシンプルで、記述量が圧倒的に少なく済むコンポーネントフレームワーク。

向いている人：シンプルな記法が好きな人／HTMLに近い書き方を好む人
初心者がやること：SvelteKitでプロジェクト作成→ボタンクリック実装

<script>
  let count = 0;
</script>

<button on:click={() => count++}>
  カウント: {count}
</button>

CMS：コンテンツ管理の味方

WordPressのように、記事や画像などのコンテンツを管理・配信できるシステムのこと。ノーコードでサイト更新できるのも魅力です。

向いている人：更新頻度の高いサイトを運用したい人／エンジニアでない人と協力して作業したい人
初心者がやること：WordPressをインストールして投稿・固定ページを作ってみる

PHP：サーバー側の番人

Webサーバー上で処理を実行し、HTMLを生成する言語。フォーム送信やDB操作に活躍。

向いている人：WordPressを触る人／バックエンドにも興味ある人
初心者がやること：echo構文で動的に文字列を出力してみる

<?php
echo "こんにちは、PHP！";

FuelPHP：堅実な国産フレームワーク

PHPの軽量フレームワークで、シンプルな構造と堅実な思想が特徴。国産なので日本語情報も多め。

向いている人：国産にこだわりたい人／Laravelが重く感じる人
初心者がやること：コントローラーとビューでHello Worldしてみる

class Controller_Hello extends Controller {
  public function action_index() {
    return Response::forge(View::forge('hello/index'));
  }
}

Laravel：PHP界のイケメンフレームワーク

PHPを使ったWebアプリ開発を効率化するフレームワーク。コードが整っていて保守性が高い。

向いている人：中〜大規模なアプリ開発をしたい人
初心者がやること：ルーティングとビュー表示を試す

Route::get('/hello', function () {
    return 'こんにちは、Laravel';
});

npm / yarn：パッケージの宅配便

JavaScriptのライブラリやツールを管理するための仕組み。

向いている人：ライブラリをたくさん使いたい人
初心者がやること：npm install でパッケージを入れてみる

npm install lodash

Vite：ビルド爆速な相棒

フロントエンド開発環境を簡単に立ち上げ、リアルタイムで変更を反映してくれるビルドツール。

向いている人：最新のフロント開発をしたい人
初心者がやること：Viteプロジェクトを作ってnpm run devを実行

npm create vite@latest projectX
cd projectX
npm install
npm run dev

タスクランナー（npm scripts / Gulp）：裏方ヒーロー

CSSやJSの変換、ファイルコピーなど、毎回やる作業を自動化する仕組み。

向いている人：反復作業を楽にしたい人
初心者がやること：package.jsonのscriptsにコマンドを書いてみる

"scripts": {
  "start": "vite",
  "build": "vite build"
}

Docker：動く開発環境そのもの

アプリを動かすのに必要なすべて（OS、DB、ツール）をまとめて管理できるコンテナ技術。

向いている人：本番と開発環境の差をなくしたい人／インフラ寄りの開発者
初心者がやること：簡単なDockerfileやdocker-composeでWordPressを動かしてみる

Git：黒歴史を守る鏡

ソースコードのバージョン管理ツール。誰がいつ何を変えたかを記録し、複数人開発を可能にします。

向いている人：チームで開発したい人／過去の修正履歴を残したい人
初心者がやること：git init から commit までの流れを実践

git init
git add .
git commit -m "最初のコミットでぇす"

Sourcetree：Gitの見える化ツール

Git操作をGUIで行えるツール。視覚的に履歴やブランチが見えてわかりやすい。

向いている人：Gitコマンドが苦手な人／初心者
初心者がやること：clone → commit → push をGUIで行ってみる

API：データの注文窓口

外部とデータのやりとりを行う仕組み。フロントエンドからサーバーに情報を取得・送信できます。

向いている人：非同期処理に興味ある人／バックエンド連携したい人
初心者がやること：fetchでJSONを取得してconsole.logしてみる

fetch("https://api.example.com/data")
  .then((res) => res.json())
  .then((data) => console.log(data));

GAS（Google Apps Script）：Googleサービスの自動化職人

Google スプレッドシートやGmail、カレンダーなどをJavaScriptライクな言語で操作できる便利なスクリプト環境。

向いている人：業務効率化が好きな人／ノーコード＋αがしたい人
初心者がやること：スプレッドシートに行追加するスクリプトを書く

function addRow() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  sheet.appendRow(["今日の日付", new Date()]);
}

AWS：クラウドの王様

インフラやサーバーなどをクラウド上で自由に構築・運用できるサービス群。フロントエンドではホスティングやAPI連携などで活躍。

向いている人：クラウド運用や本番環境公開を自分で触ってみたい人
初心者がやること：S3に静的サイトをアップしてURLでアクセスしてみる

aws s3 cp ./dist s3://hogehoge-bucket-name --recursive

ライブラリ vs フレームワーク：役割の違い

・ライブラリ：必要な機能を取り出して使う（例：jQuery, Lodash）
・フレームワーク：全体の設計に従って開発を進める（例：Laravel, Vue）

向いている人：全体を任せたい → フレームワーク ／ 必要なところだけ使いたい → ライブラリ
初心者がやること：小さなライブラリ（moment, axios）と、Vueのようなフレームワーク両方を試してみる

まだまだキーワードは足りません！

実際の開発現場では、ここで紹介したもの以外にもたくさんの技術やキーワードが日々登場しています。正直、全部追いかけるのは無理です。
でも「なんとなく聞いたことある」「ざっくり用途がわかる」だけでも大きな一歩。
焦らず、自分のペースで知識を増やしていければOKです！

・状態管理（Redux / Pinia / Recoil）
・CSS設計（BEM / OOCSS / FLOCSS）
・UIライブラリ（Tailwind CSS / Bootstrap / MUI）
・テスト（Jest / Vitest / Cypress）
・アニメーション（GSAP / Framer Motion）
・GraphQL / REST API
・Headless CMS（microCMS / Contentful / Strapi）
・認証（OAuth / Firebase Auth）
・CI/CD（GitHub Actions / Netlify / Vercel）

などなどなどなどなど…..

もし気になるキーワードがあれば、都度ピックアップして学んでみるのがオススメです。
「全部わかってる」必要はありません。興味をもったタイミングが学び時です！

また、以下の書籍がフロントエンドって何？という全体像をつかむのにとても役立ちますので、興味のある方はぜひ手に取ってみてください。

おわりに

こちらで書いた内容は「全部理解しないとダメ！」というものではなく、「なんとなく知ってる」「名前は聞いたことある」を「少し使えるかも」に変えていくための最初の一歩として書きました。

もちろん会社によって必要な技術や開発スタイルは違いますし、数年後にはまた別のツールや考え方が出てくるかもしれません。

でも、大事なのは “知っていること” より “必要なときに調べられること”。

「何がどんな目的で使われるのか」をざっくりでも知っておくだけで、会話についていけるようになりますし、必要なときの学びもずっと早くなります。

この記事が、あなたの「わかる！」の土台になればうれしいです！！！

ここまで読んでいただきありがとうございました！