🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

ORDER BYの基本：SQLでデータを自由自在に並び替える方法

Webサイトに表示する商品リスト、ブログの記事一覧、ユーザーランキング…。私たちが普段目にするWebコンテンツの多くは、何らかのルールに基づいて「並び替え」られています。このデータの並び替えを行うのが、SQLのORDER BY句です。

この記事では、SQLを学び始めたばかりのWebクリエーターさんや、改めて基本をおさらいしたい方に向けて、ORDER BYの使い方を徹底解説します。「とにかくコピペすれば動く！」をテーマに、たくさんのサンプルコードを用意しました。実際に手を動かしながら、データを自在に操る楽しさを体験してみてくださいね！

まずは準備から！サンプルデータを用意しよう

習うより慣れろ、ということで、早速SQLを書いていきましょう。今回は、架空のオンライン雑貨店「Web Creator's Mart」の商品テーブル（products）を例に進めていきます。

以下のSQL文は、このテーブルを作成し、サンプルデータを挿入するためのものです。後のコードはこのテーブルが存在することを前提としていますので、もしご自身の環境で試す場合は、最初にこのSQLを実行してくださいね。

-- 商品テーブルの作成
CREATE TABLE products (
  id INT,
  name VARCHAR(255),
  category VARCHAR(255),
  price INT,
  release_date DATE
);

-- サンプルデータの挿入
INSERT INTO products (id, name, category, price, release_date) VALUES
(1, 'もふもふクッション', 'インテリア', 3200, '2023-04-15'),
(2, '集中できるイヤーマフ', 'ガジェット', 7800, '2023-11-01'),
(3, 'アイデア湧き出るノート', '文房具', 1200, '2022-08-20'),
(4, '光るキーボード', 'ガジェット', 15000, '2023-06-30'),
(5, '最高の座り心地チェア', 'インテリア', 32000, '2022-11-10'),
(6, 'なめらかボールペン', '文房具', 1200, '2023-09-01'),
(7, 'クリエイターマグカップ', '食器', 2500, '2023-04-15');

このテーブルには、商品ID(id)、商品名(name)、カテゴリ(category)、価格(price)、発売日(release_date)のカラムが含まれています。準備はOKですか？それでは、いよいよ本題のORDER BYを使ってみましょう！

ORDER BYの基本：まずは「昇順」で並び替えてみよう

ORDER BYの最も基本的な使い方は、特定の列の値を基準に昇順（小さい順、古い順）で並び替えることです。例えば、「価格が安い順」に商品リストを表示したい場合に使います。

書き方はとてもシンプルで、SELECT文の最後にORDER BY カラム名と追記するだけです。

SELECT * FROM products ORDER BY price;

このSQLを実行すると、priceカラムの値が小さいものから順にデータが並び替えられて返ってきます。ちなみに、昇順を明示的に指定するキーワードとしてASC（Ascendingの略）がありますが、ORDER BYはデフォルトで昇順に並び替えるため、ASCは省略されることがほとんどです。

-- 上のコードと全く同じ結果になります
SELECT * FROM products ORDER BY price ASC;

逆順も簡単！「降順」で並び替えるDESCキーワード

「価格が高い順」や「発売日が新しい順」のように、昇順とは逆の降順（大きい順、新しい順）で並び替えたい場合ももちろんあります。その場合は、DESC（Descendingの略）というキーワードを使います。

使い方は、カラム名の後ろにDESCと付け加えるだけ。とても簡単ですね！

-- 価格が高い順に並び替える
SELECT * FROM products ORDER BY price DESC;

これで、最も高価な「最高の座り心地チェア」が先頭に来るはずです。同様に、発売日（release_date）が新しい順に並び替えることもできます。

-- 発売日が新しい順に並び替える
SELECT * FROM products ORDER BY release_date DESC;

ASCは省略可能でしたが、降順にしたい場合はDESCの指定が必須なので、忘れないようにしましょう。

