URIとは？初心者でも理解できる基礎から具体的な活用例まで解説

Web開発•2025/1/24

はじめに

URIという言葉を聞くと、何となくURLと似ているイメージを持つ方も多いのではないでしょうか。ただ、URIの定義を正確に説明しようとすると、意外に難しく感じるかもしれませんね。そこで今回は、URIとは何なのかを明確にしながら、具体的な活用シーンを紹介していきます。これからプログラミングを始める皆さんに向けて、なるべく平易な言葉で解説していきます。読んでいただくと、Webアプリケーションを扱う上で欠かせないURIの基礎を理解できるようになるはずです。

URIの基本概念

URIは、インターネット上のリソースを特定するための識別子として機能します。 Webサイトだけでなく、画像やPDFなど、オンラインで公開されているさまざまな資源を参照する際にも使われる仕組みです。 URLやURNといった言葉を耳にすることがあるかもしれませんが、これらはURIを下位区分した概念といえます。まずはURIとURLの関係について少し整理してみるとわかりやすいです。

URLとURNとの違い

URLは主に「どこにあるか」を表す手がかりです。 URNは「何であるか」を意味するような識別子ですが、現状ではURLのほうが一般的に使われています。たとえば、https://example.com/index.htmlのように、通信プロトコルとファイルのパスが含まれているのはURLの典型例です。一方で、URNはurn:isbn:XXXXXXXXXのように、特定の書籍を識別するために使われる場合などが挙げられます。このように、URLとURNはいずれもURIに含まれる概念であり、実務ではURLを目にする場面が圧倒的に多いです。

URIの構造

URIにはいくつかの要素が組み合わさっています。具体的には、スキーム、ホスト名、パス、クエリパラメータ、フラグメントなどが代表的な構成要素です。ここでは、それぞれを簡単に整理してみましょう。

スキーム

スキームは、https://やftp://などの部分を指します。通信の手段やプロトコルを示すために欠かせない情報です。 HTTPとHTTPSの違いに注目しながら、Webサイトがどのようにデータのやり取りを行うかを判断する材料になります。

ホスト名

ホスト名とは、example.comのようなドメイン名を指します。どのサーバーにアクセスするかを示すために使われる重要な要素です。ドメイン名が解決されると、IPアドレスに変換されて目的のサーバーへたどり着きます。

パス

パスは/aboutや/products/item1のように、ホストの中でどの場所にあるリソースなのかを示します。 Webアプリケーションにおいては、パスの設計がルーティングに直結するため、開発時に注意して設定する必要があります。パスの付け方によっては、ユーザーが直感的にURLを把握しやすくなるでしょう。

クエリパラメータ

クエリパラメータは?search=keywordや?page=2のように、追加情報を付与する手段として用いられます。たとえば検索機能でユーザーの入力をサーバーに送信したり、特定のページ番号を指定して記事の一覧を取得したりする際に役立ちます。クエリパラメータは「キーと値」のペアで構成されており、複数を「&」でつなげて記述できます。

フラグメント

フラグメントは#section1のように、ページ内部の特定の箇所を参照するための仕組みです。 HTMLファイルであれば、見出しや特定の要素に直接飛ぶために利用されることが多いです。 Webページの利便性を高める目的で設計されている要素の一つです。

URIを使う具体的な場面

URIは単にWebサイトのアドレス表示に留まらず、実務で多彩な使われ方をしています。ここでは、代表的な活用シーンをいくつか見ていきましょう。

Webアプリケーションでのルーティング

フロントエンドとバックエンドでルーティングを設計する際には、URIの構造が開発のポイントになります。たとえば、ReactやVue.jsなどのSPAでは、クライアントサイドでパスを切り替えるときにURIが用いられます。また、Node.jsやRuby on Railsなどのバックエンドフレームワークでも、コントローラーやアクションを振り分けるときにURIの情報をもとに処理が走ります。

APIエンドポイント設計

RESTfulなAPIを設計する際にも、URIの構成は重要です。 /api/users/123のように、エンドポイントが示すリソースを簡潔に表現することで、開発者や利用者にとってわかりやすいAPIを実現できます。さらに、クエリパラメータを使うことで、条件付きのデータ取得やフィルタリングを行うことができるでしょう。

URIとHTTPメソッドの関連

URIは、リソースを指定するための目印ですが、具体的に何を行うかはHTTPメソッドが決定します。 GETはデータの取得、POSTは新規作成、PUTは更新、DELETEは削除といった使い方が一般的です。同じURIであっても、メソッドが異なるだけで動作がまったく異なるケースが多い点が面白いところです。開発時には、URIとメソッドの組み合わせに一貫性を持たせるように意識すると、チームメンバーが理解しやすいAPI設計になります。

