【１３】アリクイあくしょんコード解説　666行目〜

// タッチデバイス判定
function isTouchDevice() {
  return (
    // タッチイベント 'ontouchstart' が window オブジェクトに存在するかを確認
    "ontouchstart" in window ||

    // デバイスがサポートするタッチポイント数が 0 より大きいかを確認
    navigator.maxTouchPoints > 0 ||

    // ユーザーエージェント文字列に "iPhone" が含まれているかを確認
    navigator.userAgent.indexOf("iPhone") > -1 ||

    // ユーザーエージェント文字列に "Android" が含まれているかを確認
    navigator.userAgent.indexOf("Android") > -1
  );
}

return (
in演算子　”ontouchstart” in window
1. ontouchstart
2. window
navigator.maxTouchPoints
1. つまり　navigator.maxTouchPoints > 0　の意味は？
navigator.userAgent.indexOf(“iPhone”)
1. navigator.userAgent
  1. ⚠️ 注意点
2. 🔎 indexOf とは？
  1. ✅ インデックスとは？
> – 1
このページのまとめ

return (

判定結果（true または false）を返す。

条件はいくつかの「または（OR）」で結合されている。（この記号→ || ）
いずれかが true であれば、関数全体も true を返す。

return は 「処理の中断」ではあるけど、正確には『値を返して関数を終了する』命令。

in演算子　”ontouchstart” in window

“プロパティ名” in オブジェクト

そのオブジェクトが、そのプロパティを持っているかどうかを true / false で返す。
（windowにontouchstartがあるかどうか）

ontouchstart

タッチイベントの名前。
画面をタッチしたときに発生するイベント。

window

そのブラウザで今使えるすべての機能や情報が入った箱（グローバルオブジェクト）。

用語	意味
グローバル	どこからでもアクセスできる範囲
ローカル	限られた範囲（関数の中など）だけで有効

たかまる

ざっくり言うと、そのブラウザはオンタッチスタートイベントに対応してる？って確認しているよ。

navigator.maxTouchPoints

navigator は ブラウザやデバイス情報が入っている箱みたいなもの（グローバルオブジェクト）。

window（省略可）
├── navigator ← ブラウザやデバイス情報が入ってる箱
├── document ← HTMLやDOMの情報が入ってる箱
├── alert ← アラート表示の関数
└── ontouchstart← タッチイベントのサポートがあるか？のプロパティ

maxTouchPoints は navigator のプロパティのひとつで、

このデバイスが一度に何本の指までタッチ操作を認識できるか？

を表している。

プロパティ名	所属オブジェクト	意味
`ontouchstart`	`window`	タッチ操作開始イベントが使えるか確認
`maxTouchPoints`	`navigator`	タッチ操作が何本指まで認識できるか

つまり　navigator.maxTouchPoints > 0　の意味は？

「タッチを認識できる指の数が0より多い（つまりタッチ対応している）」かどうかを調べている。

navigator.userAgent.indexOf(“iPhone”)

このコードは「iPhone かどうか」を判定している。

navigator.userAgent

ブラウザやOSの情報が入った文字列。

"Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1"

⚠️ 注意点

userAgent は書き換え・偽装可能：セキュリティ的に信頼しすぎないこと
仕様がどんどん変わってる：最近はプライバシー保護のために、情報が減らされる傾向あり
将来的には非推奨になる可能性もある：User-Agent Client Hints という新しい仕組みが登場中

🔎 indexOf とは？

JavaScript の 文字列メソッド。
「指定した文字列が、最初に出てくる位置（インデックス）」を返す。
見つからない場合は -1 を返す。

イカクくん

最初に出てくる位置（インデックス）って何？

✅ インデックスとは？

**文字列の中の文字にふられている「番号（位置）」**のこと。
JavaScriptでは、インデックスは 0からスタート する。

例：I love iPhone and iPad

インデックス	文字
0	I
1	（空白）
2	l
3	o
…	…
7	i ← `"iPhone"` がここから始まる
8	P
…	…

たかまる

userAgent という「長い文字列」の中から "iPhone" という文字列を探しているんだよ。

> – 1

navigator.userAgent.indexOf(“iPhone”) > -1
見つからない場合は -1 を返すので、見つかった時は -1より大きい。

状況	戻り値（indexOf）	`> -1` の結果
iPhone が含まれている	0以上（例：13）	`true`
iPhone が含まれていない	-1	`false`

このページのまとめ