includesとは？プログラミング・Web制作での意味と使い方を徹底解説

プログラミングの学習中や、Web制作の現場のやり取りの中で、「includes」という言葉を見かけて「どういう意味なのだろう？」と疑問を持たれたことはありませんか。英単語としての意味はなんとなく分かっても、実際のコードやシステムの中でどのような役割を果たしているのか、最初は少し分かりにくいものですよね。

ITの分野において、「includes（インクルーズ）」という言葉は非常に頻繁に登場します。しかし、実はあなたが「どの言語を学んでいるか」「どのような文脈で使っているか」によって、その意味や役割は大きく変わってくるのです。

本記事では、Webサイトに動きをつけるJavaScriptにおける「includes()メソッド」の具体的な使い方をはじめ、Web制作で使われる「SSI（Server Side Includes）」の仕組み、さらには他の言語での使われ方まで、背景知識を交えながら分かりやすく解説していきます。

初心者の方がつまずきやすいポイントから、実務で役立つ中級者向けの最適化テクニックまで網羅していますので、ぜひ最後までじっくりと読んでみてください。

includesの基本的な意味とIT業界での役割

まずは、言葉の根本的な意味から整理してみましょう。

英語の「include」には、「〜を含む」「〜を同封する」「〜を含める」といった意味があります。IT業界やプログラミングの世界でも、この直訳のニュアンスがそのまま活かされており、大きく分けると次の2つの使われ方をします。

• 特定のデータが含まれているか「探す・判定する」役割（例：JavaScript、Rubyなど）
• 別のファイルや部品を「読み込む・合体させる」役割（例：Web制作のSSI、PHP、C言語など）

つまり、「探しているものが中にあるかな？」と確認する機能と、「この部品をここに入れておいてね」と指示する機能の、2つの顔を持っていることになります。ここを理解しておくと、様々な場面で「includes」という単語に出会っても、スムーズに意味を推測できるようになります。

【JavaScript】includes()メソッドの仕組みと使い方

現在のフロントエンド開発において、「includes」と言えば真っ先に挙がるのがJavaScriptのincludes()メソッドです。これは「配列や文字列の中に、特定の要素が含まれているかどうか」を判定し、含まれていればtrue（真）、含まれていなければfalse（偽）を返すという、非常にシンプルで使い勝手の良い機能です。

この機能は、2016年に発表された「ECMAScript 2016（ES7）」という標準規格で正式に導入されました。それ以前は、後述する別の少し複雑な方法を使わざるを得なかったため、多くの開発者から歓迎された歴史があります。

文字列の中から特定の文字を探す

例えば、ユーザーが入力したメールアドレスの中に「@」が含まれているかどうかを確認したい場面を想像してみてください。String.prototype.includes()を使えば、直感的にコードを書くことができます。

JavaScript

const email = "user@example.com";
const isIncluded = email.includes("@");

console.log(isIncluded); // 結果: true

このように、「変数名.includes(探したい文字)」と書くだけで、簡単にチェックが可能です。文章の中にNGワードが含まれていないかチェックする機能など、日常的なWebアプリケーションの裏側で頻繁に活躍しています。

配列の中から特定の要素を探す

文字列だけでなく、複数のデータが格納された「配列（Array）」に対しても同様に使えます。Array.prototype.includes()の基本的な仕組みです。

JavaScript

const fruits = ["りんご", "みかん", "ぶどう"];
const hasApple = fruits.includes("りんご");
const hasBanana = fruits.includes("ばなな");

console.log(hasApple); // 結果: true
console.log(hasBanana); // 結果: false

ECサイトで「ユーザーのお気に入りリスト（配列）の中に、今見ている商品が含まれているか」を確認し、含まれていればハートマークを赤く点灯させる、といったUIの実装によく用いられます。

初心者が迷いやすい！indexOf()やsome()との違い

JavaScriptを少し勉強すると、「要素を探すメソッドが他にもあって、どれを使えばいいか分からない」と迷ってしまう方が多くいらっしゃいます。特に比較されやすいのがindexOf()とsome()です。それぞれの違いを分かりやすく表で比較してみましょう。

