MENU

スポンサー

本記事では、Web開発で大活躍するChromeのデベロッパーツール(検証機能)の「コンソール」に「Hello World!」と表示させるプログラムを書いてみましょう。

今回の目標

  • Chromeのデベロッパーツールの表示方法を知る
  • コンソールに「Hello world!」の文章を表示させる

JavaScriptで何ができるのか?について知りたい方はこちらの前回記事をご参照ください。

Chromeのデベロッパーツールの起動方法

Windowsでの起動方法

  • F12キーを押す
  • Ctrl+Shift+I

Macでの起動方法

  • fn+F12キーを押す
  • Command+Shift+C
  • Command+Option+I

Windows・Mac共通の起動方法

  • 画面上で右クリックをし、「検証」を選択する

上記のいずれかの操作を行うと、下記の様なコードがたくさん書いてある画面が表示されます。
デベロッパーツールのデモ画面

Tips
デベロッパーツールを使うことで、Webページの検証が可能になります。下記にデベロッパーツールでできる一例を記載します。

  • Webページのコードを確認
  • htmlやcssのテスト編集
  • 様々な画面サイズでの表示検証

スポンサードサーチ

コンソールへプログラムを出力

それでは実際にプログラムを書いて、デベロッパーツールの「コンソール」画面にテキストを表示させてみましょう。

コンソールの表示方法

まずはChromeを起動して、デベロッパーツールをし開いてください。そして、左から2番目の「Console」タブを選択してください。
コンソールのデモ画面
選択すると、タブ下の空白部分にテキストを入力できる様になります。ここにJavaScriptのコードを入力してみましょう。

コンソールに「Hello World!」と表示させよう

下記のコードを入力し、Enterキーを入力してください。

console.log('Hello World!');

下記の様に表示されたら成功です。
コンソールに「Hello World!」と表示させる
1行だけのプログラムですが、これも立派なプログラムです。

コンソールで計算をしてみよう

次に、もう少しプログラムっぽいことをしてみましょう。下記のコードをコンソールに入力し、Enterキーを入力してください。

console.log(2+3);

コンソールで計算もできます
この様に、コンソール画面で計算ができます。「+」の部分を「-」、「*」、「/」などに変えることで、減算、乗算、除算なども可能です。

テキストをそのまま出力させたい場合はシングルクォート(')やダブルクォート(")でテキストを囲みます。計算式の場合は不要です。また、最後のセミコロン(;)を忘れない様に気をつけてください。

まとめ:console.logでコンソールにプログラムを出力できる!

今回は、デベロッパーツールの表示方法とコンソールで簡単なプログラムを動かす方法を解説しました。コンソールはデバッグに使用することもあるので、操作に慣れておきましょう。

// 書式console.log(出力したいテキストや計算式など);

今回は以上です。

B! Copy

この記事を書いた人:ヌル夫

福岡出身の元地方役場職員。ゼロからWebクリエイターを目指すみなさまを応援します!

スポンサー

WORK REQUEST

CONTACT