TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript ChromeでJavaScriptを無効／停止する方法を現役エンジニアが解説【初心者向け】
icon
icon
JavaScript

ChromeでJavaScriptを無効／停止する方法を現役エンジニアが解説【初心者向け】

初心者向けにChromeでJavaScriptを無効／停止する方法について現役エンジニアが解説しています。ChromeでJavaScriptを無効/停止にするには、ブラウザ右上のハンバーガーメニューからプライバシーとセキュリティ、サイト設定を選択します。JavaScriptを選択し許可チェック欄をはずします。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

ChromeでJavaScriptを無効／停止する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

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

大石ゆかり

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

田島悠介

ChromeでJavaScriptを無効／停止する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

  1. Chromeを無効／停止にする理由
  2. ChromeでJavaScriptを無効にする方法
  3. ChromeでJavaScriptを有効に戻す方法

 

Chromeを無効／停止にする理由

普段、無効／停止を行う理由としては、JavaScriptの動きを止めてページをスムーズに見たり、セキュリティの観点で無効／停止を行うかと思います。

しかし、開発者が開発中にあえて無効／停止にするケースは少ないです。もちろんJavaScriptを利用しないサイトであれば、無効／停止にして動作確認するケースもありますが、あまり意味はありません。あるとしても、不具合の切り分けなどに利用する場合などです。
 

[PR] フロントエンドで副業する学習方法を動画で公開中

ChromeでJavaScriptを無効にする方法

設定はブラウザで作業します。残念ながらAPIなどでJavaScriptから制御することはできません。手順は下記のとおりです。※ブラウザーのバージョンによって手順に若干の違いがある場合があります。

  1. ブラウザーの右上のハンバーガーメニューを開きます
  2. 「設定」を選択
  3. 「プライバシーとセキュリティ」→「サイトの設定」を選択します※「設定」の上の部分で【JavaScript】と入力して検索してもいいと思います
  4. 「JavaScript」を選択し、「許可」を外します。

以上で簡単に無効／停止を行うことができます。
 

ChromeでJavaScriptを有効に戻す方法

当然ながら、先ほどの手順で「許可」を設定すれば元に戻ります。
 

筆者プロフィール

小宮山晃史（こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

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

記事を検索

関連するキーワード

関連する記事

JavaScriptでポップアップウィンドウを表示させる方法【初心者向け】

初心者でも簡単に使えるJavaScriptのコードを紹介する記事です。ポップアップウィンドウは、一般的なサイトでもよく見ると思いますので、覚えておきましょう。 ...
JavaScript

JavaScriptのinstanceof演算子の使い方を現役エンジニアが解説【初心者向け】

JavaScriptのinstanceof演算子の使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptでくじ引きプログラムを作る方法を現役エンジニアが解説【初心者向け】

JavaScriptでくじ引きプログラムを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

JavaScriptのダイアログの種類と表示方法を現役エンジニアが解説【初心者向け】

JavaScriptのダイアログの種類と表示方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

JavaScriptのindexOfで配列要素の存在をチェックする方法を現役エンジニアが解説【初心者向け】

JavaScriptのindexOfで配列要素の存在をチェックする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者...
JavaScript

JavaScriptでアニメーションを作る方法を現役エンジニアが解説【初心者向け】

JavaScriptでアニメーションを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

あわせてよく読まれている記事

HTMLのキャッシュを無効にする方法を現役エンジニアが解説【初心者向け】

