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とは方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 Jav...
JavaScript

JavaScriptのarray型データに利用するlengthメソッドについて現役エンジニアが解説【初心者向け

JavaScriptのarray型データに利用するlengthメソッドについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向...
JavaScript

JavaScriptでビンゴゲームを作る方法を現役エンジニアが解説【初心者向け】

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

JavaScriptの$(document).readyの使い方を現役エンジニアが解説【初心者向け】

JavaScriptの$(document).readyの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解...
JavaScript

JavaScriptでjoinメソッドを使う方法【初心者向け】

JavaScriptのjoinメソッドの使い方について解説しています。 簡単なサンプルコードも載せているので、実際に書きながら書き方を理解してみてください...
JavaScript

JavaScriptのspliceメソッドについて現役エンジニアが解説【初心者向け】

JavaScriptのspliceメソッドについて、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で真偽値と三項演算子を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 また、入門向けのJavaScriptを学習できるサイトを紹介しているので、合わせてご覧ください。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。 目次Chromeを無効／停止にする理由ChromeでJavaScriptを無効にする方法ChromeでJavaScriptを有効に戻す方法筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   真偽値とは 真偽値とは、その命題が真か偽かを示す2つの値で、それぞれtrue、falseと書きます。 主に条件分岐で使われます。   大石ゆかり trueやfalseって何でしょうか？ 田島悠介 値なんだよね。極端に書くとif(true)で、if文のブロックが実行されるんだ。 大石ゆかり 文字列のようにも見えますよね？ 田島悠介 そうそう。文字列だとシングルクォーテーションなどで囲わないとだめだけど、trueやfalseは値なので、数値のようにそのまま書けるんだよね。   三項演算子とは 三項演算子とは演算子のひとつで、その名の通り3つの項目を使う唯一の演算子です。 その性質から、if文の簡単な書き換えといえるでしょう。     [PR] コーディングで副業する方法とはif文・三項演算子それぞれの構文 if文の構文 if文による条件分岐では、基本的に3行以上の長い式を書かなければなりませんよね。 条件式が真(true)のときは式1を、偽(false)のときは式2が実行されます。 if (条件式) {   // 式1 } else {   // 式2 }   しかし、三項演算子を使うと、次のように同じ内容を1行で簡潔に記述することができるのです。   三項演算子の構文 条件式 ? 式1 : 式2 ;     三項演算子で値を返す 三項演算子を使うと、条件によって値を返すだけの簡単な式を作成できます。 サンプルコード 変数scoreの値が70以上なら「合格」、70未満なら「不合格」と出力するプログラムです。 var score = 75; var kekka = score >= 70 ? "合格" : "不合格"; document.write(kekka); 実行結果 まず、条件式「score >= 70」で条件判定します。 そしてsocoreが70以上なら?の次にある値「合格」の文字列が返されます。 条件に当てはまらなければ:以降の「不合格」の文字列が返されます。 三項演算子から返された「合格」あるいは「不合格」の文字が変数kekkaに代入されます。 演算子がいっぱいあるので複雑に見えますが、三項演算子をひとつの塊としてみるとわかりやすいでしょう。 var kekka = (score >= 70 ? "合格" : "不合格"); 本来、三項演算子全体を括弧でくくる必要はありませんが、以下のコードのように頭の中のイメージで三項演算子をひとつのまとまりとして判別できるようにしましょう。   実際にプログラムを書いてみよう それでは、実際にプログラミングを書きながら実行してみましょう。   if文で書く まずはif文からです。 サンプルコード 変数moneyに代入される値が5000以上なら「お金持ち」、5000以下なら「貧乏」とブラウザに出力されるようなプログラムを書きます。 <!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> var money = 10000; if (money > 5000) { document.write ("お金持ち"); } else { document.write
JavaScript

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

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