7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[JavaScript] 「Hello World」する方法

Last updated at Posted at 2020-07-30

概要

Progate で演習した際には、実行環境があらかじめ用意されていた。
本記事では、ローカルで JavaScript を実行するための環境を構築の仕方を記載する。

成果物

Google Chrome のコンソール画面に「Hello World」という文字列を表示する。
スクリーンショット 2020-07-30 22.41.57.png

前提知識

使用するソフト

Visual Studio Code : js のスクリプト記述のために利用
ターミナル : macOS High Sierra ver 10.13.6 に標準搭載されている実行環境
Google Chrome (Google Chrome 右クリック → [検証] で [Console] 画面を表示)

全体像

JavaScript は HTML から呼び出して実行する
スクリーンショット 2020-07-30 23.02.45.png

手順

作業ディレクトリ・ファイルの作成

ターミナルで、任意のフォルダー(ここでは「jssample」とする)を作成し、index.html を作成

ターミナル
mkdir jssample
cd jssample
touch index.html

HTMLの編集

Visual Studio Code で index.html を開く
htmlと入力すると html:5 が予測変換で出てくるので選択すると以下の記述が自動的に入力される

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<body>の中に<p>Hello World</p>を入力し、上書き保存

index.html
<body>
    <script type="text/javascript" src="main.js"></script>
    <p>Hello World</p>
</body>

記述したHTMLの確認

ブラウザでindex.htmlを表示するために、以下のコマンドをターミナルに入力する

ターミナル
open index.html

ブラウザで「Hello World」が表示される。

HTML に Javascript ファイルを読み込み、コンソール画面に表示する

流れは以下の通り

  1. ターミナルで main.jsを作成し、「console.log("Hello World");」と入力
  2. index.htmlmain.jsを呼び出す<script>タグを記述
  3. コンソール画面の確認
ターミナル
touch main.js

main.jsの作成

main.js
console.log("Hello world!!!");

コンソールに文字列を出力するコードを書く

ここで、コンソール画面を確認すると、何も表示されない。
JavaScript を実行するためには、HTML からmain.jsを呼び出すためのコードを追加する必要がある

以下のように<script>タグを追加する

index.html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="./main.js"></script>
    <title>Document</title>
</head>

<script> タグの使い方

index.html
<script type="text/javascript" src="./ファイル名.js"></script>

Google Chrome の Console 画面で表示されていることを確認
スクリーンショット 2020-07-30 22.41.57.png

参考ページ

HTML, Javascript の違いについて

7
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?