HTMLのキャッシュを無効にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 キャッシュを無効にする方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 キャッシュとは キャッシュを無効にするとどうなるか キャッシュを無効にするメリット／デメリット キャッシュを無効にする方法 キャッシュを無効にしてみよう まとめ   キャッシュとは キャッシュ(cache)とは一度読み込んだWebサイトの情報をPCやスマートフォンに保存することを言います。キャッシュ(cache)は日本語で「一時的に保存すること、保存する場所」という意味です。 キャッシュを使い一度読み込んだWebサイトの情報をPCやスマートフォンに保存しておくことで、次回以降の表示を高速化することができます。   [PR] フロントエンドで副業する学習方法を動画で公開中キャッシュを無効にするとどうなるか キャッシュを無効にすると、Webサイトの情報を常にサーバー（Webサイトの格納先）から取得するようになります。   キャッシュを無効にするメリット／デメリット ブラウザはWebサイトを構成するCSSや画像ファイルなどの更新情報をもとに、キャッシュを利用するかしないかを判断しています。更新情報が適切でない場合、サーバーのファイルは更新されているのにキャッシュを利用して古い情報を表示してしまう場合があります。キャッシュを無効にすることで常に最新の情報を表示できるメリットがあります。 逆に常にWebサイトを構成するすべてのファイルをサーバーから取得するため、若干ですが表示速度が遅くなるデメリットがあります。   キャッシュを無効にする方法 特定のWebページのキャッシュを無効にするには、headセクションで以下のように記述します。 <meta http-equiv="Cache-Control" content="no-cache"> なお、インターネット上では通信量を減らすために上記とは異なる仕組みで通信データ自体のキャッシュも行われています。通信データのキャッシュは上記の手法では無効にすることができませんが、通常は意識する必要は無いでしょう。 また、ブラウザ側でキャッシュを無効にすることもできます。ChromeであればデベロッパーツールのNetworkタブにある「Disable cache」にチェックを付けることでキャッシュを無効にすることができます。   キャッシュを無効にしてみよう 今回のサンプルプログラムではキャッシュを無効にする方法について確認します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Cache-Control" content="no-cache"> <title>Sample</title> </head> <body> <p>こんにちは！</p> </body> </html> 上記のように記述することでWebページのキャッシュを無効にすることができます。CSSや画像ファイルを組み合わせて確認してみましょう。   まとめ 今回の記事ではHTMLのキャッシュを無効にする方法について学習しました。   監修してくれたメンター 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門（技術評論社）」。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

CSSスタイルの指定を無効にする（CSSスタイルを解除する）方法を現役エンジニアが解説【初心者向け】

CSSのスタイル指定を無効にする（解除する）方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   目次Chromeを無効／停止にする理由ChromeでJavaScriptを無効にする方法ChromeでJavaScriptを有効に戻す方法筆者プロフィール   そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 CSSのスタイル指定を無効にする（解除する）方法について詳しく説明していくね！ 大石ゆかり お願いします！   CSSのスタイル指定を無効にする方法 CSSによるスタイル指定は様々な方法で無効にすることが可能です。 無効にする場合は、各プロパティの初期値を記述する必要があります。 値としては、数値の0、文字列のnone、normal、initialなどがあります。   initialによるスタイルの初期化 initialという値は、どのCSSプロパティにも使用でき、初期化する効果があります。 以下は、見出し（h1タグ）に設定されているブラウザ由来のスタイルを、initialを使って初期化した例です。 See the Pen initialによるスタイルの初期化 by nomallica (@nomallica) on CodePen. 初期化前の見出しにはブラウザ由来のCSSが影響していて、上下に余白が設けられており、文字サイズも101%以上に定められていますが、initialを指定することで余白や文字サイズ指定が無効になっていることが確認できます。   注意点 initialを使用した場合、都合が悪くなってしまう場合もあります。 例えば、ブロックレベル要素のdivタグに対して、displayの値にinitialを指定した場合、本来のブロックレベル要素には戻りません。 一律、インライン要素に初期化されてしまいます。 See the Pen 2019-12-22-sample-06 by YOHEI INAI (@yohei_inai) on CodePen. そのため、initialの性質を使用した装飾やスタイル指定は解読に時間と労力がかかってしまいます。   [PR] フロントエンドで副業する学習方法を動画で公開中ブラウザ由来のCSSを無効にする方法 ブラウザ由来のCSSをすべて合理的に初期化したい場合は、前述のinitialを使用して逐一初期化するよりも、「リセットCSS」と呼ばれる初期化用のスタイルシートを利用するのが一般的です。 以下のリセットCSSを読み込む記述をheadタグ内に追加するだけなので、簡単に取り入れることができます。 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">   まとめ 今回はCSSスタイルの指定を無効にする方法について紹介しました。 initialを使う方法はあまり一般的ではありませんが、知識として覚えておくことでいざという時に役立ちます。 ブラウザの標準的なCSSを初期化する場合は、紹介したリセットCSSの他にも、ブラウザの種類による差異をなくすノーマライズCSSなどもあります。 CSSスタイルの指定を無効にする際には、目的にあった方法を検討してみてください。   大石ゆかり CSSスタイルの指定を無効にする方法がよく分かったので良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   CSSを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい CSSを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
CSS

