こんにちは、現役エンジニアの inno_tech です。
JavaScriptを対話モードで実行する方法をお探しでしょうか？
“とりあえず動作を確認したい”、そんなときにPythonのように対話モードで実行できれば便利ですよね。
本記事は、WindowsまたはLinuxユーザー向けの説明です。
Google Chromeの検証ツール
実はGoogle Chrome上で対話モードでJavaScriptを実行できます。
- Linux向け Google Chromeのインストール手順はこちらで紹介しているので参考にしてください。
Windowsの場合は、Google Chromeのダウンロードサイトからダウンロード・インストールします。
検証ツールを起動
まずはGoogle Chromeを起動します。
次に、ウェブページ上で 右クリック > 検証 を選択すると検証ツールが起動します。ちなみに検証ツールを起動するショートカットCtrl+Shift+jでも同様に起動します。
検証ツールが起動したら、「Consoleタブ」をクリックします。
Consoleタブを開くと、下の画像のように入力状態になります。このConsole画面上でJavaScriptを対話モードで実行します。
続いて、実際にJavaScriptを実行してみます。
Consoleの使い方
通常のJavaScriptのコーディングと同様です。例えば、console.log('test');と入力してみると、testと出力されます。
もちろん、変数宣言や複数行の実行も可能です。ただし、改行と実行の違いに注意してください。
なお、宣言した変数はブラウザのページを更新するまで記憶されています。(ページを更新するとクリアされます。)
電卓の代わりにも使えるね!
DOM操作も可能
もちろんJavaScriptなのでDOMの操作も可能です。
例えば、document.querySelector()を使って<head>タグの要素を取得してみます。「val_head」の変数に<head>タグの内容が格納されていることがわかります。
JavaScriptのお試しコーディングに使えるね!
まとめ
今回のまとめです。
- Google Chromeの検証ツールを使ってJavaScriptの対話実行が可能。
- 改行は
shift + Enter、実行はEnterで行う。 - 変数宣言やDOM操作も可能。
最後に、私がWeb開発の初心者時代に参考になったおすすめ書籍を紹介します。今ならkindle unlimitedの読み放題でみれます。
参考になったでしょうか。
ほかにも役立つ情報が他のページにもあるかもしれません。
ご覧になるかはあなた次第です!
この記事がイイねと思ったら、Twitterフォロー か にほんブログ村のどちらかしてくれたら嬉しいよ!
コメント / ご要望