はじめてのJavaScript① 「"Hello World"のプログラム作成」 #初心者

1. はじめに

本記事では、JavaScriptの
「"Hello World!"のプログラム作成」
について記載する。

2. 作成手順

1.フォルダの作成

デスクトップ上にフォルダを作成する。
フォルダ名は任意だが、今回は「JavaScript」とする。

フォルダ

2.作成フォルダをテキストエディタへ反映

作成したフォルダをエディタへドラッグ＆ドロップ。
画像のように、作成したフォルダがエディタへ反映されている。

エディタへの反映

3.JSフォルダ、HTMLファイルの作成

1.JSフォルダの作成

作成の目的として、JavaScriptファイルを整理するため。

フォルダ作成

2.HTMLファイルの作成

次にHTMLファイルの作成を実施する。(作成方法は省略)
ファイル作成後、HTMLファイルの雛形を作成する。(shift+!)

HTML雛形作成

3.HTMLファイル内の記述

記述内容として、bodyタグの終了タグの1行上にscriptタグを記述し、そのタグ内に"Hello World!"を出力する。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      console.log('Hello world!');
    </script>
  </body>
</html>

console.logとは、JavaScriptを実行する際にコンソールへ出力するための命令文である。

Google Chrome デベロッパーツールにてConsoleをクリックすると、"Hello world!"と出力されていることがわかる。

4.JavaScriptの外部ファイル化

こちらの項で触れた件で、JSフォルダ内にJavaScriptファイルを作成し、HTMLファイルと紐付けるやり方を記載する。

1.JavaScriptファイルの作成

JSフォルダ内に「index.js」ファイルを作成。

index.jsの作成

2.avaScriptファイルをHTMLファイル内に紐付ける

こちらの項のように、bodyタグ内にscriptタグを記述し、scriptタグにsrc属性を付与し、JavaScriptファイルを紐付ける。

scriptタグの記述

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="js/index.js"></script>
  </body>
</html>

次に、JavaScriptファイル内にこちらの項で記述したように"Hello World!"を出力する命令文を記述する。

index.js

console.log('Hello World!');

HTMLで記述したように、JavaScriptで記述したのと同じ結果となる。

3. エラー解決法

JavaScriptのエラーを自力で解決する方法として、

・Google Chrome デベロッパーツールのConsoleを使ったエラーの確認・エラーメッセージの一覧

を記載する。

Google Chrome デベロッパーツールのConsoleを使ったエラーの確認

エラーが出ない場合は、以下のように"Hello World!"と出力される。

実際に出力命令文をタイプミスしてみる。

index.js

konsole.log('Hello World!');

すると、以下のようなエラー分が出力される。

赤枠で囲ったエラー分を訳すると、

Uncaught ReferenceError: →キャッチされていない参照エラー

konsole is not defined →konsoleは定義されていない

at index.js:1 →index.jsファイルの1行目

つまり、
index.jsファイルの1行目に記載されたkonsoleは定義されていないのでエラー出力されてる
ということである。
ちなみに、エラー文の末尾に(anonymous)@index.js:1をクリックすると、誤記と思われる行を参照することができる。

エラーが出力された際は、このようにデベロッパーツールを参照するようにしたい。

エラーメッセージの一覧

MDNのJavaScript エラーリファレンスにエラー一覧が記載されているので、自力で解決しない際は積極的に参照すること。

4. おわりに

次項:はじめてのJavaScript② 「演算」に続く。