JavaScriptがMicrosoft Edgeで動かない時の対処方法を現役エンジニアが解説【初心者向け】

JavaScriptがMicrosoft Edgeで動かない時の対処方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptがMicrosoft Edgeで動かないと、表示したいページがうまく表示できません。 実務で、お客様からJavaScriptがMicrosoft Edgeで動かない相談を受けた時に答えられるよう、ぜひ学習してみてください。 目次Chromeを無効／停止にする理由ChromeでJavaScriptを無効にする方法ChromeでJavaScriptを有効に戻す方法筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptがMicrosoft Edgeで動かない時の対処方法について詳しく説明していくね！ 大石ゆかり お願いします！   JavaScriptが特定のブラウザで動かない時に考えられる原因 特定のWebページに動きやエフェクトをつける時にJavaScriptが使われます。 ただ、使用環境やブラウザによっては、JavaScriptの機能を無効にしていることがあります。 JavaScriptの機能を無効にしている場合は、JavaScriptのセキュリティホールを懸念している場合です。 セキュリティホールというのは、プログラムの設計ミスなどに乗じて、攻撃されることを意味します。 JavaScriptの機能を無効にすることで、ユーザーの安全を確保することがあるということです。 もし、セキュリティホールなどがない場合や、セキュリティ対策をしっかり行っている場合は、ブラウザの設定でJavaScriptを有効にしてJavaScriptを機能させることができます。   JavaScriptがMicrosoft Edgeで動かない時の原因、解決方法 JavaScriptを有効にしても、Microsoft Edgeだけは一部の機能が動作しないことがあります。 その原因の多くは、使用しているAPIが非対応であることです。 最近ではJavaScriptで動作するWeb APIが豊富に登場し、サーバサイドを使わずにWebページだけで様々な機能を実装できるようになりました。 しかし、Chrome、Firefoxでは動作しても、Edgeでは動作しないことがあります。 この原因は、使用しているWeb APIがEdgeでの動作保証をしていないことです。 解決策としては、Edgeのバージョンを最新版にアップデートすれば対応することもあります。 JavaScriptのWeb APIの対応については、mozillaのサイトでAPIの対応を確認できます。 https://developer.mozilla.org/ja/docs/Web/API   [PR] フロントエンドで副業する学習方法を動画で公開中事前の対策方法 APIの仕様上の問題で、JavaScriptがEdgeで正常に動作しないことがあります。 最新バージョンにすることで解決できますが、そもそもEdgeで非対応のAPIも存在します。 ユーザーが利用しているブラウザがEdgeであるかどうかを判別させる必要があります。 利用しているブラウザを判定する方法の1つに、userAgentを使う方法があります。   JavaScriptサンプルコード var agent = window.navigator.userAgent.toLowerCase(); var edg = agent.indexOf('edg') > -1; console.log(edg); 表示結果 解説 var agent = window.navigator.userAgent.toLowerCase();を実行すると、ブラウザの詳細データをagentに格納します。 agentの中身の例としては、次のようなデータです。 mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/95.0.4638.54 safari/537.36 edg/95.0.1020.40 var edg = agent.indexOf(‘edg’) > -1;では、agentの中にEdgeに関する情報が入っているかを確認して、変数edgに代入しています。 console.log(edg);では、変数edgを表示しています。 実行すると、Edgeである場合は、true、それ以外はfalseと出力されます。 今回はEdgeなので、trueが表示されます。 サンプルコードを応用させて、Edge非対応のサイトである旨のアラートを出したり、そもそも他のブラウザを使ってもらうように表示を切り替えるということもできます。   まとめ JavaScriptが特定のブラウザで動作しないときは、セキュリティホール対策の一環ということもありました。 JavaScriptがMicrosoft Edgeで動作しないときは、JavaScriptを有効にするという設定をすると動作することもあります。 システム開発を行う側の場合、あらかじめMicrosoft Edgeでは動作しないAPIを調べることも重要でした。 ChromeでJavaScriptを無効／停止する方法も参考にしてみてください。   大石ゆかり 内容が分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   JavaScriptを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
JavaScript

