「URL 共有」は“このページを誰かに渡す”ための一番シンプルな機能
URL 共有は、ざっくり言うと
「今見ているページのリンクを、
他の人や自分の別の端末に渡す」
ための仕組みです。
JavaScript でやるときの代表的なパターンは、だいたいこの 2 つです。
- クリップボードに URL をコピーする（Clipboard API）
- ネイティブの共有ダイアログを開く（Share API）
どちらも「URL をどう渡すか」が違うだけで、
やっていることは「このページの場所を人に渡す」という一点です。
パターン1：Clipboard API で「URL をコピー」する
基本の流れは「location.href → writeText」
今開いているページの URL は、location.href で取得できます。
それをそのまま navigator.clipboard.writeText に渡せば、
「URL をコピーするボタン」が作れます。
HTML:
<button id="copyUrlBtn">URL をコピー</button>
<div id="status"></div>
JavaScript:
const copyUrlBtn = document.querySelector("#copyUrlBtn");
const status = document.querySelector("#status");
copyUrlBtn.addEventListener("click", async () => {
if (!navigator.clipboard) {
status.textContent = "このブラウザではコピー機能が使えません";
return;
}
const url = location.href;
try {
await navigator.clipboard.writeText(url);
status.textContent = "URL をコピーしました";
} catch (err) {
status.textContent = "コピーに失敗しました: " + err;
}
});
ここで重要なのは次の 3 点です。
location.href で「今のページの URL」が取れること。navigator.clipboard.writeText は非同期なので await と try...catch が必須なこと。
Clipboard API が使えない環境もあるので、存在チェックをしていること。
これだけで、ユーザーは
「ボタン 1 回 → あとは好きなところに貼り付ける」
という流れで URL を共有できるようになります。
URL コピーは「PC でのフォールバック」としても強い
Share API（ネイティブ共有）は、
スマホでは強いですが PC では未対応も多いです。
そのときに、
スマホ：Share API で共有シートを開く
PC：URL コピーでユーザーに任せる
という切り替えがよく使われます。
JavaScript では、例えばこう書けます。
if (navigator.share) {
// ネイティブ共有ボタンを表示
} else if (navigator.clipboard) {
// URL コピー用ボタンを表示
} else {
// 「URL を選択してコピーしてください」とテキストで案内
}
「URL をコピーさえできれば、あとはユーザーが好きなアプリに貼る」
という発想は、とてもシンプルで強いです。
パターン2：Share API で「ネイティブ共有」に URL を渡す
navigator.share に URL を渡すだけで“いい感じ”に共有される
スマホでの URL 共有は、
ネイティブの共有シートを使うのが一番自然です。
その入口が navigator.share です。
HTML:
<button id="shareBtn">このページを共有</button>
<div id="shareStatus"></div>
JavaScript:
const shareBtn = document.querySelector("#shareBtn");
const shareStatus = document.querySelector("#shareStatus");
shareBtn.addEventListener("click", async () => {
if (!navigator.share) {
shareStatus.textContent = "このブラウザはネイティブ共有に対応していません";
return;
}
try {
await navigator.share({
title: document.title,
text: "このページ、よかったら見てみて！",
url: location.href
});
shareStatus.textContent = "共有ダイアログを開きました";
} catch {
shareStatus.textContent = "共有はキャンセルされました";
}
});
ここでのキモは、
「URL だけでなく、タイトルとテキストも一緒に渡す」ことです。
title: 共有先アプリで表示されるタイトルtext: メッセージの本文（コメント的なもの）url: 実際に共有されるリンク
この 3 つを丁寧に設計すると、
LINE やメール、SNS での見え方がぐっと良くなります。
URL 共有で一番大事なのは「何をどう見せたいか」の設計
URL 共有は、単にリンクを渡すだけではありません。
「このページをどう紹介してほしいか」
「どんな一言を添えてもらうと伝わりやすいか」
を考えて、title と text を決めるのが大事です。
例えば技術記事なら、
await navigator.share({
title: "JavaScript 入門：URL 共有編",
text: "URL 共有の基本がまとまっていて分かりやすかったので共有します。",
url: location.href
});
のように、「なぜ送るのか」が一言で伝わるテキストを添えると、
受け取った側も「なるほど」となりやすいです。
URL 共有のときに意識しておきたい制約とマナー
HTTPS とユーザー操作はほぼ必須
Clipboard API も Share API も、
基本的に HTTPS（安全なコンテキスト）でしか動きません。
また、どちらも「ユーザー操作に紐づいていること」が前提です。
ページ読み込み直後に勝手に共有ダイアログを開いたり、
勝手に URL をコピーしたりするのは、
ブラウザに拒否されるだけでなく UX 的にも最悪です。
必ず「ユーザーがボタンを押した瞬間」にだけ動くようにしましょう。
失敗やキャンセルは“普通に起こるもの”として扱う
URL 共有は、ユーザーの文脈に強く依存します。
今は共有する気分じゃない
共有先アプリがインストールされていない
誤タップだったので閉じたい
など、いろんな理由でキャンセルされます。
コード側では try...catch で受けつつも、
「共有ダイアログを開くことまでが自分の役割」
「その先はユーザーの自由」
くらいの感覚で扱うのがちょうどいいです。
初心者として「URL 共有」で本当に掴んでほしいこと
URL 共有の本質は、とてもシンプルです。
「今見ているページの場所（URL）を、
ユーザーが他の人や他のアプリに渡しやすくする」
そのために、次の 2 本柱を押さえておけば十分です。
Clipboard API で URL をコピーする（PC でも強い）。
Share API でネイティブ共有に URL を渡す（スマホで特に強い）。
まずは、自分のページに
「URL をコピー」ボタン
「このページを共有」ボタン
の両方を実装してみてください。
PC ではコピーが、スマホではネイティブ共有が動くようにしてみると、
「同じ URL 共有でも、環境によって最適な出口が違う」
という感覚が、かなりクリアに掴めるはずです。