応用編①：複数条件で並び替える

ORDER BYの便利な点は、複数の条件を組み合わせて並び替えができることです。例えば、「カテゴリ順に並べた後、同じカテゴリの中では価格が安い順に表示したい」といったケースです。

このような場合、ORDER BY句にカラム名をカンマ（,）で区切って複数指定します。先に書いたカラムが、第一の優先キーとなります。

-- カテゴリの昇順、次に価格の昇順で並び替え
SELECT * FROM products ORDER BY category, price;

このSQLを実行すると、まずcategoryのアルファベット順（ガジェット → インテリア → 文房具…）に並び、さらに同じ「文房具」カテゴリの中ではpriceが安い順に並んでいるのが確認できるはずです。

もちろん、それぞれのカラムに対して昇順・降順を個別に設定することも可能です。「発売日が新しい順に並べ、もし同じ発売日の商品があれば、その中では価格が高い順に表示する」という、ECサイトでよくある要件も実現できます。

-- 発売日の降順（新しい順）、次に価格の降順（高い順）で並び替え
SELECT * FROM products ORDER BY release_date DESC, price DESC;

サンプルデータでは「もふもふクッション」と「クリエイターマグカップ」が同じ発売日（2023-04-15）です。このSQLを実行すると、その2つの商品が価格の高い「もふもふクッション」から順に表示されるようになります。複数条件を使いこなせると、データ表示の幅がぐっと広がりますね！

【体験しよう！】ブラウザでSQLを直接実行してみる

ここまで様々なSQLを見てきましたが、やはり自分で動かしてみるのが一番の近道です。
そこで、あなたのブラウザだけでSQLが実行できる、特別なHTMLファイルを用意しました！

