【独学JavaScript】書き方の基本

※この記事は「2021年1月26日」に更新しました。

独学できる JavaScript講座。

今回は、JavaScript(JS)書き方の基本を紹介します。

SE および Web制作経験者である、管理人(タカフミ)が解説していきます。

JavaScript(JS)書き方の基本

JavaScript(JS)書き方の基本を紹介します。

JavaScript は、HTMLファイルに直接書く方法と HTMLファイルと別ファイルで作成して、HTMLファイルに読み込ませる方法があります。

HTMLファイルに直接書く【書き方】

まず、以下の HTMLファイルを用意します。

<html>
  <head>
    <title>JavaScript サンプル</title>
  </head>
  <body>
    <script>
      alert('JavaScript のテスト');
    </script>
  </body>
</html>

テキストエディタ(メモ帳など)で作成します。

今回は、テストなので、わかりやすくするために文字コードの指定などは省いています。

ブラウザで実際に HTMLファイルを開いてみましょう。

実行結果は以下の通りです。

JavaScript サンプル

HTMLファイルに読み込ませる【書き方】

HTMLファイルに直接書き込まないで、HTMLファイルと JSファイルを分けて作成する方法を紹介します。

先程と同じものを今回の方法で再現します。

まずは、HTMLファイルです(test2.html)。

<html>
  <head>
    <title>JavaScript サンプル 2</title>
  </head>
  <body>
    <script src="test.js"></script>
  </body>
</html>

続いて、JSファイルを作成します(test.js)。

alert('JavaScript のテスト');

ブラウザで test2.html を開くと先程と同様の結果が得られます。



JavaScript のデバッグ

デバッグとは、プログラムの間違いを事前に発見して修正する作業のことです。

JavaScript の場合、実行エンジンはブラウザにあります。

デバッグツールもブラウザに搭載されていたりします。

今回は、Chrome の開発者ツールを使って、解説します。

コンソールログを使う

Chrome の開発者ツールを使います。

試しに以下の HTMLファイルを用意します(test3.html)

<html>
  <head>
    <title>JavaScript サンプル 3</title>
  </head>
  <body>
    <script>
      console.log('Hello World!');
    </script>
  </body>
</html>

ブラウザで test3.html を開いて、F12キーを押します。

開発者ツールが起動するので、Console というタブをクリックします。

以下のような画面が表示されます。

JavaScript デバッグ

コンソールと呼ばれる画面に表示されるだけなので、実際にはコンテンツとして表示されていません。

strict モード

use strict を宣言すると、strictモードで実行されます。

より的確なエラーチェックが行われ、コード内に存在する潜在的な問題を早期に発見することができます。

先頭に以下のコードを追加することで有効になります。

'use strict';

ただし、strict モードは、全てのブラウザで同じようにサポートされているとは限りません。

過信は禁物です。

最後に【JavaScript の書き方について】

いかがでしょうか。

今回は、JavaScript(JS)書き方の基本について、解説しました。

ブラウザで手軽に実行できるのが、JavaScript の魅力です。

慣れてきたら、HTMLファイルと JavaScript(JS)ファイルは、別々に作成することをおすすめします。