コンソールとはなんぞや【Java Script】

きなこ
きなこ

コンソールってなぁに?

用語

コンソール

入力、出力することで動作をテストすることができるもの

こばゆた
こばゆた

言葉で聞くとわかりづらいと思うので後ほど実例を出しながら説明していくね

スポンサーリンク

1.コンソールを呼び出す

こばゆた
こばゆた

前回テキストエディターで作成したJava Scriptファイルの中にコンソールを書く事もできますが、説明が簡単にできるデベロッパーツールの方で説明します

またブラウザは”chrome”であることを前提で進めさせていただきます


では早速コンソールを開いてみましょう。

以前HTML編でもやりましたが以下の図の様にやるとデベロッパーツールが開きます。

右クリック検証でもおkです。

デベロッパーツールが開いたら”console”をクリックします。

入力する欄が出てきます。これがコンソールです。

>の後ろからコードを書いていきます。

こばゆた
こばゆた

またはお持ちのテキストエディターに書いてコピペする方法もOKです。

むしろそちらのほうが修正できるので良いと思います

スポンサーリンク

2.console.log( );

こばゆた
こばゆた

次は使い方をみていきます

コンソールに以下のコードを書くことでコンソールに様々な命令をする事ができます。

console.log();
こばゆた
こばゆた

最後のセミコロンも忘れずに書きましょう!

2-1.文字列

( )内には‘ ‘(シングルクォーテーション)または” “(ダブルクォーテーション)で単語や文章を囲って入れます。

console.log('文字列');

文字列の出力の仕方
  • STEP1
    console.log( );を記述する
  • STEP2
    ( )内に文字列を入力する
    ‘ ‘で囲うのを忘れない様にします
  • STEP3
    結果を出力する

    enterを押すと( )内に書いた文が出力結果として出てきます。また下の”undefined”は今は気にしなくても大丈夫です。

    出力結果こんにちは!!

2-2.計算

次は計算をしてみます。

例として5 + 2をしてみましょう。

console.log(5 + 2);

文字列は(‘ ‘)で囲みますが、計算の場合は囲みません。


計算の仕方
  • STEP1
    console.log( );を記述する
  • STEP2
    計算式を入力する
  • STEP3
    計算結果が出力される

    enterを押すと計算結果がでます。

    出力結果7

こばゆた
こばゆた

もちろん足し算だけでなく引き算や掛け算もできます

こばゆた
こばゆた

%を使うと割り切れない場合の余りの値を出してくれます

記号やれること答え
+足し算5 + 27
引き算5 – 23
*掛け算5 * 210
/割り算5 / 22.5
%余りを出す5 % 21
**べき乗5 ** 225
こばゆた
こばゆた

**を2つ書いて計算するとべき乗になります

べき乗とは5のようなやつです

2-3.文字列をつなげる

文字列を”+”で繋いで出力することもできます。

console.log('文字列' + '文字列');

文字列のつなげ方
  • STEP1
    console.log( );を記述する
  • STEP2
    文字列を+でつなぐ
  • STEP3
    結果が出力される

    enterを押すと文字列が繋がって出力結果として出てきます。

    出力結果私は人間です

こばゆた
こばゆた

それぞれの文字列に’ ‘または” “を忘れない様にしましょう

2-4.注意点

console.log('5 + 2');

数式を’ ‘や” “で囲むと文字列と認識されるので注意が必要です


注意点の例
  • STEP1
    console.log( );を記述する
  • STEP2
    計算式を' 'で囲んでみる
  • STEP3
    結果が出力される
    enterを押すと5 + 2がそのまま出力されました

    出力結果5 + 2

こばゆた
こばゆた

文字列として認識されています。

また文字列を囲い忘れるとエラーメッセージがでます。

こばゆた
こばゆた

エラーメッセージと言っても重大なバグとかではなく、ただ正しく動かないだけなので出てしまった場合はゆっくりチェックしてみましょう

3.まとめ

コンソールまとめ
  • コンソールとは入力、出力することで動作をテストすることができるもの
  • コンソールを呼び出すにはデベロッパーツールを開いて出た画面の”Console”をクリックする
  • コンソール画面で”console.log( );”としてやると文字列を出力したり計算させることもできる
  • ( )内が文字列であれば” “(ダブルクォーテーション)か’ ‘(クォーテーション)で単語や文章を囲い、数字なら囲わない
  • %を使うと割り切れない場合の余りの値を出せる
記号長所
+足し算
引き算
*掛け算
/割り算
%余りを出す

コメント