JavaScriptでフォームのボタンを無効にする方法を現役エンジニアが解説【初心者向け】

JavaScriptでフォームのボタンを無効にする方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。     田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでフォームのボタンを無効にする方法について詳しく説明していくね！ 大石ゆかり お願いします！   HTMLのボタン要素とは ボタン要素は、ボタンを作成するHTMLの要素です。 inputタグでtypeプロパティをsubmitに設定した場合とbuttonタグの機能は基本的に一緒ですが、画像やテキストをinputタグで作成する場合より柔軟に指定できます。 formタグの中で、送信ボタンとして使用するケースが多いです。 代表的なプロパティとして、ボタンの種類を決定するtypeプロパティ/名前を指定するnameプロパティ/値を指定するvalueプロパティ/操作を無効にするdisabledがあります。 特にユーザーに正常でない値である時に送信できないように、buttonのdisabledプロパティはよく使用するので操作の方法をマスターしておきましょう。   JavaScriptでフォームのボタンを無効にする方法 JavaScriptでフォームのボタンを無効にするには、buttonタグをgetElementByIdやquerySelectorで取得しdisabledをtrueに変更する必要があります。 以下のコードで無効にできます。   const button = document.querySelector("#ボタンのID"); // または // const button = document.getElementById("ボタンのID"); button.disabled = true   jQueryでは、propメソッドでプロパティの値を簡単に操作できます。 Disabledプロパティは以下のように設定できます。   $('#buttonのid').prop('disabled',true);   [PR] フロントエンドで副業する学習方法を動画で公開中実際に書いてみよう それでは実際に書いてみましょう。 今回は、簡単なメールアドレスの入力フォームを作成して正規表現でフォームをチェックして正常なメールの場合のみ送信ボタンが使えるようにします。 メールアドレスの簡単なチェックは以下の正規表現で行います。 大文字小文字は区別せず、半角英数字と記号で構成されて@.が含まれているかをチェックします。   /^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i   それでは書いていきます。 まずは以下のようにフォームを用意します。   <form> <input type="text" id="text-field" /> <button type="submit" id="submit-btn">送信</button> <p id="helper-text" style="color: red;"></p> </form>   そうしたら、inputタグ/buttonタグ/pタグを取得し、keyupイベント（キーボードから指が離れた時に発火するイベント）ごとにinputの内容をチェックしbuttonのdisabledプロパティの書き換え、pタグのテキストの付け替えを行います。   //　各種タグの取得 const input = document.querySelector("#text-field"); const button = document.querySelector("#submit-btn"); const p = document.querySelector("#helper-text"); // emailの正規表現 const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i; // keyupイベントを拾う input.addEventListener("keyup", () => { // inputの中身を正規表現でチェック if (emailRegex.test(input.value)) { // 成功した場合は、disabledをfalseに button.disabled = false; p.textContent =
JavaScript

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