メソッド名	返り値	主な用途・特徴	欠点・注意点
includes()	true / false	要素が存在するかだけを知りたい場合。シンプルで読みやすい。	複雑な条件（例：特定のプロパティを持つオブジェクトなど）は探せない。
indexOf()	インデックス番号（見つからない場合は-1）	要素が何番目にあるかを知りたい場合。昔からある標準的な方法。	存在確認に使うと「!== -1」という少し不自然な書き方になる。
some()	true / false	単なる値ではなく、複雑な条件（オブジェクトの中身など）に一致するか探したい場合。	コールバック関数を書く必要があり、少しコードが長くなる。

includes()とindexOf()の決定的な違い（背景事情）

少し専門的な話になりますが、includes()が導入される前、JavaScriptの現場では存在確認のためにindexOf() !== -1という書き方が横行していました。

JavaScript

// 昔の書き方（今でも動きますが、直感的ではありません）
if (fruits.indexOf("りんご") !== -1) {
  console.log("りんごが含まれています");
}

「見つからなかったら-1を返すから、-1じゃないということは存在するはずだ」という、少しひねくれたロジックですよね。コードを読む側も一瞬考えてしまいます。これがincludes()の登場により、if (fruits.includes("りんご"))と、英語の文章を読むように自然に書けるようになったのです。

また、もう一つの決定的な違いとして「NaN（Not a Number：数値ではないことを表す特殊な値）」の扱いがあります。indexOfは仕様上、配列内のNaNを見つけることができません。しかし、includesは内部的に「SameValueZero」という比較アルゴリズムを採用しているため、正確にNaNを検知することができます。こうした細かな信頼性の高さも、モダンな開発でincludesが推奨される理由となっています。

JavaScriptの基礎から、includes()のようなモダンなメソッドの使い分け、現場で求められる実践的なコードの書き方までを網羅した良書です。初心者から中級者へステップアップしたい方にとても人気があります。

【Web制作】共通パーツを管理する「SSI（Server Side Includes）」

ここまでJavaScriptにおける「探す」機能としてのincludesを解説してきましたが、WebデザインやHTMLのコーディング現場では、全く別の意味で「インクルード」という言葉が飛び交います。それが「SSI（Server Side Includes）」です。

ヘッダーやフッターの共通化に便利

数十ページ、数百ページあるWebサイトを想像してみてください。全てのHTMLファイルに、同じヘッダー（ロゴやメニュー）やフッターのコードをコピー＆ペーストして作ってしまうと、後から「メニューのリンクを1つ増やしたい」となった時に、全ファイルを修正しなければならず途方もない作業になってしまいます。

そこで登場するのが「インクルード（読み込み）」という概念です。

ヘッダー部分だけを記述した「header.html」という小さな部品ファイルを作っておき、各ページには「ここにheader.htmlを読み込んでね（includeしてね）」という短い命令だけを書いておきます。

Webサーバーは、ユーザーからアクセスがあった瞬間に、その命令を見てファイルをガチャンと合体させ、1つの完全なHTMLとしてブラウザに届けてくれます。これがSSIの仕組みです。

PHPや最新フレームワークへの移行動向

かつては.shtmlという拡張子を使ってSSIを実現するのが主流でしたが、現代のWeb制作においては、PHPのinclude()関数を使って同様の部品化を行うことのほうが一般的になっています。また、近年ではReactやVue.jsといったモダンなフロントエンド技術が普及し、「コンポーネント」という単位で画面の部品を管理するようになったため、昔ながらのSSIの出番は徐々に少なくなってきています。

それでも「ファイルを分割して、必要な場所で読み込む（includeする）」という根幹の設計思想は、最新の技術にもそのまま受け継がれています。

★広告★「おすすめ商品」

・『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』(Amazon/楽天等で販売)

Webサイトの構造や、共通パーツをどのように切り分けて考えるべきか、デザインとコーディングの両面から優しく解説されているベストセラーです。Web制作の全体像を掴むのに最適です。

他のプログラミング言語における「インクルード」

JavaScriptやWebデザインの世界を飛び出しても、「includes」やその派生語は様々な言語で重要な役割を担っています。知識の幅を広げるために、いくつか具体例をご紹介します。

Rubyにおける include と include?

