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

~目次~

  1. JavaScriptでやろうとしたこと
  2. ミスその1:JavaScriptの記述場所
  3. ミスその2:JavaScriptの実行順番
  4. ミスその3:ブラウザのディベロッパーツールのキャッシュ

JavaScriptでやろうとしたこと

これが今僕が作っているツールなんですけど、ここに日付を入力しました。
日付をJavaScriptで自動で今日の日付になるように設定してます。

コードはこんな感じですね。

{% extends 'base.html' %}

{# base.html の contents の中に入れるコンテンツ #}
{% block contents %}

<div class="container">
	<h1>Togglのデータをエクスポートするツールです。</h1>
	<form action = "/download" method = "post">
		メールアドレス<span class = "badge badge-danger">必須</span>  : <input name = "email" type = "email"  placeholder = "example@gmail.com" required/><br>
		パスワード<span class = "badge badge-danger">必須</span>    : <input name = "password" type = "password" placeholder="xxxxxxxx" required/><br>
		日付<span class = "badge badge-danger">必須</span>      :<input name = "date" type = "date" id = "date" required/><br>
		<button type = "submit" class = "btn btn-primary" id = "download">ダウンロード</button>
	</form>
</div>

<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("date").value = yyyy + '-' + mm + '-' + dd;
</script>

{% endblock %}

※Pythonのbottleというフレームワークを使って、さらにjinja2というライブラリで他のHTMLテンプレートファイルを継承しています。

ここにそのフォームのコードがあって、その下に JavaScript のコードを書いています。

ミスその1:JavaScriptの記述場所

まずは、JavaScriptの記述場所について説明します。
今のコードは正しいコードなのですが、JavaScriptのコードとHTMLのフォーム部分のコードを逆にして保存するとこんな感じですね。

そうすると、日付が入らなくなりました。こんな感じでJavaScriptのコードが無効になるということなんですね。
これエラーコード見ると「Cannot set property ‘value’ of null」というって言うものが表示されています。
これがどういうことかって言うと、そのJavaScriptのコードで指定した”date”っていうものが見つかりませんでしたと。
このgetElementByIdという関数で指定してるんですけど、dateっていうようなidが見つかりませんでしたと。でもフォーム部分に”date”ってありますよね。
なんでこういうことが起きるのかって言うと、JavaScriptは先にHTMLのソースコードを読み込んだ後にスクリプトが動かないとこのgetElementByIdという関数が動かないんですね。

(参考ページ)
[jQuery] [HTML] えっ!? <script>にも読み込み順序とかあんの?

って言うので僕は結構苦労しました。でもねコードを戻してあげると日付が入るようになるんですよ。
これは基本的な事らしいんですけど JavaScriptをあまり知らない人が触ると、同じようなエラーに遭遇する方もいると思います。

ミスその2:JavaScriptの実行順番

二つ目行きます。
二つ目がですね、外部のJavaScriptのファイルを作って、JavaScriptのコードを読み込む場合ですね。これもさっきと同じような感じなんですけど、以下に示しているように外部のJavaScriptファイルを読み込むのを有効にしました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Required meta tags -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 
    <!-- JavaScript File -->
    <script type="text/javascript" src="./static/main.js" charset="utf-8"></script>

    <title> {{ title }} </title>
</head>
<body>

    {% block contents %}
    {% endblock %}

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    
</body>
</html>
window.onload = function (){
	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("date").value = yyyy + '-' + mm + '-' + dd;
}

で、外部のJavaScriptファイルの1行目と8行目のところをコメントアウトします。

// window.onload = function (){
	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("date").value = yyyy + '-' + mm + '-' + dd;
// }

そうすると、日付のところに値が入らなくなりました。

エラーコード見るとね、さっきと同じ「Cannot set property ‘value’ of null」というエラーコードが出てます。
これが何でかって言うとそのこれもさっきと同じで、先にHTMLを読み込んだ後にJavaScriptが動かないといけないんですけど、読み込む順番が正しくないということでエラーが出てます。

で、そのJavaScriptが動くのを後にするために、先程コメントアウトしたところのコードを記述しています。「window.onload」というものですね。

(参考ページ)
ページ読み込み時のJavaScriptの実行タイミング

このコードによって、読み込む順番を最後にしてます。
更新するとこんな感じね、ちゃんとね日付が自動で入るようになるんですよ。

はいこれが二つ目のミスですね。

ミスその3:ブラウザのディベロッパーツールのキャッシュ

最後三つ目。
僕は、Google Chromeのデベロッパーツールを使ってるんですけど。
ちょっと分かりにくいかもしれませんが、「Disable cache」って言うねところのチェックを今入れてます。ディベロッパーツールの「Network」のところを開けばあるはずです。

このチェックを外します(デフォルトでは外れています)。
この状態で、HTMLやJavaScriptのソースコードを変えても、ソースコードの変更が反映されない場合があるんですね。このために少し時間を無駄にしました。

(参考ページ)
変更したjsのファイルがchromeだと更新されない

はい、ということで以上三つですね。
僕が JavaScript やっていて詰まったところ三つ。
JavaScriptを始めたばっかの方だと結構熱ある方多いような気がするので、何かの参考になれば幸いです。ありがとうございました。

コメント

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