以下のコードを全てコピーして、index.htmlのような名前でファイルを作成し、ウェブブラウザで開いてみてください。面倒な環境構築は一切不要で、あなただけのSQL練習場が手に入ります。ぜひ、この記事で学んだORDER BYの色々なパターンを試してみてください！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SQL Practice with ORDER BY</title>
  <style>
    body { font-family: sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
    h1, h2 { color: #444; }
    textarea { width: 100%; height: 150px; font-family: monospace; font-size: 16px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
    button { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
    button:hover { background-color: #0056b3; }
    #result-container { margin-top: 1.5rem; }
    table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    th { background-color: #f2f2f2; }
    #error-message { color: red; font-weight: bold; }
  </style>
</head>
<body>

  <h1>SQLを動かして学ぶ！ORDER BY練習場</h1>
  <p>下のテキストエリアにSQL文を入力して「実行」ボタンを押してください。<code>products</code>テーブルに対してクエリが実行されます。</p>

  <textarea id="sql-input">-- ここにSQLを入力！色々試してみよう！
SELECT * FROM products ORDER BY price DESC;</textarea>
  <button onclick="executeQuery()">SQLを実行</button>

  <h2>実行結果</h2>
  <div id="result-container"></div>
  <div id="error-message"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.3/sql-wasm.js"></script>
  <script>
    let db;

    async function initDb() {
      const SQL = await initSqlJs({
        locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.3/${file}`
      });
      db = new SQL.Database();
      
      // テーブル作成とデータ挿入
      const createTableSQL = `
        CREATE TABLE products (
          id INT,
          name VARCHAR(255),
          category VARCHAR(255),
          price INT,
          release_date DATE
        );
        INSERT INTO products (id, name, category, price, release_date) VALUES
        (1, 'もふもふクッション', 'インテリア', 3200, '2023-04-15'),
        (2, '集中できるイヤーマフ', 'ガジェット', 7800, '2023-11-01'),
        (3, 'アイデア湧き出るノート', '文房具', 1200, '2022-08-20'),
        (4, '光るキーボード', 'ガジェット', 15000, '2023-06-30'),
        (5, '最高の座り心地チェア', 'インテリア', 32000, '2022-11-10'),
        (6, 'なめらかボールペン', '文房具', 1200, '2023-09-01'),
        (7, 'クリエイターマグカップ', '食器', 2500, '2023-04-15');
      `;
      db.run(createTableSQL);
      
      // 初期クエリを実行
      executeQuery();
    }

    function executeQuery() {
      const sqlInput = document.getElementById('sql-input').value;
      const resultContainer = document.getElementById('result-container');
      const errorMessage = document.getElementById('error-message');
      
      resultContainer.innerHTML = '';
      errorMessage.innerHTML = '';

      try {
        const results = db.exec(sqlInput);
        if (results.length > 0) {
          resultContainer.appendChild(createTable(results[0]));
        } else {
          resultContainer.innerHTML = '<p>クエリは成功しましたが、結果セットは返されませんでした。（例: CREATE TABLE, INSERT）</p>';
        }
      } catch (e) {
        errorMessage.textContent = 'エラー: ' + e.message;
      }
    }

    function createTable(result) {
      const table = document.createElement('table');
      const thead = document.createElement('thead');
      const tbody = document.createElement('tbody');
      const headerRow = document.createElement('tr');

      result.columns.forEach(colName => {
        const th = document.createElement('th');
        th.textContent = colName;
        headerRow.appendChild(th);
      });
      thead.appendChild(headerRow);

      result.values.forEach(rowData => {
        const tr = document.createElement('tr');
        rowData.forEach(cellData => {
          const td = document.createElement('td');
          td.textContent = cellData;
          tr.appendChild(td);
        });
        tbody.appendChild(tr);
      });

      table.appendChild(thead);
      table.appendChild(tbody);
      return table;
    }

    initDb();
  </script>
</body>
</html>

知っておくと差がつく！ORDER BYの注意点

最後に、ORDER BYを使う上で少し気をつけておきたい点や、便利なテクニックをいくつかご紹介します。

NULL値の扱い

データの中にNULL（値が存在しない状態）が含まれている場合、ORDER BYはその値をどのように扱うでしょうか？これはデータベースの種類によって挙動が少し異なりますが、一般的にはNULLは一番最初（NULLS FIRST）か、一番最後（NULLS LAST）にまとめられます。意図しない並び順になる可能性があるので、NULLを含む可能性のあるカラムをソートする際は、一度テストしてみるのがおすすめです。

パフォーマンスについて

何百万件といった大量のデータをORDER BYで並び替える場合、データベースの負荷が高まり、クエリの実行に時間がかかることがあります。特に、インデックスが設定されていないカラムで並び替えを行うと、パフォーマンスが低下しやすくなります。もし頻繁にソートするカラムが決まっている場合は、データベースの「インデックス」という機能を検討すると、表示速度を劇的に改善できることがあります。これは少し中級者向けのトピックですが、頭の片隅に置いておくと良いでしょう。

SELECT句にない列でもソートできる

少し不思議に思われるかもしれませんが、ORDER BY句では、SELECT句で指定していないカラムを基準に並び替えることもできます。例えば、商品名と価格だけを表示したいけれど、並び順は「発売日の新しい順」にしたい、という場合です。

-- 表示するのはnameとpriceだけだが、release_dateで並び替える
SELECT name, price FROM products ORDER BY release_date DESC;

このように、表示するデータと並び替えの基準を柔軟に組み合わせられるのも、SQLの強力な点の一つです。

まとめ：ORDER BYをマスターしてデータ活用の一歩を踏み出そう！

今回は、SQLのORDER BY句について、基本的な使い方から複数条件の指定、そして少しマニアックな注意点までを解説しました。最後に要点を振り返ってみましょう。

ORDER BYは、データベースから取得した情報を、ユーザーにとって見やすく、分かりやすい形で届けるための必須スキルです。ぜひこの記事のサンプルコードや実行環境を活用して、色々な並び替えを試してみてください。データを自在に操れるようになると、Web制作やデータ分析がもっと楽しくなるはずです！

関連テンプレート