Rubyという言語では、2つの似た言葉が全く違う役割を持っています。

ひとつは、配列や文字列の中に要素が含まれているかを確認するinclude?メソッドです。末尾に「?（クエスチョンマーク）」がつくのがRubyらしい可愛らしい特徴で、JavaScriptのincludes()とほぼ同じ働きをします。

もうひとつは、モジュールと呼ばれる機能の塊をクラスに読み込むためのincludeです。（Mix-inと呼ばれます）。こちらは「部品を取り込む」という意味合いが強くなります。

C言語・C++における #include

歴史の長いC言語やC++では、プログラムの冒頭に必ずと言っていいほど#include <stdio.h>といった記述が登場します。これは「プリプロセッサディレクティヴ」と呼ばれるもので、標準的な機能（画面に文字を出力するなど）が書かれた外部ファイルを、プログラムのコンパイル前に「読み込んで含める」という明確な命令です。

Pythonでの扱いは？

少し面白いのがPythonです。Pythonにも要素が含まれているか確認する機能はありますが、メソッド名としてincludesは使いません。代わりにinという演算子を使用します。（例：if "apple" in fruits:）。言語によって表現は違えど、やっていることの根底は同じであるということが分かりますね。

includesを活用するメリットとデメリット

どの言語においても、includes（あるいはそれに準ずる機能）を使いこなすことでコードの品質は大きく向上します。ここでは、主にプログラミング的視点から見たメリットと、気をつけておきたいデメリットを整理します。

メリット：コードの意図が明確になり、保守性が上がる

最大のメリットは「可読性（コードの読みやすさ）」です。「このコードは何をしているのか」が、メソッド名から一目で伝わります。

プログラミングの現場では、コードを書く時間よりも、他人が書いた（あるいは過去の自分が書いた）コードを読む時間の方が圧倒的に長くなります。そのため、「目的がすぐに分かる」コードを書くことは、バグを減らし、開発チーム全体の効率を上げるための非常に重要な要素となります。includesは、「中に含まれているか知りたいんだな」というプログラマの意図を、これ以上ないほどストレートに表現できる美しいメソッドなのです。

デメリット：大規模データにおけるパフォーマンスの罠

一方で、中級者以上になったら意識しておきたい「パフォーマンス（処理速度）」の落とし穴が存在します。

配列に対するincludes()は、内部的には「配列の最初から最後まで、順番にひとつずつ確認していく」という動き（線形探索：アルゴリズム用語でO(n)の計算量と言います）をしています。

要素が100個や1,000個程度であれば、現代のコンピューターの処理速度では全く問題になりません。しかし、もし要素が10万個ある配列に対して、何度も何度もincludes()を使って検索をかけてしまうと、画面の動きがカクついたり、システムが重くなったりする原因になります。

パフォーマンスを最適化する中級者向けテクニック

「では、大量のデータの中から特定の要素を探したい時はどうすればいいの？」と疑問に思われますよね。そのような場面では、配列（Array）ではなく「Set（セット）」というデータ構造を使用するのが業界のベストプラクティスです。

JavaScriptの場合、配列をSetオブジェクトに変換し、Set.prototype.has()というメソッドを使います。

JavaScript

// 重い処理になりがちな配列のincludes
const largeArray = [/* 10万個のデータ */];
const isFound = largeArray.includes("探したいデータ"); // O(n)の時間がかかる

// Setを使った高速な検索
const largeSet = new Set(largeArray);
const isFoundFast = largeSet.has("探したいデータ"); // ほぼ一瞬（O(1)）で完了する

Setは「ハッシュテーブル」という仕組みを使ってデータを管理しているため、データが何万個あろうと、一瞬で存在確認ができます。最初は通常のincludesから使い始め、扱うデータ量が大きくなってきたらこのような最適化手法があることをぜひ思い出してみてください。

現場でよく遭遇するエラーと解決策

実際にincludesを使ってコードを書いていると、いくつか典型的なエラーにぶつかることがあります。初心者の方がパニックにならないよう、よくあるエラーとその対処法をまとめました。

エラー1：「TypeError: includes is not a function」

非常に頻繁に見かけるエラーです。これは「includesなんていう機能（関数）は存在しませんよ」と怒られている状態です。

