JavaScript - コードを書いてブラウザで動かすまでの手順

JavaScript プログラミングの流れを知ろう

プログラミングは初めてですか?ウェブページに動きをつける JavaScript を書いてみたいですか?

今回は、HTML と JavaScript を書いてブラウザで動かすまでの手順を紹介します。慣れないうちは複雑に感じるかもしれませんが、一つひとつの作業は難しいものではありません。JavaScript を動かすためのプログラミングの流れを、一緒に学んでいきましょう。

JavaScriptが初めての方は、『JavaScript プログラミングを始めよう』の記事からご覧ください。

JavaScript プログラミングを始めよう
JavaScript(ジャバスクリプト)は、私たちが日常的に利用しているウェブサイトやウェブアプリなどで使われているプログラミング言語です。プログラミング初心者の方へ向けて、JavaScript について簡単に紹介します。

プログラミングの手順 - VS Code を使う場合

ここでは、HTML や JavaScript を書くためのテキストエディタとして、Visual Studio Code(以下 VS Code)を使って説明していきます。

テキストエディタなどのツールは、『プログラミングをする環境を整えよう』の記事を参考にして、事前に準備しておいてくださいね。

JavaScript - プログラミングをする環境を整えよう
JavaScript を学んでいくために必要なツールを紹介します。インターネットに接続されたパソコンを用意して、プログラミングをするための環境を整えていきましょう。

VS Code でのプログラミング手順は、次のとおりです。

  1. フォルダを作成する:パソコン内にフォルダを作り、VS Code で開きます。
  2. HTML ファイルを作成する:フォルダ内に HTML ファイルを作り、HTML を書きます。
  3. JavaScript ファイルを作成する:フォルダ内に JavaScript ファイルを作り、JavaScript を書きます。
  4. ブラウザで実行する:HTML をブラウザに読み込み、プログラムを実行します。

では、ひとつずつ順番に詳しく見ていきましょう。

1. フォルダを作成する

HTML ファイルや JavaScript ファイルなどをひとつの場所にまとめるために必要になるのが、フォルダです。フォルダ単位でひとつのプログラムとして扱います。

  • パソコンの任意の場所に、任意の名前でフォルダを作ります。
  • VS Code を起動して、そのフォルダを開きましょう。
Visual Studio Code のフォルダを開くボタン

ここでは例として、sample という名前でフォルダを作りました。VS Code では、フォルダ名は大文字で表示されます。

開いたフォルダがエクスプローラーに表示される

このフォルダの中に、HTML ファイルと JavaScript ファイルを作っていきますよ。ファイルを作るときは、新しいファイルを作成するボタンをクリックします。

新しいファイルを作成するボタン

2. HTML ファイルを作成する

新しいファイルを作成するボタンをクリックしたら、ファイル名を入力します。

  • HTML ファイルの名前は、index.html とします。
  • 入力が終わったら、エンターキー enter を押して確定します。
index.html を作成する

index.html に HTML を書いていきましょう。

  • 半角の感嘆符 ! を入力した後にタブキー tab を押すと、基本の HTML が自動的に入ります。
基本のHTML
  • 私たちは日本語を使っているので、<html lang="en"><html lang="ja"> に変更してください。
  • <body> 要素の中に、例として<p> 要素と <script> 要素を書きます。
<!DOCTYPE html>
<html lang="ja">  <!-- "en" を "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>
  
    <!-- <p>要素と<script>要素を書く。-->
    <p>この文字列をクリックしてください</p>
    <script src="script.js"></script>
  
  </body>
</html>

HTMLコード

入力が終わったら保存しましょう。便利なショートカットキーを使うと良いですよ。macOS の場合は command (⌘) + S 、Windows の場合は Ctrl + S で保存することができます。

3. JavaScript ファイルを作成する

新しいファイルを作成するボタンをクリックして、JavaScript ファイルを作ります。ファイルの名前は script.js と入力し、エンターキー enter を押して確定します。

script.js を作成する