JavaScriptでクリックイベントを無効にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでクリックイベントを無効にする方法について詳しく説明していくね！ 大石ゆかり お願いします！   jQueryのclick()メソッドとは click()メソッドとはクリックすることでイベントを実施する処理です。 また、JavaScriptでは要素のクリックイベントを設定することがよくあります。 例えば、このようなHTMLを用意します。 <button>Click me</button> JavaScriptでボタンにクリックイベントを設定します。 const button = document.querySelector('button') button.addEventListener('click', () => console.log('button clicked !')) ボタンをクリックするとコンソールに「button clicked !」と出力されます。 jQueryのclick()メソッドは、このクリックイベントを設定する記述と同じことが可能です。 さらに、JavaScriptの記述よりも短く書くことができるというメリットもあります。   jQueryのclick()メソッドの使い方 jQueryのclick()メソッドでクリックイベントを設定するコードを書いてみましょう。 jQueryのclick()メソッドを使うには、クリックイベントを設定する要素を取得するところから書き始めます。 $('button') JavaScriptでも、まずはクリックイベントを設定する要素を取得していました。 const button = document.querySelector('button') 次に、取得した要素に対してクリックイベントを設定します。 $('button').click(() => console.log('button clicked !')) そのため、JavaScriptで記述したときと同様に、ボタンをクリックするとコンソールに「button clicked !」と出力されるでしょう。   [PR] フロントエンドで副業する学習方法を動画で公開中JavaScriptでクリックイベントを無効にする方法 JavaScriptでクリックイベントを無効にするには、removeEventListenerを使用します。 下記は、ボタンに設定したクリックイベントを無効するコードです。 const button = document.querySelector('button') const fnc = () => console.log('button clicked !') button.addEventListener('click', fnc) button.removeEventListener('click', fnc) ボタンをクリックしてもコンソールに「button clicked !」と出力されなくなります。 また、4行目をコメントアウトすれば、先程と同様にボタンをクリックするとコンソールに「button clicked !」と出力されます。   執筆してくれたメンター メンター久保田さん Webシステム開発が中心のシステムエンジニア。 HTML、CSS、JavaScript（React、Vue.js）、PHP、Javaが守備範囲。最初に選ぶポケモンは炎タイプ。   大石ゆかり JavaScriptでクリックイベントを無効にする方法は分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

ローカルのブラウザでJavaScriptが動かない時の主な原因を現役エンジニアが解説【初心者向け】

