ChromeのコンソールでJavaScriptを実行する


ccc

東京都内でサラリーマンをしているAI・育児ブロガー、CCCです。 AI(人工知能)と子育てに関する記事を執筆しています。 WebシステムをベースとしたAIを活用することで生活をより便利にする方法を紹介し、育児について衣食住における役立つグッズや情報を配信しています。


ChromeのコンソールでJavaScriptを実行する方法を教えてください。


ccc

JavaScript はクライアント側で実行されるオブジェクト指向型のスクリプト言語です。主にブラウザ上で実行され、ユーザのアクションに応じて動的にWebページの内容を書き換えたり、フォームに入力された内容をチェックしたりといったことがクライアント側で実現できます。また、Ajaxという仕組みを利用することで、Webサーバーとブラウザとの間で非同期通信を行えるので、ページを切り替えることなくページの内容を書き換えることができます。Web系AIとJavaScriptの親和性はピカイチで、AIをWebブラウザから使うためのライブラリが公開されています。


ccc

今回はJavaScriptの使い方として、ChromeのコンソールでJavaScriptを実行する方法をサンプルを用いて解説します。

コンソールを表示する

ブラウザに搭載されているコンソール画面でJavaScriptのコードを実行することができます。

ショートカットキー「option+command+I」でコンソールを表示します。

コンソールでJavaScriptを実行する

次のJavaScriptをコンソールで実行します。console.log()はコンソールにログを出力するメソッドです。

let temp=1+2+3;
console.log(temp);

出力結果は 6 になりました。

HTMLページのJavaScriptコードからコンソールへ値を出力

HTMLページに記述されたJavaScriptコードからコンソールへ値を出力することもできます。

次のサンプルを実行してください。

<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<script>
console.log("Hello World from JavaScript");
</script>

</body>
</html>

コンソールに次のように出力されます。

Hello World from JavaScript