script.js にJavaScript コードを書きます。ここで例として書いているのは、「文字列がクリックされたとき、その文字列の内容を変更する」という動きです。

//文字列がクリックされたとき、その文字列の内容を変更する

let str = document.querySelector('p');
str.addEventListener('click',changeText);

function changeText() {
  str.innerHTML = 'クリックしましたね!';
}

JavaScript コード

画面の左上に表示される青い数字は、保存されていないファイルがあることを示しています。command (⌘) + S(macOS)または Ctrl + S(Windows)で、保存するのを忘れないようにしましょう。

コードを変更したら保存をする

コーディングは以上です。

4. ブラウザで実行する

HTML ファイルと JavaScript ファイルができたら、ブラウザでプログラムを実行しましょう。

  • index.html を右クリックします。
  • macOS の場合は「Finder」、Windows の場合は「エクスプローラー」で表示します。
「Finder で表示します」を選択する(macOS の場合)

macOS の場合は Finder、Windows の場合はエクスプローラーが表示されます。フォルダ sample の中に、HTML ファイルと JavaScript ファイルが入っているのが分かりますね。

表示された Finder 画面(macOS の場合)

ブラウザで読み込むのは、HTML ファイルです。

  • index.html を右クリックします。
  • ブラウザを選んで開きます。
    ・ macOS の場合:このアプリケーションで開く >
    ・ Windows の場合:プログラムから開く >
index.html を開くアプリを選択する(macOS の場合)

ブラウザが起動して HTML の内容が表示され、JavaScript が動くのを確認することができますよ。

  • 「文字列がクリックされたとき、その文字列の内容を変更する」という動き。
ブラウザ上の表示

以上が、VS Code を使ったプログラミングの一連の流れです。

さて、ここまで説明してきたブラウザでの実行方法では、ファイル内容を変更した場合、手動でブラウザを更新(再読み込み)する必要があります。VS Code には、この一手間を省くことができる拡張機能があります。それが Live Server です。

Live Server でブラウザを自動更新

VS Code の拡張機能のひとつであるLive Server を使うと、ファイル内容が自動的にブラウザに反映されます。手動でブラウザを更新する必要がなく、リアルタイムで確認できるのでとても便利です。簡単にインストールできるので、使ってみてはいかがでしょうか。

VS Code の拡張機能 Live Server

オンライン上での JavaScript コーディング

最後に、より気軽に JavaScript を体験できる、オンライン上のエディタを使った場合を紹介します。フォルダやファイルの作成はせずに JavaScript を書いてみたい方は、オンライン上のツールを使ってみてください。私たち Pyxofy は、CodePen を使っています。

CodePen では、HTML で記述するのは <body> 内のウェブページに表示したい要素のみです。コードを書くと、すぐに実行結果を見ることができます。

CodePenのエディタ画面

まとめ

今回は、HTML と JavaScript を書いてブラウザで動かすまでの手順を紹介しました。

プログラミングを始めたばかりの方にとっては、ファイルの作成や実行手順などが難しく感じられたかもしれません。もし分からなくなったときは、またこのページに戻ってきてくださいね。

最後まで読んでいただき、ありがとうございます。記事に関するコメントはこちらにお寄せください。Twitter @pyxofyLinkedInMastodonFacebook

この記事をシェアしてくれると嬉しいです!

関連記事

JavaScript - コードを書くときの基本的なルール【初心者向け】
JavaScript コードの基本的な書き方や、守らなければいけない記述ルールについて紹介します。プログラミング初心者の方は、こちらの記事を読んでから JavaScript でのコーディングを初めましょう。
Setting up tools for CSS Art
In this article, we will set up an offline text editor and local development environment. Then we’ll show you how to set up an account to use an online IDE.
Scratch Programming ebook for Beginners - 入門
スクラッチ初心者の方へ向けた内容を ebook にまとめました。スクラッチの基本から簡単なスクリプト(プログラム)の作り方まで、全108ページ。ぜひダウンロードしてご活用ください。