ローカルのブラウザでJavaScriptが動かない時の主な原因について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   目次Chromeを無効／停止にする理由ChromeでJavaScriptを無効にする方法ChromeでJavaScriptを有効に戻す方法筆者プロフィール   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ローカルのブラウザでJavaScriptが動かない時の主な原因について詳しく説明していくね！ 大石ゆかり お願いします！   ローカルのブラウザでJavaScriptが動かない時の主な原因（確認すべきこと） １．JavaScriptがブラウザで無効になっていないか Chromeなどのブラウザを利用する場合、初期状態でJavaScriptは有効に動作します。 もし、何かの理由で無効にする設定をしていたら、JavaScriptは動作しません。 ブラウザの設定画面から、JavaScriptを選択して有効にすると良いです。   ２．ブラウザのバージョンを確認する 基本的にブラウザのバージョンは、最新バージョンにしておけば良いです。 しかし、ブラウザのバージョンによっては、JavaScriptの特定関数が動作しないことがあります。 業務利用において特定のJavaScriptの関数を利用する必要がある場合、該当プログラムが動作するブラウザのバージョンを利用すると良いです。   ３．外部ライブラリのインストールを確認 JavaScriptは動作するが、JavaScriptで利用している外部ライブラリが正しく設定されていないと、該当プログラムが動作しません。 外部ライブラリをクラウド上から読み込むのではなく、自分のPCに用意する必要がある場合は、パスの設定を確認する必要があります。 パスとは、読み込み元のプログラムが、読み込み先のライブラリの位置を正しく理解するための住所のようなものです。 ライブラリの正しい住所を、読み込み元プログラムに設定すると良いです。   ４．JavaScriptのエラーを確認 Chromeのデベロッパーツールを使って、エラーメッセージを確認しましょう。   ５．コードに全角が入っていないか確認 プログラムのコードに全角スペースが入っている場合はうまく動作しません。 特に、HTMLに全角スペースが入っている場合は、エラーメッセージでも見つからないことが多いため、HTMLに関してはコード内検索処理をすると良いです。   特にInternetExplorerで動かない時の主な原因（確認すべきこと） 2022 年 6 月 16 日までが Microsoft 社の InternetExplorerのサポート期間です。 サポート期間が終了していても、いろいろな方法でInternetExplorerを利用する方はいらっしゃると思います。 InternetExplorerを利用してJavaScriptのアプリケーションを動作させたい場合は注意が必要です。 １．利用できない機能 InternetExplorerでは利用できない機能や関数は多いです。 InternetExplorerではclass構文やfind()メソッドやアロー関数など、利用できない機能がたくさんあります。 Chromeで開発確認していて、InternetExplorerだけ動かない場合などは、利用している機能がInternetExplorerに対応してるか確認しましょう。   [PR] フロントエンドで副業する学習方法を動画で公開中JavaScriptが動かない時の解決方法 ここでは、JavaScriptが動かない時の解決方法を解説します。 １．ブラウザの設定でJavaScriptを有効にする Chromeの場合は、次の手順で操作します。 右上の●が3つ表示されているアイコンをクリック 設定をクリック 上部検索フォームにJavaScriptと入力 サイトの設定部分に黄色いポップアップが表示されるのでクリック サイトがJavaScriptを使用できるようにするを選択すると、JavaScriptを利用できます。   ２．バージョンもブラウザの設定を確認 右上の●が3つ表示されているアイコンをクリック ヘルプをクリック Google Chromeについてをクリック 最新バージョンをインストールする必要があれば、その旨が表示されるのでインストールをクリックします。 最新バージョンであれば、その旨が表示されるので大丈夫です。   ３．jQueryのバージョンを確認する 利用しているjQueryのバージョンを、利用したいアプリケーションで指定されているものと統一する必要がある場合、jQueryのバージョンを確認します。 デベロッパーツールを開いて、コンソールに「$.fn.jquery」を入力すると、該当アプリケーションで利用しているjQueryのバージョンを確認できます。   ４．Chromeのデベロッパーツールは下記の方法で起動する Windowsの場合F12キー Macの場合はCommand＋Option＋Iキー console画面でエラーが確認できますので、エラー内容を調べて対応します。 ●変数や●関数が未定義の場合は、「● is not defined」という表示がデベロッパーツールで表示されます。 ●ファイルが存在しない場合は、「● is not found」という表示がデベロッパーツールで表示されます。 JavaScriptでconsole.logを使ったデバッグのやり方 を参考にしていただくと良いですよ。   ５．全角スペースを見つける方法 エディタでソースコードを開いて、Ctrl+Fを押すと検索フォームが表示されます。 検索フォームに1回だけ全角スペースを入力すると、全角スペースの位置がわかります。 次の画像はcloud9というエディタを利用しています。 13行目に水色部分が見えますが、これが全角スペースを意味しています。 全角スペースは半角スペースで修正すると良いです。   まとめ 今回はJavaScriptが動作しない場合の対応方法について解説しました。 最新のChromeを利用することが大事でした。 個別の環境やアプリケーションで動作しない場合は、デベロッパーツールのエラーなどを確認する必要がありました。   大石ゆかり 内容が分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   JavaScriptを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript ChromeでJavaScriptを無効／停止する方法を現役エンジニアが解説【初心者向け】