URIエンコーディング

パラメータの値に日本語や特殊文字が含まれる場合、正しくURIに含めるためにエンコーディングが必要になります。例えば、スペースを「%20」に変換するなどの処理が該当するでしょう。ブラウザや一部のライブラリは自動的にエンコードやデコードを行いますが、手動で処理しなければならない場面もあります。余計な文字化けやエラーを防ぐためにも、URIを扱うときは文字コードに気を配りたいところです。

JavaScriptでURIを扱う例

ここでは、JavaScriptの組み込みオブジェクトURLを使ってURIを解析する簡単な例を紹介します。 Webブラウザだけでなく、Node.js環境でも動作するため、実務で試してみる機会が多いかもしれません。


// 解析対象となるURL文字列
const targetURL = "https://example.com/products/item?id=123#details";

// URLオブジェクトを生成
const urlObj = new URL(targetURL);

// スキーム（プロトコル）
console.log("スキーム:", urlObj.protocol); // 例: "https:"

// ホスト名
console.log("ホスト名:", urlObj.hostname); // 例: "example.com"

// パス
console.log("パス:", urlObj.pathname); // 例: "/products/item"

// クエリパラメータ
console.log("クエリ:", urlObj.search); // 例: "?id=123"

// フラグメント
console.log("フラグメント:", urlObj.hash); // 例: "#details"

上記のように、URLオブジェクトを使うと、URIの各構成要素を簡単に取り出せます。クエリパラメータをさらに分解するには、urlObj.searchParamsを利用すると便利です。


// クエリパラメータの例
const idParam = urlObj.searchParams.get("id");
console.log("IDパラメータ:", idParam); // 例: "123"

データを安全に送受信するうえで、こうした分解や生成の仕組みを覚えておくと安心ですね。

Node.jsでリクエストURIを扱う例

サーバーサイドのNode.js環境でも、URIはリクエストの際に必ず登場します。以下は、Node.jsの標準モジュールhttpを使った簡易サーバーのコード例です。


const http = require("http");

const server = http.createServer((req, res) => {
  // リクエストURIを取得
  const requestedUrl = req.url;

  // HTTPヘッダを設定
  res.writeHead(200, { "Content-Type": "text/plain; charset=utf-8" });

  // クライアントにリクエストのURIをそのまま返してみる
  res.write(`リクエストされたURI: ${requestedUrl}`);
  res.end();
});

server.listen(3000, () => {
  console.log("サーバーがポート3000で起動しました");
});

ブラウザでhttp://localhost:3000/products?type=toyなどにアクセスすると、/products?type=toyのようにURIが表示されるはずです。実際のWebアプリケーション開発では、この情報をもとにルーティングやコントローラーを振り分ける構造を組み立てていきます。

URIを設計するときの考え方

アプリケーションを開発するとき、URIを設計する段階で以下のようなポイントを意識すると、使いやすい設計になりやすいです。

リソースを直感的に理解できるパス名にする
クエリパラメータの扱いに一貫性を持たせる
可能であれば複雑すぎる階層構造は避ける
ログなどで読み取ってもすぐに目的が把握できる形式に整える

こうした工夫が、開発者とユーザー双方の利便性を高めることにつながるでしょう。

URIと設計思想がリンクすると、アプリケーションのメンテナンスがぐっと楽になります。

実務で気をつけたいポイント

URIを取り扱うときは、いくつか注意しておきたいことがあります。特にエンコーディングやリダイレクトの設定などは、初心者の方がつまずきやすい点かもしれません。

エンコーディングの不一致

フロントエンドとバックエンド、あるいは他社のAPIと通信する場合など、文字コードの扱い方が揃っていないと、不具合が起きやすいです。日本語や特殊文字を含むデータは、URIエンコーディングを正しく行うことで不慮のトラブルを避けられます。

リダイレクトによる影響

URIを移動させるリダイレクト処理を行うと、検索エンジンの評価やブックマークのリンク先が変わる可能性があります。実務では、301や302などのステータスコードを正しく使い分けることで、予期せぬ混乱を防ぐことができるでしょう。

URIを変更すると、既存リンクが無効になるリスクがあります。必ずリダイレクト先などを確認し、影響範囲を把握しておきましょう。

まとめ

ここまで、URIとは何かを中心に、URLやURNとの違いから、実際の開発での使い方までを簡単に見てきました。 URIは、Web上に存在するあらゆるリソースを表現するための基本的な仕組みです。 URLやAPIエンドポイントの設計においても欠かせない要素なので、初心者の皆さんはぜひ理解を深めてみてください。