見出し画像

Javascriptチュートリアルの記事②

Inugitune

構成:
1.今回覚えるコード
2.例
3.次に実際にやってみよう！
4.よくあるエラー例
5.雑談とか諸々


挨拶+注意事項

挨拶

おはこんにこんばんざいます！（定期）
この記事に書いてたやつの②です！
記事を書くのはかなり下手、、、ですが、頑張ります！
ぜひ見ていってください！

注意事項

前回の記事を見て、
VScodeとchromeを使っている前提で話を進めます。

今回覚えるコード

今回学ぶ(覚える)ことは、Console.logです！
今回学ぶこれですが、、、この記事で言ってた
つまんないやつです()
でも、つまんない奴ほど重要なのでぜひ覚えてください！

console.logってなんだよ！(どっかで聞き覚えのあるセリフ)

console.logとは、、コンソールと呼ばれるところに、文字列や数字やらなんやらを表示するものです。
Javascriptの本とか見たことある方ならわかると思いますが、"Hello world"
って表示したりするあれです。

コンソールって何？

コンソールと呼ばれるところに・・・って言われても
「どこだよ！」ってなると思います。
コンソールはこの(図1)画面の状態で
CTRL + SHIFT + J を押すと出てくる図2みたいなやつです。
(mac だと option + command + J かな、、？ 違ったら、、すまん、、)

図1
図2

出てこない人は、以下の手順でやってください。
図3参照
①のchromeの右上にある三つ点が付いてるやつを押す。
②みたいな画面が出てくると思うので、下側にある
「その他のツール②」　から　「デぺロッパーツール➂」を押す。
➃みたいな画面が出てくると思うので～
⑤の>>を押す。
そして⑥のConsole(コンソール)を押す。
⑦みたいなのが出ればok!

図3

いま画面右か下かに出てると思う
何もない空間がコンソールです。
ここでは、Javascriptを仮で実行したり、今から教える
console.logの結果が見れます。

console.logの正しい飼い方。(ペットか？)

以前作ったhtmlファイルは、、、そのままでいいです。
今回編集するのは、
以前作ったjavascriptファイルです
多分、今javascriptファイルを開くと、、
何も書かれてないと思います↓

ここに、console.logを付け加えて、先ほど習ったコンソールに文字列を表示させましょう！
consoleの書き方はずばり！
console.log(表示したい内容);　です！

ここから先を読む前に意識してほしいこと。

