JavaScriptでリンクを無効化する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでリンクを無効化する方法について現役エンジニアが解説しています。リンクを無効化するには、aタグのhref属性の値にvoid(0)などのundefind値を設定します。voidは式を評価し、必ずundefind値を返します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでリンクを無効化する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでリンクを無効化する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

void(0)とは

void(0)とはJavaScdriptのvoidメソッドを使用しています。

void:演算子は式を評価し、評価した結果必ずundefind値を返します。評価した結果を必ずundefindで返すので、void(123)やvoid(‘ああああ’)も同じ意味になります。

慣習としてvoid(0)を使用することが多いです。

JavaScriptでリンクを無効化する方法

JavaScriptで、aタグなどリンクを設定する処理に対してリンクの無効化を行うには、上記で説明したvoidをhref要素に指定することです。aタグは、href属性の値にundefind値を指定した場合には何も動作しませんのでリンクの無効化を実現することが可能です。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

void(0)を使用するタイミング

先程のリンクの無効化のように、本来の使用用途の一部(aタグのhref要素など)のみを無効にしたいときや、JavaScript内の分岐後の処理で必ずundefindを返却することがあるときなどに使用します。

returnするときの変数をわざわざ処理内で設定する必要がなくなるため、達成したい処理のみに変数を使用することができ可読性の向上などに繋がります。

実際に書いてみよう

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="use_void">
<a href="javascript:void(0)" onclick="クリック時に動作するjavascriptの処理">ここをクリック</a>
</div>
</body>

</html>

 

筆者プロフィール

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。