まずは基本的な用語を覚えていきましょう。
「console.log」とは、JavaScriptの標準的な実装に組み込まれている機能の一つで、開発者のみが見える入出力画面(コンソール)に文字を出力(表示)するものです。
Webブラウザ(Google Chrome/Microsoft Edge/Internet Explorerなど)
)の場合、開発者ツール(デベロッパーツール)等と呼ばれる通常は使わない特殊な開発者向けの画面を呼び出すと、表示させることができます。実際にやってみましょう。
)の場合、開発者ツール(デベロッパーツール)等と呼ばれる通常は使わない特殊な開発者向けの画面を呼び出すと、表示させることができます。実際にやってみましょう。
①お好きなブラウザを開き、開発者ツールを開く
どんなページでも良いので開いた状態で「Ctrl+Shift+I」もしくは右クリックで開発者ツールを開きましょう(だいたい一番下に表示されています)
~chromeの場合~
一番下の検証をクリックしましょう
右半分などに開発者ツールが表示されます
~Edgeの場合~
一番下の開発者ツールで調査するをクリックしましょう
右半分などに開発者ツールが表示されます
②コンソールを開く
次にコンソールを開きます。ブラウザによって場所が違いますが、わからない場合は「(ブラウザ名) コンソール 開き方」ですぐ検索できます。
~chromeの場合~
consoleタブをクリックしましょう
コードを入力する行(>)が表示されたら準備完了です
~Edgeの場合~
コンソールタブが隠れているので、要素の→をクリックし、コンソールをクリックしましょう
下の方にコードを入力する行(>)が表示されました。
上に出ているコードのエラー表示は関係ないので無視して大丈夫です。
③コンソールにコードを書き実行してみよう
下記コードをそのままコピペして、エンターを押しましょう
console.log('こんにちは');
この状態でエンターを押す
そうすると下記のように「こんにちわ」と表示されます
※Webブラウザ上に表示されているわけではありません
このようにコンソールで表示すれば、ページの表示内容やその他のコードに影響が出ない為、プログラムが正しく動いているか確認する為によく使われます。この後のレッスンはコンソール上で実行し確認してみて下さい。