ちょっと話がずれますが、Javascriptとかそうゆうのには、
ただ単に文字といっても種類が存在します。
例えば、数字の場合、これはintやfloatと呼ばれる種類で保存されます。
そして、文字の場合、それはstringと呼ばれる種類で保存されます。
これのどこが重要なの？と言われると、
「数字か文字か」などで、書き方が変わってくるのです。
数字の場合は、何も書かずに
1
のように書けばいいのですが、文字列の場合は少し工夫が必要で、
" (ダブルクォーテーション)　か ' (シングルクォーテーション)　か
` (バッククォート) などの
記号で文字を囲む必要があります。
(僕がよく使うのは " )

例

 

ではさっそく、コンソールにconsole.logを使って文字列や数字を表示していきましょう！
console.logの書き方は、さっきも説明したとうり、
console.log(表示したい内容);
です。
javascriptファイルに下記のようなコードを書いてください。
(下記のコードのコピペは推奨しません。(自分でタイピングしてこそ学習できると思います。))

console.log(1);

そしてhtmlファイルを開いてコンソールを確認してみてください！
すると、図π　のように 1 がコンソールに表示されると思います！

図π

・・・だからどうしたんだよ！俺がやりたいのはこうゆうんじゃねぇ！
って方、気持ちはわかるけどこれやんないと後々苦労すると思うので我慢してください、、

チャレンジ！(実際にやってみよう)

問題

次は、「Hello world」という文字列をコンソールに表示してみましょう！
さて、いきなりですが、
これは一回自分でやってみてください！！
下記にヒントを①～➂まで書いておきますので、
どうしてもわからない！って方はヒントを見ながらやってみてください。

ヒント(わからないときはどうぞ)

ヒント①
console.logの使い方は
console.log(書きたい内容);

ヒント②
数字と文字列では書き方が違う
「ここから先を読む前に意識してほしいこと」　参照

ヒント➂
文字列を使う際には、
"　や　'　や　`　でその文字列を
囲う必要がある。(僕がよく使うのは " )

答え + よくある間違い。

答え

答えは～！

console.log("Hello world");

です！
なんでや！俺もこんな感じのコード書いたのになんか意味わからんエラー的なのが表示されて表示されなかったぞ！どうなってんだこの記事の作者は！って方、よくよく細部を見てください。たぶんどこかが違います。
何で表示されないのか、理由は数パターンあるので、それぞれ見ていきましょう

よくある間違い

①そもそも白紙のままで何も表示されてない方。
htmlファイルとjavascriptファイルが適切に接続されていない可能性がびれぞんです。前回の記事を見てください。

②なんか赤い×と赤い背景で英語が出ている（エラーが出ている）方。
これが今回一番起こりやすいと思うのですが、
その原因として第一に考えられるのが、
"で文字列を囲み忘れている　です！
赤い背景にこんな感じ↓のことが書かれてたら絶対これです
Uncaught SyntaxError: missing ) after argument list (at

次に考えられるのは、
. を抜かしている　です！
consolelog("Hello world"); となっている方、
console と log の間には「 . 」が必要です。
赤い背景にこんな感じ↓のことが書かれてたら絶対これです
Uncaught ReferenceError: consolelog is not defined

最後に考えられるのは、
そもそもコードが違う！　です
よく見てみてください。
cが大文字になっていたり、
l が大文字になっていたり、
" が全角の ” になっていませんか？

これでも治らない方は、仕方ないのでコピペしてください。
それで無理なら、、、専門家(サイトとかchatgptとかお近くのエンジニア)にLet's go.

console.logでほかにできること

console.logでほかにできることと言ったら、、
今のところは四則演算ですかね？
書き方としては、

//足し算
console.log(1 + 1);
//引き算
console.log(1 - 1);
//掛け算
console.log(1 * 1);
//割り算
console.log(1 / 1);

って感じです。自分でいろいろ試してください！
すらっと使っている
//
はコメントアウトです。その行をコメントの行として認識してくれます。
htmlでいうところの<!--  --> です。

ちょっとした問題

ここでちょっとした問題を挟みます。
console.log(1 + "1");
これを実行した際に、11 と表示されます。
1と1を足しているのに、なぜ11となるのでしょうか？
次回の記事で答え合わせをするので、じっくり考えてみてください！

今日はここまで！(まとめ) + 雑談

今回はconsole.logと文字列/数字の違いについて学びました！
console.logの書き方は
console.log(表示したい内容);
で、効果としては、コンソールと呼ばれる空間に文字や数字を表示する
でした。
また、文字としてPCに認識させたい場合は " または ' または ` で囲むのが鉄則で、数字として認識させたい場合は、特にそうゆうのは必要ないということを学びました。

これがなんの役に立つんだよ！

それは、ずばり、
デバッグ作業です！
デバッグとは、コードを書いた際にうまく実行されない
つまり「バグ」ってる状態を正常の状態に戻す作業です。

ここから先は少し難しくなるので飛ばしてもらっても大丈夫です。

例えば、超膨大なjavascriptを書いたとします。そして、
そのどこかわからないところでエラーが発生したとします。
ここで、console.logを使って、コードの間に文字を表示させてあげると、
どこでエラーが発生してるのかすぐにわかるというわけです。

例えば、以下のようなコードを書いたとします。

let a = 0;
for (let i = 0; i < 10; i++) {
    a++;
}
document.body.innerHTML = (`<p>${a}</p>`);
a++;
document.body.innerHTML = (`<p>${a}</p>`);
Alert("wow");

const aaa = "serif";
document.body.innerHTML = (`<p>${aaa}</p>`);

んでどこでエラーが発生してるかわからない場合、
console.logをふんだんに使って以下のようなコードにしてあげると、

let a = 0;
console.log("Debug-1");
for (let i = 0; i < 10; i++) {
    console.log("Debug-2");
    a++;
    console.log("Debug-3");
}
console.log("Debug-4");
document.body.innerHTML = (`<p>${a}</p>`);
console.log("Debug-5");
console.log("Debug-6");
a++;
console.log("Debug-7");
document.body.innerHTML = (`<p>${a}</p>`);
console.log("Debug-8");
Alert("wow");
console.log("Debug-9");
console.log("Debug-10");
const aaa = "serif";
console.log("Debug-11");
console.log("Debug-12");
document.body.innerHTML = (`<p>${aaa}</p>`);
console.log("Debug-13");

コンソールに以下のような感じの物が表示されます。

Debug-1
Debug-2
Debug-3
Debug-2
Debug-3
Debug-2
Debug-3
Debug-2
Debug-3
Debug-2
Debug-3
Debug-2
Debug-3
Debug-2
Debug-3
Debug-2
Debug-3
Debug-2
Debug-3
Debug-2
Debug-3
Debug-4
Debug-5
Debug-6
Debug-7
Debug-8

これを見てみると、Debug-8までは表示されるのに、Debug-9は表示されていません！
つまり、これはDebug-8とDebug-9を表示させているコードの間にエラーがあるということになります！
実際にDebug-8とDebug-9を表示させているコードを見てみると、

console.log("Debug-8");
Alert("wow");
console.log("Debug-9");

こんな感じになっていて、エラーの場所が
Alert("wow");
ということが特定できました！
これはまたいつかやると思うんですが、今回のバグは、
alertのaが大文字のAになっていたというバグでした。

雑談

めっちゃ長い記事になってしまいましたが、
最後までお付き合いいただきありがとうございました！
これからもこんな感じで記事を書いていくので、
よろしくお願いいたします！
ではまたいつか会う時まで～！！

記事

次回 -> part-3 documentを使ってみよう！
前回 ->part-1 javascriptファイルとhtmlファイルを結び付けよう！


この記事が気に入ったらサポートをしてみませんか？