【JavaScript入門】HTML要素内に直接スクリプトを書く方法｜初心者向けにjavascript: の使い方をわかりやすく解説

「javascript:」は、リンクやアドレスバーから直接JavaScriptコードを実行するための特別な書き方（スキーム）です。
昔はブックマークレットなどでよく使われていましたが、現在はセキュリティや可読性の観点から、使いどころがかなり限定されています。この記事では、javascript: の仕組み・使い方・注意点を、良い例／悪い例とともにやさしく解説します。

JavaScriptを学んでいると、

• href="javascript:..." って何？
• アドレスバーに javascript:alert('こんにちは') と打つとどうなるの？
• 今でも javascript: を使っていいの？

といった疑問を持つことがあります。
この記事では、「javascript: の正体」 と 「今の時代にどう向き合うべきか」 を、図解とコード例を使って分かりやすく解説します。

javascript: とは何か？（スキームとしての意味）

javascript: は、URLの一種です。
http: や https: と同じように、「スキーム」 と呼ばれます。

http://example.com
https://example.com
javascript:alert('こんにちは');

javascript: の後ろに書かれたコードが、そのまま JavaScript として実行されるのが特徴です。

• リンクの href に書く
• ブラウザのアドレスバーに直接入力する
• ブックマーク（ブックマークレット）として保存する

リンクで使う javascript: の基本

もっともシンプルな例は、リンクをクリックしたときに JavaScript を実行するパターンです。

<a href="javascript:alert('こんにちは');">あいさつする</a>

このリンクをクリックすると、alert('こんにちは'); が実行されます。

アドレスバーに javascript: を直接入力した場合

ブラウザのアドレスバーに、次のように入力することもできます。

javascript:alert('こんにちは');

この場合も、現在表示しているページ上で JavaScript が実行されます。
ただし、最近のブラウザではセキュリティの観点から、アドレスバーでの javascript: 実行が制限されている場合があります。

javascript: の仕組みを図で理解する

javascript: の動きを、図で整理すると次のようになります。

• リンクの href に javascript:... と書く
• クリックすると、ブラウザが javascript: 以降を JavaScript として解釈
• JavaScriptエンジンがコードを実行
• 結果として、アラート表示やページ操作が行われる

javascript: を使うメリット・デメリット

メリット

• リンク1つで簡単に JavaScript を実行できる
• ブックマークレットとして便利だった（過去形）
• 小さなデモや学習用途には分かりやすい

デメリット

• HTMLとJavaScriptが混ざって読みづらい
• コードが長くなると管理が大変
• セキュリティ上のリスクがある
• 最近のブラウザでは制限されることがある

良い例・悪い例で理解する javascript:

悪い例：href に直接長いコードを書く

<a href="javascript:const name = prompt('名前は？'); if (name) { alert(name + 'さん、こんにちは'); }">
  あいさつする
</a>

このように、長い処理をすべて href に書いてしまうと、可読性が非常に悪くなります。

良い例：関数を呼び出すだけにする（ただし今は非推奨寄り）

<script>
  function greet() {
    alert('こんにちは');
  }
</script>

<a href="javascript:greet();">あいさつする</a>

処理を関数に分けることで、href の中身は短くなります。
しかし、今の実務では、これよりも「イベントリスナーで処理を書く」方法が主流です。

さらに良い例：イベントリスナーで書く（現代的な書き方）

<a href="#" id="greet-link">あいさつする</a>

<script>
  const link = document.getElementById('greet-link');
  link.addEventListener('click', function(event) {
    event.preventDefault();
    alert('こんにちは');
  });
</script>

この書き方なら、

• HTMLは「何があるか」だけを書く
• JavaScriptは「どう動くか」を別で管理できる

という、記事（外部ファイル（.js）の読み込み方法）とも一貫した設計になります。

javascript: を使うときの注意点（セキュリティ）

javascript: は、「URLとしてコードを実行できてしまう」という性質上、セキュリティリスクがあります。

• 悪意あるサイトが危険な javascript: コードを実行させようとする
• ユーザーがよく分からないままコピー＆ペーストして実行してしまう

まとめ

• javascript: はURLスキームの一種で、コードを直接実行するための書き方
• リンク・アドレスバー・ブックマークレットで使われてきた
• しかし、可読性・保守性・セキュリティの観点から実務では非推奨
• 現代的な書き方ではイベントリスナーや外部ファイルで処理を分離するのが基本
• javascript: を知っておくと古いコードの理解に役立つ