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

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を実行する際にコンソールへ出力するための命令文である。 ![スクリーンショット 2021-09-23 14.56.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/97c253c3-b391-7004-2ae1-bb28e0dd310c.png) Google Chrome デベロッパーツールにてConsoleをクリックすると、"Hello world!"と出力されていることがわかる。

#### 4.JavaScriptの外部ファイル化 [こちらの項](https://qiita.com/drafts/a7f9c817c929d9b59188/edit#1js%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%81%AE%E4%BD%9C%E6%88%90)で触れた件で、JSフォルダ内にJavaScriptファイルを作成し、HTMLファイルと紐付けるやり方を記載する。 ##### 1.JavaScriptファイルの作成 JSフォルダ内に「index.js」ファイルを作成。

index.jsの作成

##### 2.avaScriptファイルをHTMLファイル内に紐付ける [こちらの項](https://qiita.com/drafts/a7f9c817c929d9b59188/edit#3html%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%86%85%E3%81%AE%E8%A8%98%E8%BF%B0)のように、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ファイル内に[こちらの項](https://qiita.com/drafts/a7f9c817c929d9b59188/edit#3html%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%86%85%E3%81%AE%E8%A8%98%E8%BF%B0)で記述したように"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 エラーリファレンス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors)にエラー一覧が記載されているので、自力で解決しない際は積極的に参照すること。 ## 4. おわりに次項:[はじめてのJavaScript② 「演算」](https://qiita.com/Stack_up_Rising/items/18b113995fd0ece210c3)に続く。