【原因と解決策】

対象となっている変数が、文字列や配列ではなく、nullやundefinedになってしまっていることがほとんどです。Web APIからデータを取得する前にincludesを実行してしまったりしていないか、変数の手前でconsole.log()を出力し、中身が本当に配列や文字列になっているかを確認しましょう。

JavaScript

// エラーになる例
let data = undefined;
data.includes("apple"); // TypeError発生！

// 解決策：オプショナルチェーン（?.）を使って安全に呼び出す
let safeCheck = data?.includes("apple"); // エラーにならずにundefinedが返る

エラー2：大文字・小文字の違いで検索に引っかからない

includes()は非常に厳密です。英語の「大文字」と「小文字」、あるいは日本語の「全角」と「半角」を完全に別のものとして扱います。

【原因と解決策】

例えば、"Apple".includes("apple")はfalseになってしまいます。ユーザーがフォームに入力した文字を検索する場合などは、この厳密さが仇となることがあります。

解決策としては、検索する前に両方の文字を小文字（または大文字）に統一してしまうのが一般的です。

JavaScript

const text = "I love Apple";
const keyword = "apple";

// 両方を小文字に変換してから比較する
const isMatch = text.toLowerCase().includes(keyword.toLowerCase());
console.log(isMatch); // trueになる！

includesにまつわる・よくある疑問（FAQ）

最後に、学習中の方からよく寄せられる疑問を一問一答形式でまとめました。

Q1. なぜ「contains」ではなく「includes」という名前になったのですか？

実は、JavaScriptの標準仕様を決める際、最初はString.prototype.containsという名前にする予定でした。しかし、当時世界中のWebサイトで使われていた「MooTools」という古いライブラリが、独自にcontainsという機能を作ってしまっていたのです。

もしブラウザの標準としてcontainsを実装してしまうと、世界中の既存のWebサイトが壊れてしまう（動かなくなる）という大問題が発覚しました。そのため、衝突を避ける苦肉の策として「includes」という名前が採用されたという、IT業界の興味深い歴史的背景があります。

Q2. 一部分が一致しているだけ（部分一致）でもtrueになりますか？

はい、文字列に対して使う場合は、部分一致でtrueになります。

"東京都".includes("東京")はtrueです。

しかし、配列に対して使う場合は「完全一致」である必要があります。

["東京都", "大阪府"].includes("東京")はfalseになるので注意が必要です。配列の中から部分一致で探したい場合は、some()メソッドなどを組み合わせる必要があります。

Q3. Internet Explorer（IE）でも動きますか？

いいえ、IE11などの古いブラウザではJavaScriptのincludes()はサポートされていません。ただし、現在IE11はMicrosoftの公式サポートが完全に終了しており、Web業界全体でもIEを対応環境から外すのが標準となっています。そのため、モダンな開発現場において互換性を気にしてincludesの利用を控える必要は、もはやありません。

まとめと次のステップ

いかがでしたでしょうか。一口に「includes」と言っても、その背後には様々な技術的な工夫や歴史が隠されていることがお分かりいただけたかと思います。

本記事の重要なポイントをまとめます。

• includesの根本的な意味は「探す（含まれているか）」と「読み込む（外部ファイルを合体させる）」の2つ。
• JavaScriptのincludes()は、文字列や配列の中に特定のデータがあるかをtrue / falseで返す便利なメソッド。
• indexOfのような古い書き方よりもコードの意図が伝わりやすく、モダンな開発で強く推奨されている。
• 大量のデータを検索する際は、パフォーマンスを考慮してSetの活用も視野に入れる。
• Web制作の現場では、共通パーツを読み込む「SSI（Server Side Includes）」という意味で使われることもある。

プログラミング用語は、最初は暗号のように見えてしまうかもしれません。しかし、今回のように「なぜそのメソッドが必要だったのか」「内部でどう動いているのか」という背景事情や文脈までセットで理解することで、単なる丸暗記ではなく、現場で使える生きた知識として定着していきます。

ご自身のコードエディタを開いて、ぜひ一度includes()を使った簡単なプログラムを書いて、実際の動きを確かめてみてくださいね。手を動かすことが、上達への一番の近道です。