JavaScript初心者がやりがちなミス3つ

プログラミング

プログラミングの勉強を初めて間もないと、様々なエラーに遭遇しているでしょう。

この記事では、僕も経験したJavaScript初心者がやりがちなミスを3つ紹介します。

初心者がやりがちなミス3つ

コードの記述順番を間違う

以下の記事で紹介しているコードをもとに紹介していきます。

以下は正しい順番で書かれたコードです。

<!DOCTYPE html>
<html lang="ja">

  <input type="date" id="today">

  <script type="text/javascript">
    var today = new Date();
    today.setDate(today.getDate());
    var yyyy = today.getFullYear();
    var mm = ("0" + (today.getMonth() + 1)).slice(-2);
    var dd = ("0" + today.getDate()).slice(-2);
    document.getElementById("today").value = yyyy + '-' + mm + '-' + dd;
  </script>
</html>

ブラウザには、フォームの日付に今日の日付がデフォルトで入力されています。

 

ところが、以下のようにJavaScriptのコードを先に持ってくると、フォームのデフォルトの日付が入力されなくなります。

<!DOCTYPE html>
<html lang="ja">

  <script type="text/javascript">
    var today = new Date();
    today.setDate(today.getDate());
    var yyyy = today.getFullYear();
    var mm = ("0" + (today.getMonth() + 1)).slice(-2);
    var dd = ("0" + today.getDate()).slice(-2);
    document.getElementById("today").value = yyyy + '-' + mm + '-' + dd;
  </script>

  <input type="date" id="today">

</html>

 

これは、HTMLでは上から順にコードが読まれていくのですが、JavaScriptで”today”というid(HTML上では後で登場する)を指定しているので、JavaScriptで指定したidのHTMLソースコードが見つからなかったためです。

このように、コードを記述する順番を間違えることで、正常に動かなくなります。

外部ファイルの読み込み順も同様

コード量が多くなってくると、CSSやJavaScriptのコードは、外部ファイルにまとめて、HTMLから呼び出すことがよくあります。

その際も同様で、JavaScriptのコードは</body>の直前で呼び出すのが一般的です。

ただし、CSSのファイルは<head>内で呼び出されるのが一般的なので、混同しないように注意しましょう。

 

【コード例】

HTMLファイル

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>JavaScript Beginner</title>
</head>

<body>

  <input type="date" id="today">

  <script type="text/javascript" src="script.js"></script>
</body>
</html>

script.jsの中身

var today = new Date();
today.setDate(today.getDate());
var yyyy = today.getFullYear();
var mm = ("0" + (today.getMonth() + 1)).slice(-2);
var dd = ("0" + today.getDate()).slice(-2);
document.getElementById("today").value = yyyy + '-' + mm + '-' + dd;

 

コードを変えたのにブラウザのキャッシュを削除してない

JavaScriptやHTML、CSSのコードを編集したときに、ブラウザのキャッシュが保存されたままだと、変更したコードの内容が反映されず「あれ?」と思うときがあります。

デフォルトでは、ブラウザにキャッシュが保存されるようになっています。

デベロッパーツールを使う

デベロッパーツールは、Windowsであれば【F12】を、Macであれば【Command+Option+I】で開きます。

デベロッパーツールの「Network」 -> 「Disable cache」にチェックを入れます(デフォルトでは外れています)。

こうすることで、ブラウザ(該当のタブ)を閉じない限りはキャッシュに保存されなくなります。

ショートカットキーを使う

Windowsであれば【[Shift]+[Ctrl]+[R]キー】を同時押し、Macであれば【[shift]+[command]+[R]キー】を同時押しでブラウザのキャッシュ削除ができます。

(厳密にはキャッシュの削除ではなく、キャッシュを使わずにWebサーバからファイルを再ダウンロードしてます)

 

=、==、===の使い方を間違える

これはJavaScriptに限らず、他のプログラミング言語でも同じような概念がありますが、それぞれの違いをざっくり言うと、

  • a=bは、aという変数にbという値を代入している。
  • a==b、a===bは、aとbが等しいことを表している。
  • a===bはデータの型まで同じであることを表している。a==bは単にaとbの値が同じであることを表している。

ということになります。特に最初のうちは「a=b」をaとbが等しいと勘違いしやすいですね。

 

「a==b」と「a===b」についてより詳しく解説すると、例えば、

var a = "1";
var b = 1;

console.log(a==b);
結果:true
console.log(a===b);
結果:false

となります。aは文字列、bは数値なので、「a===b」ではfalseが返ってきます。

 

最後に|失敗しながら学んでいこう

ここに紹介したもの以外にも、初心者が躓くポイントは山ほどあります。それでもめげずにコードを書くなり、勉強するなりしていけば、ゆくゆくはプログラミングというものがどうものなのか理解できるようになります。

たとえエンジニアでなくても、今後はプログラミングの知識を持っておくことは必須だと思いますので、効率よく勉強したい方はUdemyなどを利用するといいでしょう。

タイトルとURLをコピーしました